New sharing design

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

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

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

@@ -56,6 +56,7 @@ export { default as MastercardCardIcon, MastercardCardSvg } from "./icons/Master
 export { default as MoonIcon, MoonSvg } from "./icons/Moon.icon"
 export { default as MoonStarIcon, MoonStarSvg } from "./icons/MoonStar.icon"
 export { default as MoreIcon, MoreSvg } from "./icons/More.icon"
+export { default as LinkIcon, LinkSvg } from "./icons/Link.icon"
 export { default as LockIcon, LockSvg } from "./icons/Lock.icon"
 export { default as KeyIcon, KeySvg } from "./icons/Key.icon"
 export { default as PaperclipIcon, PaperclipSvg } from "./icons/Paperclip.icon"

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

@@ -1,4 +1,4 @@
 export const testPrivateKey = "0x4fd9a44c051834e28a919096f154e3f805f58d8f2d90a1ab9a29b0b46a6ac363"
 export const testAddress = "0xDa1f70D176E0F7F16f2a3bB509cD37Bd36aFD902"
 export const testAccountPassword = "correct horse"
-export const localHost = "http://localhost:3000"
+export const localHost = "https://files-ui-stage-pr-1927.onrender.com"

packages/files-ui/cypress/support/page-objects/modals/createSharedFolderModal.ts

@@ -4,19 +4,16 @@ export const createEditSharedFolderModal = {
   createButton: () => cy.get("[data-cy=button-create-shared-folder]", { timeout: 10000 }),
   editPermissionInput: () => cy.get("[data-cy=input-edit-permission]"),
   folderNameInput: () => cy.get("[data-cy=input-shared-folder-name]"),
-  tagViewPermissionUser: () => cy.get("[data-cy=tag-view-permission-user]"),
-  tagEditPermissionUser: () => cy.get("[data-cy=tag-edit-permission-user]"),
   updateButton: () => cy.get("[data-cy=button-update-shared-folder]", { timeout: 10000 }),
-  viewOnlyPermissionInput: () => cy.get("[data-cy=input-view-permission"),
-
+  userLookupResult: () => cy.get("[data-cy=user-lookup-result]", { timeout: 10000 }),
   // link sharing related elements
   shareLink: () => cy.get("[data-cy=link-share]"),
   activeShareLink: () => cy.get("[data-cy=link-active-share]"),
   labelPermissionType: () => cy.get("[data-cy=label-permission-type]"),
   copyLinkButton: () => cy.get("[data-cy=button-copy-link]"),
   linkKebabMenu: () => cy.get("[data-testid=icon-link-kebab]"),
   deleteLinkMenuOption: () => cy.get("[data-cy=menu-delete-active-link]"),
-  permissionTypeDropdown: () => cy.get("[data-testid=dropdown-title-permission]"),
+  linkPermissionDropdown: () => cy.get("[data-testid=dropdown-title-link-permission-dropdown]"),
   viewOnlyDropdownOption: () => cy.get("[data-cy=menu-read]"),
   canEditDropdownOption: () => cy.get("[data-cy=menu-write]"),
   createLinkButton: () => cy.get("[data-cy=button-create-link]")

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

@@ -26,7 +26,8 @@ describe("File Sharing", () => {
       sharedPage.createSharedFolderButton().click()
       createEditSharedFolderModal.body().should("be.visible")
       createEditSharedFolderModal.folderNameInput().type(sharedFolderName)
-      createEditSharedFolderModal.editPermissionInput().type(validUsername).type("{enter}")
+      createEditSharedFolderModal.editPermissionInput().type(validUsername)
+      createEditSharedFolderModal.userLookupResult().should("exist").click()
       createEditSharedFolderModal.createButton().safeClick()
       createEditSharedFolderModal.body().should("not.exist")
       sharedPage.sharedFolderItemRow().should("have.length", 1)

packages/files-ui/cypress/tests/link-sharing-spec.ts

@@ -33,11 +33,11 @@ describe("Link Sharing", () => {
       createEditSharedFolderModal.labelPermissionType().should("not.exist")
       createEditSharedFolderModal.copyLinkButton().should("not.exist")
       createEditSharedFolderModal.linkKebabMenu().should("not.exist")
-      createEditSharedFolderModal.permissionTypeDropdown().should("be.visible")
+      createEditSharedFolderModal.linkPermissionDropdown().should("be.visible")
       createEditSharedFolderModal.createLinkButton().should("be.visible")
 
       // ensure "view-only" and "can-edit" options are present
-      createEditSharedFolderModal.permissionTypeDropdown().click()
+      createEditSharedFolderModal.linkPermissionDropdown().click()
       createEditSharedFolderModal.viewOnlyDropdownOption()
         .scrollIntoView()
         .should("be.visible")
@@ -53,7 +53,7 @@ describe("Link Sharing", () => {
       createEditSharedFolderModal.copyLinkButton().should("have.length", 1)
 
       // ensure only the can-edit option is present if a "view-only" link exists
-      createEditSharedFolderModal.permissionTypeDropdown().click()
+      createEditSharedFolderModal.linkPermissionDropdown().click()
       createEditSharedFolderModal.viewOnlyDropdownOption().should("not.exist")
       createEditSharedFolderModal.canEditDropdownOption()
         .scrollIntoView()
@@ -67,7 +67,7 @@ describe("Link Sharing", () => {
       createEditSharedFolderModal.copyLinkButton().should("have.length", 2)
 
       // ensure create button and drop down are not shown if links exist
-      createEditSharedFolderModal.permissionTypeDropdown().should("not.exist")
+      createEditSharedFolderModal.linkPermissionDropdown().should("not.exist")
       createEditSharedFolderModal.createLinkButton().should("not.exist")
 
       // delete one of the links