diff --git a/cypress/e2e/po/components/workloads/pod-storage.po.ts b/cypress/e2e/po/components/workloads/pod-storage.po.ts index 4980fe3bd42..a19a05b0ef6 100644 --- a/cypress/e2e/po/components/workloads/pod-storage.po.ts +++ b/cypress/e2e/po/components/workloads/pod-storage.po.ts @@ -1,5 +1,7 @@ import ComponentPo from '@/cypress/e2e/po/components/component.po'; import CodeMirrorPo from '@/cypress/e2e/po/components/code-mirror.po'; +import ButtonDropdownPo from '@/cypress/e2e/po/components/button-dropdown.po'; +import SelectPo from '@/cypress/e2e/po/components/select.po'; class WorkloadVolumePo extends ComponentPo { yamlEditor(): CodeMirrorPo { @@ -15,4 +17,12 @@ export default class WorkloadPodStoragePo extends ComponentPo { nthVolumeComponent(n: number) { return new WorkloadVolumePo(`[data-testid="volume-component-${ n }"]`); } + + addVolumeButton() : ButtonDropdownPo { + return new ButtonDropdownPo('[data-testid="dropdown-button-storage-volume"]'); + } + + driverInput(): SelectPo { + return new SelectPo('[data-testid="workload-storage-driver"]'); + } } diff --git a/cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts b/cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts index a6c3e77a216..4167957c2cc 100644 --- a/cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts +++ b/cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts @@ -90,7 +90,7 @@ describe('Cluster Explorer', () => { deploymentEditConfigPage.horizontalTabs().clickTabWithSelector('li#pod'); // open the pod storage tab - deploymentEditConfigPage.podTabs().clickTabWithSelector('li#storage'); + deploymentEditConfigPage.podTabs().clickTabWithSelector('li#storage-pod'); // check that there is a component rendered for each workload volume and that that component has rendered some information about the volume deploymentEditConfigPage.podStorage().nthVolumeComponent(0).yamlEditor().value() @@ -151,6 +151,29 @@ describe('Cluster Explorer', () => { expect(response.body.spec.template.spec.containers[0].volumeMounts).to.eq(undefined); }); }); + + it('should be able to select Pod CSI storage option', () => { + deploymentsCreatePage.goTo(); + deploymentsCreatePage.waitForPage(); + + // open the pod tab + deploymentsCreatePage.horizontalTabs().clickTabWithSelector('li#pod'); + + // open the pod storage tab + deploymentsCreatePage.podTabs().clickTabWithSelector('li#storage-pod'); + + deploymentsCreatePage.podStorage().addVolumeButton().toggle(); + deploymentsCreatePage.podStorage().addVolumeButton().getOptions().should('contain', 'CSI'); + + deploymentsCreatePage.podStorage().addVolumeButton().clickOptionWithLabel('CSI'); + + // open the driver input + deploymentsCreatePage.podStorage().driverInput().toggle(); + deploymentsCreatePage.podStorage().driverInput().getOptions().should('contain', 'Longhorn'); + + // select the Longhorn option from the driver input + deploymentsCreatePage.podStorage().driverInput().clickOptionWithLabel('Longhorn'); + }); }); describe('List: Deployments', () => { diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml index 9191cc65684..002c8663a29 100644 --- a/shell/assets/translations/en-us.yaml +++ b/shell/assets/translations/en-us.yaml @@ -6544,7 +6544,7 @@ workload: managed: Managed shared: Shared drivers: - driver.longhorn.io: Longhorn + driver-longhorn-io: Longhorn fsType: Filesystem Type shareName: Share Name secretName: Secret Name diff --git a/shell/edit/workload/index.vue b/shell/edit/workload/index.vue index 6c1e0b8bb0d..57e659cada3 100644 --- a/shell/edit/workload/index.vue +++ b/shell/edit/workload/index.vue @@ -415,7 +415,7 @@ export default { > diff --git a/shell/edit/workload/storage/csi/index.vue b/shell/edit/workload/storage/csi/index.vue index 811ef1adf11..e4ceb9a87be 100644 --- a/shell/edit/workload/storage/csi/index.vue +++ b/shell/edit/workload/storage/csi/index.vue @@ -44,6 +44,33 @@ export default { ...mapGetters({ t: 'i18n/t' }) }, + + methods: { + /** + * Retrieves the label for a given option + * @param option The option for which to retrieve the label. option can be + * either a string or an object. If it is an object, is should have a `label` + * property associated with it. + */ + getOptionLabel(option) { + if (typeof option === 'string') { + return this.getOptionLabelString(option); + } + + const { label } = option; + + return this.getOptionLabelString(label); + }, + /** + * Translates a given key into a localized string. + * @param key The key to be translated. + */ + getOptionLabelString(key) { + // Periods are replaced with `-` to prevent conflict with the default key + // separator. + return this.t(`workload.storage.csi.drivers.'${ key.replaceAll('.', '-') }'`); + } + } }; @@ -71,10 +98,11 @@ export default {
diff --git a/shell/edit/workload/storage/index.vue b/shell/edit/workload/storage/index.vue index 7eb967bbafc..59727802ce7 100644 --- a/shell/edit/workload/storage/index.vue +++ b/shell/edit/workload/storage/index.vue @@ -301,6 +301,7 @@ export default { :button-label="t('workload.storage.addVolume')" :dropdown-options="volumeTypeOptions" size="sm" + data-testid="dropdown-button-storage-volume" @click-action="e=>addVolume(e.value)" />