From 67d388c1d61e6cde1f1e23ef497d6944eff8048f Mon Sep 17 00:00:00 2001 From: Phillip Rak Date: Mon, 25 Nov 2024 14:28:31 -0700 Subject: [PATCH 1/4] Replace periods with `-` in translation key Periods are used as a default key separator in Dashboard's i18n implementation. Using `-` instead of periods in our keys allows for a proper lookup of keys. Signed-off-by: Phillip Rak --- shell/assets/translations/en-us.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml index 9e8bb02ff8..d17a20d8b2 100644 --- a/shell/assets/translations/en-us.yaml +++ b/shell/assets/translations/en-us.yaml @@ -6548,7 +6548,7 @@ workload: managed: Managed shared: Shared drivers: - driver.longhorn.io: Longhorn + driver-longhorn-io: Longhorn fsType: Filesystem Type shareName: Share Name secretName: Secret Name From fa177d71d49d7c5ce6c2a9e9d78915ae9b933688 Mon Sep 17 00:00:00 2001 From: Phillip Rak Date: Mon, 25 Nov 2024 14:31:14 -0700 Subject: [PATCH 2/4] Create methods for getting CSI option labels Options for CSI can be either a string or an object; objects contain a label property. Replace periods with `-` in keys like `driver.longhorn.io` so that the i18n implementation will properly match a translation. Signed-off-by: Phillip Rak --- shell/edit/workload/storage/csi/index.vue | 29 ++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/shell/edit/workload/storage/csi/index.vue b/shell/edit/workload/storage/csi/index.vue index 811ef1adf1..d3f6bc3836 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('.', '-') }'`); + } + } }; @@ -74,7 +101,7 @@ export default { :mode="mode" :label="t('workload.storage.driver')" :options="driverOpts" - :get-option-label="opt=>t(`workload.storage.csi.drivers.'${opt}'`)" + :get-option-label="getOptionLabel" :required="true" /> From d9a710adce500b88b5bc46bf36805202df451958 Mon Sep 17 00:00:00 2001 From: Phillip Rak Date: Tue, 26 Nov 2024 10:16:34 -0700 Subject: [PATCH 3/4] Update name for pod storage tab The `name` prop for tabs assigns an id to a `section` element in the underlying tab. Since ids must be unique in the document, there conflicts can arise when programmatically selecting tabs. Signed-off-by: Phillip Rak --- cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts | 2 +- shell/edit/workload/index.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts b/cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts index a6c3e77a21..68179f2d8c 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() diff --git a/shell/edit/workload/index.vue b/shell/edit/workload/index.vue index 6c1e0b8bb0..57e659cada 100644 --- a/shell/edit/workload/index.vue +++ b/shell/edit/workload/index.vue @@ -415,7 +415,7 @@ export default { > From 1a13b2a8d374d266b36ff9aa78471d6556bc3af7 Mon Sep 17 00:00:00 2001 From: Phillip Rak Date: Tue, 26 Nov 2024 10:21:25 -0700 Subject: [PATCH 4/4] Add e2e test for selecting Longhorn CSI Pod storage Signed-off-by: Phillip Rak --- .../po/components/workloads/pod-storage.po.ts | 10 ++++++++ .../explorer2/workloads/deployments.spec.ts | 23 +++++++++++++++++++ shell/edit/workload/storage/csi/index.vue | 1 + shell/edit/workload/storage/index.vue | 1 + 4 files changed, 35 insertions(+) diff --git a/cypress/e2e/po/components/workloads/pod-storage.po.ts b/cypress/e2e/po/components/workloads/pod-storage.po.ts index 4980fe3bd4..a19a05b0ef 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 68179f2d8c..4167957c2c 100644 --- a/cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts +++ b/cypress/e2e/tests/pages/explorer2/workloads/deployments.spec.ts @@ -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/edit/workload/storage/csi/index.vue b/shell/edit/workload/storage/csi/index.vue index d3f6bc3836..e4ceb9a87b 100644 --- a/shell/edit/workload/storage/csi/index.vue +++ b/shell/edit/workload/storage/csi/index.vue @@ -98,6 +98,7 @@ export default {