Merge pull request #1657 from ChainSafe/dev

Release to production

packages/common-components/src/Router/ConditionalRoute.tsx

@@ -21,7 +21,7 @@ const ConditionalRoute: React.FC<IConditionalRouteProps> = ({
   exact,
   ...rest
 }) => {
-  const { state, pathname } = useLocation<{from?: string} | undefined>()
+  const { state, pathname, hash } = useLocation<{from?: string} | undefined>()
   const from = (state as any)?.from
 
   return <Route
@@ -34,7 +34,8 @@ const ConditionalRoute: React.FC<IConditionalRouteProps> = ({
           ? <Redirect
             to={{
               pathname: redirectToSource && from ? from : redirectPath,
-              state: { from: pathname }
+              state: { from: pathname },
+              hash
             }}
           />
           // this may be converted into loading

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/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/tests/file-preview-spec.ts

@@ -73,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

@@ -31,6 +31,9 @@
     "ethers": "^5.4.3",
     "fflate": "^0.7.1",
     "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",
@@ -61,6 +64,7 @@
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
     "@types/jest": "^26.0.16",
+    "@types/jsrsasign": "^8.0.13",
     "@types/node": "^14.14.10",
     "@types/react": "^17.0.0",
     "@types/react-beforeunload": "^2.1.0",
@@ -77,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/FilesRoutes.tsx

@@ -10,8 +10,12 @@ import PurchasePlanPage from "./Pages/PurchasePlanPage"
 import { useThresholdKey } from "../Contexts/ThresholdKeyContext"
 import ShareFilesPage from "./Pages/SharedFilesPage"
 import SharedFoldersOverview from "./Modules/FileBrowsers/SharedFoldersOverview"
+import { NonceResponsePermission } from "@chainsafe/files-api-client"
+import LinkSharingLanding from "./Pages/LinkSharingLanding"
 
 export const SETTINGS_BASE = "/settings"
+export const LINK_SHARING_BASE = "/link-sharing"
+
 export const ROUTE_LINKS = {
   Landing: "/",
   PrivacyPolicy: "https://files.chainsafe.io/privacy-policy",
@@ -27,6 +31,8 @@ export const ROUTE_LINKS = {
   UserSurvey: "https://calendly.com/colinschwarz/chainsafe-files-chat",
   SharedFolders: "/shared-overview",
   SharedFolderBrowserRoot: "/shared",
+  SharingLink: (permission: NonceResponsePermission, jwt: string, bucketEncryptionKey: string) =>
+    `${LINK_SHARING_BASE}/${permissionPath(permission)}/${encodeURIComponent(jwt)}#${encodeURIComponent(bucketEncryptionKey)}`,
   SharedFolderExplorer: (bucketId: string, rawCurrentPath: string) => {
     // bucketId should not have a / at the end
     // rawCurrentPath can be empty, or /
@@ -37,6 +43,7 @@ export const ROUTE_LINKS = {
   TeamSignup: "https://shrl.ink/cgQy"
 }
 
+export const permissionPath = (permission: NonceResponsePermission) => permission === "read" ? "read" : "edit"
 export const SETTINGS_PATHS = ["profile", "plan", "security"] as const
 export type SettingsPath = typeof SETTINGS_PATHS[number]
 
@@ -48,6 +55,12 @@ const FilesRoutes = () => {
     [isLoggedIn, isNewDevice, publicKey, secured, shouldInitializeAccount])
   return (
     <Switch>
+      <ConditionalRoute
+        path={LINK_SHARING_BASE}
+        isAuthorized={isAuthorized}
+        component={LinkSharingLanding}
+        redirectPath={ROUTE_LINKS.Landing}
+      />
       <ConditionalRoute
         exact
         path={ROUTE_LINKS.SharedFolders}
@@ -101,7 +114,7 @@ const FilesRoutes = () => {
         redirectPath={ROUTE_LINKS.Landing}
       />
       <ConditionalRoute
-        path='/'
+        path={ROUTE_LINKS.Landing}
         isAuthorized={!isAuthorized}
         component={LoginPage}
         redirectPath={ROUTE_LINKS.Drive("/")}

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

@@ -12,6 +12,8 @@ import { useCreateOrEditSharedFolder } from "./hooks/useCreateOrEditSharedFolder
 import { useLookupSharedFolderUser } from "./hooks/useLookupUser"
 import { nameValidator } from "../../../Utils/validationSchema"
 import { getUserDisplayName } from "../../../Utils/getUserDisplayName"
+import LinkList from "./LinkSharing/LinkList"
+import clsx from "clsx"
 
 const useStyles = makeStyles(
   ({ breakpoints, constants, typography, zIndex, palette }: CSFTheme) => {
@@ -102,6 +104,9 @@ const useStyles = makeStyles(
       errorText: {
         marginLeft: constants.generalUnit * 1.5,
         color: palette.error.main
+      },
+      sharingLink: {
+        padding: constants.generalUnit * 1.25
       }
     })
   }
@@ -275,6 +280,17 @@ const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdi
             noOptionsMessage={t`No user found for this query.`}
           />
         </div>
+        {mode === "edit" && !!bucketToEdit && (
+          <div className={clsx(classes.modalFlexItem, classes.sharingLink)}>
+            <Typography className={classes.inputLabel}>
+              <Trans>Sharing link</Trans>
+            </Typography>
+            <LinkList
+              bucketEncryptionKey={bucketToEdit.encryptionKey}
+              bucketId={bucketToEdit.id}
+            />
+          </div>
+        )}
         <Grid
           item
           flexDirection="row"