task/WP-65-DropdownViewFullPath

client/src/components/DataFiles/CombinedBreadcrumbs/CombinedBreadcrumbs.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DataFilesBreadcrumbs from '../DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx';
+import BreadcrumbsDropdown from '../DataFilesDropdown/DataFilesDropdown.jsx';
+import styles from './CombinedBreadcrumbs.module.scss';
+
+const CombinedBreadcrumbs = (props) => {
+  return (
+    <div className={styles['combined-breadcrumbs']}>
+      <BreadcrumbsDropdown {...props} />
+      <DataFilesBreadcrumbs {...props} />
+    </div>
+  );
+};
+
+CombinedBreadcrumbs.propTypes = {
+  api: PropTypes.string.isRequired,
+  scheme: PropTypes.string.isRequired,
+  system: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  section: PropTypes.string.isRequired,
+  isPublic: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+CombinedBreadcrumbs.defaultProps = {
+  isPublic: false,
+  className: '',
+};
+
+export default CombinedBreadcrumbs;

client/src/components/DataFiles/CombinedBreadcrumbs/CombinedBreadcrumbs.module.scss

@@ -0,0 +1,5 @@
+.combined-breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}

client/src/components/DataFiles/DataFiles.jsx

@@ -15,7 +15,7 @@ import { useFileListing, useSystems } from 'hooks/datafiles';
 import DataFilesToolbar from './DataFilesToolbar/DataFilesToolbar';
 import DataFilesListing from './DataFilesListing/DataFilesListing';
 import DataFilesSidebar from './DataFilesSidebar/DataFilesSidebar';
-import DataFilesBreadcrumbs from './DataFilesBreadcrumbs/DataFilesBreadcrumbs';
+import CombinedBreadcrumbs from './CombinedBreadcrumbs/CombinedBreadcrumbs';
 import DataFilesModals from './DataFilesModals/DataFilesModals';
 import DataFilesProjectsList from './DataFilesProjectsList/DataFilesProjectsList';
 import DataFilesProjectFileListing from './DataFilesProjectFileListing/DataFilesProjectFileListing';
@@ -138,7 +138,7 @@ const DataFiles = () => {
         listingParams.system === noPHISystem ? 'UNPROTECTED' : 'DATA'
       }
       header={
-        <DataFilesBreadcrumbs
+        <CombinedBreadcrumbs
           api={listingParams.api}
           scheme={listingParams.scheme}
           system={listingParams.system}

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.jsx

@@ -1,14 +1,19 @@
 import React from 'react';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Button } from '_common';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 import './DataFilesBreadcrumbs.scss';
+import '../DataFilesModals/DataFilesShowPathModal.jsx';
 import {
   useSystemDisplayName,
   useFileListing,
   useModal,
   useSystems,
 } from 'hooks/datafiles';
+import truncateMiddle from 'utils/truncateMiddle';
 
 const BreadcrumbLink = ({
   api,
@@ -35,7 +40,7 @@ const BreadcrumbLink = ({
     case 'FilesListing':
       return (
         <Link
-          className="breadcrumb-link"
+          className="breadcrumb-link truncate"
           to={`${basePath}/${api}/${scheme}/${system}${path}/`}
         >
           {children}
@@ -46,7 +51,7 @@ const BreadcrumbLink = ({
       return (
         <span>
           <a
-            className="breadcrumb-link"
+            className="breadcrumb-link truncate"
             href={`/workbench/data/${api}/${scheme}/${system}${path}/`}
             onClick={onClick}
           >
@@ -120,6 +125,22 @@ const DataFilesBreadcrumbs = ({
   const paths = [];
   const pathComps = [];
 
+  const dispatch = useDispatch();
+
+  const fileData = {
+    system: system,
+    path: path,
+  };
+
+  const openFullPathModal = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    dispatch({
+      type: 'DATA_FILES_TOGGLE_MODAL',
+      payload: { operation: 'showpath', props: { file: fileData } },
+    });
+  };
+
   const { fetchSelectedSystem } = useSystems();
 
   const selectedSystem = fetchSelectedSystem({ scheme, system, path });
@@ -155,52 +176,29 @@ const DataFilesBreadcrumbs = ({
       }
     }, '');
 
+  const fullPath = paths.slice(-1);
+  const currentDirectory = pathComps.slice(-1);
+
   return (
-    <div className={`breadcrumbs ${className}`}>
-      {scheme === 'projects' && (
-        <>
-          <RootProjectsLink
-            api={api}
-            section={section}
-            operation={operation}
-            label="Shared Workspaces"
-          />{' '}
-          {system && `/ `}
-        </>
+    <div className="breadcrumb-container">
+      <div className={`breadcrumbs ${className}`}>
+        {currentDirectory.length === 0 ? (
+          <span className="system-name">
+            {truncateMiddle(systemName || 'Shared Workspaces', 30)}
+          </span>
+        ) : (
+          currentDirectory.map((pathComp, i) => {
+            if (i === fullPath.length - 1) {
+              return <span key={uuidv4()}>{truncateMiddle(pathComp, 30)}</span>;
+            }
+          })
+        )}
+      </div>
+      {systemName && api === 'tapis' && (
+        <Button type="link" onClick={openFullPathModal}>
+          View Full Path
+        </Button>
       )}
-      <BreadcrumbLink
-        api={api}
-        scheme={scheme}
-        system={system}
-        path={startingPath}
-        section={section}
-        isPublic={isPublic}
-      >
-        <>{systemName}</>
-      </BreadcrumbLink>
-      {pathComps.map((pathComp, i) => {
-        if (i < paths.length - 2) {
-          return ' /... ';
-        }
-        if (i === paths.length - 1) {
-          return <span key={uuidv4()}> / {pathComp}</span>;
-        }
-        return (
-          <React.Fragment key={uuidv4()}>
-            {' '}
-            /{' '}
-            <BreadcrumbLink
-              api={api}
-              scheme={scheme}
-              system={system}
-              path={paths[i]}
-              section={section}
-            >
-              <>{pathComp}</>
-            </BreadcrumbLink>
-          </React.Fragment>
-        );
-      })}
     </div>
   );
 };

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss

@@ -1,9 +1,12 @@
 @import '../../../styles/tools/mixins.scss';
+@import '../../../styles/components/dropdown-menu.css';
 
 .breadcrumbs {
   /* ... */
   @include truncate-with-ellipsis;
   margin-right: 2em;
+  display: flex;
+  align-items: center;
 }
 .breadcrumb-link,
 .breadcrumb-link:hover {
@@ -34,3 +37,74 @@
     max-width: 700px;
   }
 }
+
+#path-button-wrapper {
+  padding-left: var(--horizontal-buffer);
+}
+
+/* Nested to prevent styles from affecting CMS header dropdown */
+/* HACK: Using ID to increase specificity (until source of problem is fixed) */
+/* HELP: Why does DataFilesSidebar not need such specificity? */
+/* .go-to-button-dropdown { */
+#go-to-button-dropdown {
+  /* To fix menu not showing */
+  /* HELP: Why does DataFilesSidebar not need this fix? */
+  .dropdown-menu {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+  /* To restyle */
+  .dropdown-menu {
+    margin-top: 38px;
+  }
+  .dropdown-menu::before,
+  .dropdown-menu::after {
+    left: 23px;
+    margin-left: 0;
+  }
+  .dropdown-menu::after {
+    top: -9px;
+  }
+
+  .dropdown-item {
+    display: inline-block;
+  }
+}
+
+.breadcrumb-container {
+  display: flex;
+  align-items: center;
+}
+
+.truncate {
+  display: inline-block;
+  max-width: 600px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 20px;
+}
+
+#go-to-button-dropdown .complex-dropdown-item-root,
+.complex-dropdown-item-project {
+  display: flex !important;
+}
+
+#go-to-button-dropdown .link-hover:hover {
+  text-decoration: none;
+}
+
+.multiline-menu-item-wrapper {
+  display: inline-block;
+  padding-left: 5px;
+  line-height: 1.1em;
+  small {
+    display: block;
+    color: var(--global-color-primary--x-dark);
+  }
+}
+
+.breadcrumbs .vertical-align-separator {
+  margin-right: 2px;
+  margin-left: 10px;
+}