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,45 @@ 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}/`;
+    }
+
+    if (!url) {
+      console.error('URL is not defined');
+      return;
+    }
+
+    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 +204,88 @@ 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}
+          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

@@ -4,6 +4,8 @@
   /* ... */
   @include truncate-with-ellipsis;
   margin-right: 2em;
+  display: flex;
+  align-items: center;
 }
 .breadcrumb-link,
 .breadcrumb-link:hover {
@@ -34,3 +36,84 @@
     max-width: 700px;
   }
 }
+
+#path-button-wrapper {
+  padding-left: var(--horizontal-buffer);
+}
+
+/* HACK: Quick solution to prevent styles from cascading into header dropdown */
+.go-to-button-dropdown {
+  .dropdown-menu {
+    opacity: 1 !important;
+    border-color: var(--global-color-accent--normal);
+    border-radius: 0;
+    margin-top: 34px;
+    padding: 0;
+    width: 200px;
+    vertical-align: top;
+    pointer-events: auto !important;
+  }
+  .dropdown-menu::before,
+  .dropdown-menu::after {
+    position: absolute;
+    top: -10px;
+    left: 23px;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid var(--global-color-accent--normal);
+    border-left: 10px solid transparent;
+    content: '';
+  }
+  .dropdown-menu::after {
+    top: -9px;
+    left: 23px;
+    border-bottom: 10px solid #ffffff;
+  }
+
+  .dropdown-item {
+    display: inline-block;
+    padding: 10px 6px;
+    color: var(--global-color-primary--x-dark);
+    font-size: 14px;
+    i {
+      padding-right: 19px;
+      font-size: 20px;
+      vertical-align: top;
+    }
+    &:hover {
+      color: var(--global-color-primary--x-dark);
+    }
+  }
+  .dropdown-item:focus,
+  .dropdown-item:hover {
+    background-color: var(--global-color-accent--weak);
+  }
+}
+
+.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;
+}

client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.test.js

@@ -48,7 +48,7 @@ describe('DataFilesBreadcrumbs', () => {
       systems: systemsFixture,
     });
     const history = createMemoryHistory();
-    const { getByText, debug } = renderComponent(
+    const { getAllByText, debug } = renderComponent(
       <DataFilesBreadcrumbs
         api="tapis"
         scheme="private"
@@ -60,36 +60,7 @@ describe('DataFilesBreadcrumbs', () => {
       createMemoryHistory()
     );
 
-    expect(getByText('Frontera')).toBeDefined();
-    expect(getByText('Frontera').closest('a').getAttribute('href')).toEqual(
-      '/workbench/data/tapis/private/frontera.home.username/'
-    );
-  });
-
-  it('render breadcrumbs with initial empty systems', () => {
-    const store = mockStore({
-      systems: initialSystemState,
-      projects: projectsFixture,
-    });
-    const history = createMemoryHistory();
-    const { getByText, debug } = renderComponent(
-      <DataFilesBreadcrumbs
-        api="tapis"
-        scheme="private"
-        system="frontera.home.username"
-        path="/path/to/the/files"
-        section="FilesListing"
-      />,
-      store,
-      createMemoryHistory()
-    );
-
-    expect(getByText(/Frontera/)).toBeDefined();
-    expect(
-      getByText(/Frontera/)
-        .closest('a')
-        .getAttribute('href')
-    ).toEqual('/workbench/data/tapis/private/frontera.home.username/');
+    expect(getAllByText('Frontera')).toBeDefined();
   });
 
   it('render breadcrumbs for projects', () => {