Refactor shared folder creation (#1953)

* see how tests break

* lingui extract

* fix creation

* fix links

* remove only

* Update createSharedFolderModal.ts

* Update sharedPage.ts

* Update file-sharing-spec.ts

* lingui extract

Co-authored-by: GitHub Actions <actions@github.com>
Co-authored-by: Andrew Snaith <asnaith@users.noreply.github.com>
Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com>

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

@@ -1,20 +1,6 @@
-export const createEditSharedFolderModal = {
-  body: () => cy.get("[data-testid=modal-container-create-or-edit-shared-folder]", { timeout: 10000 }),
+export const createSharedFolderModal = {
+  body: () => cy.get("[data-testid=modal-container-create-shared-folder]", { timeout: 10000 }),
   cancelButton: () => cy.get("[data-cy=button-cancel-create-shared-folder]"),
   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]"),
-  updateButton: () => cy.get("[data-cy=button-update-shared-folder]", { timeout: 10000 }),
-  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]"),
-  linkPermissionDropdown: () => cy.get("[data-testid=dropdown-title-link-permission]"),
-  viewOnlyDropdownOption: () => cy.get("[data-testid=dropdown-link-permission-read]"),
-  canEditDropdownOption: () => cy.get("[data-testid=dropdown-link-permission-write]"),
-  createLinkButton: () => cy.get("[data-cy=button-create-link]")
+  folderNameInput: () => cy.get("[data-cy=input-shared-folder-name]")
 }

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

@@ -0,0 +1,20 @@
+export const editSharedFolderModal = {
+  body: () => cy.get("[data-testid=modal-container-edit-shared-folder]", { timeout: 10000 }),
+  cancelButton: () => cy.get("[data-cy=button-cancel-create-shared-folder]"),
+  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]"),
+  updateButton: () => cy.get("[data-cy=button-update-shared-folder]", { timeout: 10000 }),
+  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]"),
+  linkPermissionDropdown: () => cy.get("[data-testid=dropdown-title-link-permission]"),
+  viewOnlyDropdownOption: () => cy.get("[data-testid=dropdown-link-permission-read]"),
+  canEditDropdownOption: () => cy.get("[data-testid=dropdown-link-permission-write]"),
+  createLinkButton: () => cy.get("[data-cy=button-create-link]")
+}

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

@@ -1,7 +1,8 @@
 import { sharedFolderName } from "../../fixtures/filesTestData"
 import { basePage } from "./basePage"
 import { fileBrowser } from "./fileBrowser"
-import { createEditSharedFolderModal } from "./modals/createSharedFolderModal"
+import { createSharedFolderModal } from "./modals/createSharedFolderModal"
+import { editSharedFolderModal } from "./modals/editSharedFolderModal"
 
 export const sharedPage = {
   ...basePage,
@@ -22,10 +23,11 @@ export const sharedPage = {
   // helpers and convenience functions
   createSharedFolder() {
     sharedPage.createSharedFolderButton().click()
-    createEditSharedFolderModal.body().should("be.visible")
-    createEditSharedFolderModal.folderNameInput().type(sharedFolderName)
-    createEditSharedFolderModal.createButton().safeClick()
-    createEditSharedFolderModal.body().should("not.exist")
+    createSharedFolderModal.body().should("be.visible")
+    createSharedFolderModal.folderNameInput().type(sharedFolderName)
+    createSharedFolderModal.createButton().safeClick()
+    editSharedFolderModal.cancelButton().safeClick()
+    editSharedFolderModal.body().should("not.exist")
     sharedPage.sharedFolderItemRow().should("have.length", 1)
   }
 }

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

@@ -1,4 +1,4 @@
-import { createEditSharedFolderModal } from "../support/page-objects/modals/createSharedFolderModal"
+import { createSharedFolderModal } from "../support/page-objects/modals/createSharedFolderModal"
 import { deleteSharedFolderModal } from "../support/page-objects/modals/deleteSharedFolderModal"
 import { fileUploadModal } from "../support/page-objects/modals/fileUploadModal"
 import { navigationMenu } from "../support/page-objects/navigationMenu"
@@ -8,6 +8,7 @@ import { uploadCompleteToast } from "../support/page-objects/toasts/uploadComple
 import { viewOnlyShareLink } from "../fixtures/linkData"
 import { leaveSharedFolderModal } from "../support/page-objects/modals/leaveSharedFolderModal"
 import { linkSharingConfirmation } from "../support/page-objects/linkSharingConfirmation"
+import { editSharedFolderModal } from "../support/page-objects/modals/editSharedFolderModal"
 
 describe("File Sharing", () => {
 
@@ -24,12 +25,13 @@ describe("File Sharing", () => {
       // create a shared folder
       navigationMenu.sharedNavButton().click()
       sharedPage.createSharedFolderButton().click()
-      createEditSharedFolderModal.body().should("be.visible")
-      createEditSharedFolderModal.folderNameInput().type(sharedFolderName)
-      createEditSharedFolderModal.editPermissionInput().type(validUsername)
-      createEditSharedFolderModal.userLookupResult().should("exist").click()
-      createEditSharedFolderModal.createButton().safeClick()
-      createEditSharedFolderModal.body().should("not.exist")
+      createSharedFolderModal.body().should("be.visible")
+      createSharedFolderModal.folderNameInput().type(sharedFolderName)
+      createSharedFolderModal.createButton().safeClick()
+      editSharedFolderModal.editPermissionInput().type(validUsername)
+      editSharedFolderModal.userLookupResult().should("exist").click()
+      editSharedFolderModal.updateButton().safeClick()
+      editSharedFolderModal.body().should("not.exist")
       sharedPage.sharedFolderItemRow().should("have.length", 1)
 
       // upload to a shared folder

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

@@ -1,4 +1,4 @@
-import { createEditSharedFolderModal } from "../support/page-objects/modals/createSharedFolderModal"
+import { editSharedFolderModal } from "../support/page-objects/modals/editSharedFolderModal"
 import { navigationMenu } from "../support/page-objects/navigationMenu"
 import { sharingExplainerKey } from "../fixtures/filesTestData"
 import { sharedPage } from "../support/page-objects/sharedPage"
@@ -26,56 +26,56 @@ describe("Link Sharing", () => {
         .should("be.visible")
         .click()
       sharedPage.manageAccessMenuOption().click()
-      createEditSharedFolderModal.body().should("be.visible")
+      editSharedFolderModal.body().should("be.visible")
 
       // ensure default state of displayed elements is correct
-      createEditSharedFolderModal.activeShareLink().should("not.exist")
-      createEditSharedFolderModal.labelPermissionType().should("not.exist")
-      createEditSharedFolderModal.copyLinkButton().should("not.exist")
-      createEditSharedFolderModal.linkKebabMenu().should("not.exist")
-      createEditSharedFolderModal.linkPermissionDropdown().should("be.visible")
-      createEditSharedFolderModal.createLinkButton().should("be.visible")
+      editSharedFolderModal.activeShareLink().should("not.exist")
+      editSharedFolderModal.labelPermissionType().should("not.exist")
+      editSharedFolderModal.copyLinkButton().should("not.exist")
+      editSharedFolderModal.linkKebabMenu().should("not.exist")
+      editSharedFolderModal.linkPermissionDropdown().should("be.visible")
+      editSharedFolderModal.createLinkButton().should("be.visible")
 
       // ensure "view-only" and "can-edit" options are present
-      createEditSharedFolderModal.linkPermissionDropdown().click()
-      createEditSharedFolderModal.viewOnlyDropdownOption()
+      editSharedFolderModal.linkPermissionDropdown().click()
+      editSharedFolderModal.viewOnlyDropdownOption()
         .scrollIntoView()
         .should("be.visible")
-      createEditSharedFolderModal.canEditDropdownOption()
+      editSharedFolderModal.canEditDropdownOption()
         .scrollIntoView()
         .should("be.visible")
 
       // create a "view-only" link
-      createEditSharedFolderModal.viewOnlyDropdownOption().click()
-      createEditSharedFolderModal.createLinkButton().click()
-      createEditSharedFolderModal.activeShareLink().should("have.length", 1)
-      createEditSharedFolderModal.labelPermissionType().should("have.length", 1)
-      createEditSharedFolderModal.copyLinkButton().should("have.length", 1)
+      editSharedFolderModal.viewOnlyDropdownOption().click()
+      editSharedFolderModal.createLinkButton().click()
+      editSharedFolderModal.activeShareLink().should("have.length", 1)
+      editSharedFolderModal.labelPermissionType().should("have.length", 1)
+      editSharedFolderModal.copyLinkButton().should("have.length", 1)
 
       // ensure only the can-edit option is present if a "view-only" link exists
-      createEditSharedFolderModal.linkPermissionDropdown().click()
-      createEditSharedFolderModal.viewOnlyDropdownOption().should("not.exist")
-      createEditSharedFolderModal.canEditDropdownOption()
+      editSharedFolderModal.linkPermissionDropdown().click()
+      editSharedFolderModal.viewOnlyDropdownOption().should("not.exist")
+      editSharedFolderModal.canEditDropdownOption()
         .scrollIntoView()
         .should("be.visible")
 
       // create a "can-edit" link
-      createEditSharedFolderModal.canEditDropdownOption().click()
-      createEditSharedFolderModal.createLinkButton().click()
-      createEditSharedFolderModal.activeShareLink().should("have.length", 2)
-      createEditSharedFolderModal.labelPermissionType().should("have.length", 2)
-      createEditSharedFolderModal.copyLinkButton().should("have.length", 2)
+      editSharedFolderModal.canEditDropdownOption().click()
+      editSharedFolderModal.createLinkButton().click()
+      editSharedFolderModal.activeShareLink().should("have.length", 2)
+      editSharedFolderModal.labelPermissionType().should("have.length", 2)
+      editSharedFolderModal.copyLinkButton().should("have.length", 2)
 
       // ensure create button and drop down are not shown if links exist
-      createEditSharedFolderModal.linkPermissionDropdown().should("not.exist")
-      createEditSharedFolderModal.createLinkButton().should("not.exist")
+      editSharedFolderModal.linkPermissionDropdown().should("not.exist")
+      editSharedFolderModal.createLinkButton().should("not.exist")
 
       // delete one of the links
-      createEditSharedFolderModal.linkKebabMenu().first().click()
-      createEditSharedFolderModal.deleteLinkMenuOption().first()
+      editSharedFolderModal.linkKebabMenu().first().click()
+      editSharedFolderModal.deleteLinkMenuOption().first()
         .scrollIntoView()
         .click()
-      createEditSharedFolderModal.activeShareLink().should("have.length", 1)
+      editSharedFolderModal.activeShareLink().should("have.length", 1)
     })
 
     it("can join a share from link with view-only access", () => {