Shared folder overview

packages/common-components/src/Icons/icons/UserShare.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as UserShareSvg } from "../svgs/user-share.svg"
+
+export { UserShareSvg }
+
+export default createSvgIcon(<UserShareSvg />)

packages/common-components/src/Icons/index.ts

@@ -65,6 +65,7 @@ export { default as TableIcon, TableSvg } from "./icons/Table.icon"
 export { default as UploadIcon, UploadSvg } from "./icons/Upload.icon"
 export { default as UnionpayCardIcon, UnionpayCardSvg } from "./icons/UnionpayCard.icon"
 export { default as UserIcon, UserSvg } from "./icons/User.icon"
+export { default as UserShareIcon, UserShareSvg } from "./icons/UserShare.icon"
 export { default as VisaCardIcon, VisaCardSvg } from "./icons/VisaCard.icon"
 export { default as WarningIcon, WarningSvg } from "./icons/Warning.icon"
 export { default as ZoomInIcon, ZoomInSvg } from "./icons/ZoomIn.icon"

packages/files-ui/src/Components/Elements/SharedUser.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from "react"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { CSFTheme } from "../../Themes/types"
+import { Typography, UserIcon } from "@chainsafe/common-components"
+import clsx from "clsx"
+
+const useStyles = makeStyles(({ zIndex, animation, constants, palette }: CSFTheme) => {
+  return createStyles({
+    root: {
+      display: "flex"
+    },
+    bubble: {
+      position: "relative",
+      borderRadius: "50%",
+      backgroundColor: palette.additional["gray"][6],
+      color: palette.common.white.main,
+      width: constants.generalUnit * 5,
+      height: constants.generalUnit * 5,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "& svg": {
+        fill: palette.common.white.main
+      },
+      "&:first-child": {
+        marginRight: constants.generalUnit
+      }
+    },
+    text : {
+      textAlign: "center"
+    },
+    tooltip: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      left: "50%",
+      top: "-20px",
+      position: "absolute",
+      transform: "translate(-50%, -50%)",
+      zIndex: zIndex?.layer1,
+      transitionDuration: `${animation.transform}ms`,
+      opacity: 0,
+      visibility: "hidden",
+      backgroundColor: constants.loginModule.flagBg,
+      color: constants.loginModule.flagText,
+      padding: `${constants.generalUnit / 2}px ${constants.generalUnit}px`,
+      borderRadius: 2,
+      "&:after": {
+        transitionDuration: `${animation.transform}ms`,
+        content: "''",
+        position: "absolute",
+        top: "100%",
+        left: "50%",
+        transform: "translate(-50%,0)",
+        width: 0,
+        height: 0,
+        borderLeft: "5px solid transparent",
+        borderRight: "5px solid transparent",
+        borderTop: `5px solid ${constants.loginModule.flagBg}`
+      },
+      "&.active": {
+        opacity: 1,
+        visibility: "visible"
+      }
+
+    }
+  })
+})
+
+interface Props {
+  sharedUsers: string[]
+}
+
+const SharedUsers = ({ sharedUsers }: Props) => {
+  const classes = useStyles()
+
+  if (!sharedUsers.length) {
+    return null
+  }
+
+  const UserBubble = ({ text, hover }: {text?: string; hover: string | string[]}) => {
+    const [isHover, setIsHover] = useState(false)
+
+    return (
+      <div
+        onMouseEnter={() => setIsHover(true)}
+        onMouseLeave={() => setIsHover(false)}
+        className={classes.bubble}
+      >
+        <div className={clsx(classes.tooltip, { "active": isHover })}>
+          {
+            Array.isArray(hover)
+              ? hover.map((user) => <div key={user}>{user}</div>)
+              : hover
+          }
+        </div>
+        {text
+          ? <Typography
+            variant="h4"
+            className={classes.text}
+          >
+            {text}
+          </Typography>
+          : <UserIcon/>
+        }
+      </div>
+    )
+  }
+
+  return (
+    <div className={classes.root}>
+      <UserBubble
+        hover={sharedUsers[0]}
+      />
+      {sharedUsers.length > 2 && (
+        <UserBubble
+          text={`+${sharedUsers.length - 1}`}
+          hover={sharedUsers.slice(0, -1)}
+        />
+      )}
+      {sharedUsers.length === 2 && (
+        <UserBubble
+          hover={sharedUsers[1]}
+        />
+      )}
+    </div>
+  )
+}
+
+export default SharedUsers

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

@@ -8,6 +8,7 @@ import SearchPage from "./Pages/SearchPage"
 import BinPage from "./Pages/BinPage"
 import PurchasePlanPage from "./Pages/PurchasePlanPage"
 import { useThresholdKey } from "../Contexts/ThresholdKeyContext"
+import SharedFoldersOverview from "./Modules/FileBrowsers/SharedFoldersOverview"
 
 export const SETTINGS_BASE = "/settings"
 export const ROUTE_LINKS = {
@@ -23,7 +24,8 @@ export const ROUTE_LINKS = {
   SettingsDefault: `${SETTINGS_BASE}`,
   PurchasePlan: "/purchase",
   UserSurvey: "https://shrl.ink/kmAL",
-  GeneralFeedbackForm: "https://shrl.ink/gvVJ"
+  GeneralFeedbackForm: "https://shrl.ink/gvVJ",
+  SharedFolders: "/shared"
 }
 
 export const SETTINGS_PATHS = ["profile", "plan", "security"] as const
@@ -50,6 +52,12 @@ const FilesRoutes = () => {
         component={BinPage}
         redirectPath={ROUTE_LINKS.Landing}
       />
+      <ConditionalRoute
+        path={ROUTE_LINKS.SharedFolders}
+        isAuthorized={isAuthorized}
+        component={SharedFoldersOverview}
+        redirectPath={ROUTE_LINKS.Landing}
+      />
       <ConditionalRoute
         exact
         path={ROUTE_LINKS.Search("")}

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

@@ -16,7 +16,8 @@ import {
   ProgressBar,
   Button,
   formatBytes,
-  DeleteSvg } from "@chainsafe/common-components"
+  DeleteSvg,
+  UserShareSvg } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
 import { FREE_PLAN_LIMIT } from "../../Utils/Constants"
 import { Trans } from "@lingui/macro"
@@ -155,6 +156,9 @@ const useStyles = makeStyles(
           }
         },
         "& svg": {
+          "& path" : {
+            fill: constants.nav.headingColor
+          },
           transitionDuration: `${animation.transform}ms`,
           width: Number(constants.svgWidth),
           marginRight: constants.generalUnit * 2,
@@ -293,6 +297,19 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
                   <Trans>Home</Trans>
                 </Typography>
               </Link>
+              <Link
+                onClick={handleOnClick}
+                className={classes.navItem}
+                to={ROUTE_LINKS.SharedFolders}
+              >
+                <UserShareSvg />
+                <Typography
+                  variant="h5"
+                  className={classes.navItemText}
+                >
+                  <Trans>Shared</Trans>
+                </Typography>
+              </Link>
               <Link
                 onClick={handleOnClick}
                 className={classes.navItem}

packages/files-ui/src/Components/Modules/DownloadProgressModals/index.tsx

@@ -29,16 +29,19 @@ const DownloadProgressModals: React.FC = () => {
 
   if (downloadsInProgress.length === 0) { return null }
 
-  return (
-    <div className={classes.root}>
-      {downloadsInProgress.map((downloadInProgress) => (
-        <DownloadBox
-          key={downloadInProgress.id}
-          downloadInProgress={downloadInProgress}
-        />
-      ))}
-    </div>
-  )
+  if (downloadsInProgress.length > 0) {
+    return (
+      <div className={classes.root}>
+        {downloadsInProgress.map((downloadInProgress) => (
+          <DownloadBox
+            key={downloadInProgress.id}
+            downloadInProgress={downloadInProgress}
+          />
+        ))}
+      </div>
+    )} else {
+    return null
+  }
 }
 
 export default DownloadProgressModals

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

@@ -20,10 +20,7 @@ const BinFileBrowser: React.FC<IFileBrowserModuleProps> = ({ controls = false }:
   const [loadingCurrentPath, setLoadingCurrentPath] = useState(false)
   const [pathContents, setPathContents] = useState<FileSystemItem[]>([])
   const { pathname } = useLocation()
-  const currentPath = useMemo(() =>
-    extractFileBrowserPathFromURL(pathname, ROUTE_LINKS.Bin("")),
-  [pathname]
-  )
+  const currentPath = useMemo(() => extractFileBrowserPathFromURL(pathname, ROUTE_LINKS.Bin("")), [pathname])
   const { redirect } = useHistory()
 
   const bucket = useMemo(() => buckets.find(b => b.type === "trash"), [buckets])
@@ -159,7 +156,7 @@ const BinFileBrowser: React.FC<IFileBrowserModuleProps> = ({ controls = false }:
     <FileBrowserContext.Provider value={{
       bucket: bucket,
       crumbs: undefined,
-      deleteItems: deleteItems,
+      deleteItems,
       recoverItems,
       currentPath,
       moduleRootPath: ROUTE_LINKS.Bin("/"),

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

@@ -28,12 +28,8 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
   const [loadingCurrentPath, setLoadingCurrentPath] = useState(false)
   const [pathContents, setPathContents] = useState<FileSystemItem[]>([])
   const { redirect } = useHistory()
-
   const { pathname } = useLocation()
-  const currentPath = useMemo(() =>
-    extractFileBrowserPathFromURL(pathname, ROUTE_LINKS.Drive("")),
-  [pathname]
-  )
+  const currentPath = useMemo(() => extractFileBrowserPathFromURL(pathname, ROUTE_LINKS.Drive("")), [pathname])
   const bucket = useMemo(() => buckets.find(b => b.type === "csf"), [buckets])
 
   const refreshContents = useCallback((showLoading?: boolean) => {
@@ -186,7 +182,9 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
         appearance: "error"
       })
     } else {
-      uploadFiles(bucket.id, files, path).then(() => refreshContents()).catch(console.error)
+      uploadFiles(bucket.id, files, path)
+        .then(() => refreshContents())
+        .catch(console.error)
     }
   }, [addToastMessage, uploadFiles, bucket, refreshContents])