bfg-common 1.6.3 → 1.6.4

package/components/common/wizards/network/add/AddNew.vue

@@ -44,22 +44,21 @@
         >
           <template #subTitle>
             <div ref="selectTargetDeviceBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="select-target-device-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -89,22 +88,21 @@
         >
           <template #subTitle>
             <div ref="createStandardSwitchBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="create-standard-switch-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -146,22 +144,21 @@
         >
           <template #subTitle>
             <div ref="portPropertiesBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="port-properties-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -190,22 +187,21 @@
         >
           <template #subTitle>
             <div ref="ipFourSettingsBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="ip-four-settings-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -233,22 +229,21 @@
         >
           <template #subTitle>
             <div ref="connectionSettingsBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="connection-settings-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -463,6 +458,7 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
   }
   :deep(.ui-wizard-content-with-subtitle) {
     padding-right: 0;
+    scrollbar-gutter: unset;
   }
 }
 
@@ -477,7 +473,7 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
 :deep(.ui-alert-item) {
   margin-bottom: 12px;
 
-  &.mb-4 {
+  &:last-of-type {
     margin-bottom: 16px;
   }
 }

package/components/common/wizards/network/add/lib/config/initialData.ts

@@ -37,7 +37,7 @@ export const portPropertiesInitial = (
   localization: UI_I_Localization
 ): UI_I_PortProperties => ({
   networkLabel: '',
-  vlanId: `${localization.common.none} (0)`,
+  vlanId: `${localization.common.none2} (0)`,
   mtu: {
     option: '0',
     size: 1500,
@@ -62,15 +62,15 @@ export const connectionSettingsInitial = (
   localization: UI_I_Localization
 ): UI_I_ConnectionSettings => ({
   networkLabel: 'VM Network',
-  vlanId: `${localization.common.none} (0)`,
+  vlanId: `${localization.common.none2} (0)`,
 })
 
 export const vlanIdSelectDataFunc = (
   localization: UI_I_Localization
 ): UI_I_VlanIdData[] => [
   {
-    text: `${localization.common.none} (0)`,
-    value: `${localization.common.none} (0)`,
+    text: `${localization.common.none2} (0)`,
+    value: `${localization.common.none2} (0)`,
   },
   {
     text: `${localization.common.all} (4095)`,

package/components/common/wizards/network/add/lib/utils/utils.ts

@@ -5,5 +5,5 @@ export const getVlanId = (
   localization: UI_I_Localization
 ): string =>
   (vlanId === `${localization.common.all} (4095)` && '4095') ||
-  (vlanId === `${localization.common.none} (0)` && '0') ||
+  (vlanId === `${localization.common.none2} (0)` && '0') ||
   vlanId

package/components/common/wizards/network/add/steps/ipFourSettings/IpFourSettingsNew.vue

@@ -281,14 +281,8 @@ const fields = computed({
   }
 }
 :deep(.ui-checkbox-label) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-
-  .ui-checkbox-label-text {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  &.md {
+    height: unset;
   }
 }
 .tooltip-text {

package/components/common/wizards/network/add/steps/portProperties/PortPropertiesNew.vue

@@ -299,14 +299,8 @@ const portPropertiesEnabledServices = computed<
   padding: 0 8px 0 12px;
 }
 :deep(.ui-checkbox-label) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-
-  .ui-checkbox-label-text {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  &.md {
+    height: unset;
   }
 }
 </style>

package/components/common/wizards/network/add/steps/selectTargetDevice/SelectTargetDeviceNew.vue

@@ -103,7 +103,7 @@
               <template #row="{ item }">
                 <div v-if="item.iconName" class="browse-btn">
                   <ui-button
-                    test-id="button-1"
+                    test-id="browse-network"
                     type="primary"
                     variant="text"
                     size="lg"
@@ -154,7 +154,7 @@
               <template #row="{ item }">
                 <div v-if="item.iconName" class="browse-btn">
                   <ui-button
-                    test-id="button-1"
+                    test-id="browse-standard-switch"
                     type="primary"
                     variant="text"
                     size="lg"
@@ -203,7 +203,7 @@
               <template #row="{ item }">
                 <div v-if="item.iconName" class="browse-btn">
                   <ui-button
-                    test-id="button-1"
+                    test-id="browse-switch"
                     type="primary"
                     variant="text"
                     size="lg"
@@ -357,10 +357,17 @@ watch(
     :deep(.ui-btn) {
       justify-content: flex-start;
       height: 32px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
 
       span {
         text-align: left;
         color: var(--select-text);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       &:hover {

package/components/common/wizards/network/add/steps/selectTargetDevice/modals/new/SelectNetwork.vue

@@ -46,7 +46,7 @@ import type {
   UI_I_DataTable,
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
-  UI_I_TableTexts
+  UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type {
@@ -147,6 +147,10 @@ const onSelectNetwork = (): void => {
 <style scoped lang="scss">
 :deep(.table-container) {
   padding: 8px 32px !important;
+
+  .column-manager-button span {
+    font-weight: 500;
+  }
 }
 
 .row-container {

package/components/common/wizards/network/add/validations/common.ts

@@ -21,7 +21,7 @@ export const checkVlanId = (
   vlanId: string,
   localization: UI_I_Localization
 ): boolean =>
-  vlanId !== `${localization.common.none} (0)` &&
+  vlanId !== `${localization.common.none2} (0)` &&
   vlanId !== `${localization.common.all} (4095)` &&
   (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId.trim() === '')
 

package/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/New.vue

@@ -2,7 +2,7 @@
   <div class="device-table-container">
     <ui-data-table
       :data="data"
-      :options="options"
+      :options="tableConfig.options"
       :loading="props.isLoading"
       :total-pages="props.totalPages"
       :total-items="props.totalItems"
@@ -79,13 +79,10 @@ import type {
   UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_T_SelectComputeResourceTabType } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/types'
+import type { UI_T_SelectComputeResourceTabType } from '~/components/common/wizards/vm/migrate/steps/selectStorage/lib/models/types'
 import type { UI_T_ComputeResourceTableItem } from '~/components/common/wizards/vm/migrate/steps/computeResource/lib/models/types'
-import {
-  options,
-  getHeaderDataFunc,
-  getBodyDataFunc,
-} from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/hostTable'
+import * as hostTable from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/hostTable'
+import * as clusterTable from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/clusterTable'
 
 const selectedDataLocal = defineModel<number | null>({ required: true })
 const props = defineProps<{
@@ -120,15 +117,33 @@ const tableSkeleton = ref<UI_I_DataTableSkeleton>({
   withoutPagination: true,
 })
 
+const tableTitleMap = {
+  host: localization.value.common.hosts,
+  cluster: localization.value.common.clusters,
+} as const
+const tableConfigMap = {
+  host: hostTable,
+  cluster: clusterTable,
+} as const
+
+const tableConfig = computed(
+  () => tableConfigMap[props.type as keyof typeof tableConfigMap]
+)
+
 const data = computed<UI_I_DataTable>(() => ({
-  id: 'compute-resource-host-table',
-  title: `${localization.value.common.hosts} (${props.totalItems})`,
+  id: `compute-resource-${props.type}-table`,
+  title: tableDataTitle.value,
   header: deviceHeadItems.value,
   body: deviceBodyItems.value,
 }))
-
+const tableDataTitle = computed<string>(
+  () =>
+    `${tableTitleMap[props.type as keyof typeof tableConfigMap]} (${
+      props.totalItems
+    })`
+)
 const deviceHeadItems = computed<UI_I_DataTableHeader[]>(() =>
-  getHeaderDataFunc(localization.value)
+  tableConfig.value.getHeaderDataFunc(localization.value)
 )
 
 const deviceBodyItems = ref<UI_I_DataTableBody[]>([])
@@ -140,13 +155,16 @@ watch(
       return
     }
 
-    deviceBodyItems.value = getBodyDataFunc(newValue, localization.value)
+    deviceBodyItems.value = tableConfig.value.getBodyDataFunc(
+      newValue,
+      localization.value
+    )
   },
   { deep: true, immediate: true }
 )
 
 const onSelectRow = (value: UI_I_DataTableBody[]): void => {
-  selectedDataLocal.value = value?.[0].row
+  selectedDataLocal.value = value?.[0].row as number
 }
 </script>