disable Data Directories inputs in edit mode + update unit tests (#12611

)
rancher · Nov 15, 2024 · 20f7490 · 20f7490
1 parent d4139bf
commit 20f7490
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -1475,6 +1475,7 @@ cluster:
     placeholder: A unique name for the cluster
   directoryConfig:
     title: Data directory configuration
+    banner: Data directory configuration can not be changed once the cluster has been created
     radioInput:
       defaultLabel: Use default data directory configuration
       commonLabel: Use a common base directory for data directory configuration (sub-directories will be used for the system-agent, provisioning and distro paths)

diff --git a/shell/edit/provisioning.cattle.io.cluster/__tests__/DirectoryConfig.test.ts b/shell/edit/provisioning.cattle.io.cluster/__tests__/DirectoryConfig.test.ts
@@ -113,7 +113,7 @@ describe('component: DirectoryConfig', () => {
     expect(wrapper.vm.value.k8sDistro).toStrictEqual(k8sDistroValue);
   });
 
-  it('should render the component with configuration being an empty object, without errors and radio be of value DATA_DIR_RADIO_OPTIONS.DEFAULT (edit scenario)', () => {
+  it('should render the component with configuration being an empty object, without errors and radio be of value DATA_DIR_RADIO_OPTIONS.CUSTOM (edit scenario)', () => {
     const newMountOptions = clone(mountOptions);
 
     newMountOptions.propsData.value = {};
@@ -131,17 +131,21 @@ describe('component: DirectoryConfig', () => {
     const k8sDistroInput = wrapper.find('[data-testid="rke2-directory-config-k8sDistro-data-dir"]');
 
     expect(title.exists()).toBe(true);
-    expect(radioInput.exists()).toBe(true);
+    expect(radioInput.isVisible()).toBe(false);
 
-    expect(wrapper.vm.dataConfigRadioValue).toBe(DATA_DIR_RADIO_OPTIONS.DEFAULT);
+    expect(wrapper.vm.dataConfigRadioValue).toBe(DATA_DIR_RADIO_OPTIONS.CUSTOM);
 
     // since we have all of the vars empty, then the inputs should not be there
-    expect(systemAgentInput.exists()).toBe(false);
-    expect(provisioningInput.exists()).toBe(false);
-    expect(k8sDistroInput.exists()).toBe(false);
+    expect(systemAgentInput.exists()).toBe(true);
+    expect(provisioningInput.exists()).toBe(true);
+    expect(k8sDistroInput.exists()).toBe(true);
+
+    expect(systemAgentInput.attributes().disabled).toBeDefined();
+    expect(provisioningInput.attributes().disabled).toBeDefined();
+    expect(k8sDistroInput.attributes().disabled).toBeDefined();
   });
 
-  it('radio input should be set to DATA_DIR_RADIO_OPTIONS.CUSTOM with all data dir values existing and different (edit scenario)', async() => {
+  it('radio input should be set to DATA_DIR_RADIO_OPTIONS.CUSTOM with all data dir values existing and different (edit scenario)', () => {
     const newMountOptions = clone(mountOptions);
     const inputPath = 'some-data-dir';
 
@@ -157,14 +161,20 @@ describe('component: DirectoryConfig', () => {
 
     expect(wrapper.vm.dataConfigRadioValue).toBe(DATA_DIR_RADIO_OPTIONS.CUSTOM);
 
+    const radioInput = wrapper.find('[data-testid="rke2-directory-config-radio-input"]');
     const systemAgentInput = wrapper.find('[data-testid="rke2-directory-config-systemAgent-data-dir"]');
     const provisioningInput = wrapper.find('[data-testid="rke2-directory-config-provisioning-data-dir"]');
     const k8sDistroInput = wrapper.find('[data-testid="rke2-directory-config-k8sDistro-data-dir"]');
 
+    expect(radioInput.isVisible()).toBe(false);
     expect(systemAgentInput.isVisible()).toBe(true);
     expect(provisioningInput.isVisible()).toBe(true);
     expect(k8sDistroInput.isVisible()).toBe(true);
 
+    expect(systemAgentInput.attributes().disabled).toBeDefined();
+    expect(provisioningInput.attributes().disabled).toBeDefined();
+    expect(k8sDistroInput.attributes().disabled).toBeDefined();
+
     expect(wrapper.vm.value.systemAgent).toStrictEqual(`${ inputPath }/${ DEFAULT_SUBDIRS.AGENT }`);
     expect(wrapper.vm.value.provisioning).toStrictEqual(`${ inputPath }/${ DEFAULT_SUBDIRS.PROVISIONING }`);
     expect(wrapper.vm.value.k8sDistro).toStrictEqual(`${ inputPath }/${ DEFAULT_SUBDIRS.K8S_DISTRO_K3S }`);

diff --git a/shell/edit/provisioning.cattle.io.cluster/tabs/DirectoryConfig.vue b/shell/edit/provisioning.cattle.io.cluster/tabs/DirectoryConfig.vue
@@ -1,8 +1,9 @@
 
 <script>
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { _CREATE } from '@shell/config/query-params';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import { Banner } from '@components/Banner';
 
 export const DATA_DIR_RADIO_OPTIONS = {
   DEFAULT: 'defaultDataDir',
@@ -23,7 +24,8 @@ export default {
   name:       'DirectoryConfig',
   components: {
     LabeledInput,
-    RadioGroup
+    RadioGroup,
+    Banner
   },
   props: {
     mode: {
@@ -50,9 +52,7 @@ export default {
     }
 
     if (this.mode !== _CREATE) {
-      if (this.value?.systemAgent?.length || this.value?.provisioning?.length || this.value?.k8sDistro?.length) {
-        dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
-      }
+      dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
     }
 
     return {
@@ -85,6 +85,9 @@ export default {
     }
   },
   computed: {
+    isDisabled() {
+      return this.mode === _EDIT;
+    },
     dataConfigRadioOptions() {
       const defaultDataDirOption = {
         value: DATA_DIR_RADIO_OPTIONS.DEFAULT,
@@ -148,10 +151,17 @@ export default {
 <template>
   <div class="row">
     <div class="col span-8">
-      <h3 class="mb-20">
+      <h3>
         {{ t('cluster.directoryConfig.title') }}
       </h3>
+      <Banner
+        class="mb-20"
+        :closable="false"
+        color="info"
+        label-key="cluster.directoryConfig.banner"
+      />
       <RadioGroup
+        v-show="!isDisabled"
         :value="dataConfigRadioValue"
         class="mb-10"
         :mode="mode"
@@ -167,6 +177,7 @@ export default {
         :mode="mode"
         :label="t('cluster.directoryConfig.common.label')"
         :tooltip="t('cluster.directoryConfig.common.tooltip')"
+        :disabled="isDisabled"
         data-testid="rke2-directory-config-common-data-dir"
       />
       <div v-if="dataConfigRadioValue === DATA_DIR_RADIO_OPTIONS.CUSTOM">
@@ -176,6 +187,7 @@ export default {
           :mode="mode"
           :label="t('cluster.directoryConfig.systemAgent.label')"
           :tooltip="t('cluster.directoryConfig.systemAgent.tooltip')"
+          :disabled="isDisabled"
           data-testid="rke2-directory-config-systemAgent-data-dir"
         />
         <LabeledInput
@@ -184,6 +196,7 @@ export default {
           :mode="mode"
           :label="t('cluster.directoryConfig.provisioning.label')"
           :tooltip="t('cluster.directoryConfig.provisioning.tooltip')"
+          :disabled="isDisabled"
           data-testid="rke2-directory-config-provisioning-data-dir"
         />
         <LabeledInput
@@ -192,6 +205,7 @@ export default {
           :mode="mode"
           :label="t('cluster.directoryConfig.k8sDistro.label')"
           :tooltip="t('cluster.directoryConfig.k8sDistro.tooltip')"
+          :disabled="isDisabled"
           data-testid="rke2-directory-config-k8sDistro-data-dir"
         />
       </div>