[Files] Breadcrumb enhancement for shared folders

packages/common-components/src/Breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,6 @@
-import React, { Fragment, useMemo } from "react"
+import React, { Fragment, ReactNode, useMemo } from "react"
 import clsx from "clsx"
 import { ITheme, makeStyles, createStyles } from "@chainsafe/common-theme"
-import { HomeIcon } from "../Icons"
 import { Typography } from "../Typography"
 import { MenuDropdown } from "../MenuDropdown"
 
@@ -16,10 +15,10 @@ export type Crumb = {
 
 export type BreadcrumbProps = {
   crumbs?: Crumb[]
-  homeOnClick?: () => void
-  hideHome?: boolean
-  homeRef?: React.Ref<HTMLDivElement>
-  homeActive?: boolean
+  onRootClick?: () => void
+  rootRef?: React.Ref<HTMLDivElement>
+  rootActive?: boolean
+  rootIcon: ReactNode
   className?: string
   showDropDown?: boolean
   maximumCrumbs?: number
@@ -41,19 +40,6 @@ const useStyles = makeStyles(
         },
         ...overrides?.Breadcrumb?.root
       },
-      home: {
-        height: 16,
-        width: "fit-content",
-        margin: "3px 0",
-        "& > svg": {
-          display: "block",
-          height: "100%"
-        },
-        "&.clickable": {
-          cursor: "pointer"
-        },
-        ...overrides?.Breadcrumb?.home
-      },
       separator: {
         width: 1,
         margin: `0 ${constants.generalUnit}px`,
@@ -106,7 +92,20 @@ const useStyles = makeStyles(
         padding: `0 ${constants.generalUnit * 0.5}px`,
         "&.active": {
           borderColor: palette.primary.main
-        }
+        },
+        width: "fit-content",
+        margin: "3px 0",
+        "& svg": {
+          display: "block",
+          height: "100%",
+          "& path": {
+            fill: palette.additional["gray"][9]
+          }
+        },
+        "&.clickable": {
+          cursor: "pointer"
+        },
+        ...overrides?.Breadcrumb?.home
       },
       fullWidth: {
         width: "100%"
@@ -136,11 +135,10 @@ const CrumbComponent = ({ crumb }: {crumb: Crumb}) => {
 
 const Breadcrumb = ({
   crumbs = [],
-  homeOnClick,
-  hideHome,
-  homeRef,
-  homeActive,
-  className,
+  onRootClick,
+  rootRef,
+  rootActive,
+  rootIcon,
   showDropDown,
   maximumCrumbs
 }: BreadcrumbProps) => {
@@ -194,20 +192,15 @@ const Breadcrumb = ({
   }
 
   return (
-    <div className={clsx(classes.root, className)}>
-      {!hideHome && <>
-        <div
-          ref={homeRef}
-          className={clsx(classes.wrapper, homeActive && "active")}
-        >
-          <HomeIcon
-            className={clsx(classes.home, homeOnClick && "clickable")}
-            onClick={() => homeOnClick && homeOnClick()}
-          />
-        </div>
-        {!!crumbs.length && <div className={clsx(classes.separator)} />}
-      </>
-      }
+    <div className={classes.root}>
+      <div
+        ref={rootRef}
+        className={clsx(classes.wrapper, rootActive && "active", onRootClick && "clickable")}
+        onClick={() => onRootClick && onRootClick()}
+      >
+        {rootIcon}
+      </div>
+      {!!crumbs.length && <div className={clsx(classes.separator)} />}
       {generateCrumbs()}
     </div>
   )

packages/common-components/src/stories/Breadcrumb.stories.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { action } from "@storybook/addon-actions"
 import { boolean, withKnobs, text, number } from "@storybook/addon-knobs"
 import { Breadcrumb } from "../Breadcrumb"
+import { HomeIcon } from "../Icons"
 
 export default {
   title: "Breadcrumb",
@@ -43,12 +44,12 @@ export const BreadcrumbWithDropdown = (): React.ReactNode => {
   return (
     <>
       <Breadcrumb
-        homeOnClick={() => actionsData.homeClicked()}
-        homeActive={boolean("home-active", false)}
+        onRootClick={() => actionsData.homeClicked()}
+        rootActive={boolean("home-active", false)}
         showDropDown
         crumbs={crumbs}
-        hideHome={boolean("hide home", false)}
         maximumCrumbs={number("maximum crumbs", 3)}
+        rootIcon={<HomeIcon/>}
 
       />
     </>
@@ -58,10 +59,10 @@ export const Breadcrumbs = (): React.ReactNode => {
   return (
     <>
       <Breadcrumb
-        homeOnClick={() => actionsData.homeClicked()}
-        homeActive={boolean("home-active", false)}
+        onRootClick={() => actionsData.homeClicked()}
+        rootActive={boolean("home-active", false)}
         crumbs={crumbs}
-        hideHome={boolean("hide home", false)}
+        rootIcon={<HomeIcon/>}
       />
     </>
   )}

packages/files-ui/src/Components/FilesRoutes.tsx

@@ -33,7 +33,7 @@ export const ROUTE_LINKS = {
   BillingHistory: "/billing-history",
   UserSurvey: "https://calendly.com/colinschwarz/chainsafe-files-chat",
   Plans: "/plans",
-  SharedFolders: "/shared-overview",
+  SharedFoldersOverview: "/shared-overview",
   SharedFolderBrowserRoot: "/shared",
   SharingLink: (permission: NonceResponsePermission, jwt: string, bucketEncryptionKey: string) =>
     `${LINK_SHARING_BASE}/${permissionPath(permission)}/${encodeURIComponent(jwt)}#${encodeURIComponent(bucketEncryptionKey)}`,
@@ -75,7 +75,7 @@ const FilesRoutes = () => {
       />
       <ConditionalRoute
         exact
-        path={ROUTE_LINKS.SharedFolders}
+        path={ROUTE_LINKS.SharedFoldersOverview}
         isAuthorized={isAuthorized}
         component={SharedFoldersPage}
         redirectPath={ROUTE_LINKS.Landing}

packages/files-ui/src/Components/Layouts/AppNav.tsx

@@ -166,6 +166,7 @@ const useStyles = makeStyles(
             fill: constants.nav.headingColor
           },
           width: Number(constants.svgWidth),
+          height: Number(constants.svgHeight),
           marginRight: constants.generalUnit * 2,
           [breakpoints.up("md")]: {
             fill: constants.nav.itemIconColor
@@ -378,7 +379,7 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
                   data-cy="link-shared"
                   onClick={handleOnClick}
                   className={clsx(classes.navItem, appNavTab === "shared" && "selected")}
-                  to={ROUTE_LINKS.SharedFolders}
+                  to={ROUTE_LINKS.SharedFoldersOverview}
                 >
                   <UserShareSvg />
                   <Typography

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx

@@ -16,7 +16,8 @@ import {
   extractSharedFileBrowserPathFromURL,
   getUrlSafePathWithFile,
   getAbsolutePathsFromCids,
-  pathEndingWithSlash
+  pathEndingWithSlash,
+  joinArrayOfPaths
 } from "../../../Utils/pathUtils"
 import { IBulkOperations, IFilesTableBrowserProps } from "./types"
 import { CONTENT_TYPES } from "../../../Utils/Constants"
@@ -86,16 +87,32 @@ const SharedFileBrowser = () => {
 
   // Breadcrumbs/paths
   const arrayOfPaths = useMemo(() => getArrayOfPaths(currentPath), [currentPath])
-  const crumbs: Crumb[] = useMemo(() => arrayOfPaths.map((path, index) => {
-    return ({
-      text: decodeURIComponent(path),
+  const crumbs: Crumb[] = useMemo(() => {
+    const crumbRest = arrayOfPaths.map((path, index) => {
+      return ({
+        text: decodeURIComponent(path),
+        onClick: () => {
+          redirect(
+            ROUTE_LINKS.SharedFolderExplorer(bucket?.id || "", getURISafePathFromArray(arrayOfPaths.slice(0, index + 1)))
+          )
+        },
+        path: joinArrayOfPaths(arrayOfPaths.slice(0, index + 1))
+      })
+    })
+
+    const root: Crumb = {
+      text: bucket?.name || "",
       onClick: () => {
         redirect(
-          ROUTE_LINKS.SharedFolderExplorer(bucket?.id || "", getURISafePathFromArray(arrayOfPaths.slice(0, index + 1)))
+          ROUTE_LINKS.SharedFolderExplorer(bucket?.id || "", "/")
         )
-      }
-    })
-  }), [arrayOfPaths, bucket, redirect])
+      },
+      path: "/"
+    }
+
+    return [root, ...crumbRest]
+  }, [arrayOfPaths, bucket, redirect])
+
   const currentFolder = useMemo(() => {
     return !!arrayOfPaths.length && arrayOfPaths[arrayOfPaths.length - 1]
   }, [arrayOfPaths])

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

@@ -25,7 +25,9 @@ import {
   MoreIcon,
   SortIcon,
   CheckIcon,
-  IMenuItem
+  IMenuItem,
+  HomeIcon,
+  UserShareIcon
 } from "@chainsafe/common-components"
 import { useState } from "react"
 import { useMemo } from "react"
@@ -63,6 +65,7 @@ import FolderBreadcrumb from "./FolderBreadcrumb"
 import AnchorMenu, { AnchoreMenuPosition } from "../../../../UI-components/AnchorMenu"
 import { getItemMenuOptions } from "./FileSystemItem/itemOperations"
 import { getPathWithFile } from "../../../../Utils/pathUtils"
+import { ROUTE_LINKS } from "../../../FilesRoutes"
 
 const baseOperations: FileOperation[] = ["download", "info", "preview", "share"]
 const readerOperations: FileOperation[] = [...baseOperations, "report"]
@@ -339,6 +342,9 @@ const useStyles = makeStyles(
         [breakpoints.down("md")]: {
           top: 50
         }
+      },
+      rootIcon: {
+        height: 16
       }
     })
   }
@@ -583,7 +589,7 @@ const FilesList = ({ isShared = false }: Props) => {
     })
   })
 
-  const [{ isOverMoveHomeBreadcrumb }, dropMoveHomeBreadcrumbRef] = useDrop({
+  const [{ isOverMoveHomeBreadcrumb }, dropMoveRootBreadcrumbRef] = useDrop({
     accept: DragTypes.MOVABLE_FILE,
     canDrop: () => currentPath !== "/",
     drop: (item: { ids: string[]}) => {
@@ -595,9 +601,12 @@ const FilesList = ({ isShared = false }: Props) => {
     })
   })
 
-  const homeBreadcrumbRef  =  useRef<HTMLDivElement>(null)
-  dropMoveHomeBreadcrumbRef(homeBreadcrumbRef)
-  dropUploadHomeBreadcrumbRef(homeBreadcrumbRef)
+  const rootBreadcrumbRef  =  useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    dropMoveRootBreadcrumbRef(rootBreadcrumbRef)
+    dropUploadHomeBreadcrumbRef(rootBreadcrumbRef)
+  }, [dropMoveRootBreadcrumbRef, dropUploadHomeBreadcrumbRef])
 
   // Modals
   const [createFolderModalOpen, setCreateFolderModalOpen] = useState(false)
@@ -1024,6 +1033,7 @@ const FilesList = ({ isShared = false }: Props) => {
         >
           {crumbs && moduleRootPath && (
             <Breadcrumb
+              rootIcon={isShared ? <UserShareIcon className={classes.rootIcon}/> : <HomeIcon className={classes.rootIcon}/>}
               crumbs={crumbs.map((crumb, i) => ({
                 ...crumb,
                 component: (i < crumbs.length - 1)
@@ -1040,9 +1050,9 @@ const FilesList = ({ isShared = false }: Props) => {
                   />
                   : null
               }))}
-              homeOnClick={() => redirect(moduleRootPath)}
-              homeRef={homeBreadcrumbRef}
-              homeActive={isOverUploadHomeBreadcrumb || isOverMoveHomeBreadcrumb}
+              onRootClick={() => isShared ? redirect(ROUTE_LINKS.SharedFoldersOverview) : redirect(moduleRootPath)}
+              rootRef={isShared ? undefined : rootBreadcrumbRef}
+              rootActive={!isShared && (isOverUploadHomeBreadcrumb || isOverMoveHomeBreadcrumb)}
               showDropDown
               maximumCrumbs={desktop ? 5 : 3}
             />

packages/files-ui/src/Contexts/FileBrowserContext.tsx

@@ -26,8 +26,8 @@ interface FileBrowserContext extends IFileBrowserModuleProps {
   loadingCurrentPath: boolean
   showUploadsInTable: boolean
   sourceFiles: FileSystemItem[]
-  crumbs: Crumb[] | undefined
-  moduleRootPath: string | undefined
+  crumbs?: Crumb[]
+  moduleRootPath?: string
   getPath?: (cid: string) => string
   isSearch?: boolean
   withSurvey?: boolean

packages/files-ui/src/Themes/Constants.ts

@@ -8,6 +8,7 @@ export const UI_CONSTANTS = {
   contentTopPadding: 6 * 15,
   mobileHeaderHeight: 8 * 6.3,
   svgWidth: 8 * 2.5,
+  svgHeight: 8 * 2.5,
   topPadding: 8 * 3,
   mobileNavWidth: 8 * 30,
   headerTopPadding: 8 * 3,

packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx

@@ -20,7 +20,8 @@ import {
   useHistory,
   GridIcon,
   TableIcon,
-  IMenuItem
+  IMenuItem,
+  HomeIcon
 } from "@chainsafe/common-components"
 import { useState } from "react"
 import { useMemo } from "react"
@@ -887,11 +888,12 @@ const FilesList = () => {
                   />
                   : null
               }))}
-              homeOnClick={() => redirect(moduleRootPath)}
-              homeRef={homeBreadcrumbRef}
-              homeActive={isOverUploadHomeBreadcrumb || isOverMoveHomeBreadcrumb}
+              onRootClick={() => redirect(moduleRootPath)}
+              rootRef={homeBreadcrumbRef}
+              rootActive={isOverUploadHomeBreadcrumb || isOverMoveHomeBreadcrumb}
               showDropDown
               maximumCrumbs={desktop ? 5 : 3}
+              rootIcon={<HomeIcon/>}
             />
           )}
         </div>