Sharing feature explainer

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

@@ -36,7 +36,7 @@ interface IDialogClasses {
 }
 
 interface IDialogProps
-  extends Omit<IModalProps, "setActive" | "closePosition" | "children"> {
+  extends Omit<IModalProps, "closePosition" | "children"> {
   accept: () => void
   reject: () => void
   injectedClass?: IDialogClasses

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

@@ -6,7 +6,6 @@ import { CloseSvg } from "../Icons/icons/Close.icon"
 const useStyles = makeStyles(
   ({ animation, constants, breakpoints, palette, overrides, zIndex }: ITheme) =>
     createStyles({
-      // JSS in CSS goes here
       root: {
         position: "fixed",
         zIndex: zIndex?.layer3,
@@ -23,11 +22,6 @@ const useStyles = makeStyles(
         borderBottomRightRadius: 0,
         transitionDuration: `${animation.transform}ms`,
         transitionProperty: "opacity",
-        "&.closable": {
-          "&:before": {
-            cursor: "pointer"
-          }
-        },
         "&:before": {
           content: "''",
           display: "block",
@@ -97,24 +91,23 @@ const useStyles = makeStyles(
       },
       closeIcon: {
         ...constants.icon,
-        borderRadius: "50%",
+        width: 15,
+        height: 15,
         display: "block",
         top: 0,
-        backgroundColor: palette.common?.white.main,
         cursor: "pointer",
         position: "absolute",
         "& svg": {
-          height: 15,
-          width: 15
+          stroke: palette.common?.black.main
         },
         "&.right": {
-          transform: "translate(50%, -50%)",
+          transform: "translate(-50%, 50%)",
           right: 0,
           ...overrides?.Modal?.closeIcon?.right
         },
         "&.left": {
           left: 0,
-          transform: "translate(-50%, -50%)",
+          transform: "translate(50%, -50%)",
           ...overrides?.Modal?.closeIcon?.left
         },
         "&.none": {
@@ -127,19 +120,20 @@ const useStyles = makeStyles(
 
 interface IModalClasses {
   inner?: string
-  close?: string
+  closeIcon?: string
 }
 
 interface IModalProps {
   className?: string
   active: boolean
-  setActive?: (state: boolean) => void
   injectedClass?: IModalClasses
   closePosition?: "left" | "right" | "none"
   children?: ReactNode | ReactNode[]
   maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | number
   onModalBodyClick?: (e: React.MouseEvent) => void
+  onClickOutside?: (e?: React.MouseEvent) => void
   testId?: string
+  onClose?: () => void
 }
 
 const Modal = ({
@@ -148,66 +142,58 @@ const Modal = ({
   closePosition = "right",
   injectedClass,
   active = false,
-  setActive,
   maxWidth = "sm",
   onModalBodyClick,
-  testId
+  testId,
+  onClose,
+  onClickOutside
 }: IModalProps) => {
   const classes = useStyles()
 
   const ref = useRef(null)
 
   const handleClose = () => {
-    if (active && setActive) {
-      setActive(false)
-    }
+    onClose && onClose()
   }
 
-  useOnClickOutside(ref, () => handleClose())
+  useOnClickOutside(ref, () => onClickOutside && onClickOutside())
 
   if (!active) return null
 
-  return <article
-    className={clsx(
-      classes.root,
-      className,
-      setActive ? "closable" : "",
-      "active"
-    )}
-    onClick={onModalBodyClick}
-  >
-    <section
-      data-testid={`modal-container-${testId}`}
-      ref={ref}
-      style={
-        maxWidth && typeof maxWidth == "number"
-          ? {
-            width: "100%",
-            maxWidth: maxWidth
-          }
-          : {}
-      }
-      className={clsx(
-        classes.inner,
+  return (
+    <article
+      className={clsx(classes.root, className, "active")}
+      onClick={onModalBodyClick}
+    >
+      <section
+        data-testid={`modal-container-${testId}`}
+        ref={ref}
+        style={
+          maxWidth && typeof maxWidth == "number"
+            ? {
+              width: "100%",
+              maxWidth: maxWidth
+            }
+            : {}
+        }
+        className={clsx(
+          classes.inner,
           injectedClass?.inner,
           typeof maxWidth != "number" ? maxWidth : ""
-      )}
-    >
-      {setActive && (
-        <div
-          onClick={() => handleClose()}
-          className={clsx(
-            classes.closeIcon,
-            injectedClass?.close,
-            closePosition
-          )}
-        >
-          <CloseSvg />
-        </div>
-      )}
-      {children}
-    </section>
-  </article>
+        )}
+      >
+        {closePosition !== "none" && (
+          <div
+            onClick={handleClose}
+            className={clsx(classes.closeIcon, injectedClass?.closeIcon, closePosition)}
+          >
+            <CloseSvg />
+          </div>
+        )}
+        {children}
+      </section>
+    </article>
+  )
 }
 
 export default Modal

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

@@ -43,9 +43,9 @@ export const ModalStory = (): React.ReactNode => {
       </Button>
       <Modal
         active={active}
-        setActive={setActive}
         maxWidth={select("Max width position", maxWidthOptions, "md")}
         closePosition={select("Close position", closePositionOptions, "left")}
+        onClose={() => setActive(false)}
       >
         <Typography>
           Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas,

packages/files-ui/src/App.tsx

@@ -71,7 +71,7 @@ const App = () => {
     <Modal
       active
       closePosition="none"
-      setActive={resetError}
+      onClose={resetError}
     >
       <Typography>
         An error occurred and has been logged. If you would like to

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

@@ -12,8 +12,9 @@ const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
       }
     },
     inner: {
+      backgroundColor: constants.modalDefault.backgroundColor,
+      color: constants.modalDefault.color,
       [breakpoints.down("md")]: {
-        backgroundColor: constants.modalDefault.background,
         top: "unset",
         bottom: 0,
         left: 0,
@@ -25,8 +26,10 @@ const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
         borderRadiusRightBottom: 0
       }
     },
-    close: {
-      [breakpoints.down("md")]: {}
+    closeIcon : {
+      "& svg": {
+        stroke: constants.modalDefault.closeIconColor
+      }
     }
   })
 )
@@ -49,7 +52,7 @@ const CustomModal: React.FC<ICustomModal> = ({
     <Modal
       className={clsx(classes.root, className)}
       injectedClass={{
-        close: clsx(classes.close, injectedClass?.close),
+        closeIcon: clsx(classes.closeIcon, injectedClass?.closeIcon),
         inner: clsx(classes.inner, injectedClass?.inner)
       }}
       {...rest}

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

@@ -37,7 +37,7 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) =>
         minHeight: 550
       },
       [breakpoints.down("sm")]: {
-        backgroundColor: constants?.modalDefault?.background,
+        backgroundColor: constants?.modalDefault?.backgroundColor,
         top: "unset",
         bottom: 0,
         left: 0,

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

@@ -23,12 +23,11 @@ const useStyles = makeStyles(
         alignItems: "center"
       },
       modalRoot: {
-        zIndex: zIndex?.blocker,
-        [breakpoints.down("md")]: {}
+        zIndex: zIndex?.blocker
       },
       modalInner: {
-        backgroundColor: constants.createShareModal.backgroundColor,
-        color: constants.createShareModal.color,
+        backgroundColor: constants.modalDefault.backgroundColor,
+        color: constants.modalDefault.color,
         [breakpoints.down("md")]: {
           bottom:
           Number(constants?.mobileButtonHeight) + constants.generalUnit,
@@ -54,12 +53,12 @@ const useStyles = makeStyles(
         lineHeight: "22px"
       },
       heading: {
-        color: constants.createShareModal.color,
+        color: constants.modalDefault.color,
         fontWeight: typography.fontWeight.semibold,
         marginBottom: 10
       },
       iconBacking: {
-        backgroundColor: constants.createShareModal.iconBackingColor,
+        backgroundColor: constants.modalDefault.iconBackingColor,
         width: 48,
         height: 48,
         borderRadius: 24,

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

@@ -113,12 +113,12 @@ const useStyles = makeStyles(
         }
       },
       heading: {
-        color: constants.createShareModal.color,
+        color: constants.modalDefault.color,
         fontWeight: typography.fontWeight.semibold,
         marginBottom: 10
       },
       iconBacking: {
-        backgroundColor: constants.createShareModal.iconBackingColor,
+        backgroundColor: constants.modalDefault.iconBackingColor,
         width: 48,
         height: 48,
         borderRadius: 24,

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

@@ -23,6 +23,8 @@ import { useFilesApi } from "../../../Contexts/FilesApiContext"
 import { ROUTE_LINKS } from "../../FilesRoutes"
 import SharedFolderRow from "./views/FileSystemItem/SharedFolderRow"
 import { SharedFolderModalMode } from "./types"
+import SharingExplainerModal from "../../SharingExplainerModal"
+import { useSharingExplainerModalFlag } from "./hooks/useSharingExplainerModalFlag"
 
 export const desktopSharedGridSettings = "69px 3fr 120px 190px 150px 45px !important"
 export const mobileSharedGridSettings = "3fr 80px 45px !important"
@@ -101,24 +103,25 @@ const useStyles = makeStyles(
   }
 )
 
+type SortingType = "name" | "size" | "date_uploaded"
+
 const SharedFolderOverview = () => {
   const classes = useStyles()
   const { filesApiClient } = useFilesApi()
   const { buckets, isLoadingBuckets, refreshBuckets } = useFiles()
   const [createOrEditSharedFolderMode, setCreateOrEditSharedFolderMode] = useState<SharedFolderModalMode | undefined>(undefined)
   const [bucketToEdit, setBucketToEdit] = useState<BucketKeyPermission | undefined>(undefined)
   const [direction, setDirection] = useState<SortDirection>("ascend")
-  const [column, setColumn] = useState<"name" | "size" | "date_uploaded">("name")
+  const [column, setColumn] = useState<SortingType>("name")
   const { redirect } = useHistory()
   const { desktop } = useThemeSwitcher()
   const [bucketToDelete, setBucketToDelete] = useState<BucketKeyPermission | undefined>(undefined)
   const [isDeleteBucketModalOpen, setIsDeleteBucketModalOpen] = useState(false)
   const [isDeletingSharedFolder, setIsDeletingSharedFolder] = useState(false)
   const bucketsToShow = useMemo(() => buckets.filter(b => b.type === "share" && b.status !== "deleting"), [buckets])
+  const { hasSeenSharingExplainerModal, hideModal } = useSharingExplainerModalFlag()
 
-  const handleSortToggle = (
-    targetColumn: "name" | "size" | "date_uploaded"
-  ) => {
+  const handleSortToggle = (targetColumn: SortingType) => {
     if (column !== targetColumn) {
       setColumn(targetColumn)
       setDirection("descend")
@@ -261,6 +264,10 @@ const SharedFolderOverview = () => {
           </Table>
         )}
       </article>
+      <SharingExplainerModal
+        showModal={hasSeenSharingExplainerModal}
+        onHide={hideModal}
+      />
       <CreateOrEditSharedFolderModal
         mode={createOrEditSharedFolderMode}
         isModalOpen={!!createOrEditSharedFolderMode}

packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useSharingExplainerModalFlag.tsx

@@ -0,0 +1,32 @@
+import { useLocalStorage } from "@chainsafe/browser-storage-hooks"
+import { useCallback } from "react"
+import { useEffect, useState } from "react"
+
+export const DISMISSED_SHARING_EXPLAINER_KEY = "csf.dismissedSharingExplainer"
+
+export const useSharingExplainerModalFlag = () => {
+  const { localStorageGet, localStorageSet } = useLocalStorage()
+  const [hasSeenSharingExplainerModal, setHasSeenSharingExplainerModal] = useState(false)
+  const dismissedFlag = localStorageGet(DISMISSED_SHARING_EXPLAINER_KEY)
+
+  useEffect(() => {
+    if (dismissedFlag === "false"){
+      setHasSeenSharingExplainerModal(true)
+    }
+  }, [dismissedFlag])
+
+  useEffect(() => {
+    // the dismiss flag was never set
+    if (dismissedFlag === null) {
+      localStorageSet(DISMISSED_SHARING_EXPLAINER_KEY, "false")
+      setHasSeenSharingExplainerModal(true)
+    }
+  }, [dismissedFlag, localStorageSet])
+
+  const hideModal = useCallback(() => {
+    localStorageSet(DISMISSED_SHARING_EXPLAINER_KEY, "true")
+    setHasSeenSharingExplainerModal(false)
+  }, [localStorageSet])
+
+  return { hasSeenSharingExplainerModal, hideModal }
+}

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

@@ -464,7 +464,7 @@ const FileSystemItem = ({
               }}
               closePosition="none"
               active={editing === cid}
-              setActive={() => setEditing("")}
+              onClose={() => setEditing("")}
             >
               <FormikProvider value={formik}>
                 <Form className={classes.renameModal}>