Allow Longhorn CSI storage driver to be selected

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"]');
+  }
 }

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', () => {

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

shell/edit/workload/index.vue

@@ -415,7 +415,7 @@ export default {
           >
             <Tab
               :label="t('workload.storage.title')"
-              name="storage"
+              name="storage-pod"
               :weight="tabWeightMap['storage']"
               @active="$refs.storage.refresh()"
             >

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('.', '-') }'`);
+    }
+  }
 };
 </script>
 
@@ -71,10 +98,11 @@ export default {
         <div class="col span-6">
           <LabeledSelect
             v-model:value="value.csi.driver"
+            data-testid="workload-storage-driver"
             :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"
           />
         </div>

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)"
         />
       </template>