task/WP-65-DropdownViewFullPath-v15

TACC · Oct 25, 2023 · 0f002c1 · 0f002c1
1 parent c41e082
commit 0f002c1
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/client/src/components/DataFiles/DataFilesModals/DataFilesSelectModal.jsx b/client/src/components/DataFiles/DataFilesModals/DataFilesSelectModal.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -23,8 +23,6 @@ const DataFilesSelectModal = ({ isOpen, toggle, onSelect }) => {
     shallowEqual
   );
 
-  const [apiValue, setApiValue] = useState(null);
-
   const selectRef = React.useRef();
   const onOpened = () => {
     const systemParams = {
@@ -33,7 +31,7 @@ const DataFilesSelectModal = ({ isOpen, toggle, onSelect }) => {
       system: systems.filter((s) => !s.hidden)[0].system,
       path: systems.filter((s) => !s.hidden)[0]?.homeDir || '',
     };
-    setApiValue(systemParams.api);
+
     dispatch({
       type: 'FETCH_FILES_MODAL',
       payload: { ...systemParams, section: 'modal' },
@@ -100,7 +98,7 @@ const DataFilesSelectModal = ({ isOpen, toggle, onSelect }) => {
                 />
               )}
             </div>
-            <DataFilesShowPathModal api={apiValue} />
+            <DataFilesShowPathModal />
             <div className="filesListing">
               {showProjects ? (
                 <DataFilesProjectsList modal="select" />

diff --git a/client/src/components/DataFiles/DataFilesModals/DataFilesShowPathModal.jsx b/client/src/components/DataFiles/DataFilesModals/DataFilesShowPathModal.jsx
@@ -4,13 +4,32 @@ import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { TextCopyField } from '_common';
 import styles from './DataFilesShowPathModal.module.scss';
 
-const DataFilesShowPathModal = React.memo(({ api }) => {
+const DataFilesShowPathModal = React.memo(() => {
   const dispatch = useDispatch();
   const params = useSelector(
     (state) => state.files.params.FilesListing,
     shallowEqual
   );
 
+  const modalParams = useSelector(
+    (state) => state.files.params.modal,
+    shallowEqual
+  );
+
+  const modalApi = useSelector(
+    (state) => state.files.params.modal.api,
+    shallowEqual
+  );
+
+  useEffect(() => {
+    if (modalApi === 'tapis' && modalParams.system) {
+      dispatch({
+        type: 'FETCH_SYSTEM_DEFINITION',
+        payload: modalParams.system,
+      });
+    }
+  }, [modalParams, dispatch]);
+
   useEffect(() => {
     if (params.api === 'tapis' && params.system) {
       dispatch({
@@ -62,7 +81,7 @@ const DataFilesShowPathModal = React.memo(({ api }) => {
           View Full Path
         </ModalHeader>
         <ModalBody>
-          {(params.api === 'tapis' || api === 'tapis') && definition && (
+          {(params.api === 'tapis' || modalApi === 'tapis') && definition && (
             <>
               <span className={styles['storage-host']}>Storage Host</span>
               <span className={styles['storage-values']}>
@@ -71,7 +90,10 @@ const DataFilesShowPathModal = React.memo(({ api }) => {
               <span className={styles['storage-path']}>Storage Path</span>
               <TextCopyField
                 className={styles['custom-textcopyfield']}
-                value={`${definition.rootDir}/${file.path}`.replace('//', '/')}
+                value={`${definition.rootDir}/${file.path}`.replace(
+                  /\/{2,3}/g,
+                  '/'
+                )}
                 displayField="textarea"
               />
             </>
@@ -81,7 +103,7 @@ const DataFilesShowPathModal = React.memo(({ api }) => {
               <span className={styles['storage-location']}>
                 Storage Location
               </span>
-              <span className={styles['storage-google']}>Google Drive</span>
+              <span className={styles['storage-values']}>Google Drive</span>
             </>
           )}
         </ModalBody>

diff --git a/client/src/components/DataFiles/DataFilesModals/DataFilesShowPathModal.module.scss b/client/src/components/DataFiles/DataFilesModals/DataFilesShowPathModal.module.scss
@@ -19,7 +19,6 @@
   margin-bottom: 0;
 }
 
-.storage-values,
-.storage-google {
+.storage-values {
   margin-left: 15px;
 }
diff --git a/client/src/components/DataFiles/DataFilesSystemSelector/DataFilesSystemSelector.jsx b/client/src/components/DataFiles/DataFilesSystemSelector/DataFilesSystemSelector.jsx
@@ -48,6 +48,10 @@ const DataFilesSystemSelector = ({
           section,
         },
       });
+      dispatch({
+        type: 'FETCH_SYSTEM_DEFINITION',
+        payload: system.system,
+      });
       dispatch({
         type: 'DATA_FILES_SET_MODAL_PROPS',
         payload: {