Add survey to Storage

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

@@ -47,6 +47,7 @@ import { CSSTheme } from "../../../Themes/types"
 import MimeMatcher from "../../../Utils/MimeMatcher"
 import { useLanguageContext } from "../../../Contexts/LanguageContext"
 import { useFileBrowser } from "../../../Contexts/FileBrowserContext"
+import SurveyBanner from "../SurveyBanner"
 
 interface IStyleProps {
   themeKey: string
@@ -293,7 +294,8 @@ const FilesList = () => {
     showUploadsInTable,
     allowDropUpload,
     itemOperations,
-    moduleRootPath
+    moduleRootPath,
+    withSurvey
   } = useFileBrowser()
   const classes = useStyles({ themeKey })
   const [editing, setEditing] = useState<string | undefined>()
@@ -303,6 +305,7 @@ const FilesList = () => {
   const [, setPreviewFileIndex] = useState<number | undefined>()
   const { selectedLocale } = useLanguageContext()
   const { redirect } = useHistory()
+  const [isSurveyBannerVisible, setIsSurveyBannerVisible] = useState(true)
 
   const items: FileSystemItemType[] = useMemo(() => {
     let temp = []
@@ -357,6 +360,10 @@ const FilesList = () => {
     }
   }
 
+  const onHideSurveyBanner = useCallback(() => {
+    setIsSurveyBannerVisible(false)
+  }, [setIsSurveyBannerVisible])
+
   // Selection logic
   const handleSelectCid = useCallback(
     (cid: string) => {
@@ -672,7 +679,10 @@ const FilesList = () => {
           )}
         </div>
       </header>
-      <Divider className={classes.divider} />
+      { withSurvey && isSurveyBannerVisible
+        ? <SurveyBanner onHide={onHideSurveyBanner}/>
+        : <Divider className={classes.divider} />
+      }
       <section className={classes.bulkOperations}>
         {selectedCids.length > 0 && (
           <>

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

@@ -0,0 +1,99 @@
+import { useLocalStorage } from "@chainsafe/browser-storage-hooks"
+import { CrossIcon, Typography } from "@chainsafe/common-components"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
+import { Trans } from "@lingui/macro"
+import React, { useCallback } from "react"
+import { CSSTheme } from "../../Themes/types"
+import { ROUTE_LINKS } from "../StorageRoutes"
+
+const SURVEY_VERSION = 1
+export const DISMISSED_SURVEY_KEY = `css.dismissedSurveyBannerV${SURVEY_VERSION}`
+
+const useStyles = makeStyles(
+  ({ constants, palette }: CSSTheme) => {
+    return createStyles({
+      root: {
+        backgroundColor: palette.additional["gray"][8],
+        padding: constants.generalUnit,
+        paddingLeft: constants.generalUnit * 2,
+        marginTop: constants.generalUnit,
+        borderRadius: 2,
+        display: "flex"
+      },
+      banner: {
+        color: constants.surveyBanner.color,
+        fontWeight: 600,
+        paddingRight: constants.generalUnit
+      },
+      link: {
+        marginLeft: constants.generalUnit * 2,
+        color: constants.surveyBanner.color,
+        cursor: "pointer",
+        outline: "none",
+        textDecoration: "underline"
+      },
+      crossIconButton: {
+        cursor: "pointer",
+
+        "& span": {
+          display: "flex",
+          alignContent: "center",
+          justifyContent: "center",
+          height: "100%",
+          fontSize: 12,
+          marginRight: constants.generalUnit
+        },
+        "& svg": {
+          fill: constants.surveyBanner.color
+        }
+      },
+      spacer: {
+        flex: 1
+      }
+    })
+  })
+
+interface Props {
+    onHide: () => void
+}
+
+const SurveyBanner = ({ onHide }: Props) => {
+  const classes = useStyles()
+  const { localStorageSet } = useLocalStorage()
+
+  const onClose = useCallback(() => {
+    onHide()
+    localStorageSet(DISMISSED_SURVEY_KEY, "true")
+  }, [localStorageSet, onHide])
+
+  const onOpen = useCallback(() => {
+    onClose()
+    window.open(ROUTE_LINKS.UserSurvey, "_blank")
+  }, [onClose])
+
+  return (
+    <div className={classes.root}>
+      <Typography
+        variant="body1"
+        className={classes.banner}>
+        <Trans>
+          Are we on the right track? Let us know in less than 1 minute.
+        </Trans>
+        <span
+          className={classes.link}
+          onClick={onOpen}
+        >
+          <Trans>Continue</Trans>
+        </span>
+      </Typography>
+      <div className={classes.spacer}/>
+      <div
+        className={classes.crossIconButton}
+        onClick={onClose}
+      >
+        <CrossIcon fontSize="small" />
+      </div>
+    </div>
+  )}
+
+export default SurveyBanner

packages/storage-ui/src/Components/Pages/BucketPage.tsx

@@ -11,6 +11,8 @@ import { ROUTE_LINKS } from "../../Components/StorageRoutes"
 import { useStorageApi } from "../../Contexts/StorageApiContext"
 import { FileBrowserContext } from "../../Contexts/FileBrowserContext"
 import { parseFileContentResponse } from "../../Utils/Helpers"
+import { useLocalStorage } from "@chainsafe/browser-storage-hooks"
+import { DISMISSED_SURVEY_KEY } from "../Modules/SurveyBanner"
 
 const BucketPage: React.FC<IFileBrowserModuleProps> = () => {
   const { storageBuckets, uploadFiles, uploadsInProgress } = useStorage()
@@ -19,12 +21,22 @@ const BucketPage: React.FC<IFileBrowserModuleProps> = () => {
   const [loadingCurrentPath, setLoadingCurrentPath] = useState(false)
   const [pathContents, setPathContents] = useState<FileSystemItem[]>([])
   const { redirect } = useHistory()
-
+  const { localStorageGet, localStorageSet } = useLocalStorage()
+  const showSurvey = localStorageGet(DISMISSED_SURVEY_KEY) === "false"
   const { pathname } = useLocation()
+
   const bucketId = useMemo(() =>
     pathname.split("/")[2]
   , [pathname])
 
+  useEffect(() => {
+    const dismissedFlag = localStorageGet(DISMISSED_SURVEY_KEY)
+
+    if (dismissedFlag === undefined || dismissedFlag === null) {
+      localStorageSet(DISMISSED_SURVEY_KEY, "false")
+    }
+  }, [localStorageGet, localStorageSet])
+
   const currentPath = useMemo(() => {
     return extractFileBrowserPathFromURL(pathname, ROUTE_LINKS.Bucket(bucketId, "/"))
   }, [pathname, bucketId])
@@ -206,7 +218,8 @@ const BucketPage: React.FC<IFileBrowserModuleProps> = () => {
       heading: bucket?.name,
       controls: true,
       allowDropUpload: true,
-      itemOperations
+      itemOperations,
+      withSurvey: showSurvey
     }}>
       <DragAndDrop>
         <FilesList />

packages/storage-ui/src/Components/StorageRoutes.tsx

@@ -16,7 +16,7 @@ export const ROUTE_LINKS = {
   Buckets: "/buckets",
   SettingsRoot: "/settings",
   Settings: (path: SettingsPath) => `/settings/${path}`,
-
+  UserSurvey: "https://blocksurvey.io/share/1541a8c4-275a-4e22-9547-570e94c5a55f",
   PrivacyPolicy: "https://files.chainsafe.io/privacy-policy",
   Terms: "https://files.chainsafe.io/terms-of-service",
   ChainSafe: "https://chainsafe.io/",

packages/storage-ui/src/locales/en/messages.po

@@ -31,6 +31,9 @@ msgstr "Add more files"
 msgid "Api Keys"
 msgstr "Api Keys"
 
+msgid "Are we on the right track? Let us know in less than 1 minute."
+msgstr "Are we on the right track? Let us know in less than 1 minute."
+
 msgid "Bucket Name"
 msgstr "Bucket Name"