Skip to content

Commit efa1152

Browse files
thaorellthaorell
authored
feat: Implement Create New Volume Modal (#960)
* feat: Add volume create modal and MountPathCell Signed-off-by: Charles Thao <cthao@redhat.com> * Refactor ResourceInput Wrapper to /components/ Add storage type to ResourceInputWrapper Signed-off-by: Charles Thao <cthao@redhat.com> * add access mode info Signed-off-by: Charles Thao <cthao@redhat.com> Remove edit * add tests Signed-off-by: Charles Thao <cthao@redhat.com> * Fix after rebase Signed-off-by: Charles Thao <cthao@redhat.com> * Use Select instead of FormSelect for StorageClass Signed-off-by: Charles Thao <cthao@redhat.com> * Updated mod-arch to latest version Signed-off-by: Charles Thao <cthao@redhat.com> * Reorganize Create Modal Signed-off-by: Charles Thao <cthao@redhat.com> * Fix tests Signed-off-by: Charles Thao <cthao@redhat.com> * Refactor Edit Volume Mount Signed-off-by: Charles Thao <cthao@redhat.com> * Make sure Home Volume entry is Required Signed-off-by: Charles Thao <cthao@redhat.com> * Add Confirm Modal for Secrets and Volumes Signed-off-by: Charles Thao <cthao@redhat.com> * fix(tests): enforce page object model and improve Cypress test quality Signed-off-by: Charles Thao <cthao@redhat.com> --------- Signed-off-by: Charles Thao <cthao@redhat.com>
1 parent 69649f0 commit efa1152

File tree

24 files changed

+1501
-489
lines changed

24 files changed

+1501
-489
lines changed

‎workspaces/frontend/package-lock.json‎

Lines changed: 112 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎workspaces/frontend/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,9 @@
132132
"dompurify": "^3.2.4",
133133
"js-yaml": "^4.1.0",
134134
"lodash-es": "^4.17.15",
135-
"mod-arch-core": "^1.8.0",
136-
"mod-arch-kubeflow": "^1.8.0",
137-
"mod-arch-shared": "^1.8.0",
135+
"mod-arch-core": "^1.10.2",
136+
"mod-arch-kubeflow": "^1.10.2",
137+
"mod-arch-shared": "^1.10.2",
138138
"react": "^18",
139139
"react-dom": "^18",
140140
"react-router": "^7.5.2",
@@ -157,12 +157,13 @@
157157
"@testing-library/user-event": "14.6.1",
158158
"@typescript-eslint/eslint-plugin": "^8.31.1",
159159
"@typescript-eslint/parser": "^8.31.1",
160+
"babel-jest": "^29.7.0",
161+
"babel-plugin-istanbul": "^7.0.0",
160162
"cypress": "^14.4.1",
161163
"cypress-axe": "^1.6.0",
162164
"cypress-high-resolution": "^1.0.0",
163165
"cypress-mochawesome-reporter": "^3.8.2",
164166
"cypress-multi-reporters": "^2.0.5",
165-
"mocha-junit-reporter": "^2.2.1",
166167
"eslint": "^8.57.0",
167168
"eslint-config-prettier": "^9.1.0",
168169
"eslint-import-resolver-node": "^0.3.7",
@@ -176,9 +177,8 @@
176177
"eslint-plugin-prettier": "^5.4.0",
177178
"eslint-plugin-react": "^7.37.5",
178179
"eslint-plugin-react-hooks": "^5.2.0",
179-
"babel-jest": "^29.7.0",
180-
"babel-plugin-istanbul": "^7.0.0",
181180
"istanbul-merge": "^2.0.0",
181+
"mocha-junit-reporter": "^2.2.1",
182182
"npm-run-all": "^4.1.5",
183183
"nyc": "^17.1.0",
184184
"serve": "^14.2.4",

‎workspaces/frontend/src/__tests__/cypress/cypress/pages/workspaceKinds/editWorkspaceKind.ts‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -732,7 +732,7 @@ class EditWorkspaceKind {
732732

733733
// Additional Volumes
734734
findCreateVolumeButton() {
735-
return cy.findByTestId('create-volume-button');
735+
return cy.findByTestId('attach-new-volume-button');
736736
}
737737

738738
clickCreateVolume() {
@@ -755,12 +755,8 @@ class EditWorkspaceKind {
755755
this.findVolumeRowKebab(index).click();
756756
}
757757

758-
findEditVolumeMenuItem() {
759-
return cy.contains('[role="menuitem"]', 'Edit');
760-
}
761-
762-
clickEditVolume() {
763-
this.findEditVolumeMenuItem().click();
758+
clickEditVolume(pvcName: string) {
759+
cy.findByTestId(`edit-volume-${pvcName}`).click();
764760
}
765761

766762
findDetachVolumeMenuItem() {
@@ -793,7 +789,7 @@ class EditWorkspaceKind {
793789

794790
// Volume Modal
795791
findVolumeModal() {
796-
return cy.findByTestId('volume-modal');
792+
return cy.findByTestId('create-volume-modal');
797793
}
798794

799795
findVolumeModalTitle() {
@@ -808,28 +804,34 @@ class EditWorkspaceKind {
808804
return cy.findByTestId('mount-path-input');
809805
}
810806

807+
clickEditMountPath() {
808+
cy.findByTestId('mount-path-edit').click();
809+
}
810+
811811
findReadOnlySwitch() {
812-
return cy.findByTestId('readonly-access-switch');
812+
return cy.findByTestId('read-only-switch');
813813
}
814814

815815
typePvcName(name: string) {
816816
this.findPvcNameInput().clear().type(name);
817817
}
818818

819819
typeMountPath(path: string) {
820+
this.clickEditMountPath();
820821
this.findMountPathInput().clear().type(path);
822+
cy.findByTestId('mount-path-save').click();
821823
}
822824

823825
toggleReadOnly() {
824826
this.findReadOnlySwitch().click({ force: true });
825827
}
826828

827829
findVolumeModalSubmitButton() {
828-
return cy.findByTestId('volume-modal-submit-button');
830+
return cy.findByTestId('create-volume-submit-button');
829831
}
830832

831833
findVolumeModalCancelButton() {
832-
return cy.findByTestId('volume-modal-cancel-button');
834+
return cy.findByTestId('create-volume-cancel-button');
833835
}
834836

835837
submitVolumeModal() {
@@ -870,11 +872,11 @@ class EditWorkspaceKind {
870872
}
871873

872874
findDetachVolumeModalConfirmButton() {
873-
return cy.findByTestId('detach-volume-confirm-button');
875+
return this.findDetachVolumeModal().findByTestId('confirm-button');
874876
}
875877

876878
findDetachVolumeModalCancelButton() {
877-
return cy.findByTestId('detach-volume-cancel-button');
879+
return this.findDetachVolumeModal().findByTestId('cancel-button');
878880
}
879881

880882
confirmDetachVolume() {

‎workspaces/frontend/src/__tests__/cypress/cypress/pages/workspaces/createWorkspace.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { WorkspaceForm } from '~/__tests__/cypress/cypress/pages/workspaces/workspaceForm';
2+
import { volumesAttachModal } from '~/__tests__/cypress/cypress/pages/workspaces/volumesManagement';
23

34
class CreateWorkspace extends WorkspaceForm {
45
readonly CREATE_WORKSPACE_ROUTE = '/workspaces/create';
@@ -109,6 +110,23 @@ class CreateWorkspace extends WorkspaceForm {
109110
return this.findClearAllFiltersButton().click();
110111
}
111112

113+
findHomeVolumeToggle(): Cypress.Chainable<JQuery<HTMLElement>> {
114+
return cy.contains('button', 'Home Volume') as unknown as Cypress.Chainable<
115+
JQuery<HTMLElement>
116+
>;
117+
}
118+
119+
expandHomeVolumeSection(): Cypress.Chainable<JQuery<HTMLElement>> {
120+
return this.findHomeVolumeToggle().click();
121+
}
122+
123+
attachHomeVolume(pvcName: string): void {
124+
this.expandHomeVolumeSection();
125+
cy.findByTestId('attach-existing-volume-button').click();
126+
volumesAttachModal.selectPVC(pvcName);
127+
volumesAttachModal.clickAttach();
128+
}
129+
112130
clickAttachExistingSecrets(): Cypress.Chainable<JQuery<HTMLElement>> {
113131
return cy.findByTestId('attach-existing-secrets-button').click();
114132
}

‎workspaces/frontend/src/__tests__/cypress/cypress/pages/workspaces/secretsManagement.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,5 +129,40 @@ class SecretsModal {
129129
}
130130
}
131131

132+
class SecretsDetachModal {
133+
find(): Cypress.Chainable<JQuery<HTMLElement>> {
134+
return cy.findByTestId('detach-secret-modal');
135+
}
136+
137+
assertModalVisible(): Cypress.Chainable<JQuery<HTMLElement>> {
138+
return this.find().should('be.visible');
139+
}
140+
141+
assertModalNotExists(): Cypress.Chainable<JQuery<HTMLElement>> {
142+
return cy.findByTestId('detach-secret-modal').should('not.exist');
143+
}
144+
145+
assertContains(text: string): Cypress.Chainable<JQuery<HTMLElement>> {
146+
return this.find().should('contain', text);
147+
}
148+
149+
findConfirmButton(): Cypress.Chainable<JQuery<HTMLElement>> {
150+
return this.find().findByTestId('confirm-button');
151+
}
152+
153+
clickConfirm(): Cypress.Chainable<JQuery<HTMLElement>> {
154+
return this.findConfirmButton().click();
155+
}
156+
157+
findCancelButton(): Cypress.Chainable<JQuery<HTMLElement>> {
158+
return this.find().findByTestId('cancel-button');
159+
}
160+
161+
clickCancel(): Cypress.Chainable<JQuery<HTMLElement>> {
162+
return this.findCancelButton().click();
163+
}
164+
}
165+
132166
export const secretsManagement = new SecretsManagementPage();
133167
export const secretsModal = new SecretsModal();
168+
export const secretsDetachModal = new SecretsDetachModal();

0 commit comments

Comments
 (0)