Merge dev to epic/lin-sharing

packages/files-ui/cypress/fixtures/filesTestData.ts

@@ -1,2 +1,3 @@
 export const folderName = "Group"
-export const folderPath = `/${folderName}`
+export const folderPath = `/${folderName}`
+export const profileCreatedDate = "2021-05-20T21:26:36.598924Z"

packages/files-ui/cypress/support/index.ts

@@ -28,5 +28,19 @@ Cypress.on("uncaught:exception", (err) => {
   }
 })
 
+// Hide fetch/XHR requests
+// interim solution until cypress adds configuration support
+// source https://gist.github.com/simenbrekken/3d2248f9e50c1143bf9dbe02e67f5399
+const app = window.top
+
+if(app != null && !app.document.head.querySelector("[data-hide-command-log-request]")) {
+  const style = app.document.createElement("style")
+  style.innerHTML =
+    ".command-name-request, .command-name-xhr { display: none }"
+  style.setAttribute("data-hide-command-log-request", "")
+
+  app.document.head.appendChild(style)
+}
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

packages/files-ui/cypress/support/page-objects/homePage.ts

@@ -8,6 +8,8 @@ export const homePage = {
   ...fileBrowser,
 
   // home page specific file browser elements
+  closeBannerButton: () => cy.get("[data-cy=button-close-banner"),
+  surveyBanner: () => cy.get("[data-cy=banner-survey]"),
   newFolderButton: () => cy.get("[data-cy=button-new-folder]"),
   uploadButton: () => cy.get("[data-cy=button-upload-file]"),
   moveSelectedButton: () => cy.get("[data-testId=button-move-selected-file]"),

packages/files-ui/cypress/support/page-objects/toasts/recoverSuccessToast.ts

@@ -0,0 +1,4 @@
+export const recoverSuccessToast = {
+  body: () => cy.get("[data-testId=toast-recover-success]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-recover-success]")
+}

packages/files-ui/cypress/tests/file-management-spec.ts

@@ -11,6 +11,7 @@ import { moveItemModal } from "../support/page-objects/modals/moveItemModal"
 import { recoverItemModal } from "../support/page-objects/modals/recoverItemModal"
 import { deleteSuccessToast } from "../support/page-objects/toasts/deleteSuccessToast"
 import { moveSuccessToast } from "../support/page-objects/toasts/moveSuccessToast"
+import { recoverSuccessToast } from "../support/page-objects/toasts/recoverSuccessToast"
 import { uploadCompleteToast } from "../support/page-objects/toasts/uploadCompleteToast"
 
 describe("File management", () => {
@@ -89,12 +90,16 @@ describe("File management", () => {
 
         // ensure the home root now has the folder and file
         navigationMenu.homeNavButton().click()
-        homePage.fileItemRow().should("have.length", 2)
+        homePage.fileItemRow()
+          .should("be.visible")
+          .should("have.length", 2)
         homePage.fileItemName().should("contain.text", folderName)
         homePage.fileItemName().should("contain.text", $fileName)
 
-        // ensure folder already in the root cannot be moved to Home
-        homePage.fileItemName().contains(`${$fileName}`).click()
+        // ensure file already in the root cannot be moved to Home
+        homePage.fileItemName().contains(`${$fileName}`)
+          .should("be.visible")
+          .click()
         homePage.moveSelectedButton().click()
         moveItemModal.folderList().contains("Home").click()
         moveItemModal.errorLabel().should("be.visible")
@@ -112,8 +117,10 @@ describe("File management", () => {
       // select a parent folder and initiate move action
       homePage.fileItemName().contains("Parent").click()
       homePage.moveSelectedButton().click()
+      moveItemModal.body().should("be.visible")
 
       // ensure folder already in the root cannot be moved to Home
+      moveItemModal.folderList().should("be.visible")
       moveItemModal.folderList().contains("Home").click()
       moveItemModal.body().should("be.visible")
       moveItemModal.errorLabel().should("be.visible")
@@ -259,6 +266,8 @@ describe("File management", () => {
       recoverItemModal.folderList().contains("Home").click()
       recoverItemModal.recoverButton().safeClick()
       binPage.fileItemRow().should("not.exist")
+      recoverSuccessToast.body().should("be.visible")
+      recoverSuccessToast.closeButton().click()
 
       // ensure recovered file is correct
       navigationMenu.homeNavButton().click()

packages/files-ui/cypress/tests/file-preview-spec.ts

@@ -11,6 +11,7 @@ describe("File Preview", () => {
       // add files
       homePage.uploadFile("../fixtures/uploadedFiles/logo.png")
       homePage.uploadFile("../fixtures/uploadedFiles/text-file.txt")
+      homePage.fileItemRow().should("have.length", 2)
 
       // store their file names as cypress aliases for later comparison
       homePage.fileItemName().eq(0).invoke("text").as("fileNameA")
@@ -72,13 +73,22 @@ describe("File Preview", () => {
         homePage.fileItemName().dblclick()
         previewModal.unsupportedFileLabel().should("exist")
         previewModal.downloadUnsupportedFileButton().should("be.visible")
+        // ensure that the file download does not start until the download button is clicked
+        cy.get("@downloadRequest").then(($request) => {
+          // retrieving the alias (spy) should yield null because posts should not have been made yet
+          expect($request).to.be.null
+        })
+
+        // begin the file download 
+        previewModal.downloadUnsupportedFileButton().click()
+
         // ensure the download request contains the correct file
-        cy.get("@downloadRequest").its("request.body").should("contain", {
+        cy.wait("@downloadRequest").its("request.body").should("contain", {
           path: "/file.zip"
         })
       })
 
-      // return to the home and ensure preview menu option is not shown for unsupported file
+      // return to home, ensure the preview menu option is not shown for an unsupported file
       previewModal.closeButton().click()
       homePage.fileItemKebabButton().click()
       homePage.previewMenuOption().should("not.exist")

packages/files-ui/cypress/tests/survey-banner-spec.ts

@@ -0,0 +1,72 @@
+import { profileCreatedDate } from "../fixtures/filesTestData"
+import { homePage } from "../support/page-objects/homePage"
+
+describe("Survey Banner", () => {
+
+  context("desktop", () => {
+
+    it("User can view and dismiss the survey banner", () => {
+      // intercept and stub the account creation date to be > 7 days
+      cy.intercept("GET", "https://stage.imploy.site/api/v1/user/profile", (req) => {
+        req.on("response", (res) => {
+          res.body.created_at = profileCreatedDate 
+        })
+      })
+
+      // intercept and stub the response to ensure the banner is displayed
+      cy.intercept("GET", "https://stage.imploy.site/api/v1/user/store", {
+        body: [{ "csf.dismissedSurveyBannerV3": "false" }]
+      })
+
+      cy.web3Login()
+      homePage.surveyBanner().should("be.visible")
+
+      // set up a spy for the POST response
+      cy.intercept("POST", "https://stage.imploy.site/api/v1/user/store").as("storePost").then(() => {
+
+        // dismiss the survey banner
+        homePage.closeBannerButton().click()
+        homePage.surveyBanner().should("not.exist")
+
+        // intercept POST to ensure the key was updated after the banner is dismissed
+        cy.wait("@storePost").its("request.body").should("contain", {
+          "csf.dismissedSurveyBannerV3": "true"
+        })
+      })
+    })
+
+    it("User should not see the survey banner if previously dismissed", () => {
+      cy.intercept("GET", "https://stage.imploy.site/api/v1/user/store", {
+        body: [{ "csf.dismissedSurveyBannerV3": "true" }]
+      })
+
+      cy.web3Login()
+      homePage.surveyBanner().should("not.exist")
+    })
+
+    it("User should see banner if account age is greater than 7 days and api response is empty", () => {
+      cy.intercept("GET", "https://stage.imploy.site/api/v1/user/store", {
+        body: [{}]
+      })
+
+      cy.web3Login()
+      homePage.surveyBanner().should("be.visible")
+    })
+
+    it("User should not see banner if account age is less than 7 days and api response is empty", () => {
+      // intercept and stub the account creation date to make it less than 7 days
+      cy.intercept("GET", "https://stage.imploy.site/api/v1/user/profile", (req) => {
+        req.on("response", (res) => {
+          res.body.created_at = res.body.updated_at
+        })
+      })
+
+      cy.intercept("GET", "https://stage.imploy.site/api/v1/user/store", {
+        body: [{}]
+      })
+
+      cy.web3Login()
+      homePage.surveyBanner().should("not.exist")
+    })
+  })
+})

packages/files-ui/package.json

@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "^1.18.14",
+    "@chainsafe/files-api-client": "1.18.15",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",
@@ -33,6 +33,7 @@
     "formik": "^2.2.5",
     "jsrsasign": "^10.4.1",
     "key-encoder": "^2.0.3",
+    "heic-convert": "^1.2.4",
     "mime-matcher": "^1.0.5",
     "posthog-js": "^1.13.10",
     "react": "^16.14.0",
@@ -80,7 +81,7 @@
   "scripts": {
     "postinstall": "yarn compile",
     "start": "yarn compile && craco --max_old_space_size=4096 start",
-    "build": "craco --max_old_space_size=4096 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/Components/Modules/FileBrowsers/BinFileBrowser.tsx

@@ -93,7 +93,8 @@ const BinFileBrowser: React.FC<IFileBrowserModuleProps> = ({ controls = false }:
     ).then(() => {
       addToast({
         title: t`Data restored successfully`,
-        type: "success"
+        type: "success",
+        testId: "recover-success"
       })
     }).catch((error) => {
       console.error("Error recovering:", error)

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

@@ -34,6 +34,8 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
   const { pathname } = useLocation()
   const currentPath = useMemo(() => extractFileBrowserPathFromURL(pathname, ROUTE_LINKS.Drive("")), [pathname])
   const bucket = useMemo(() => buckets.find(b => b.type === "csf"), [buckets])
+  const { profile, localStore } = useUser()
+  const [showSurvey, setShowSurvey] = useState(false)
 
   const refreshContents = useCallback((showLoading?: boolean) => {
     if (!bucket) return
@@ -50,10 +52,6 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
       }).finally(() => showLoading && setLoadingCurrentPath(false))
   }, [bucket, filesApiClient, currentPath])
 
-  const { profile, localStore, setLocalStore } = useUser()
-
-  const showSurvey = localStore && localStore[DISMISSED_SURVEY_KEY] === "false"
-
   const olderThanOneWeek = useMemo(
     () => profile?.createdAt
       ? dayjs(Date.now()).diff(profile.createdAt, "day") > 7
@@ -62,11 +60,14 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
   )
 
   useEffect(() => {
-    const dismissedFlag = localStore && localStore[DISMISSED_SURVEY_KEY]
-    if (dismissedFlag === undefined || dismissedFlag === null) {
-      setLocalStore({ [DISMISSED_SURVEY_KEY]: "false" }, "update")
+    if (!localStore) {
+      return
+    }
+
+    if (localStore[DISMISSED_SURVEY_KEY] === "false"){
+      setShowSurvey(true)
     }
-  }, [localStore, setLocalStore])
+  }, [localStore])
 
   useEffect(() => {
     refreshContents(true)

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

@@ -99,12 +99,12 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => {
         setCreatingFolder(false)
         helpers.resetForm()
         onCancel()
-      } catch (errors: any) {
+      } catch (error: any) {
         setCreatingFolder(false)
-        if (errors[0].message.includes("Entry with such name can")) {
+        if (error?.error?.code === 409) {
           helpers.setFieldError("name", t`Folder name is already in use`)
         } else {
-          helpers.setFieldError("name", errors[0].message)
+          helpers.setFieldError("name", t`There was an error creating the folder ${error?.message}`)
         }
         helpers.setSubmitting(false)
       }

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

@@ -84,7 +84,7 @@ const SearchFileBrowser: React.FC<IFileBrowserModuleProps> = ({ controls = false
   const getPath = useCallback((cid: string): string => {
     const searchEntry = getSearchEntry(cid)
     // Set like this as look ups should always be using available cids
-    return searchEntry ? searchEntry.path : ""
+    return searchEntry ? searchEntry.path.replace(searchEntry.content.name, "") : ""
   }, [getSearchEntry])
 
   const pathContents: FileSystemItem[] = useMemo(() =>

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

@@ -268,7 +268,7 @@ const SharedFolderOverview = () => {
         )}
       </article>
       <SharingExplainerModal
-        showModal={hasSeenSharingExplainerModal}
+        showModal={!hasSeenSharingExplainerModal}
         onHide={hideModal}
       />
       <CreateOrEditSharedFolderModal

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

@@ -102,12 +102,8 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
       })
       refreshContents && refreshContents()
       helpers.resetForm()
-    } catch (errors: any) {
-      if (errors[0].message.includes("conflict with existing")) {
-        helpers.setFieldError("files", "File/Folder exists")
-      } else {
-        helpers.setFieldError("files", errors[0].message)
-      }
+    } catch (error: any) {
+      console.error(error)
     }
     helpers.setSubmitting(false)
   }, [close, currentPath, uploadFiles, refreshContents, bucket])

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

@@ -40,7 +40,6 @@ export const useGetFile = () => {
     setError("")
 
     try {
-
       const content = await getFileContent(
         id,
         {
@@ -69,8 +68,6 @@ export const useGetFile = () => {
         setError(t`There was an error getting the preview.`)
       }
     }
-
-
   }, [bucket, getFileContent])
 
   return { getFile, isDownloading, error, downloadProgress }

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

@@ -6,22 +6,20 @@ export const DISMISSED_SHARING_EXPLAINER_KEY = "csf.dismissedSharingExplainer"
 
 export const useSharingExplainerModalFlag = () => {
   const { localStore, setLocalStore } = useUser()
-  const [hasSeenSharingExplainerModal, setHasSeenSharingExplainerModal] = useState(false)
-  const dismissedFlag = localStore ? localStore[DISMISSED_SHARING_EXPLAINER_KEY] : null
-
+  const [hasSeenSharingExplainerModal, setHasSeenSharingExplainerModal] = useState(true)
   useEffect(() => {
-    if (dismissedFlag === "false"){
-      setHasSeenSharingExplainerModal(true)
-    } else if (dismissedFlag === null) {
-      // the dismiss flag was never set
-      setLocalStore({ [DISMISSED_SHARING_EXPLAINER_KEY]: "false" }, "update")
-      setHasSeenSharingExplainerModal(true)
+    if (!localStore) {
+      return
+    }
+
+    if (localStore[DISMISSED_SHARING_EXPLAINER_KEY] === "false"){
+      setHasSeenSharingExplainerModal(false)
     }
-  }, [dismissedFlag, setLocalStore])
+  }, [localStore, setLocalStore])
 
   const hideModal = useCallback(() => {
     setLocalStore({ [DISMISSED_SHARING_EXPLAINER_KEY]: "true" }, "update")
-    setHasSeenSharingExplainerModal(false)
+    setHasSeenSharingExplainerModal(true)
   }, [setLocalStore])
 
   return { hasSeenSharingExplainerModal, hideModal }