feat: Update download functionality on search and browse pages

CHANGELOG.rst

@@ -153,6 +153,15 @@ Change Log
 * udated enum value from '[0]' to '0' for target_tissue_percentage as submitr was converting former to an array
 
 
+1.9.0
+=====
+
+`PR 549: feat: Update download functionality on search and browse pages <https://github.com/smaht-dac/smaht-portal/pull/549>`_
+
+* Update `/session-properties` to include download permission information
+* Implement file selection permission checks
+
+
 1.8.7
 =====
 

deploy/post_deploy_testing/cypress/e2e/03a_browse_by_file.cy.js

@@ -45,9 +45,11 @@ const ROLE_MATRIX = {
         runFacetIncludeGrouping: true,
         runFacetExcludeGrouping: true,
         runFacetChartBarPlotTests: true,
+        runBrowseFileSelectionTests: true,
 
         expectedStatsSummaryOpts: EMPTY_STATS_SUMMARY_OPTS,
         expectedNoResultsModalVisible: true,
+        expectedLimitedDownloadAccess: true,
     },
 
     [ROLE_TYPES.SMAHT_DBGAP]: {
@@ -62,9 +64,11 @@ const ROLE_MATRIX = {
         runFacetIncludeGrouping: true,
         runFacetExcludeGrouping: true,
         runFacetChartBarPlotTests: true,
+        runBrowseFileSelectionTests: true,
 
         expectedStatsSummaryOpts: DEFAULT_STATS_SUMMARY_OPTS,
         expectedNoResultsModalVisible: false,
+        expectedLimitedDownloadAccess: false,
     },
 
     [ROLE_TYPES.SMAHT_NON_DBGAP]: {
@@ -79,9 +83,11 @@ const ROLE_MATRIX = {
         runFacetIncludeGrouping: true,
         runFacetExcludeGrouping: true,
         runFacetChartBarPlotTests: true,
+        runBrowseFileSelectionTests: true,
 
         expectedStatsSummaryOpts: DEFAULT_STATS_SUMMARY_OPTS,
         expectedNoResultsModalVisible: false,
+        expectedLimitedDownloadAccess: true,
     },
 
     [ROLE_TYPES.PUBLIC_DBGAP]: {
@@ -96,9 +102,11 @@ const ROLE_MATRIX = {
         runFacetIncludeGrouping: true,
         runFacetExcludeGrouping: true,
         runFacetChartBarPlotTests: true,
+        runBrowseFileSelectionTests: true,
 
         expectedStatsSummaryOpts: EMPTY_STATS_SUMMARY_OPTS,
         expectedNoResultsModalVisible: true,
+        expectedLimitedDownloadAccess: true,
     },
 
     [ROLE_TYPES.PUBLIC_NON_DBGAP]: {
@@ -113,9 +121,11 @@ const ROLE_MATRIX = {
         runFacetIncludeGrouping: true,
         runFacetExcludeGrouping: true,
         runFacetChartBarPlotTests: true,
+        runBrowseFileSelectionTests: true,
 
         expectedStatsSummaryOpts: EMPTY_STATS_SUMMARY_OPTS,
         expectedNoResultsModalVisible: true,
+        expectedLimitedDownloadAccess: true,
     },
 };
 
@@ -475,6 +485,75 @@ function stepFacetChartBarPlotTests(caps) {
     }
 };
 
+/** Browse file selection tests */
+function stepBrowseFileSelectionTests(caps) {
+    if (caps.expectedStatsSummaryOpts.totalFiles === 0 && caps.expectedNoResultsModalVisible) {
+        return;
+    }
+
+    // For users who have limited download access
+    // 1. SelectAllFilesButton and the SelectAll Checkbox are enabled
+    cy.get('.search-view-controls-and-results #select-all-files-button').should('be.enabled');
+    cy.get('.search-results-outer-container .search-headers-row #select-all-checkbox[type="checkbox"]').should('be.enabled');
+
+    // 2. SelectAllFilesButton says "Select Open Access Files"
+    if (!caps.expectedLimitedDownloadAccess) {
+        cy.get('.search-view-controls-and-results #select-all-files-button')
+          .then(($selectAllBtn) => {
+            if ($selectAllBtn.hasClass('btn-secondary')) {
+                cy.wrap($selectAllBtn).should('have.text', 'Deselect All  Files');
+            } else {
+                cy.wrap($selectAllBtn)
+                  .should('have.text', 'Select All  Files');
+            }
+          })
+    } else {
+        cy.get('.search-view-controls-and-results #select-all-files-button')
+          .should('have.text', 'Select Open Access Files')
+          .then(($selectAllBtn) => {
+            // 3. Hovering over the SelectAllFilesButton should show a popover
+            cy.wrap($selectAllBtn).trigger('mouseover');
+            cy.get('#select-all-files-popover').should('be.visible');
+            cy.wrap($selectAllBtn).trigger('mouseout');
+            cy.get('#select-all-files-popover').should('not.exist');
+          })
+    }
+
+    // 4. Clicking the SelectAllFilesButton should enable the Download # Selected Files button
+    cy.get('.search-view-controls-and-results #select-all-files-button').click();
+    cy.get('.search-view-controls-and-results #select-all-files-button').should('have.class', 'btn-secondary');
+    cy.get('.search-view-controls-and-results .right-buttons #download_tsv_multiselect').should('not.be.disabled');
+
+    cy.get('.search-view-controls-and-results .right-buttons #download_tsv_multiselect')
+      .then(($downloadBtn) => {
+        // 4a. The Download button should have the same number of files as the Access Facet (Open)
+        const selectedFileTotal = Number($downloadBtn.text().match(/\d+/)[0]);
+
+        // If limited download access, ensure only open files are selected
+        if (caps.expectedLimitedDownloadAccess) {
+            // Get the number of Open Access files through the access_status facet
+            cy.get('.search-view-controls-and-results .facets-body .facet[data-field="access_status"]')
+              .then(($accessStatusFacet) => {
+                if ($accessStatusFacet.hasClass('closed')) {
+                    cy.wrap($accessStatusFacet).click();
+                }
+
+                cy.get('.search-view-controls-and-results .facets-body .facet[data-field="access_status"] .facet-list-element[data-key="Open"] a.term .facet-count')
+                  .then(($openAccessTerm) => {
+                    const openAccessTermText = Number($openAccessTerm.text().trim());
+                    expect(openAccessTermText).to.equal(selectedFileTotal);
+                  });
+              });
+        } else {
+            cy.get('.search-view-controls-and-results .facets-column #results-count')
+              .then(($resultsCount) => {
+                const resultsCountText = Number($resultsCount.text().trim());
+                expect(resultsCountText).to.equal(selectedFileTotal);
+              });
+        }
+      })
+}
+
 /* ----------------------------- PARAMETERIZED SUITE ----------------------------- */
 
 const ROLES_TO_TEST = [
@@ -535,9 +614,14 @@ describe('Browse by role — File', () => {
                 stepFacetExcludeGrouping(caps);
             });
 
-            it(`Facet chart bar plot tests → X-axis grouping and hover over & click "Illumina NovaSeq X Plus, Brain" bar part + popover button --> matching filtered /browse/ results (enabled: ${caps.runFacetChartBarPlotTests})`, () => {
-                if (!caps.runFacetChartBarPlotTests) return;
-                stepFacetChartBarPlotTests(caps);
+            // it(`Facet chart bar plot tests → X-axis grouping and hover over & click "Illumina NovaSeq X Plus, Brain" bar part + popover button --> matching filtered /browse/ results (enabled: ${caps.runFacetChartBarPlotTests})`, () => {
+            //     if (!caps.runFacetChartBarPlotTests) return;
+            //     stepFacetChartBarPlotTests(caps);
+            // });
+
+            it(`Browse file selection tests → Select files and verify counts (enabled: ${caps.runBrowseFileSelectionTests})`, () => {
+                if (!caps.runBrowseFileSelectionTests) return;
+                stepBrowseFileSelectionTests(caps);
             });
         });
     });

src/encoded/authentication.py

@@ -63,9 +63,41 @@ def session_properties(context, request):
             }
         else:
             raise LoginDenied(domain=request.domain)
-            
+
     namespace, userid = principal.split('.', 1)
     properties = get_basic_properties_for_user(request, userid)
+    details = properties.get('details', {})
+    if 'admin' in details.get('groups', []):
+        download_perms = {  # admins get everything
+            'open': True,
+            'open-early': True,
+            'open-network': True,
+            'protected': True,
+            'protected-early': True,
+            'protected-network': True,
+            'released': True
+        }
+    else:  # add perms as we can deduce from user props
+        download_perms = {
+            'open': True,
+            'open-early': False,
+            'open-network': False,
+            'protected': False,
+            'protected-early': False,
+            'protected-network': False,
+            'released': False
+        }
+    if 'submission_centers' in details:
+        download_perms['open-early'] = True
+        download_perms['open-network'] = True
+    if 'dbgap' in details.get('groups', []):
+        download_perms['protected'] = True
+        download_perms['protected-early'] = True
+        download_perms['protected-network'] = True
+    if 'public-dbgap' in details.get('groups', []):
+        download_perms['protected'] = True
+    properties['download_perms'] = download_perms
+    print(properties)
     return properties
 
 

src/encoded/static/components/browse/BrowseView.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import memoize from 'memoize-one';
 import _ from 'underscore';
 import { Modal, OverlayTrigger, Popover } from 'react-bootstrap';
@@ -207,6 +207,7 @@ const BrowseFileBody = (props) => {
             <BrowseViewControllerWithSelections {...props}>
                 <BrowseFileSearchTable
                     userDownloadAccess={userDownloadAccess}
+                    isAccessResolved={isAccessResolved}
                 />
             </BrowseViewControllerWithSelections>
             {context?.total === 0 && (
@@ -300,6 +301,26 @@ export class BrowseViewBody extends React.PureComponent {
     }
 }
 
+/**
+ * @param {*} statusFacetTerms Terms for the status facet
+ * @param {*} userDownloadAccessObj Object containing download access for each status
+ * @returns number of downloadable files in the table for the current user
+ */
+export const getDownloadableFileCount = (
+    statusFacetTermCounts,
+    userDownloadAccessObj
+) => {
+    // Map through the terms to get count for downloadable files
+    const totalDownloadableFileCount = statusFacetTermCounts?.reduce(
+        (acc, term) => {
+            const userCanDownload = userDownloadAccessObj?.[term.key];
+            return acc + (userCanDownload ? term.doc_count : 0);
+        },
+        0
+    );
+    return totalDownloadableFileCount;
+};
+
 export const BrowseFileSearchTable = (props) => {
     const {
         session,
@@ -310,15 +331,25 @@ export const BrowseFileSearchTable = (props) => {
         onSelectItem,
         onResetSelectedItems,
         userDownloadAccess,
+        isAccessResolved,
     } = props;
     const facets = transformedFacets(context, currentAction, schemas);
     const tableColumnClassName = 'results-column col';
     const facetColumnClassName = 'facets-column col-auto';
 
+    const downloadableFileCount = getDownloadableFileCount(
+        context?.facets?.find((facet) => facet.field === 'status')?.terms || [],
+        userDownloadAccess
+    );
+
     const selectedFileProps = {
         selectedItems, // From SelectedItemsController
         onSelectItem, // From SelectedItemsController
         onResetSelectedItems, // From SelectedItemsController
+        session,
+        context,
+        userDownloadAccess,
+        downloadableFileCount,
     };
 
     const passProps = _.omit(props, 'isFullscreen', 'toggleFullScreen');
@@ -327,11 +358,14 @@ export const BrowseFileSearchTable = (props) => {
     const aboveTableComponent = (
         <BrowseViewAboveSearchTableControls
             topLeftChildren={
-                <SelectAllFilesButton {...selectedFileProps} {...{ context }} />
+                <SelectAllFilesButton
+                    {...selectedFileProps}
+                    {...{ session, context }}
+                />
             }>
             <div className="d-flex gap-2">
                 <DonorMetadataDownloadButton session={session} />
-                {userDownloadAccess?.['protected'] ? (
+                {userDownloadAccess?.['open'] && downloadableFileCount > 0 ? (
                     <SelectedItemsDownloadButton
                         id="download_tsv_multiselect"
                         disabled={selectedItems.size === 0}
@@ -505,13 +539,43 @@ const TypeColumnTitlePopover = function (props) {
     );
 };
 
+const CustomColTitle = ({
+    session, // pass down session information
+    selectedItems,
+    onSelectItem,
+    onResetSelectedItems,
+    context,
+    userDownloadAccess,
+    downloadableFileCount,
+}) => {
+    // Context now passed in from HeadersRowColumn (for file count)
+    return (
+        <SelectAllFilesButton
+            {...{
+                session, // pass down session information
+                selectedItems,
+                onSelectItem,
+                onResetSelectedItems,
+                context,
+                userDownloadAccess,
+                downloadableFileCount,
+            }}
+            type="checkbox"
+        />
+    );
+};
+
 /**
  *  A column extension map specifically for browse view file tables.
  */
 export function createBrowseFileColumnExtensionMap({
     selectedItems,
     onSelectItem,
     onResetSelectedItems,
+    session,
+    context,
+    userDownloadAccess,
+    downloadableFileCount,
 }) {
     const columnExtensionMap = {
         ...originalColExtMap, // Pull in defaults for all tables
@@ -522,21 +586,35 @@ export function createBrowseFileColumnExtensionMap({
         // Select all button
         '@type': {
             colTitle: (
-                // Context now passed in from HeadersRowColumn (for file count)
-                <SelectAllFilesButton
-                    {...{ selectedItems, onSelectItem, onResetSelectedItems }}
-                    type="checkbox"
+                <CustomColTitle
+                    selectedItems={selectedItems}
+                    onSelectItem={onSelectItem}
+                    onResetSelectedItems={onResetSelectedItems}
+                    session={session}
+                    context={context}
+                    userDownloadAccess={userDownloadAccess}
+                    downloadableFileCount={downloadableFileCount}
                 />
             ),
             hideTooltip: true,
             noSort: true,
             widthMap: { lg: 60, md: 60, sm: 60 },
             render: (result, parentProps) => {
-                return (
+                const userHasDownloadAccess =
+                    parentProps?.userDownloadAccess?.[result?.status];
+
+                return userHasDownloadAccess ? (
                     <SelectionItemCheckbox
                         {...{ selectedItems, onSelectItem, result }}
                         isMultiSelect={true}
                     />
+                ) : (
+                    <input
+                        type="checkbox"
+                        data-tip="You do not have access to download this item"
+                        disabled="disabled"
+                        className="me-2"
+                    />
                 );
             },
         },