From 00b773a16daef20734be52879b502ba42ed72ee0 Mon Sep 17 00:00:00 2001
From: momesgin <mo.mesgin@suse.com>
Date: Mon, 18 Dec 2023 13:33:51 -0800
Subject: [PATCH] Expose raw data in vSphere cluster form (#10143)

* expose raw data in vSphere fields + tooltip for select options with possible long values

* fixed tooltip icon overlapping error containers

* passed empty array to ArrayListSelect, used defaultAddValue prop to override default empty string

* pass empty array as a fallback to networks for getDefaultVappOptions

---------

Co-authored-by: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>
---
 shell/components/form/ArrayListSelect.vue     |   5 +
 .../__tests__/vmwarevsphere.test.ts           | 121 +++++++++++++++---
 shell/machine-config/vmwarevsphere.vue        |  66 ++++++----
 3 files changed, 147 insertions(+), 45 deletions(-)

diff --git a/shell/components/form/ArrayListSelect.vue b/shell/components/form/ArrayListSelect.vue
index af176cba09e..fa9f68302e4 100644
--- a/shell/components/form/ArrayListSelect.vue
+++ b/shell/components/form/ArrayListSelect.vue
@@ -34,6 +34,10 @@ export default {
 
     addAllowed() {
       return this.filteredOptions.length > 0;
+    },
+
+    defaultAddValue() {
+      return this.options[0]?.value;
     }
   },
 
@@ -62,6 +66,7 @@ export default {
     class="array-list-select"
     :add-allowed="addAllowed || loading"
     :loading="loading"
+    :defaultAddValue="defaultAddValue"
     @input="$emit('input', $event)"
   >
     <template v-slot:columns="scope">
diff --git a/shell/machine-config/__tests__/vmwarevsphere.test.ts b/shell/machine-config/__tests__/vmwarevsphere.test.ts
index 5873336d2a0..93d781a0127 100644
--- a/shell/machine-config/__tests__/vmwarevsphere.test.ts
+++ b/shell/machine-config/__tests__/vmwarevsphere.test.ts
@@ -1,28 +1,28 @@
 import { mount } from '@vue/test-utils';
-import vmwarevsphere, { DEFAULT_VALUES } from '@shell/machine-config/vmwarevsphere.vue';
+import vmwarevsphere, { DEFAULT_VALUES, SENTINEL } from '@shell/machine-config/vmwarevsphere.vue';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: vmwarevsphere', () => {
+  const defaultGetters = { 'i18n/t': jest.fn().mockImplementation((key: string) => key) };
+  const defaultSetup = {
+    propsData: {
+      poolId:       'poolId',
+      credentialId: 'credentialId',
+      disabled:     false,
+      mode:         'create',
+      value:        { initted: false },
+      provider:     'vmwarevsphere'
+    },
+    mocks: {
+      $fetchState: { pending: false },
+      $store:      { getters: defaultGetters },
+    },
+    stubs:      { CodeMirror: true },
+    directives: { cleanHtmlDirective }
+  };
+
   it('should mount successfully with correct default values', () => {
-    const defaultGetters = { 'i18n/t': jest.fn() };
-    const wrapper = mount(vmwarevsphere, {
-      propsData: {
-        poolId:       'poolId',
-        credentialId: 'credentialId',
-        disabled:     false,
-        mode:         'create',
-        value:        {
-          initted: false,
-          network: [],
-          tag:     []
-        },
-        provider: 'vmwarevsphere'
-      },
-      mocks: {
-        $fetchState: { pending: false },
-        $store:      { getters: defaultGetters },
-      },
-      stubs: { CodeMirror: true }
-    });
+    const wrapper = mount(vmwarevsphere, defaultSetup);
 
     const dataCenterElement = wrapper.find(`[data-testid="datacenter"]`).element;
     const resourcePoolElement = wrapper.find(`[data-testid="resourcePool"]`).element;
@@ -69,4 +69,83 @@ describe('component: vmwarevsphere', () => {
     expect(cfgparam).toStrictEqual(defaultCfgparam);
     expect(os).toStrictEqual(defaultOs);
   });
+
+  describe('mapPathOptionsToContent', () => {
+    const testCases = [
+      [['/Datacenter'], [{ label: '/Datacenter', value: '/Datacenter' }]],
+      [['Datacenter'], [{ label: 'Datacenter', value: 'Datacenter' }]],
+      [['/Datacenter/vm/datastore'], [{ label: '/Datacenter/vm/datastore', value: '/Datacenter/vm/datastore' }]],
+    ];
+
+    it.each(testCases)('should generate label/value object without manipultion', (rawData, expected) => {
+      const wrapper = mount(vmwarevsphere, defaultSetup);
+
+      expect(wrapper.vm.mapPathOptionsToContent(rawData)).toStrictEqual(expected);
+    });
+  });
+
+  describe('mapHostOptionsToContent', () => {
+    const hostPlaceholder = {
+      label: 'cluster.machineConfig.vsphere.hostOptions.any',
+      value: SENTINEL
+    };
+    const testCases = [
+      [[''], [hostPlaceholder]],
+      [['host'], [{ label: 'host', value: 'host' }]],
+    ];
+
+    it.each(testCases)('should generate label/value object for host options properly', (rawData, expected) => {
+      const wrapper = mount(vmwarevsphere, defaultSetup);
+
+      expect(wrapper.vm.mapHostOptionsToContent(rawData)).toStrictEqual(expected);
+    });
+  });
+
+  describe('mapFolderOptionsToContent', () => {
+    const folderPlaceholder = {
+      label: '\u00A0',
+      value: ''
+    };
+    const testCases = [
+      [[undefined], [folderPlaceholder]],
+      [[null], [folderPlaceholder]],
+      [[''], [folderPlaceholder]],
+      [['folder'], [{ label: 'folder', value: 'folder' }]],
+    ];
+
+    it.each(testCases)('should generate label/value object for folder options properly', (rawData, expected) => {
+      const wrapper = mount(vmwarevsphere, defaultSetup);
+
+      expect(wrapper.vm.mapFolderOptionsToContent(rawData)).toStrictEqual(expected);
+    });
+  });
+
+  describe('mapCustomAttributesToContent', () => {
+    const testCases = [
+      [[{ name: 'name', key: 'key' }], [{ label: 'name', value: 'key' }]],
+      [[{ name: 'name', key: 111 }], [{ label: 'name', value: '111' }]],
+    ];
+
+    it.each(testCases)('should generate label/value object for custom attributes options properly', (rawData, expected) => {
+      const wrapper = mount(vmwarevsphere, defaultSetup);
+
+      expect(wrapper.vm.mapCustomAttributesToContent(rawData)).toStrictEqual(expected);
+    });
+  });
+
+  describe('mapTagsToContent', () => {
+    it('should generate label/value object for tag options properly', () => {
+      const tag = {
+        id:       'tag_id',
+        name:     'tag_name',
+        category: 'tag_category',
+      };
+      const expectedReslut = [{
+        ...tag, label: `${ tag.category } / ${ tag.name }`, value: tag.id
+      }];
+      const wrapper = mount(vmwarevsphere, defaultSetup);
+
+      expect(wrapper.vm.mapTagsToContent([tag])).toStrictEqual(expectedReslut);
+    });
+  });
 });
diff --git a/shell/machine-config/vmwarevsphere.vue b/shell/machine-config/vmwarevsphere.vue
index d4540c232e9..34c25fa3600 100644
--- a/shell/machine-config/vmwarevsphere.vue
+++ b/shell/machine-config/vmwarevsphere.vue
@@ -2,7 +2,6 @@
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-// import { Checkbox } from '@components/Form/Checkbox';
 import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
 import UnitInput from '@shell/components/form/UnitInput';
@@ -16,7 +15,7 @@ import { get, set } from '@shell/utils/object';
 import { integerString, keyValueStrings } from '@shell/utils/computed';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 
-const SENTINEL = '__SENTINEL__';
+export const SENTINEL = '__SENTINEL__';
 const VAPP_MODE = {
   DISABLED: 'disabled',
   AUTO:     'auto',
@@ -108,7 +107,7 @@ const getInitialVappMode = (c) => {
     return VAPP_MODE.DISABLED;
   }
 
-  const d = getDefaultVappOptions(c.network);
+  const d = getDefaultVappOptions(c.network || []);
 
   if (
     c.vappIpprotocol === d.vappIpprotocol &&
@@ -326,7 +325,9 @@ export default {
     },
 
     templateTooltip() {
-      return this.failedToLoadTemplates ? this.t('cluster.machineConfig.vsphere.instanceOptions.template.none') : null;
+      const rawTemplateValue = this.value.cloneFrom;
+
+      return this.failedToLoadTemplates ? this.t('cluster.machineConfig.vsphere.instanceOptions.template.none') : rawTemplateValue;
     },
 
     host: {
@@ -350,6 +351,24 @@ export default {
 
     gracefulShutdownTimeout: integerString('value.gracefulShutdownTimeout'),
 
+    network: {
+      get() {
+        return this.value.network || [];
+      },
+      set(newValue) {
+        set(this.value, 'network', newValue);
+      }
+    },
+
+    tag: {
+      get() {
+        return this.value.tag || [];
+      },
+      set(newValue) {
+        set(this.value, 'tag', newValue);
+      }
+    },
+
     showCloudConfigYaml() {
       return this.value.creationType !== 'legacy';
     },
@@ -375,7 +394,7 @@ export default {
     },
     vappMode(value) {
       if (value === VAPP_MODE.AUTO) {
-        const defaultVappOptions = getDefaultVappOptions(this.value.network);
+        const defaultVappOptions = getDefaultVappOptions(this.value.network || []);
 
         return this.updateVappOptions(defaultVappOptions);
       }
@@ -488,7 +507,7 @@ export default {
 
       const options = await this.requestOptions('resource-pools', this.value.datacenter);
 
-      const content = this.mapPoolOptionsToContent(options);
+      const content = this.mapPathOptionsToContent(options);
 
       this.resetValueIfNecessary('pool', content, options);
 
@@ -620,7 +639,7 @@ export default {
     resetValueIfNecessary(key, content, options, isArray = false) {
       const isValueInContent = () => {
         if (isArray) {
-          return this.value[key].every((value) => content.find((c) => c.value === value));
+          return this.value[key]?.every((value) => content.find((c) => c.value === value));
         }
 
         return content.find((c) => c.value === this.value[key] );
@@ -645,10 +664,8 @@ export default {
 
     mapPathOptionsToContent(pathOptions) {
       return (pathOptions || []).map((pathOption) => {
-        const split = pathOption.split('/');
-
         return {
-          label: split[split.length - 1],
+          label: pathOption,
           value: pathOption
         };
       });
@@ -669,18 +686,6 @@ export default {
       }));
     },
 
-    mapPoolOptionsToContent(pathOptions) {
-      return pathOptions.map((pathOption) => {
-        const splitOptions = pathOption.split('/');
-        const label = splitOptions.slice(2).join('/');
-
-        return {
-          label,
-          value: pathOption
-        };
-      });
-    },
-
     mapCustomAttributesToContent(customAttributes) {
       return customAttributes.map((customAttribute) => ({
         label: customAttribute.name,
@@ -767,6 +772,7 @@ export default {
               :options="dataCenters"
               :label="t('cluster.machineConfig.vsphere.scheduling.dataCenter')"
               :disabled="disabled"
+              :tooltip="value.datacenter"
             />
           </div>
           <div
@@ -780,6 +786,7 @@ export default {
               :options="resourcePools"
               :label="t('cluster.machineConfig.vsphere.scheduling.resourcePool')"
               :disabled="disabled"
+              :tooltip="value.pool"
             />
           </div>
         </div>
@@ -795,6 +802,7 @@ export default {
               :options="dataStores"
               :label="t('cluster.machineConfig.vsphere.scheduling.dataStore')"
               :disabled="disabled"
+              :tooltip="value.datastore"
             />
           </div>
           <div
@@ -808,6 +816,7 @@ export default {
               :options="folders"
               :label="t('cluster.machineConfig.vsphere.scheduling.folder')"
               :disabled="disabled"
+              :tooltip="value.folder"
             />
           </div>
         </div>
@@ -823,6 +832,7 @@ export default {
               :options="hosts"
               :label="t('cluster.machineConfig.vsphere.scheduling.host.label')"
               :disabled="disabled"
+              :tooltip="host"
             />
             <p class="text-muted mt-5">
               {{ t('cluster.machineConfig.vsphere.scheduling.host.note') }}
@@ -955,6 +965,7 @@ export default {
               :searchable="true"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.libraryTemplate')"
               :disabled="disabled"
+              :tooltip="value.cloneFrom"
             />
           </div>
           <div
@@ -968,6 +979,7 @@ export default {
               :options="virtualMachines"
               :label="t('cluster.machineConfig.vsphere.instanceOptions.virtualMachine')"
               :disabled="disabled"
+              :tooltip="value.cloneFrom"
             />
           </div>
           <div
@@ -1022,7 +1034,7 @@ export default {
               {{ t('cluster.machineConfig.vsphere.networks.label') }}
             </label>
             <ArrayListSelect
-              v-model="value.network"
+              v-model="network"
               :options="networks"
               :array-list-props="{ addLabel: t('cluster.machineConfig.vsphere.networks.add') }"
               :loading="networksLoading"
@@ -1064,7 +1076,7 @@ export default {
       </h4>
       <div slot="body">
         <ArrayListSelect
-          v-model="value.tag"
+          v-model="tag"
           :options="tags"
           :array-list-props="{ addLabel: t('cluster.machineConfig.vsphere.tags.addTag') }"
           :loading="tagsLoading"
@@ -1182,3 +1194,9 @@ export default {
     </Card>
   </div>
 </template>
+
+<style lang="scss" scoped>
+::v-deep .labeled-tooltip .status-icon.icon-info {
+    z-index: 0;
+}
+</style>