bfg-common 1.6.95 → 1.6.97

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

@@ -1,4 +1,9 @@
-export const getVlanId = (vlanId: string): string =>
-  (vlanId === 'All (4095)' && '4095') ||
-  (vlanId === 'None (0)' && '0') ||
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+export const getVlanId = (
+  vlanId: string,
+  localization: UI_I_Localization
+): string =>
+  (vlanId === `${localization.common.all} (4095)` && '4095') ||
+  (vlanId === `${localization.common.none2} (0)` && '0') ||
   vlanId

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

@@ -1,3 +1,4 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type {
   UI_I_EditFieldsData,
   UI_I_OverrideValue,
@@ -13,7 +14,8 @@ import type {
 
 export const networkEditDataFunc = (
   networkData: UI_I_EditFieldsData,
-  initialData: UI_I_ModalsInitialData
+  initialData: UI_I_ModalsInitialData,
+  vlanLocal: [string, string]
 ): UI_I_NetworkEditSendData => {
   const { vlanId, networkLabel } =
     networkData.properties as UI_I_PropertiesFields
@@ -35,7 +37,11 @@ export const networkEditDataFunc = (
   } = networkData.teamingFailover as UI_I_TeamingFailoverWithAdaptersFields
 
   const vlan: number =
-    vlanId === 'None (0)' ? 0 : vlanId === 'All (4095)' ? 4095 : Number(vlanId)
+    vlanId === vlanLocal[0]
+      ? 0
+      : vlanId === vlanLocal[1]
+      ? 4095
+      : Number(vlanId)
 
   const security: API_UI_I_Security = {}
 
@@ -109,7 +115,8 @@ export const networkEditDataFunc = (
 }
 
 export const networkInitialDataFunc = (
-  networkInitialData: UI_I_ModalsInitialData
+  networkInitialData: UI_I_ModalsInitialData,
+  vlanLocal: [string, string]
 ): UI_I_NetworkEditSendData => {
   const prMode = networkInitialData.securityPolicy?.find(
     (policy) => policy.id === 'promiscuous_mode'
@@ -140,9 +147,9 @@ export const networkInitialDataFunc = (
   )?.initialValue as UI_I_OverrideValue
 
   const vlan: number =
-    networkInitialData.vlanId === 'None (0)'
+    networkInitialData.vlanId === vlanLocal[0]
       ? 0
-      : networkInitialData.vlanId === 'All (4095)'
+      : networkInitialData.vlanId === vlanLocal[1]
       ? 4095
       : Number(networkInitialData.vlanId)
 

package/components/common/wizards/network/add/steps/connectionSettings/ConnectionSettings.vue

@@ -1,12 +1,8 @@
 <template>
-  <common-wizards-network-add-steps-connection-settings-new
-    v-if="isNewView"
-    v-model:fields="fields"
-    :messages-fields="props.messagesFields"
-  />
-  <common-wizards-network-add-steps-connection-settings-old
-    v-else
+  <component
+    :is="currentComponent"
     v-model:fields="fields"
+    :is-processing="props.isProcessing"
     :messages-fields="props.messagesFields"
     :alert-messages="props.alertMessages"
     @hide-alert="onHideAlert"
@@ -26,17 +22,27 @@ import {
   validateVlanIdConnectionSettingsLocal,
 } from '~/components/common/wizards/network/add/validations/validations'
 
-const props = defineProps<{
-  wizard: Wizard
-  connectionSettings: UI_I_ConnectionSettings
-  alertMessages: string[]
-  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-}>()
+const props = withDefaults(
+  defineProps<{
+    wizard: Wizard
+    connectionSettings: UI_I_ConnectionSettings
+    alertMessages: string[]
+    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+    isProcessing?: boolean
+  }>(),
+  { isProcessing: false }
+)
 
 const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./ConnectionSettingsNew.vue'))
+    : defineAsyncComponent(() => import('./ConnectionSettingsOld.vue'))
+)
+
 const emits = defineEmits<{
   (
     event: 'change-connection-settings',

package/components/common/wizards/network/add/steps/connectionSettings/ConnectionSettingsNew.vue

@@ -14,6 +14,7 @@
           :placeholder="localization.common.networkLabel"
           size="md"
           :error="props.messagesFields.name.field"
+          :disabled="props.isProcessing"
         />
       </div>
     </div>
@@ -27,13 +28,14 @@
       <div class="col-right">
         <ui-combobox
           v-model="fieldsLocal.vlanId"
-          :items="vlanIdSelectData"
+          :items="vlanIdSelectDataLocal"
           select-width="100%"
           show-text
           test-id="vlan-id-combobox"
           :placeholder="localization.common.vlanId"
           :error="!!props.messagesFields.vlan.field"
           :error-text="props.messagesFields.vlan.field"
+          :disabled="props.isProcessing"
           error-type="default"
           width="auto"
         />
@@ -49,11 +51,12 @@ import type {
   UI_I_Localization,
 } from '~/lib/models/interfaces'
 import type { UI_I_ConnectionSettings } 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<{
   fields: UI_I_ConnectionSettings
   messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+  isProcessing: boolean
 }>()
 
 const emits = defineEmits<{
@@ -62,6 +65,8 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const vlanIdSelectDataLocal = computed<UI_I_Localization>(() => vlanIdSelectDataFunc(localization.value))
+
 const fieldsLocal = computed({
   get(): UI_I_ConnectionSettings {
     return props.fields
@@ -96,6 +101,9 @@ const onHideAlert = (): void => {
 
     &-left {
       width: calc((100% - 8px) / 3);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
     &-right {

package/components/common/wizards/network/add/steps/connectionSettings/ConnectionSettingsOld.vue

@@ -18,6 +18,7 @@
               <fieldset>
                 <atoms-tooltip-error
                   :has-error="!!props.messagesFields.name.field"
+                  test-id="network-label-error"
                 >
                   <template #elem>
                     <input
@@ -54,7 +55,7 @@
                 <div class="flex-align-center">
                   <atoms-combobox
                     v-model.trim="fieldsLocal.vlanId"
-                    :items="vlanIdSelectData"
+                    :items="vlanIdSelectDataLocal"
                     :class="{
                       'danger-not-valid': props.messagesFields.vlan.field,
                     }"
@@ -72,7 +73,10 @@
                         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.vlan.field }}
                       </div>
                     </div>
@@ -94,7 +98,7 @@ import type {
   UI_I_Localization,
 } from '~/lib/models/interfaces'
 import type { UI_I_ConnectionSettings } 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<{
   fields: UI_I_ConnectionSettings
@@ -107,6 +111,9 @@ const emits = defineEmits<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+const vlanIdSelectDataLocal = computed<UI_I_Localization>(() =>
+  vlanIdSelectDataFunc(localization.value)
+)
 
 const fieldsLocal = computed({
   get(): UI_I_ConnectionSettings {
@@ -120,4 +127,4 @@ const fieldsLocal = computed({
 const onHideAlert = (): void => {
   emits('hide-alert', 5)
 }
-</script>
+</script>

package/components/common/wizards/network/add/steps/createStandardSwitch/CreateStandardSwitch.vue

@@ -1,30 +1,6 @@
 <template>
-  <common-wizards-network-add-steps-create-standard-switch-new
-    v-if="isNewView"
-    :adapters="props.adapters"
-    :free-adapters="props.freeAdapters"
-    :added-adapters="props.addedAdapters"
-    :core-adapters="props.coreAdapters"
-    :adapter-status="props.adapterStatus"
-    :is-dark-mode="props.isDarkMode"
-    test-id="adapter-manager"
-    is-active
-    full-mode
-    :is-show-no-active-adapters-modal="props.isShowNoActiveAdaptersModal"
-    :is-show-no-connected-active-adapters-modal="
-      props.isShowNoConnectedActiveAdaptersModal
-    "
-    @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
-    @hide-no-connected-active-adapters-modal="
-      onHideNoConnectedActiveAdaptersModal
-    "
-    @submit-from-modal="onConfirmNoActiveAdaptersModal"
-    @change-added-adapters="onChangeAddedAdapters"
-    @change-adapter-status="onChangeAdapterStatus"
-    @get-free-adapters="onGetFreeAdapters"
-  />
-  <common-wizards-network-add-steps-create-standard-switch-old
-    v-else
+  <component
+    :is="currentComponent"
     :adapters="props.adapters"
     :free-adapters="props.freeAdapters"
     :added-adapters="props.addedAdapters"
@@ -81,6 +57,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./CreateStandardSwitchNew.vue'))
+    : defineAsyncComponent(() => import('./CreateStandardSwitchOld.vue'))
+)
+
 const onGetFreeAdapters = (showModal: () => void): void =>
   emits('get-free-adapters', showModal)
 

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

@@ -1,12 +1,8 @@
 <template>
-  <common-wizards-network-add-steps-ip-four-settings-new
-    v-if="isNewView"
-    v-model="fields"
-    :messages-fields="props.messagesFields"
-  />
-  <common-wizards-network-add-steps-ip-four-settings-old
-    v-else
+  <component
+    :is="currentComponent"
     v-model="fields"
+    :is-processing="props.isProcessing"
     :messages-fields="props.messagesFields"
     :alert-messages="props.alertMessages"
     @hide-alert="onHideAlert"
@@ -32,15 +28,22 @@ import {
 } from '~/components/common/wizards/network/add/validations/validations'
 import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/lib/models/enums'
 
-const props = defineProps<{
-  wizard: Wizard
-  ipFourSettings: UI_I_IpFourSettings
-  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-  alertMessages: string[]
-  tcp: string
-  gatewayFlag: boolean
-  tcpStacks?: UI_I_TCPStack[]
-}>()
+const props = withDefaults(
+  defineProps<{
+    wizard: Wizard
+    ipFourSettings: UI_I_IpFourSettings
+    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+    alertMessages: string[]
+    tcp: string
+    gatewayFlag: boolean
+    isProcessing?: boolean
+    tcpStacks?: UI_I_TCPStack[]
+  }>(),
+  {
+    isProcessing: false,
+    tcpStacks: () => [],
+  }
+)
 
 const emits = defineEmits<{
   (event: 'change-ip-four-settings', ipFourSettings: UI_I_IpFourSettings): void
@@ -52,6 +55,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./IpFourSettingsNew.vue'))
+    : defineAsyncComponent(() => import('./IpFourSettingsOld.vue'))
+)
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const fields = ref<UI_I_IpFourSettings>(useDeepCopy(props.ipFourSettings))

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

@@ -2,7 +2,10 @@
   <div class="content">
     <div class="radio-container">
       <div
-        :class="['radio-block', { selected: fields.ipSettings === '0' }]"
+        :class="[
+          'radio-block',
+          { selected: fields.ipSettings === '0', disabled: props.isProcessing },
+        ]"
         @click="fields.ipSettings = '0'"
       >
         <ui-radio
@@ -11,11 +14,15 @@
           value="0"
           test-id="obtain-input"
           size="md"
+          :disabled="props.isProcessing"
         />
       </div>
 
       <div
-        :class="['radio-block', { selected: fields.ipSettings === '1' }]"
+        :class="[
+          'radio-block',
+          { selected: fields.ipSettings === '1', disabled: props.isProcessing },
+        ]"
         @click="fields.ipSettings = '1'"
       >
         <ui-radio
@@ -24,6 +31,7 @@
           value="1"
           test-id="static-input"
           size="md"
+          :disabled="props.isProcessing"
         />
       </div>
     </div>
@@ -44,7 +52,7 @@
             placeholder="10.10.123.1"
             size="md"
             :error="props.messagesFields['ipv4_settings.ipv4'].field"
-            :disabled="fields.ipSettings === '0'"
+            :disabled="fields.ipSettings === '0' || props.isProcessing"
           />
         </div>
       </div>
@@ -64,7 +72,7 @@
             placeholder="255.255.255.0"
             size="md"
             :error="props.messagesFields['ipv4_settings.mask'].field"
-            :disabled="fields.ipSettings === '0'"
+            :disabled="fields.ipSettings === '0' || props.isProcessing"
           />
         </div>
       </div>
@@ -76,17 +84,35 @@
           {{ localization.common.defaultGateway }}
         </h4>
         <div class="col-right pt-2">
-          <ui-checkbox
+          <ui-tooltip
             id="default-gateway-override-input"
-            v-model="fields.static.defaultGateway.override"
-            class="mb-3"
-            :label-text="
-              localization.common.overrideDefaultGatewayForThisAdapter
-            "
-            :disabled="fields.ipSettings === '0'"
-            test-id="default-gateway-override-input"
+            test-id="default-gateway-override-input-tooltip"
             size="md"
-          />
+            position="bottom"
+            position-by-tooltip="center"
+            show-type="variant-1"
+            timing="660"
+            width="214"
+          >
+            <template #target>
+              <ui-checkbox
+                id="default-gateway-override-input"
+                v-model="fields.static.defaultGateway.override"
+                class="mb-3"
+                :label-text="
+                  localization.common.overrideDefaultGatewayForThisAdapter
+                "
+                :disabled="fields.ipSettings === '0' || props.isProcessing"
+                test-id="default-gateway-override-input"
+                size="md"
+              />
+            </template>
+            <template #content>
+              <div class="tooltip-text">
+                {{ localization.common.overrideDefaultGatewayForThisAdapter }}
+              </div>
+            </template>
+          </ui-tooltip>
           <ui-input
             id="default-gateway-input"
             v-model="fields.static.defaultGateway.value"
@@ -97,7 +123,8 @@
             :error="props.messagesFields['ipv4_settings.gateway'].field"
             :disabled="
               fields.ipSettings === '0' ||
-              !fields.static.defaultGateway.override
+              !fields.static.defaultGateway.override ||
+              props.isProcessing
             "
           />
         </div>
@@ -115,6 +142,7 @@ import type {
 import type { UI_I_IpFourSettings } from '~/components/common/wizards/network/add/lib/models/interfaces'
 
 const props = defineProps<{
+  isProcessing: boolean
   modelValue: UI_I_IpFourSettings
   messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
 }>()
@@ -148,6 +176,7 @@ const fields = computed({
       opacity: unset;
     }
   }
+
   .radio-block {
     width: 100%;
     background-color: var(--radio-block-bg-color);
@@ -167,11 +196,34 @@ const fields = computed({
     }
 
     &:not(.selected).disabled {
-      background-color: #ffffff;
-      opacity: 0.6;
+      color: var(--btn-text-disabled-color);
+      background-color: var(--checkbox-fill);
+      box-shadow: inset 0 0 0 1px var(--radio-block-disabled-border);
+      pointer-events: none;
+
+      :deep(svg circle) {
+        stroke: var(--radio-block-disabled-stroke) !important;
+      }
+    }
+
+    &.selected.disabled {
+      color: var(--btn-text-disabled-color);
+      background-color: var(--radio-block-disabled-selected-bg);
+      box-shadow: inset 0 0 0 1.5px var(--radio-block-disabled-border);
+      pointer-events: none;
+
+      :deep(svg circle) {
+        &:first-of-type {
+          fill: var(--radio-block-disabled-selected-fill) !important;
+          stroke: var(--radio-block-disabled-stroke) !important;
+        }
+        &:not(:first-of-type) {
+          fill: var(--radio-block-disabled-stroke) !important;
+        }
+      }
     }
 
-    &.selected {
+    &:not(.disabled).selected {
       background-color: var(--radio-block-selected-bg-color);
       box-shadow: inset 0 0 0 1.5px var(--radio-block-selected-border-color);
     }
@@ -197,6 +249,9 @@ const fields = computed({
     &-left {
       padding-top: 8px;
       width: calc((100% - 8px) / 3);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
     &-right {
@@ -213,6 +268,10 @@ const fields = computed({
   }
 }
 
+:deep(input[type='radio'] ~ .radio-label .radio-label__text) {
+  padding-top: 1px;
+}
+
 @media (max-width: 896px) {
   .radio-container {
     display: flex;
@@ -221,4 +280,12 @@ const fields = computed({
     margin: 16px 0;
   }
 }
+:deep(.ui-checkbox-label) {
+  &.md {
+    height: unset;
+  }
+}
+.tooltip-text {
+  word-wrap: break-word;
+}
 </style>

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

@@ -53,6 +53,7 @@
                     :has-error="
                       !!props.messagesFields['ipv4_settings.ipv4'].field
                     "
+                    test-id="address-error"
                   >
                     <template #elem>
                       <input
@@ -88,6 +89,7 @@
                     :has-error="
                       !!props.messagesFields['ipv4_settings.mask'].field
                     "
+                    test-id="mask-error"
                   >
                     <template #elem>
                       <input
@@ -142,6 +144,7 @@
                       :has-error="
                         !!props.messagesFields['ipv4_settings.gateway'].field
                       "
+                      test-id="gateway-error"
                     >
                       <template #elem>
                         <input

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

@@ -1,18 +1,13 @@
 <template>
-  <common-wizards-network-add-steps-port-properties-new
-    v-if="isNewView"
+  <component
+    :is="currentComponent"
     v-model="fields"
     :messages-fields="props.messagesFields"
     :tcp-stacks="props.tcpStacks"
     :port-properties-enabled-services="portPropertiesEnabledServices"
-  />
-  <common-wizards-network-add-steps-port-properties-old
-    v-else
-    v-model="fields"
-    :messages-fields="props.messagesFields"
+    :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
+    :is-processing="props.isProcessing"
     :alert-messages="props.alertMessages"
-    :tcp-stacks="props.tcpStacks"
-    :port-properties-enabled-services="portPropertiesEnabledServices"
     @hide-alert="onHideAlert"
   />
 </template>
@@ -50,10 +45,13 @@ const props = withDefaults(
     messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
     alertMessages: string[]
     tcpStacks?: UI_I_TCPStack[]
+    isGetTcpStackLoading: boolean
+    isProcessing?: boolean
   }>(),
   {
     mtuFromSwitch: 1500,
     tcpStacks: () => [],
+    isProcessing: false,
   }
 )
 
@@ -69,6 +67,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./PortPropertiesNew.vue'))
+    : defineAsyncComponent(() => import('./PortPropertiesOld.vue'))
+)
+
 const portPropertiesEnabledServices = computed<
   UI_I_PortPropertiesEnabledService[]
 >(() => portPropertiesEnabledServicesFunc(localization.value))