bfg-common 1.6.95 → 1.6.97

package/components/common/wizards/datastore/add/steps/nameAndDevice/NameAndDeviceNew.vue

@@ -2,67 +2,78 @@
   <div class="name-and-device">
     <div class="name-and-device__row row">
       <div class="row__title">
-        <span class="row__title-text">
+        <span v-if="!props.loading" class="row__title-text">
           {{ localization.common.name }}
         </span>
+        <ui-skeleton-item v-else width="160" height="20"/>
       </div>
       <div class="row__content">
         <ui-input
-          id="device-selection-input"
-          v-model="formModelLocal.name"
-          :placeholder="localization.common.name"
-          :error="nameErrorText"
-          test-id="device-selection-input"
-          @blur="initValidation(true)"
-          @input="initValidation(false)"
+            v-if="!props.loading"
+            id="device-selection-input"
+            v-model="formModelLocal.name"
+            :placeholder="localization.common.name"
+            :error="nameErrorText"
+            test-id="device-selection-input"
+            @blur="initValidation(true)"
+            @input="initValidation(false)"
         />
+        <ui-skeleton-item v-else width="100%" height="36" border-radius="8"/>
       </div>
     </div>
 
     <ui-alert
-      v-if="isShowInfoAlert"
-      :messages="[alertInfoDescription]"
-      test-id="device-selection-information-alert"
-      type="info"
-      size="md"
-      class="name-and-device__alert"
+        v-if="isShowInfoAlert && !props.loading"
+        :messages="[alertInfoDescription]"
+        test-id="device-selection-information-alert"
+        type="info"
+        size="md"
+        class="name-and-device__alert"
     />
+    <ui-skeleton-item v-else width="100%" height="64" border-radius="8"/>
 
     <div class="name-and-device__row row">
       <div class="row__title">
-        <span class="row__title-text">
+        <span v-if="!props.loading" class="row__title-text">
           {{ selectedHostLabel }}
         </span>
+        <ui-skeleton-item v-else width="80" height="20"/>
 
         <common-tooltip-help
-          v-if="props.isShowSelectHost"
-          :title="localization.common.information"
-          :help-text="localization.common.selectHostToViewAccessible"
-          test-id="device-select-host-tooltip"
-          help-id="device-select-host-tooltip"
-          dropdown-width="272px"
-          dropdown-left
-          dropdown-top
+            v-if="props.isShowSelectHost && !props.loading"
+            :title="localization.common.information"
+            :help-text="localization.common.selectHostToViewAccessible"
+            test-id="device-select-host-tooltip"
+            help-id="device-select-host-tooltip"
+            dropdown-width="272px"
+            dropdown-left
+            dropdown-top
         />
       </div>
       <div v-if="props.isShowSelectHost" class="row__content">
         <ui-select
-          v-model="selectedHostLocal"
-          :items="props.hostOptions"
-          :placeholder="localization.common.selectHost"
-          select-width="100%"
-          show-text
-          test-id="device-host-select"
-          size="md"
-          theme="light"
-          @change="onSelectHost"
+            v-if="!props.loading"
+            v-model="selectedHostLocal"
+            :items="props.hostOptions"
+            :placeholder="localization.common.selectHost"
+            select-width="100%"
+            show-text
+            test-id="device-host-select"
+            size="md"
+            theme="light"
+            @change="onSelectHost"
         />
+        <ui-skeleton-item v-else width="100%" height="36" border-radius="8"/>
       </div>
 
-      <div v-else class="row__host-name">
-        <span class="icon vsphere-icon-host" />
-        {{ props.selectedHostName }}
+      <div v-else class="w-full">
+        <div v-if="!props.loading" class="row__host-name">
+          <span class="icon vsphere-icon-host" />
+          {{ props.selectedHostName }}
+        </div>
+        <ui-skeleton-item v-else width="100%" height="36" border-radius="8"/>
       </div>
+
     </div>
 
     <div class="name-and-device__disk-list">
@@ -78,9 +89,11 @@
     </div>
 
     <common-wizards-datastore-add-steps-name-and-device-advanced-options
-      v-model="formModelLocal.level"
-      :dev-names-count="formModelLocal.dev_names.length"
+        v-if="!props.loading"
+        v-model="formModelLocal.level"
+        :dev-names-count="formModelLocal.dev_names.length"
     />
+    <ui-skeleton-item v-else width="160" height="18" />
   </div>
 </template>
 
@@ -132,13 +145,13 @@ const initValidation = (onlyBlur: boolean): void => {
 
 const alertInfoDescription = computed<string>(() =>
   props.isShowSelectHost
-    ? localization.value.common.nameAndDeviceSelectionAlertInfo
-    : localization.value.common.nameAndDeviceSelectionHostAlertInfo
+      ? localization.value.common.nameAndDeviceSelectionAlertInfo
+      : localization.value.common.nameAndDeviceSelectionHostAlertInfo
 )
 const selectedHostLabel = computed<string>(() =>
   props.isShowSelectHost
-    ? localization.value.common.selectHost
-    : localization.value.common.host
+      ? localization.value.common.selectHost
+      : localization.value.common.host
 )
 
 const nameErrorText = computed<string>(() => {
@@ -166,7 +179,7 @@ const onSelectHost = (event: string): void => {
   display: flex;
   flex-direction: column;
   row-gap: 16px;
-  margin: 16px 0 10px 2px;
+  margin: 16px 0;
 
   &__alert {
     align-items: flex-start;
@@ -228,5 +241,10 @@ const onSelectHost = (event: string): void => {
       }
     }
   }
+
+  &__disk-list {
+    border-bottom: 1px solid var(--wizard-content-line);
+    padding-bottom: 24px;
+  }
 }
 </style>

package/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/AdvancedOptions.vue

@@ -2,12 +2,14 @@
   <component
     :is="currentComponent"
     v-model="model"
-    :dev-names-count="props.devNamesCount"
+    :raid-options="optionItems"
   />
 </template>
 
 <script setup lang="ts">
 import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+import { raidOptions } from '~/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/lib/config/raidOptions'
 
 const { $store }: any = useNuxtApp()
 
@@ -38,6 +40,10 @@ watch(
     }
   }
 )
+
+const optionItems = computed<UI_I_RadioOption[]>(() =>
+  raidOptions(props.devNamesCount)
+)
 </script>
 
 <style scoped lang="scss"></style>

package/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/New.vue

@@ -1,76 +1,36 @@
 <template>
   <div class="advanced-options-wrap clr-form-control">
-    <b
-      class="advanced-options-label btn btn-link"
+    <ui-button
+      variant="text"
+      test-id="advanced-options-button"
+      class="advanced-options-btn"
       @click="isShowAdvancedOptions = !isShowAdvancedOptions"
     >
-      {{ localization.common.advancedOptions }}
-    </b>
-    <div v-show="isShowAdvancedOptions" class="advanced-options compact">
-      <div class="radio">
-        <input
-          v-model="model"
-          id="advanced-option-liner"
-          data-id="advanced-option-liner"
-          type="radio"
-          value="linear"
-        />
-        <label for="advanced-option-liner"> Linear </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 2 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid0"
-          :disabled="props.devNamesCount < 2"
-          data-id="advanced-option-raid0"
-          type="radio"
-          value="raid0"
-        />
-        <label for="advanced-option-raid0"> Raid0 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 2 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid1"
-          :disabled="props.devNamesCount < 2"
-          data-id="advanced-option-raid1"
-          type="radio"
-          value="raid1"
-        />
-        <label for="advanced-option-raid1"> Raid1 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 3 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid5"
-          :disabled="props.devNamesCount < 3"
-          data-id="advanced-option-raid5"
-          type="radio"
-          value="raid5"
+      <template #icon>
+        <ui-icon
+          name="arrow-right2"
+          :class="{ rotate: isShowAdvancedOptions }"
         />
-        <label for="advanced-option-raid5"> Raid5 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 4 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid6"
-          :disabled="props.devNamesCount < 4"
-          data-id="advanced-option-raid6"
-          type="radio"
-          value="raid6"
-        />
-        <label for="advanced-option-raid6"> Raid6 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 4 }]">
-        <input
+      </template>
+      {{ localization.common.advancedOptions }}
+    </ui-button>
+
+    <div v-show="isShowAdvancedOptions" class="advanced-options compact mt-6">
+      <p class="radio-group-title">
+        {{ localization.common.raidConfiguration }}
+      </p>
+
+      <div class="advanced-options-radio-group">
+        <ui-radio
+          v-for="option in props.raidOptions"
+          :key="option.value"
           v-model="model"
-          id="advanced-option-raid10"
-          :disabled="props.devNamesCount < 4"
-          data-id="advanced-option-raid10"
-          type="radio"
-          value="raid10"
+          :value="option.value"
+          :label="option.label"
+          :disabled="option.disabled"
+          :test-id="`advanced-option-${option.value}`"
+          size="md"
         />
-        <label for="advanced-option-raid10"> Raid10 </label>
       </div>
     </div>
   </div>
@@ -79,11 +39,12 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
 
 const model = defineModel<UI_I_CreateDatastoreForm['level']>({ required: true })
 
 const props = defineProps<{
-  devNamesCount: number
+  raidOptions: UI_I_RadioOption[]
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -93,19 +54,35 @@ const isShowAdvancedOptions = ref<boolean>(false)
 
 <style scoped lang="scss">
 .advanced-options-wrap {
-  display: flex;
-  gap: 10px;
-
-  .advanced-options-label {
-    margin: 0;
+  .advanced-options-btn {
     padding: 0;
-    line-height: normal;
-    height: auto;
+    height: max-content;
+
+    .rotate {
+      transform: rotate(90deg);
+    }
   }
 
-  .radio {
-    margin-bottom: 5px;
+  .advanced-options {
+    display: flex;
+    grid-column-gap: 16px;
+
+    .radio-group-title {
+      max-width: 240px;
+      width: 100%;
+      font-size: 13px;
+      font-weight: 400;
+      color: var(--title-form-first-color);
+    }
+
+    &-radio-group {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      width: 100%;
+      gap: 12px;
+    }
   }
+
   input[type='radio']:focus:checked + label::before,
   input[type='radio']:focus + label::before {
     box-shadow: inset 0 0 0 0.25rem #0094d2;

package/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/Old.vue

@@ -7,70 +7,21 @@
       {{ localization.common.advancedOptions }}
     </b>
     <div v-show="isShowAdvancedOptions" class="advanced-options compact">
-      <div class="radio">
+      <div
+        v-for="option in props.raidOptions"
+        :class="['radio', { disabled: option.disabled }]"
+      >
         <input
           v-model="model"
-          id="advanced-option-liner"
-          data-id="advanced-option-liner"
+          :id="`advanced-option-${option.value}`"
+          :data-id="`advanced-option-${option.value}`"
+          :value="option.value"
+          :disabled="option.disabled"
           type="radio"
-          value="linear"
         />
-        <label for="advanced-option-liner"> Linear </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 2 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid0"
-          :disabled="props.devNamesCount < 2"
-          data-id="advanced-option-raid0"
-          type="radio"
-          value="raid0"
-        />
-        <label for="advanced-option-raid0"> Raid0 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 2 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid1"
-          :disabled="props.devNamesCount < 2"
-          data-id="advanced-option-raid1"
-          type="radio"
-          value="raid1"
-        />
-        <label for="advanced-option-raid1"> Raid1 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 3 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid5"
-          :disabled="props.devNamesCount < 3"
-          data-id="advanced-option-raid5"
-          type="radio"
-          value="raid5"
-        />
-        <label for="advanced-option-raid5"> Raid5 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 4 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid6"
-          :disabled="props.devNamesCount < 4"
-          data-id="advanced-option-raid6"
-          type="radio"
-          value="raid6"
-        />
-        <label for="advanced-option-raid6"> Raid6 </label>
-      </div>
-      <div :class="['radio', { disabled: props.devNamesCount < 4 }]">
-        <input
-          v-model="model"
-          id="advanced-option-raid10"
-          :disabled="props.devNamesCount < 4"
-          data-id="advanced-option-raid10"
-          type="radio"
-          value="raid10"
-        />
-        <label for="advanced-option-raid10"> Raid10 </label>
+        <label :for="`advanced-option-${option.value}`">
+          {{ option.label }}
+        </label>
       </div>
     </div>
   </div>
@@ -79,11 +30,12 @@
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
 
 const model = defineModel<UI_I_CreateDatastoreForm['level']>({ required: true })
 
 const props = defineProps<{
-  devNamesCount: number
+  raidOptions: UI_I_RadioOption[]
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/lib/config/raidOptions.ts

@@ -0,0 +1,35 @@
+import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
+
+export const raidOptions = (namesCount: number): UI_I_RadioOption[] => {
+  return [
+    {
+      label: 'Linear',
+      value: 'linear',
+    },
+    {
+      label: 'Raid 0',
+      value: 'raid0',
+      disabled: namesCount < 2,
+    },
+    {
+      label: 'Raid 1',
+      value: 'raid1',
+      disabled: namesCount < 2,
+    },
+    {
+      label: 'Raid 5',
+      value: 'raid5',
+      disabled: namesCount < 3,
+    },
+    {
+      label: 'Raid 6',
+      value: 'raid6',
+      disabled: namesCount < 4,
+    },
+    {
+      label: 'Raid 10',
+      value: 'raid10',
+      disabled: namesCount < 4,
+    },
+  ]
+}