new changes for B3 WALDER project to make changes for discovery porta… (#1551)

urvi-occ · mfshao · web-flow · commit 2af582bdcde6 · 2024-11-11T16:22:11.000-06:00
* new changes for B3 WALDER project to make changes for discovery portal in PRC

* spacing changes for code

* changes suggested by mingfei

* changes made after mingfei's comments and meeting

* eslint on openfillrequestformbutton

* added missing variables in discovey config

* added null condition and ran eslint

* added check for null to pass npm test

* added check for null to pass npm test

* refactor: simplify button logic by removing redundant check

* refactor: remove redundant  check from disabled condition

* changes for failing test

* new variable fillRequestFormCheckField added

* changes for if condition

* if condition fixes

* new property added to allow checkboxes if not logged in

* revert change

* removed extra space

* changed text for tooltip

* fixes for props variable

* Update src/Discovery/DiscoveryActionBar/components/OpenFillRequestFormButton.tsx

Co-authored-by: Mingfei Shao &lt;2475897+mfshao@users.noreply.github.com&gt;

* changes for tooltip if multiple flags are on

* Update src/Discovery/DiscoveryListView.tsx

Co-authored-by: Mingfei Shao &lt;2475897+mfshao@users.noreply.github.com&gt;

---------

Co-authored-by: Mingfei Shao &lt;2475897+mfshao@users.noreply.github.com&gt;
diff --git a/docs/portal_config.md b/docs/portal_config.md
@@ -465,6 +465,12 @@ Below is an example, with inline comments describing what each JSON block config
           "enable": true,
           "enableDownloadManifest": true, // enables a button which allows user to download a manifest file for gen3 client
           "downloadManifestButtonText": "Download Manifest", // text to be displayed on the download manifest button
+          "enableFillRequestForm" : true, // enables a button which opens a new form to request access to a resoruce
+          "fillRequestFormDisplayText": "Request Information", // text to be displayed on fill the request form
+          "fillRequestFormCheckField" : "_medical_sample_id", // field defiend in MDS which is related to checkbox, this fiels is use to validate if the entry in discovery portal have unique¸
+          "fillRequestFormURL" : "https://URL/form", // URL to the new form which would be used to fill the form
+          "externalWebsiteName" : "", // Name of external website needed, this variable at development is used for showing an external website in a popover for chicagoland pandemic response commons, in commons this will be loaded only if enableFillRequestForm is true
+          "externalWebsiteURL" : "", // URL of external website needed, this variable is used with externalWebsiteName be loaded only if enableFillRequestForm is true
           "manifestFieldName": "__manifest", // the field in the Discovery page data that contains the list of GUIDs that link to each study's data files.
           "enableDownloadZip": true,  // enables a button which allows user to download all the files as a zip file (with pre-set size limits)
           "downloadZipButtonText": "Download Zip", // text to be displayed on the download zip file button
diff --git a/src/Discovery/DiscoveryActionBar/DiscoveryActionBar.tsx b/src/Discovery/DiscoveryActionBar/DiscoveryActionBar.tsx
@@ -14,6 +14,7 @@ import { BATCH_EXPORT_JOB_PREFIX, JOB_POLLING_INTERVAL } from './DiscoveryAction
 import DownloadZipButton from './components/DownloadZipButton';
 import ExportToWorkspaceButton from './components/ExportToWorkspaceButton';
 import DownloadManifestButton from './components/DownloadManifestButton';
+import OpenFillRequestFormButton from './components/OpenFillRequestFormButton';
 
 /* eslint react/prop-types: 0 */
 interface Props {
@@ -193,6 +194,9 @@ const DiscoveryActionBar = (props: Props) => {
             history={history}
             location={location}
           />
+          <OpenFillRequestFormButton
+            props={props}
+          />
         </Space>
       </div>
     </React.Fragment>
diff --git a/src/Discovery/DiscoveryActionBar/components/OpenFillRequestFormButton.tsx b/src/Discovery/DiscoveryActionBar/components/OpenFillRequestFormButton.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { FileTextOutlined } from '@ant-design/icons';
+import { Popover, Button } from 'antd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const OpenFillRequestFormButton = (props) => {
+  const { config, discovery } = props.props;
+
+  // Check if Fill Request Form button should be disabled based on configuration
+  const isFillRequestFormDisabled = !config?.features?.exportToWorkspace?.enableFillRequestForm
+    || !config.features.exportToWorkspace.fillRequestFormURL?.trim()
+    || !config.features.exportToWorkspace.externalWebsiteURL?.trim()
+    || !config.features.exportToWorkspace.externalWebsiteName?.trim();
+
+  if (isFillRequestFormDisabled) {
+    return null; // Return early if any required config values are missing
+  }
+
+  // Define URLs and text for use in the popover and button
+  const {
+    fillRequestFormURL, externalWebsiteURL, externalWebsiteName, fillRequestFormDisplayText,
+  } = config.features.exportToWorkspace;
+  const { selectedResources } = discovery;
+
+  return (
+    <Popover
+      className='discovery-popover'
+      arrowPointAtCenter
+      title={(
+        <React.Fragment>
+          &nbsp;
+          <a target='_blank' rel='noreferrer' href={externalWebsiteURL}>
+            {externalWebsiteName}
+          </a>
+          <FontAwesomeIcon icon={'external-link-alt'} />
+        </React.Fragment>
+      )}
+      content={(
+        <span className='discovery-popover__text'>
+          After filling the request form, once your search selection is approved, you can use the Gen3 Client
+          to download the data from the selected studies to your local computer.
+        </span>
+      )}
+    >
+      <Button
+        onClick={() => {
+          const combinedIds = selectedResources.map((item) => item[config.features.exportToWorkspace.fillRequestFormCheckField]).join(',');
+          const url = `${fillRequestFormURL}?query=${encodeURIComponent(combinedIds)}`;
+          window.open(url, '_blank');
+        }}
+        type='default'
+        className={`discovery-action-bar-button${(selectedResources.length === 0) ? '--disabled' : ''}`}
+        disabled={selectedResources.length === 0}
+        icon={<FileTextOutlined />}
+      >
+        {`Click Here to ${fillRequestFormDisplayText || 'Request Information'}`}
+      </Button>
+
+    </Popover>
+  );
+};
+
+export default OpenFillRequestFormButton;
diff --git a/src/Discovery/DiscoveryConfig.d.ts b/src/Discovery/DiscoveryConfig.d.ts
@@ -15,6 +15,12 @@ export interface DiscoveryConfig {
             enableDownloadStudyMetadata?: boolean
             variableMetadataFieldName?: string
             enableDownloadVariableMetadata?: boolean
+            enableFillRequestForm?: boolean
+            fillRequestFormCheckField?: string
+            fillRequestFormDisplayText?: string
+            fillRequestFormURL?: string
+            externalWebsiteName?: string
+            externalWebsiteURL?: string
         },
         // explorationIntegration: {
         //     enabled: boolean // not supported
diff --git a/src/Discovery/DiscoveryListView.tsx b/src/Discovery/DiscoveryListView.tsx
@@ -18,7 +18,7 @@ interface Props {
   setModalVisible: (boolean) => void;
   setModalData: (boolean) => void;
   selectedResources: any[];
-  selectedTags: any [];
+  selectedTags: any[];
   onResourcesSelected: (selectedResources: DiscoveryResource[]) => any;
   onTagsSelected: (selectedTags: any) => any;
 }
@@ -47,15 +47,28 @@ const DiscoveryListView: React.FunctionComponent<Props> = (props: Props) => {
       columns={props.columns}
       rowKey={props.config.minimalFieldMapping.uid}
       rowSelection={(
-        props.config.features.exportToWorkspace
-              && props.config.features.exportToWorkspace.enabled
+        (props.config.features.exportToWorkspace
+          && props.config.features.exportToWorkspace.enabled) || (props.config.features.exportToWorkspace?.enableFillRequestForm
+            && props.config.features.exportToWorkspace.enableFillRequestForm === true)
       ) && {
         selectedRowKeys: props.selectedResources.map(
           (r) => r[props.config.minimalFieldMapping.uid],
         ),
         renderCell: (_checked, _record, _index, node) => (
           <Tooltip
-            title={`Click to select item for ${(props.config.features.exportToWorkspace.enableDownloadManifest || props.config.features.exportToWorkspace.enableDownloadZip) ? 'download or ' : ''}open in workspace`}
+            title={`Click to select item for ${
+              [
+                props.config.features.exportToWorkspace.enableFillRequestForm
+                  ? props.config.features.exportToWorkspace.fillRequestFormDisplayText?.toLowerCase()
+                  : '',
+                (props.config.features.exportToWorkspace.enableDownloadManifest || props.config.features.exportToWorkspace.enableDownloadZip)
+                  ? 'download'
+                  : '',
+                'open in workspace'
+              ]
+                .filter(Boolean)
+                .join(' or ')
+              }`}
             overlayStyle={{ maxWidth: '150px' }}
           >
             {node}
@@ -71,7 +84,19 @@ const DiscoveryListView: React.FunctionComponent<Props> = (props: Props) => {
           if (props.config.features.authorization.enabled) {
             disabled = (record[props.accessibleFieldName] !== AccessLevel.ACCESSIBLE) && (record[props.accessibleFieldName] !== AccessLevel.MIXED);
           }
-          // disable checkbox if there's no manifest or external file metadata (if metadata handoff is enabled) found for this study
+
+          if (props.config.features.exportToWorkspace?.enableFillRequestForm) {
+            disabled = false;
+            const fillRequestFormCheckField = props.config.features.exportToWorkspace?.fillRequestFormCheckField;
+            const fieldValue = fillRequestFormCheckField ? record[fillRequestFormCheckField] : null;
+
+            // Disable checkbox if the specified field is empty or missing in the record
+            if (!fieldValue || fieldValue.length === 0) {
+              disabled = true;
+            }
+          }
+
+          // disable checkbox if there's no manifest or git external file metadata (if metadata handoff is enabled) found for this study
           const exportToWorkspaceConfig = props.config.features.exportToWorkspace;
           const { manifestFieldName, enableExportFullMetadata } = exportToWorkspaceConfig;
           if (!record[manifestFieldName] || record[manifestFieldName].length === 0) {
@@ -135,7 +160,7 @@ const DiscoveryListView: React.FunctionComponent<Props> = (props: Props) => {
               }
               return (
                 <React.Fragment key={value}>
-                  { start > 0 && '...' }
+                  {start > 0 && '...'}
                   {value.slice(start, matchIndex)}
                   <span className='matched'>{value.slice(matchIndex,
                     matchIndex + props.searchTerm.length)}
@@ -174,7 +199,7 @@ const DiscoveryListView: React.FunctionComponent<Props> = (props: Props) => {
                   {studyPreviewTextArray.map((item: string | undefined) => renderValue(item))}
                 </div>
               </div>
-              { config.features.tagsInDescription?.enabled
+              {config.features.tagsInDescription?.enabled
                 ? (
                   <div className='discovery-table__row-horizontal-content'>
                     {(record[config.minimalFieldMapping.tagsListFieldName] || []).map(({ name, category }) => {
