bfg-common 1.6.95 → 1.6.97

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

@@ -18,6 +18,7 @@
             :placeholder="localization.common.networkLabel"
             size="md"
             :error="props.messagesFields.network_name.field"
+            :disabled="props.isProcessing"
           />
         </div>
       </div>
@@ -31,7 +32,7 @@
         <div class="col-right">
           <ui-combobox
             v-model="fields.vlanId"
-            :items="vlanIdSelectData"
+            :items="vlanIdSelectDataLocal"
             select-width="100%"
             show-text
             test-id="vlan-id-combobox"
@@ -40,6 +41,7 @@
             :error-text="props.messagesFields['new_network.vlan'].field"
             error-type="default"
             width="auto"
+            :disabled="props.isProcessing"
           />
         </div>
       </div>
@@ -61,6 +63,7 @@
                 test-id="mtu-select"
                 :placeholder="localization.common.mtu"
                 width="auto"
+                :disabled="props.isProcessing"
               />
             </div>
             <div class="content-fields-col-right">
@@ -72,7 +75,7 @@
                 :placeholder="localization.common.mtu"
                 size="md"
                 :error="props.messagesFields.mtu.field"
-                :disabled="fields.mtu.option === '0'"
+                :disabled="fields.mtu.option === '0' || props.isProcessing"
               />
             </div>
           </div>
@@ -86,7 +89,14 @@
           {{ localization.common.tcpIpStack }}
         </h4>
         <div class="col-right">
+          <ui-skeleton-item
+            v-if="props.isGetTcpStackLoading && !fields.tcp"
+            width="100%"
+            height="36"
+            border-radius="8"
+          />
           <ui-select
+            v-else
             v-model="fields.tcp"
             :items="tcpStacksOptions"
             select-width="100%"
@@ -94,6 +104,7 @@
             test-id="tsp-select"
             :placeholder="localization.common.tcpIpStack"
             width="auto"
+            :disabled="props.isProcessing"
           />
         </div>
       </div>
@@ -113,7 +124,7 @@
             id="services-v-motion"
             v-model="fields.services.management"
             :label-text="localization.common.management"
-            :disabled="fields.tcp !== 'default'"
+            :disabled="fields.tcp !== 'default' || props.isProcessing"
             test-id="enabled-services-management"
             size="md"
           />
@@ -125,7 +136,7 @@
               :id="enabledService.testId"
               v-model="fields.services[enabledService.modelValue]"
               :label-text="enabledService.label"
-              :disabled="fields.tcp !== 'default'"
+              :disabled="fields.tcp !== 'default' || props.isProcessing"
               :test-id="`${enabledService.testId}-checkbox`"
               size="md"
             />
@@ -149,7 +160,7 @@ import type {
   UI_I_PortPropertiesEnabledService,
 } from '~/components/common/wizards/network/add/lib/models/interfaces'
 import {
-  vlanIdSelectData,
+  vlanIdSelectDataFunc,
   mtuItemsFunc,
 } from '~/components/common/wizards/network/add/lib/config/config'
 
@@ -158,6 +169,8 @@ const props = defineProps<{
   messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
   tcpStacks?: UI_I_TCPStack[]
   portPropertiesEnabledServices: UI_I_PortPropertiesEnabledService[]
+  isGetTcpStackLoading: boolean
+  isProcessing: boolean
 }>()
 
 const emits = defineEmits<{
@@ -165,6 +178,9 @@ const emits = defineEmits<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+const vlanIdSelectDataLocal = computed<UI_I_Localization>(() =>
+  vlanIdSelectDataFunc(localization.value)
+)
 
 const fields = computed({
   get(): UI_I_PortProperties {
@@ -219,6 +235,9 @@ const portPropertiesEnabledServices = computed<
     &-left {
       padding-top: 8px;
       width: calc((100% - 8px) / 3);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
     &-right {
@@ -279,4 +298,9 @@ const portPropertiesEnabledServices = computed<
 :deep(.ui-select-toggle-button.md) {
   padding: 0 8px 0 12px;
 }
+:deep(.ui-checkbox-label) {
+  &.md {
+    height: unset;
+  }
+}
 </style>

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

@@ -22,6 +22,7 @@
               <fieldset>
                 <atoms-tooltip-error
                   :has-error="!!props.messagesFields.network_name.field"
+                  test-id="network-label-error"
                 >
                   <template #elem>
                     <input
@@ -58,7 +59,7 @@
                 <div class="flex-align-center">
                   <atoms-combobox
                     v-model="fields.vlanId"
-                    :items="vlanIdSelectData"
+                    :items="vlanIdSelectDataLocal"
                     :class="{
                       'danger-not-valid':
                         props.messagesFields['new_network.vlan'].field,
@@ -77,7 +78,7 @@
                         class="is-error tooltip-trigger"
                         name="info"
                       />
-                      <div class="tooltip-top-left tooltip-content error">
+                      <div class="tooltip-top-left tooltip-content error" data-id="vlan-id-error">
                         {{ props.messagesFields['new_network.vlan'].field }}
                       </div>
                     </div>
@@ -111,6 +112,7 @@
               </div>
               <atoms-tooltip-error
                 :has-error="!!props.messagesFields.mtu.field"
+                test-id="invalid-mtu-error"
               >
                 <template #elem>
                   <input
@@ -223,7 +225,7 @@ import type {
   UI_I_TCPStack,
   UI_I_PortPropertiesEnabledService,
 } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import { vlanIdSelectData } from '~/components/common/wizards/network/add/lib/config/config'
+import { vlanIdSelectDataFunc } from '~/components/common/wizards/network/add/lib/config/config'
 
 const props = defineProps<{
   modelValue: UI_I_PortProperties
@@ -239,6 +241,9 @@ const emits = defineEmits<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+const vlanIdSelectDataLocal = computed<UI_I_Localization>(() =>
+  vlanIdSelectDataFunc(localization.value)
+)
 
 const fields = computed({
   get(): UI_I_PortProperties {

package/components/common/wizards/network/add/steps/readyComplete/ReadyComplete.vue

@@ -1,10 +1,6 @@
 <template>
-  <common-wizards-network-add-steps-ready-complete-new
-    v-if="isNewView"
-    :ready-complete-fields="props.readyCompleteFields"
-  />
-  <common-wizards-network-add-steps-ready-complete-old
-    v-else
+  <component
+    :is="currentComponent"
     :ready-complete-fields="props.readyCompleteFields"
   />
 </template>
@@ -19,4 +15,10 @@ const props = defineProps<{
 const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./ReadyCompleteNew.vue'))
+    : defineAsyncComponent(() => import('./ReadyCompleteOld.vue'))
+)
 </script>

package/components/common/wizards/network/add/steps/readyComplete/ReadyCompleteNew.vue

@@ -8,6 +8,7 @@
         :view-settings-field="readyCompleteField"
         :is-labels-with-dots="true"
         :is-ready-complete="true"
+        :names-width="namesWidth"
       />
     </template>
   </div>
@@ -19,12 +20,20 @@ import type { UI_I_ReadyCompleteFields } from '~/components/common/wizards/netwo
 const props = defineProps<{
   readyCompleteFields: UI_I_ReadyCompleteFields[]
 }>()
+
+const namesWidth = ref<number[]>([])
+
+onMounted(() => {
+  document
+    .querySelectorAll('.row-name-container')
+    .forEach((element: Element): void => {
+      namesWidth.value?.push?.(element.clientWidth + 24)
+    })
+
+  namesWidth.value = namesWidth.value?.sort?.(
+    (value1: number, value2: number) => value2 - value1
+  )
+})
 </script>
 
-<style scopped lang="scss">
-.content {
-  :deep(.settings-table) {
-    background: red !important;
-  }
-}
-</style>
+<style scopped lang="scss"></style>

package/components/common/wizards/network/add/steps/selectConnectionType/SelectConnectionType.vue

@@ -1,12 +1,5 @@
 <template>
-  <common-wizards-network-add-steps-select-connection-type-new
-    v-if="isNewView"
-    v-model="connectionTypeLocal"
-  />
-  <common-wizards-network-add-steps-select-connection-type-old
-    v-else
-    v-model="connectionTypeLocal"
-  />
+  <component :is="currentComponent" v-model="connectionTypeLocal" />
 </template>
 
 <script setup lang="ts">
@@ -22,6 +15,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./SelectConnectionTypeNew.vue'))
+    : defineAsyncComponent(() => import('./SelectConnectionTypeOld.vue'))
+)
+
 const connectionTypeLocal = computed<string>({
   get() {
     return props.modelValue

package/components/common/wizards/network/add/steps/selectConnectionType/SelectConnectionTypeNew.vue

@@ -101,4 +101,8 @@ const selectConnectionTypeItems = computed<UI_I_SelectConnectionTypeItem[]>(
     }
   }
 }
+
+:deep(input[type=radio] ~ .radio-label .radio-label__text) {
+  padding-top: 1px
+}
 </style>

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

@@ -1,25 +1,17 @@
 <template>
-  <common-wizards-network-add-steps-select-target-device-new
-    v-if="isNewView"
+  <component
+    :is="currentComponent"
     v-model:fields="fields"
     :connection-type="props.connectionType"
     :messages-fields="props.messagesFields"
     :is-connection-type-first-two="isConnectionTypeFirstTwo"
     :standard-switches-initial="props.standardSwitchesInitial"
     :selected-switch-id="props.selectedSwitchId"
-    @show-modal="onShowModal"
-    @change-target-device="onChangeTargetDevice"
-  />
-  <common-wizards-network-add-steps-select-target-device-old
-    v-else
-    v-model:fields="fields"
-    :connection-type="props.connectionType"
-    :messages-fields="props.messagesFields"
-    :is-connection-type-first-two="isConnectionTypeFirstTwo"
+    :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
     :alert-messages="props.alertMessages"
-    @hide-alert="onHideAlert"
     @show-modal="onShowModal"
     @change-target-device="onChangeTargetDevice"
+    @hide-alert="onHideAlert"
   />
   <common-wizards-network-add-steps-select-target-device-modals
     :standard-switches-initial="props.standardSwitchesInitial"
@@ -56,12 +48,19 @@ const props = defineProps<{
   alertMessages: string[]
   selectedStandardSwitchId: string
   selectedSwitchId: string
+  isGetExistingSwitchesLoading: boolean
 }>()
 
 const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./SelectTargetDeviceNew.vue'))
+    : defineAsyncComponent(() => import('./SelectTargetDeviceOld.vue'))
+)
+
 const emits = defineEmits<{
   (event: 'change-target-device', value: UI_I_TargetDevice): void
   (event: 'hide-alert', value: 1): void

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

@@ -3,7 +3,14 @@
     <div>
       <h4 class="content-subtitle">{{ localization.common.targetDevice }}</h4>
 
-      <div class="radio-container">
+      <div
+        :class="[
+          'radio-container',
+          {
+            'radio-container-three': props.connectionType === '0',
+          },
+        ]"
+      >
         <div
           v-show="props.connectionType === '0'"
           :class="['radio-block', { selected: fieldsLocal.selected === '0' }]"
@@ -32,20 +39,21 @@
           />
         </div>
 
-        <div
-          v-show="props.connectionType === '2'"
-          v-permission="'Networks.UpdateSwitch'"
-          :class="['radio-block', { selected: fieldsLocal.selected === '2' }]"
-          @click="fieldsLocal.selected = '2'"
-        >
-          <ui-radio
-            v-model="fieldsLocal.selected"
-            :label="localization.common.existingSwitch"
-            value="2"
-            test-id="existing-switch-radio"
-            size="md"
-          />
-        </div>
+        <template v-if="props.connectionType === '2'">
+          <div
+            v-permission="'Networks.UpdateSwitch'"
+            :class="['radio-block', { selected: fieldsLocal.selected === '2' }]"
+            @click="fieldsLocal.selected = '2'"
+          >
+            <ui-radio
+              v-model="fieldsLocal.selected"
+              :label="localization.common.existingSwitch"
+              value="2"
+              test-id="existing-switch-radio"
+              size="md"
+            />
+          </div>
+        </template>
 
         <div
           v-permission="'Networks.CreateSwitch'"
@@ -95,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"
@@ -120,7 +128,17 @@
             {{ localization.common.standardSwitch }}
           </h4>
           <div class="col-right">
+            <ui-skeleton-item
+              v-if="
+                props.isGetExistingSwitchesLoading &&
+                !fieldsLocal.standardSwitch
+              "
+              width="100%"
+              height="36"
+              border-radius="8"
+            />
             <ui-select
+              v-else
               v-model="fieldsLocal.standardSwitch"
               :items="selectItems"
               select-width="100%"
@@ -136,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"
@@ -161,10 +179,18 @@
             {{ localization.common.switch }}
           </h4>
           <div class="col-right">
+            <ui-skeleton-item
+              v-if="props.isGetExistingSwitchesLoading && !fieldsLocal.switch"
+              width="100%"
+              height="36"
+              border-radius="8"
+            />
             <ui-select
+              v-else
               v-model="fieldsLocal.switch"
               :items="selectItems"
               select-width="100%"
+              width="auto"
               show-text
               test-id="switch-input"
               :placeholder="localization.common.selectASwitch"
@@ -177,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"
@@ -237,6 +263,7 @@ const props = defineProps<{
   isConnectionTypeFirstTwo: boolean
   standardSwitchesInitial: UI_I_Switch[]
   selectedSwitchId: string
+  isGetExistingSwitchesLoading: boolean
 }>()
 
 const emits = defineEmits<{
@@ -310,6 +337,9 @@ watch(
     &-left {
       padding-top: 8px;
       width: calc((100% - 8px) / 3);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
     &-right {
@@ -327,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 {
@@ -382,11 +419,44 @@ watch(
 }
 
 @media (max-width: 896px) {
-  .radio-container {
+  .radio-container:not(.radio-container-three) {
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+    margin: 16px 0;
+  }
+}
+
+@media (max-width: 1016px) {
+  .radio-container.radio-container-three {
     display: flex;
     flex-direction: column;
     row-gap: 12px;
     margin: 16px 0;
   }
 }
+
+:deep(input[type='radio'] ~ .radio-label .radio-label__text) {
+  padding-top: 1px;
+}
+
+:deep(.ui-dropdown-menu li.disabled:not(.has-items):hover) {
+  background-color: var(--dropdown-item-hover-bg-color);
+}
+
+:deep(.ui-dropdown-menu .ui-dropdown-menu-item) {
+  &.selected {
+    a {
+      width: calc(100% - 28px);
+    }
+  }
+
+  a {
+    span {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+}
 </style>

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

@@ -34,6 +34,7 @@
                   fieldsLocal.selected === '0' &&
                   !!props.messagesFields.network.field
                 "
+                test-id="existing-network-error"
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
@@ -97,6 +98,7 @@
                   fieldsLocal.selected === '1' &&
                   !!props.messagesFields.switch.field
                 "
+                test-id="existing-standard-switch-error"
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
@@ -160,6 +162,7 @@
                   fieldsLocal.selected === '2' &&
                   !!props.messagesFields.switch2.field
                 "
+                test-id="standard-switch-error"
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
@@ -229,6 +232,7 @@
                       :has-error="
                         !!props.messagesFields['new_switch.mtu'].field
                       "
+                      test-id="invalid-mtu-error"
                     >
                       <template #elem>
                         <input

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

@@ -1,13 +1,6 @@
 <template>
-  <common-wizards-network-add-steps-select-target-device-modals-new-select-network
-    v-if="isNewView"
-    :data="networks"
-    :show="props.show"
-    @select-network="onSelectNetwork"
-    @hide="onHideModal"
-  />
-  <common-wizards-network-add-steps-select-target-device-modals-old-select-network
-    v-else
+  <component
+    :is="currentComponent"
     :data="networks"
     :show="props.show"
     :is-show-alert="isShowAlert"
@@ -35,6 +28,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/SelectNetwork.vue'))
+    : defineAsyncComponent(() => import('./old/SelectNetwork.vue'))
+)
+
 const networks = ref<UI_I_NetworkForAdding[]>(props.data)
 
 watch(

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

@@ -1,13 +1,6 @@
 <template>
-  <common-wizards-network-add-steps-select-target-device-modals-new-select-standard-switch
-    v-if="isNewView"
-    :data="standardSwitches"
-    :show="props.show"
-    @select-standard-switch="onSelectSwitch"
-    @hide="onHideModal"
-  />
-  <common-wizards-network-add-steps-select-target-device-modals-old-select-standard-switch
-    v-else
+  <component
+    :is="currentComponent"
     :data="standardSwitches"
     :show="props.show"
     :is-show-alert="isShowAlert"
@@ -35,6 +28,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/SelectStandardSwitch.vue'))
+    : defineAsyncComponent(() => import('./old/SelectStandardSwitch.vue'))
+)
+
 const standardSwitches = ref<UI_I_Switch[]>(props.data)
 
 watch(

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

@@ -1,19 +1,12 @@
 <template>
-  <common-wizards-network-add-steps-select-target-device-modals-new-select-switch
-    v-if="isNewView"
-    :data="switches"
-    :show="props.show"
-    @select-switch="onSelectSwitch"
-    @hide="onHideModal"
-  />
-  <common-wizards-network-add-steps-select-target-device-modals-old-select-switch
-    v-else
+  <component
+    :is="currentComponent"
     :data="switches"
     :show="props.show"
     :is-show-alert="isShowAlert"
-    @select-switch="onSelectSwitch"
     @show-alert="isShowAlert = true"
     @hide-alert="onHideAlert"
+    @select-switch="onSelectSwitch"
     @hide="onHideModal"
   />
 </template>
@@ -35,6 +28,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/SelectSwitch.vue'))
+    : defineAsyncComponent(() => import('./old/SelectSwitch.vue'))
+)
+
 const switches = ref<UI_I_Switch[]>(props.data)
 
 watch(