DnD with breadcrumbs

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

@@ -7,13 +7,19 @@ import { MenuDropdown } from "../MenuDropdown"
 
 export type Crumb = {
   text: string
+  path?: string
   onClick?: () => void
+  forwardedRef?: React.Ref<HTMLDivElement>
+  active?: boolean
+  component?: React.ReactElement | null
 }
 
 export type BreadcrumbProps = {
   crumbs?: Crumb[]
   homeOnClick?: () => void
   hideHome?: boolean
+  homeRef?: React.Ref<HTMLDivElement>
+  homeActive?: boolean
   className?: string
   showDropDown?: boolean
 }
@@ -36,6 +42,7 @@ const useStyles = makeStyles(
       },
       home: {
         height: 16,
+        width: "fit-content",
         margin: "3px 0",
         "& > svg": {
           display: "block",
@@ -79,40 +86,65 @@ const useStyles = makeStyles(
         textOverflow: "ellipsis"
       },
       menuTitle: {
-        padding: `0px ${constants.generalUnit}px 0px 0px`
+        padding: `0px ${constants.generalUnit * 1.5}px 0px ${constants.generalUnit * 0.5}px`
       },
       menuIcon: {
         width: 12,
         height: 12,
         "& svg": {
           height: 12,
-          width: 12
+          width: 12,
+          fill: palette.additional["gray"][9]
         }
+      },
+      wrapper: {
+        border: "1px solid transparent",
+        padding: `0 ${constants.generalUnit * 0.5}px`,
+        "&.active": {
+          borderColor: palette.primary.main
+        }
+      },
+      fullWidth: {
+        width: "100%"
       }
     })
 )
 
-const Breadcrumb: React.FC<BreadcrumbProps> = ({
+const CrumbComponent = ({ crumb }: {crumb: Crumb}) => {
+  const classes = useStyles()
+  return (
+    !crumb.component
+      ? <div
+        ref={crumb.forwardedRef}
+        className={clsx(crumb.active && "active", classes.wrapper)}
+      >
+        <Typography
+          onClick={() => crumb.onClick && crumb.onClick()}
+          className={clsx(classes.crumb, crumb.onClick && "clickable")}
+          variant="body1"
+        >
+          {crumb.text}
+        </Typography>
+      </div>
+      : crumb.component
+  )
+}
+
+const Breadcrumb = ({
   crumbs = [],
   homeOnClick,
   hideHome,
+  homeRef,
+  homeActive,
   className,
   showDropDown
 }: BreadcrumbProps) => {
   const classes = useStyles()
 
   const generateFullCrumbs = (crumbs: Crumb[]) => {
-    return crumbs.map((item: Crumb, index: number) => (
+    return crumbs.map((crumb: Crumb, index: number) => (
       <Fragment key={`crumb-${index}`}>
-        <div>
-          <Typography
-            onClick={() => (item.onClick ? item.onClick() : null)}
-            className={clsx(classes.crumb, item.onClick && "clickable")}
-            variant="body1"
-          >
-            {item.text}
-          </Typography>
-        </div>
+        <CrumbComponent crumb={crumb} />
         {index < (crumbs.length - 1) && <div className={clsx(classes.separator)} />}
       </Fragment>
     ))
@@ -131,14 +163,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
           titleText: classes.menuTitleText
         }}
         menuItems={crumbs.map((crumb) => ({
-          contents: (
-            <Typography
-              variant="body1"
-              onClick={() => (crumb.onClick ? crumb.onClick() : null)}
-            >
-              {crumb.text}
-            </Typography>
-          )
+          contents: <CrumbComponent crumb={crumb} />
         }))}
       />
     )
@@ -154,15 +179,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
         <>
           {generateDropdownCrumb(dropdownCrumbs)}
           <div className={clsx(classes.separator)} />
-          <div>
-            <Typography
-              onClick={() => (lastCrumb.onClick ? lastCrumb.onClick() : null)}
-              className={clsx(classes.crumb, lastCrumb.onClick && "clickable")}
-              variant="body1"
-            >
-              {lastCrumb.text}
-            </Typography>
-          </div>
+          <CrumbComponent crumb={lastCrumb} />
         </>
       )
     }
@@ -171,11 +188,16 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   return (
     <div className={clsx(classes.root, className)}>
       {!hideHome && <>
-        <HomeIcon
-          className={clsx(classes.home, homeOnClick && "clickable")}
-          onClick={() => (homeOnClick ? homeOnClick() : null)}
-        />
-        <div className={clsx(classes.separator)} />
+        <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)} />}
       </>
       }
       {generateCrumbs()}

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

@@ -19,7 +19,8 @@ export const BreadcrumbStory = (): React.ReactNode => {
   const crumbs = useMemo(() => ([
     {
       text: text("breadcrumb 2", "Level 1 Clickable"),
-      onClick: () => actionsData.linkClick()
+      onClick: () => actionsData.linkClick(),
+      active: boolean("breadcrumb-2-active", false)
     },
     {
       text: "Level 2"
@@ -36,6 +37,7 @@ export const BreadcrumbStory = (): React.ReactNode => {
     <>
       <Breadcrumb
         homeOnClick={() => actionsData.homeClicked()}
+        homeActive={boolean("home-active", false)}
         showDropDown={boolean("show dropdown", true)}
         crumbs={crumbs}
         hideHome={boolean("hide home", false)}

packages/common-theme/rollup.config.js

@@ -5,7 +5,7 @@ import json from "@rollup/plugin-json"
 import nodePolyfills from "rollup-plugin-node-polyfills"
 import peerDepsExternal from "rollup-plugin-peer-deps-external"
 import postcss from "rollup-plugin-postcss"
-import copy from 'rollup-plugin-copy'
+import copy from "rollup-plugin-copy"
 
 export default {
   input: "src/index.ts",

packages/files-ui/package.json

@@ -84,7 +84,7 @@
   "scripts": {
     "postinstall": "yarn compile",
     "start": "yarn compile && craco --max_old_space_size=4096 start",
-    "build": "craco --max_old_space_size=4096 --openssl-legacy-provider build ",
+    "build": "craco --max_old_space_size=4096 --openssl-legacy-provider build",
     "sentry": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); node scripts/sentry.js)",
     "release": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); yarn compile && yarn build && node scripts/sentry.js)",
     "test": "cypress open",

packages/files-ui/src/App.tsx

@@ -17,6 +17,13 @@ import { UserProvider } from "./Contexts/UserContext"
 import { BillingProvider } from "./Contexts/BillingContext"
 import { PosthogProvider } from "./Contexts/PosthogContext"
 import { NotificationsProvider } from "./Contexts/NotificationsContext"
+import { StylesProvider, createGenerateClassName } from "@material-ui/styles"
+
+// making material and jss use one className generator
+const generateClassName = createGenerateClassName({
+  productionPrefix: "c",
+  disableGlobal: true
+})
 
 if (
   process.env.NODE_ENV === "production" &&
@@ -94,57 +101,57 @@ const App = () => {
   ), [])
 
   return (
-
-    <ThemeSwitcher
-      storageKey="csf.themeKey"
-      themes={{ light: lightTheme, dark: darkTheme }}
-    >
-      <ErrorBoundary
-        fallback={fallBack}
-        onReset={() => window.location.reload()}
+    <StylesProvider generateClassName={generateClassName}>
+      <ThemeSwitcher
+        storageKey="csf.themeKey"
+        themes={{ light: lightTheme, dark: darkTheme }}
       >
-        <CssBaseline />
-        <LanguageProvider availableLanguages={availableLanguages}>
-          <ToastProvider
-            autoDismiss
-            defaultPosition="bottomRight"
-          >
-            <Web3Provider
-              onboardConfig={onboardConfig}
-              checkNetwork={false}
-              cacheWalletSelection={canUseLocalStorage}
+        <ErrorBoundary
+          fallback={fallBack}
+          onReset={() => window.location.reload()}
+        >
+          <CssBaseline />
+          <LanguageProvider availableLanguages={availableLanguages}>
+            <ToastProvider
+              autoDismiss
+              defaultPosition="bottomRight"
             >
-              <FilesApiProvider
-                apiUrl={apiUrl}
-                withLocalStorage={false}
+              <Web3Provider
+                onboardConfig={onboardConfig}
+                checkNetwork={false}
+                cacheWalletSelection={canUseLocalStorage}
               >
-                <ThresholdKeyProvider
-                  enableLogging={directAuthNetwork !== "mainnet"}
-                  network={directAuthNetwork}
+                <FilesApiProvider
+                  apiUrl={apiUrl}
+                  withLocalStorage={false}
                 >
-                  <NotificationsProvider>
-                    <UserProvider>
-                      <FilesProvider>
-                        <BillingProvider>
-                          <Router>
-                            <PosthogProvider>
-                              <AppWrapper>
-                                <FilesRoutes />
-                              </AppWrapper>
-                            </PosthogProvider>
-                          </Router>
-                        </BillingProvider>
-                      </FilesProvider>
-                    </UserProvider>
-                  </NotificationsProvider>
-                </ThresholdKeyProvider>
-              </FilesApiProvider>
-            </Web3Provider>
-          </ToastProvider>
-        </LanguageProvider>
-      </ErrorBoundary>
-    </ThemeSwitcher>
-
+                  <ThresholdKeyProvider
+                    enableLogging={directAuthNetwork !== "mainnet"}
+                    network={directAuthNetwork}
+                  >
+                    <NotificationsProvider>
+                      <UserProvider>
+                        <FilesProvider>
+                          <BillingProvider>
+                            <Router>
+                              <PosthogProvider>
+                                <AppWrapper>
+                                  <FilesRoutes />
+                                </AppWrapper>
+                              </PosthogProvider>
+                            </Router>
+                          </BillingProvider>
+                        </FilesProvider>
+                      </UserProvider>
+                    </NotificationsProvider>
+                  </ThresholdKeyProvider>
+                </FilesApiProvider>
+              </Web3Provider>
+            </ToastProvider>
+          </LanguageProvider>
+        </ErrorBoundary>
+      </ThemeSwitcher>
+    </StylesProvider>
   )
 }
 

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

@@ -8,7 +8,8 @@ import {
   extractFileBrowserPathFromURL,
   getUrlSafePathWithFile,
   getAbsolutePathsFromCids,
-  pathEndingWithSlash
+  pathEndingWithSlash,
+  joinArrayOfPaths
 } from "../../../Utils/pathUtils"
 import { IBulkOperations, IFileBrowserModuleProps, IFilesTableBrowserProps } from "./types"
 import FilesList from "./views/FilesList"
@@ -145,14 +146,16 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
 
   // Breadcrumbs/paths
   const arrayOfPaths = useMemo(() => getArrayOfPaths(currentPath), [currentPath])
-  const crumbs: Crumb[] = useMemo(() => arrayOfPaths.map((path, index) => ({
-    text: decodeURIComponent(path),
-    onClick: () => {
-      redirect(
-        ROUTE_LINKS.Drive(getURISafePathFromArray(arrayOfPaths.slice(0, index + 1)))
-      )
-    }
-  })), [arrayOfPaths, redirect])
+  const crumbs: Crumb[] = useMemo(() => arrayOfPaths.map((path, index) => {
+    return {
+      text: decodeURIComponent(path),
+      onClick: () => {
+        redirect(
+          ROUTE_LINKS.Drive(getURISafePathFromArray(arrayOfPaths.slice(0, index + 1)))
+        )
+      },
+      path: joinArrayOfPaths(arrayOfPaths.slice(0, index + 1))
+    }}), [arrayOfPaths, redirect])
 
   const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => {
     if (!bucket) return