bfg-common 1.5.486 → 1.5.488

package/components/common/wizards/network/add/steps/{PortProperties.vue → portProperties/PortPropertiesOld.vue}

@@ -173,7 +173,7 @@
                   { disabled: fields.tcp !== 'default' },
                 ]"
               >
-                <label v-if="isSphereProject">
+                <label v-if="props.isSphereProject">
                   <input
                     v-model="fields.services.vMotion"
                     data-id="services-v-motion-checkbox"
@@ -194,7 +194,7 @@
           </div>
           <div :class="{ disabled: fields.tcp !== 'default' }">
             <template
-              v-for="enabledService in portPropertiesEnabledServices"
+              v-for="enabledService in props.portPropertiesEnabledServices"
               :key="enabledService.modelValue"
             >
               <div class="horizontal-flex-container">
@@ -222,188 +222,41 @@
 
 <script setup lang="ts">
 import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type {
   UI_I_ArbitraryObject,
   UI_I_Localization,
 } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
 import type {
   UI_I_PortProperties,
   UI_I_TCPStack,
+  UI_I_PortPropertiesEnabledService,
 } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type { UI_T_TCP } from '~/components/common/wizards/network/add/lib/models/types'
-import {
-  servicesInitial,
-  vlanIdSelectData,
-  portPropertiesEnabledServicesFunc,
-} from '~/components/common/wizards/network/add/lib/config/config'
-import {
-  validateMtuPortPropertiesLocal,
-  validateNetworkPortPropertiesLocal,
-  validateVlanIdPortPropertiesLocal,
-} from '~/components/common/wizards/network/add/validations/validations'
+import { vlanIdSelectData } from '~/components/common/wizards/network/add/lib/config/config'
 
-const props = withDefaults(
-  defineProps<{
-    portProperties: UI_I_PortProperties
-    project: UI_T_Project
-    alertMessages: string[]
-    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-    wizard: Wizard
-    mtuFromSwitch?: number
-    tcpStacks?: UI_I_TCPStack[]
-  }>(),
-  {
-    mtuFromSwitch: 1500,
-    tcpStacks: () => [],
-  }
-)
+const props = defineProps<{
+  modelValue: UI_I_PortProperties
+  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+  alertMessages: string[]
+  tcpStacks?: UI_I_TCPStack[]
+  isSphereProject: boolean
+  portPropertiesEnabledServices: UI_I_PortPropertiesEnabledService[]
+}>()
 
 const emits = defineEmits<{
-  (event: 'change-port-properties', portProperties: UI_I_PortProperties): void
-  (event: 'change-gateway-flag', value: boolean): void
   (event: 'hide-alert', stepId: 3): void
+  (event: 'update:model-value', value: UI_I_PortProperties): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isSphereProject = computed<boolean>(() => props.project === 'sphere')
-
-const portPropertiesEnabledServices = computed(() =>
-  portPropertiesEnabledServicesFunc(localization.value, isSphereProject.value)
-)
-
-const mtuCustom = ref<number>()
-
-const fields = ref<UI_I_PortProperties>({
-  ...props.portProperties,
-  mtu: {
-    ...props.portProperties.mtu,
-    size:
-      !mtuCustom.value && props.portProperties.mtu.option !== '1'
-        ? props.mtuFromSwitch
-        : props.portProperties.mtu.size,
-  },
-})
-
-const setEnabledServiceDefault = (
-  tcp: UI_T_TCP,
-  currentFields: UI_I_PortProperties
-): void => {
-  tcp === 'default' &&
-    (fields.value = {
-      ...currentFields,
-      services: servicesInitial,
-    })
-}
-
-const setEnabledServiceProvisioning = (
-  tcp: UI_T_TCP,
-  currentFields: UI_I_PortProperties,
-  newFields?: UI_I_PortProperties
-): void => {
-  tcp === 'provisioning' &&
-    (fields.value = {
-      ...(newFields || currentFields),
-      services: {
-        ...servicesInitial,
-        provisioning: true,
-      },
-    })
-}
-
-const setEnabledServiceVMotion = (
-  tcp: UI_T_TCP,
-  currentFields: UI_I_PortProperties,
-  newFields?: UI_I_PortProperties
-): void => {
-  tcp === '' &&
-    (fields.value = {
-      ...(newFields || currentFields),
-      services: {
-        ...servicesInitial,
-        vMotion: true,
-      },
-    })
-}
-
-let oldFields = useDeepCopy(fields.value)
-
-// Changing data and validate they
-watch(
-  fields,
-  (newFields: UI_I_PortProperties) => {
-    if (newFields.tcp && newFields.tcp !== oldFields.tcp) {
-      emits('change-gateway-flag', false)
-      setEnabledServiceDefault(newFields.tcp, fields.value)
-      setEnabledServiceProvisioning(newFields.tcp, fields.value, newFields)
-      setEnabledServiceVMotion(newFields.tcp, fields.value, newFields)
-    }
-
-    oldFields.networkLabel !== newFields.networkLabel &&
-      validateNetworkPortPropertiesLocal(
-        localization.value,
-        newFields,
-        props.wizard
-      )
-
-    oldFields.vlanId !== newFields.vlanId &&
-      validateVlanIdPortPropertiesLocal(
-        localization.value,
-        newFields,
-        props.wizard
-      )
-
-    oldFields.mtu.size !== newFields.mtu.size &&
-      validateMtuPortPropertiesLocal(
-        localization.value,
-        newFields,
-        props.wizard
-      )
-
-    oldFields = useDeepCopy(newFields)
-
-    emits('change-port-properties', newFields)
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => fields.value.mtu,
-  (newMtu: { size: number; option: string }) => {
-    if (newMtu.option === '0') {
-      mtuCustom.value = props.mtuFromSwitch
-      fields.value.mtu.size = props.mtuFromSwitch
-      return
-    }
-    mtuCustom.value = newMtu.size
+const fields = computed({
+  get(): UI_I_PortProperties {
+    return props.modelValue
   },
-  { deep: true, immediate: true }
-)
-
-// Enabled services variant selection
-watch(
-  () => fields.value.tcp,
-  (newTcp: UI_T_TCP, oldTcp: UI_T_TCP) => {
-    if (newTcp !== oldTcp) {
-      setEnabledServiceDefault(newTcp, fields.value)
-      setEnabledServiceProvisioning(newTcp, fields.value)
-      setEnabledServiceVMotion(newTcp, fields.value)
-    }
-    emits('change-port-properties', fields.value)
-  }
-)
-
-watch(
-  () => props.tcpStacks,
-  (newValue: UI_I_TCPStack[]) => {
-    if (fields.value.tcp === '') {
-      fields.value.tcp = newValue?.[0]?.id || ''
-    }
+  set(newValue: UI_I_PortProperties) {
+    emits('update:model-value', newValue)
   },
-  { deep: true, immediate: true }
-)
+})
 
 const onHideAlert = (): void => {
   emits('hide-alert', 3)

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

@@ -0,0 +1,22 @@
+<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
+    :ready-complete-fields="props.readyCompleteFields"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ReadyCompleteFields } from '~/components/common/wizards/network/add/lib/models/interfaces'
+
+const props = defineProps<{
+  readyCompleteFields: UI_I_ReadyCompleteFields[]
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <div class="content mb-4 mt-4">
+    <template
+      v-for="readyCompleteField in props.readyCompleteFields"
+      :key="readyCompleteField.id"
+    >
+      <common-diagram-main-modals-view-settings-view-settings
+        :view-settings-field="readyCompleteField"
+        :is-labels-with-dots="true"
+        :is-ready-complete="true"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ReadyCompleteFields } from '~/components/common/wizards/network/add/lib/models/interfaces'
+
+const props = defineProps<{
+  readyCompleteFields: UI_I_ReadyCompleteFields[]
+}>()
+</script>
+
+<style scopped lang="scss">
+.content {
+  :deep(.settings-table) {
+    background: red !important;
+  }
+}
+</style>

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

@@ -2,7 +2,6 @@
   <common-wizards-network-add-steps-select-target-device-new
     v-if="isNewView"
     v-model:fields="fields"
-    :wizard="props.wizard"
     :connection-type="props.connectionType"
     :messages-fields="props.messagesFields"
     :is-connection-type-first-two="isConnectionTypeFirstTwo"
@@ -14,7 +13,6 @@
   <common-wizards-network-add-steps-select-target-device-old
     v-else
     v-model:fields="fields"
-    :wizard="props.wizard"
     :connection-type="props.connectionType"
     :messages-fields="props.messagesFields"
     :is-connection-type-first-two="isConnectionTypeFirstTwo"
@@ -142,6 +140,13 @@ watch(
         UI_E_ValidationFields.TARGET_DEVICE_STANDARD_SWITCH
       )
 
+    newFields.switch &&
+      !prevValue.switch &&
+      props.wizard.removeValidationLocal(
+        1,
+        UI_E_ValidationFields.TARGET_DEVICE_SWITCH
+      )
+
     if (newFields.selected !== prevValue.selected) {
       props.wizard.removeValidationLocal(
         1,

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

@@ -219,7 +219,6 @@
 
 <script setup lang="ts">
 import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/select/lib/models/interfaces'
 import type {
   UI_I_ArbitraryObject,
@@ -234,7 +233,6 @@ const props = defineProps<{
   fields: UI_I_TargetDevice
   connectionType: string
   messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-  wizard: Wizard
   isConnectionTypeFirstTwo: boolean
   standardSwitchesInitial: UI_I_Switch[]
   selectedSwitchId: string
@@ -306,10 +304,10 @@ watch(
 
   .col {
     display: flex;
-    align-items: center;
     column-gap: 16px;
 
     &-left {
+      padding-top: 8px;
       width: calc((100% - 8px) / 3);
     }
 

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

@@ -263,7 +263,6 @@
 
 <script setup lang="ts">
 import type { UI_I_ErrorFields } from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
 import type {
   UI_I_ArbitraryObject,
   UI_I_Localization,
@@ -274,7 +273,6 @@ import type {
 
 const props = defineProps<{
   fields: UI_I_TargetDevice
-  wizard: Wizard
   connectionType: string
   messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
   alertMessages: string[]

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

@@ -18,9 +18,8 @@ export const checkIfValidIP = (str: string): boolean => {
 export const checkVlanId = (vlanId: string): boolean =>
   vlanId !== 'None (0)' &&
   vlanId !== 'All (4095)' &&
-  (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId === '')
+  (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId.trim() === '')
 
 export const checkMtu = (mtu: number): boolean => {
   return !!(mtu === 0 ? '0' : mtu) && isIntegerNumberInRange(mtu, 1280, 65535)
 }
-

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

@@ -13,12 +13,16 @@ export const validateVlanIdConnectionSettingsLocal = (
   data: UI_I_ConnectionSettings,
   wizard: Wizard
 ): void => {
+  const emptyValue: boolean = data.vlanId.trim() === ''
+
   wizard.validateFieldLocal(
     5,
     UI_E_ValidationFields.CONNECTION_SETTINGS_VLAN,
-    checkVlanId(data.vlanId),
-    localization.common.vlanIdInvalidMessage,
-    localization.common.vlanIdInvalidMessage
+    emptyValue || checkVlanId(data.vlanId),
+    emptyValue
+      ? localization.common.fieldRequired
+      : localization.common.vlanIdInvalidMessage,
+    ''
   )
 }
 
@@ -31,8 +35,8 @@ export const validateNetworkConnectionSettingsLocal = (
     5,
     UI_E_ValidationFields.CONNECTION_SETTINGS_NETWORK,
     data.networkLabel === '',
-    localization.common.networkLabelInvalidMessage,
-    localization.common.networkLabelInvalidMessage
+    localization.common.fieldRequired,
+    ''
   )
 }
 
@@ -43,13 +47,16 @@ export const checkConnectionSettingsSync = (
   value: UI_I_WizardStep[]
 ): UI_I_ValidationReturn => {
   let stepHasError = false
+  const emptyValue: boolean = data.vlanId.trim() === ''
 
-  if (checkVlanId(data.vlanId)) {
+  if (emptyValue || checkVlanId(data.vlanId)) {
     stepHasError = wizard.setValidation(
       5,
       UI_E_ValidationFields.CONNECTION_SETTINGS_VLAN,
       {
-        fieldMessage: localization.common.vlanIdInvalidMessage,
+        fieldMessage: emptyValue
+          ? localization.common.fieldRequired
+          : localization.common.vlanIdInvalidMessage,
         alertMessage: localization.common.vlanIdInvalidMessage,
       }
     )

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

@@ -13,12 +13,17 @@ export const validateAddressIpFourSettingsLocal = (
   data: UI_I_IpFourSettings,
   wizard: Wizard
 ): void => {
+  const emptyValue: boolean = data.static.ipFourAddress.trim() === ''
+
   wizard.validateFieldLocal(
     4,
     UI_E_ValidationFields.IPV_SETTINGS_IPV,
-    [!data.static.ipFourAddress, !checkIfValidIP(data.static.ipFourAddress)],
-    [localization.common.ipFourAddressEmpty, localization.common.ipFourAddressInvalid],
-    [localization.common.ipFourAddressEmpty, localization.common.ipFourAddressInvalid]
+    [emptyValue, !checkIfValidIP(data.static.ipFourAddress)],
+    [
+      localization.common.fieldRequired,
+      localization.common.ipFourAddressInvalid,
+    ],
+    ['', '']
   )
 }
 
@@ -27,12 +32,14 @@ export const validateMaskIpFourSettingsLocal = (
   data: UI_I_IpFourSettings,
   wizard: Wizard
 ): void => {
+  const emptyValue: boolean = data.static.subnetMask.trim() === ''
+
   wizard.validateFieldLocal(
     4,
     UI_E_ValidationFields.IPV_SETTINGS_MASK,
-    [!data.static.subnetMask, !checkIfValidIP(data.static.subnetMask)],
-    [localization.common.subnetMaskEmpty, localization.common.subnetMaskInvalid],
-    [localization.common.subnetMaskEmpty, localization.common.subnetMaskInvalid]
+    [emptyValue, !checkIfValidIP(data.static.subnetMask)],
+    [localization.common.fieldRequired, localization.common.subnetMaskInvalid],
+    ['', '']
   )
 }
 
@@ -41,16 +48,23 @@ export const validateGatewayIpFourSettingsLocal = (
   data: UI_I_IpFourSettings,
   wizard: Wizard
 ): void => {
+  const emptyValue: boolean =
+    data.static.defaultGateway.override &&
+    data.static.defaultGateway.value.trim() === ''
+
   wizard.validateFieldLocal(
     4,
     UI_E_ValidationFields.IPV_SETTINGS_GATEWAY,
     [
-      data.static.defaultGateway.override && !data.static.defaultGateway.value,
+      emptyValue,
       data.static.defaultGateway.override &&
         !checkIfValidIP(data.static.defaultGateway.value),
     ],
-    [localization.common.defaultGatewayEmpty, localization.common.defaultGatewayInvalid],
-    [localization.common.defaultGatewayEmpty, localization.common.defaultGatewayInvalid]
+    [
+      localization.common.fieldRequired,
+      localization.common.defaultGatewayInvalid,
+    ],
+    ['', '']
   )
 }
 
@@ -174,7 +188,7 @@ export const checkIpFourSettingsSync = (
       value
     )
   }
-
+  
   return {
     newValue: value,
     stepHasError,

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

@@ -63,7 +63,7 @@ export const checkNetworkAsync = async (
 
   if (!labelValidation.isValid) {
     stepHasError = wizard.setValidation(stepId, fieldName, {
-      fieldMessage: labelValidation.message,
+      fieldMessage: localization.common.fieldRequired,
       alertMessage: labelValidation.message,
     })
   } else if (wizard.hasMessage(stepId, fieldName)) {

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

@@ -1,5 +1,8 @@
 import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
-import type {UI_I_ValidationReturn, UI_I_WizardStep} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type {
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
 import type { UI_I_PortProperties } from '~/components/common/wizards/network/add/lib/models/interfaces'
 import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/lib/models/enums'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
@@ -17,8 +20,8 @@ export const validateNetworkPortPropertiesLocal = (
     3,
     UI_E_ValidationFields.PORT_PROPERTIES_NETWORK,
     data.networkLabel === '',
-    localization.common.networkLabelInvalidMessage,
-      localization.common.networkLabelInvalidMessage
+    localization.common.fieldRequired,
+    ''
   )
 }
 
@@ -27,12 +30,15 @@ export const validateVlanIdPortPropertiesLocal = (
   data: UI_I_PortProperties,
   wizard: Wizard
 ): void => {
+  const emptyValue: boolean = data.vlanId === ''
   wizard.validateFieldLocal(
     3,
     UI_E_ValidationFields.PORT_PROPERTIES_VLAN,
     checkVlanId(data.vlanId),
-      localization.common.vlanIdInvalidMessage,
-      localization.common.vlanIdInvalidMessage
+    emptyValue
+      ? localization.common.fieldRequired
+      : localization.common.vlanIdInvalidMessage,
+    ''
   )
 }
 
@@ -41,12 +47,15 @@ export const validateMtuPortPropertiesLocal = (
   data: UI_I_PortProperties,
   wizard: Wizard
 ): void => {
+  const emptyValue: boolean = data.mtu.option === '1' && data.mtu.size === ''
   wizard.validateFieldLocal(
     3,
     UI_E_ValidationFields.PORT_PROPERTIES_MTU,
-    data.mtu.option === '1' && checkMtu(data.mtu.size),
-      localization.common.mtuInvalidMessage,
-      localization.common.mtuInvalidMessage
+    data.mtu.option === '1' && (checkMtu(data.mtu.size) || emptyValue),
+    emptyValue
+      ? localization.common.fieldRequired
+      : localization.common.mtuInvalidMessage,
+    ''
   )
 }
 
@@ -58,22 +67,45 @@ export const checkPortPropertiesSync = (
 ): UI_I_ValidationReturn => {
   let stepHasError = false
 
-  if (checkVlanId(data.vlanId)) {
-    stepHasError = wizard.setValidation(3, UI_E_ValidationFields.PORT_PROPERTIES_VLAN, {
-      fieldMessage: localization.common.vlanIdInvalidMessage,
-      alertMessage: localization.common.vlanIdInvalidMessage,
-    })
+  const emptyMtu: boolean = data.mtu.option === '1' && data.mtu.size === ''
+  const emptyVlanId: boolean = data.vlanId === ''
+
+  if (checkVlanId(data.vlanId) || emptyVlanId) {
+    stepHasError = wizard.setValidation(
+      3,
+      UI_E_ValidationFields.PORT_PROPERTIES_VLAN,
+      {
+        fieldMessage: emptyVlanId
+          ? localization.common.fieldRequired
+          : localization.common.vlanIdInvalidMessage,
+        alertMessage: localization.common.vlanIdInvalidMessage,
+      }
+    )
   } else if (wizard.hasMessage(3, UI_E_ValidationFields.PORT_PROPERTIES_VLAN)) {
-    value = wizard.removeValidation(3, UI_E_ValidationFields.PORT_PROPERTIES_VLAN, value)
+    value = wizard.removeValidation(
+      3,
+      UI_E_ValidationFields.PORT_PROPERTIES_VLAN,
+      value
+    )
   }
 
-  if (data.mtu.option === '1' && checkMtu(data.mtu.size)) {
-    stepHasError = wizard.setValidation(3, UI_E_ValidationFields.PORT_PROPERTIES_MTU, {
-      fieldMessage: localization.common.mtuInvalidMessage,
-      alertMessage: localization.common.mtuInvalidMessage,
-    })
+  if (data.mtu.option === '1' && (checkMtu(data.mtu.size) || emptyMtu)) {
+    stepHasError = wizard.setValidation(
+      3,
+      UI_E_ValidationFields.PORT_PROPERTIES_MTU,
+      {
+        fieldMessage: emptyMtu
+          ? localization.common.fieldRequired
+          : localization.common.mtuInvalidMessage,
+        alertMessage: localization.common.mtuInvalidMessage,
+      }
+    )
   } else if (wizard.hasMessage(3, UI_E_ValidationFields.PORT_PROPERTIES_MTU)) {
-    value = wizard.removeValidation(3, UI_E_ValidationFields.PORT_PROPERTIES_MTU, value)
+    value = wizard.removeValidation(
+      3,
+      UI_E_ValidationFields.PORT_PROPERTIES_MTU,
+      value
+    )
   }
 
   return {

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

@@ -13,11 +13,16 @@ export const validateMtuTargetDeviceLocal = (
   data: UI_I_TargetDevice,
   wizard: Wizard
 ): void => {
+  const emptyValue: boolean =
+    data.mtu === undefined || data.mtu.toString().trim() === ''
+
   wizard.validateFieldLocal(
     1,
     UI_E_ValidationFields.TARGET_DEVICE_MTU,
     data.selected === '3' && checkMtu(data.mtu || 0),
-    localization.common.mtuInvalidMessage,
+    emptyValue
+      ? localization.common.fieldRequired
+      : localization.common.mtuInvalidMessage,
     ''
   )
 }
@@ -37,7 +42,9 @@ export const checkTargetDeviceSync = (
       UI_E_ValidationFields.TARGET_DEVICE_NETWORK,
       {
         fieldMessage: localization.common.networkInvalidMessage,
-        alertMessage: isNewView ? '' : localization.common.networkInvalidMessage,
+        alertMessage: isNewView
+          ? ''
+          : localization.common.networkInvalidMessage,
       }
     )
   } else if (
@@ -56,7 +63,9 @@ export const checkTargetDeviceSync = (
       UI_E_ValidationFields.TARGET_DEVICE_STANDARD_SWITCH,
       {
         fieldMessage: localization.common.standardSwitchInvalidMessage,
-        alertMessage: isNewView ? '' : localization.common.standardSwitchInvalidMessage,
+        alertMessage: isNewView
+          ? ''
+          : localization.common.standardSwitchInvalidMessage,
       }
     )
   } else if (
@@ -87,11 +96,16 @@ export const checkTargetDeviceSync = (
   }
 
   if (data.selected === '3' && checkMtu(data.mtu || 0)) {
+    const emptyValue: boolean =
+      data.mtu === undefined || data.mtu.toString().trim() === ''
+
     stepHasError = wizard.setValidation(
       1,
       UI_E_ValidationFields.TARGET_DEVICE_MTU,
       {
-        fieldMessage: localization.common.mtuInvalidMessage,
+        fieldMessage: emptyValue
+          ? localization.common.fieldRequired
+          : localization.common.mtuInvalidMessage,
         alertMessage: localization.common.mtuInvalidMessage,
       }
     )