task/WP-65-DropdownViewFullPath

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

@@ -1,8 +1,18 @@
 import React from 'react';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Button } from '_common';
+import {
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  ButtonDropdown,
+} from 'reactstrap';
 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,
@@ -35,7 +45,7 @@ const BreadcrumbLink = ({
     case 'FilesListing':
       return (
         <Link
-          className="breadcrumb-link"
+          className="breadcrumb-link truncate"
           to={`${basePath}/${api}/${scheme}/${system}${path}/`}
         >
           {children}
@@ -46,7 +56,7 @@ const BreadcrumbLink = ({
       return (
         <span>
           <a
-            className="breadcrumb-link"
+            className="breadcrumb-link truncate"
             href={`/workbench/data/${api}/${scheme}/${system}${path}/`}
             onClick={onClick}
           >
@@ -120,6 +130,40 @@ const DataFilesBreadcrumbs = ({
   const paths = [];
   const pathComps = [];
 
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const toggleDropdown = () => setDropdownOpen(!dropdownOpen);
+
+  const handleNavigation = (targetPath) => {
+    const basePath = isPublic ? '/public-data' : '/workbench/data';
+    let url;
+
+    if (scheme === 'projects' && !targetPath) {
+      url = `${basePath}/${api}/projects/`;
+    } else if (api === 'googledrive' && !targetPath) {
+      url = `${basePath}/${api}/${scheme}/${system}/`;
+    } else {
+      url = `${basePath}/${api}/${scheme}/${system}${targetPath}/`;
+    }
+
+    return url;
+  };
+
+  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 +199,89 @@ const DataFilesBreadcrumbs = ({
       }
     }, '');
 
+  const lastTwoPaths = paths.slice(-1);
+  const lastTwoPathComps = pathComps.slice(-1);
+  const reversedPath = paths.reverse();
+
   return (
-    <div className={`breadcrumbs ${className}`}>
-      {scheme === 'projects' && (
-        <>
-          <RootProjectsLink
-            api={api}
-            section={section}
-            operation={operation}
-            label="Shared Workspaces"
-          />{' '}
-          {system && `/ `}
-        </>
+    <div className="breadcrumb-container">
+      <div id="path-button-wrapper">
+        <ButtonDropdown
+          isOpen={dropdownOpen}
+          toggle={toggleDropdown}
+          id="go-to-button-dropdown"
+          className="go-to-button-dropdown"
+        >
+          <DropdownToggle tag={Button}>Go to ...</DropdownToggle>
+          <DropdownMenu>
+            {reversedPath.slice(1, reversedPath.length).map((path, index) => {
+              const folderName = path.split('/').pop();
+              return (
+                <>
+                  <Link key={index} to={handleNavigation(path)}>
+                    <DropdownItem>
+                      <i className="icon-folder" />
+                      {folderName.length > 20
+                        ? folderName.substring(0, 20)
+                        : folderName}
+                    </DropdownItem>
+                  </Link>
+                </>
+              );
+            })}
+            <DropdownItem divider />
+            <Link to={handleNavigation(homeDir)}>
+              <DropdownItem>
+                <i className="icon-my-data" />
+                <span className="multiline-menu-item-wrapper">
+                  {systemName || 'Shared Workspaces'}
+                  <small>Root</small>
+                </span>
+              </DropdownItem>
+            </Link>
+          </DropdownMenu>
+        </ButtonDropdown>
+      </div>
+      <div className={`breadcrumbs ${className}`}>
+        {lastTwoPathComps.length === 0 ? (
+          <span className="system-name truncate">
+            {systemName || 'Shared Workspaces'}
+          </span>
+        ) : (
+          lastTwoPathComps.map((pathComp, i) => {
+            if (i === lastTwoPaths.length - 1) {
+              return (
+                <span key={uuidv4()} className="truncate">
+                  {pathComp}
+                </span>
+              );
+            }
+            return (
+              <React.Fragment key={uuidv4()}>
+                <span className="vertical-align-separator">/</span>
+                <BreadcrumbLink
+                  api={api}
+                  scheme={scheme}
+                  system={system}
+                  path={lastTwoPaths[i]}
+                  section={section}
+                >
+                  <>{pathComp}</>
+                </BreadcrumbLink>
+              </React.Fragment>
+            );
+          })
+        )}
+      </div>
+      {systemName && api !== 'googledrive' ? (
+        <Button type="link" onClick={openFullPathModal}>
+          View Full Path
+        </Button>
+      ) : (
+        <Button type="link" disabled={true} 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,65 @@
     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;
+}
+
+.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;
+}