bfg-common 1.5.869 → 1.5.871

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

@@ -1,476 +1,483 @@
-<template>
-  <div
-    :class="{
-      'is-manager-step':
-        props.wizard.selectedStepId === 2 || props.wizard.selectedStepId === 6,
-    }"
-  >
-    <ui-wizard
-      :show="props.show"
-      :steps="props.wizard.steps"
-      :selected-scheme="props.selectedScheme"
-      :is-loading="props.wizard.wizardLoader.status"
-      :title="localization.common.addNetworking"
-      :sub-title="props.hostName"
-      :texts="texts"
-      test-id="add-networking-wizard"
-      @change-steps="onChangeSteps"
-      @hide="emits('hide')"
-      @submit="emits('submit')"
-    >
-      <template #content="{ selectedStep }">
-        <ui-wizard-block
-          v-if="selectedStep.id === 0"
-          :sub-title-height="selectConnectionTypeHeight"
-        >
-          <template #subTitle>
-            <div ref="selectConnectionTypeBlock">
-              <div class="subtitle-block flex flex-col">
-                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-                <ui-line margin="12px 0 0" />
-              </div>
-            </div>
-          </template>
-          <template #content>
-            <common-wizards-network-add-steps-select-connection-type
-              v-model="connectionTypeLocal"
-            />
-          </template>
-        </ui-wizard-block>
-
-        <ui-wizard-block
-          v-if="selectedStep.id === 1"
-          :sub-title-height="selectTargetDeviceHeight"
-        >
-          <template #subTitle>
-            <div ref="selectTargetDeviceBlock">
-              <div class="subtitle-block flex flex-col">
-                <template
-                  v-for="(message, field) in selectedStep.fields"
-                  :key="field"
-                >
-                  <ui-alert
-                    :messages="[message.alert]"
-                    test-id="select-target-device-alert"
-                    :class="{
-                      'mb-4': selectedStep.fields.length - 1 === field,
-                    }"
-                    size="md"
-                    @hide="emits('hide-alert', selectedStep.id, field)"
-                  />
-                </template>
-                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-                <ui-line margin="12px 0 0" />
-              </div>
-            </div>
-          </template>
-          <template #content>
-            <common-wizards-network-add-steps-select-target-device
-              :wizard="props.wizard"
-              :target-device="props.targetDevice"
-              :connection-type="connectionTypeLocal"
-              :standard-switches-initial="props.standardSwitchesInitial"
-              :messages-fields="selectedStep.fields"
-              :alert-messages="props.alertMessages[selectedStep.id]"
-              :selected-standard-switch-id="props.selectedStandardSwitchId"
-              :selected-switch-id="props.selectedSwitchId"
-              :is-get-existing-switches-loading="
-                props.isGetExistingSwitchesLoading
-              "
-              @change-target-device="onChangeTargetDevice"
-            />
-          </template>
-        </ui-wizard-block>
-
-        <ui-wizard-block
-          v-if="selectedStep.id === 2 || selectedStep.id === 6"
-          :sub-title-height="createStandardSwitchHeight"
-        >
-          <template #subTitle>
-            <div ref="createStandardSwitchBlock">
-              <div class="subtitle-block flex flex-col">
-                <template
-                  v-for="(message, field) in selectedStep.fields"
-                  :key="field"
-                >
-                  <ui-alert
-                    :messages="[message.alert]"
-                    test-id="create-standard-switch-alert"
-                    :class="{
-                      'mb-4': selectedStep.fields.length - 1 === field,
-                    }"
-                    size="md"
-                    @hide="emits('hide-alert', selectedStep.id, field)"
-                  />
-                </template>
-                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-                <ui-line margin="12px 0 0" />
-              </div>
-            </div>
-          </template>
-          <template #content>
-            <common-wizards-network-add-steps-create-standard-switch
-              :free-adapters="props.freeAdapters"
-              :added-adapters="props.addedAdapters"
-              :core-adapters="props.coreAdapters"
-              :adapter-status="props.adapterStatus"
-              :adapters="props.adapters"
-              :is-show-no-connected-active-adapters-modal="
-                props.isShowNoConnectedActiveAdaptersModal
-              "
-              :is-show-no-active-adapters-modal="
-                props.isShowNoActiveAdaptersModal
-              "
-              :is-dark-mode="props.isDarkMode"
-              @get-free-adapters="onGetFreeAdapters"
-              @change-added-adapters="onChangeAddedAdapters"
-              @change-adapter-status="onChangeAdapterStatus"
-              @confirm-no-active-adapters-modal="
-                emits('confirm-no-active-adapters-modal')
-              "
-              @hide-no-connected-active-adapters-modal="
-                emits('hide-no-connected-active-adapters-modal')
-              "
-              @hide-no-active-adapters-modal="
-                emits('hide-no-active-adapters-modal')
-              "
-            />
-          </template>
-        </ui-wizard-block>
-
-        <ui-wizard-block
-          v-if="selectedStep.id === 3"
-          :sub-title-height="portPropertiesHeight"
-        >
-          <template #subTitle>
-            <div ref="portPropertiesBlock">
-              <div class="subtitle-block flex flex-col">
-                <template
-                  v-for="(message, field) in selectedStep.fields"
-                  :key="field"
-                >
-                  <ui-alert
-                    :messages="[message.alert]"
-                    test-id="port-properties-alert"
-                    :class="{
-                      'mb-4': selectedStep.fields.length - 1 === field,
-                    }"
-                    size="md"
-                    @hide="emits('hide-alert', selectedStep.id, field)"
-                  />
-                </template>
-                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-                <ui-line margin="12px 0 0" />
-              </div>
-            </div>
-          </template>
-          <template #content>
-            <common-wizards-network-add-steps-port-properties
-              :wizard="props.wizard"
-              :port-properties="props.portProperties"
-              :mtu-from-switch="props.mtuFromSwitch"
-              :project="props.project"
-              :messages-fields="selectedStep.fields"
-              :alert-messages="props.alertMessages[selectedStep.id]"
-              :tcp-stacks="props.tcpStacks"
-              :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
-              @change-gateway-flag="onChangeGatewayFlag"
-              @change-port-properties="onChangePortProperties"
-            />
-          </template>
-        </ui-wizard-block>
-
-        <ui-wizard-block
-          v-if="selectedStep.id === 4"
-          :sub-title-height="ipFourSettingsHeight"
-        >
-          <template #subTitle>
-            <div ref="ipFourSettingsBlock">
-              <div class="subtitle-block flex flex-col">
-                <template
-                  v-for="(message, field) in selectedStep.fields"
-                  :key="field"
-                >
-                  <ui-alert
-                    :messages="[message.alert]"
-                    test-id="ip-four-settings-alert"
-                    :class="{
-                      'mb-4': selectedStep.fields.length - 1 === field,
-                    }"
-                    size="md"
-                    @hide="emits('hide-alert', selectedStep.id, field)"
-                  />
-                </template>
-                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-                <ui-line margin="12px 0 0" />
-              </div>
-            </div>
-          </template>
-          <template #content>
-            <common-wizards-network-add-steps-ip-four-settings
-              :wizard="props.wizard"
-              :ip-four-settings="props.ipFourSettings"
-              :messages-fields="selectedStep.fields"
-              :alert-messages="props.alertMessages[selectedStep.id]"
-              :tcp-stacks="props.tcpStacks"
-              :tcp="props.portProperties.tcp"
-              :gateway-flag="props.gatewayFlag"
-              @change-gateway-flag="onChangeGatewayFlag"
-              @change-ip-four-settings="onChangeIpFourSettings"
-            />
-          </template>
-        </ui-wizard-block>
-
-        <ui-wizard-block
-          v-if="selectedStep.id === 5"
-          :sub-title-height="connectionSettingsHeight"
-        >
-          <template #subTitle>
-            <div ref="connectionSettingsBlock">
-              <div class="subtitle-block flex flex-col">
-                <template
-                  v-for="(message, field) in selectedStep.fields"
-                  :key="field"
-                >
-                  <ui-alert
-                    :messages="[message.alert]"
-                    test-id="connection-settings-alert"
-                    :class="{
-                      'mb-4': selectedStep.fields.length - 1 === field,
-                    }"
-                    size="md"
-                    @hide="emits('hide-alert', selectedStep.id, field)"
-                  />
-                </template>
-                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-                <ui-line margin="12px 0 0" />
-              </div>
-            </div>
-          </template>
-          <template #content>
-            <common-wizards-network-add-steps-connection-settings
-              :wizard="props.wizard"
-              :connection-settings="props.connectionSettings"
-              :messages-fields="selectedStep.fields"
-              :alert-messages="props.alertMessages[selectedStep.id]"
-              @change-connection-settings="onChangeConnectionSettings"
-            />
-          </template>
-        </ui-wizard-block>
-
-        <ui-wizard-block
-          v-if="selectedStep.id === 7"
-          :sub-title-height="readyCompleteHeight"
-        >
-          <template #subTitle>
-            <div ref="readyCompleteBlock">
-              <div class="subtitle-block flex flex-col">
-                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-                <ui-line margin="12px 0 0" />
-              </div>
-            </div>
-          </template>
-          <template #content>
-            <common-wizards-network-add-steps-ready-complete
-              :ready-complete-fields="props.readyCompleteFields"
-            />
-          </template>
-        </ui-wizard-block>
-      </template>
-    </ui-wizard>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
-import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/atoms/wizard/lib/models/interfaces'
-import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
-import type {
-  UI_I_Localization,
-  UI_I_ItemsWithTotalCounts,
-} from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type {
-  UI_I_PortProperties,
-  UI_I_IpFourSettings,
-  UI_I_ConnectionSettings,
-  UI_I_TargetDevice,
-  UI_I_Switch,
-  UI_I_ReadyCompleteFields,
-  UI_I_TCPStack,
-} from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type {
-  UI_I_Adapter,
-  UI_I_AdapterStatus,
-  UI_I_SwitchAdapterItem,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  show: boolean
-  wizard: Wizard
-  selectedScheme: number[]
-  hostName: string
-  project: UI_T_Project
-  connectionType: string
-  targetDevice: UI_I_TargetDevice
-  standardSwitchesInitial: UI_I_Switch[]
-  alertMessages: string[][]
-  selectedStandardSwitchId: string
-  selectedSwitchId: string
-  freeAdapters: UI_I_Adapter[]
-  addedAdapters: string[]
-  coreAdapters: string[]
-  adapterStatus: UI_I_AdapterStatus
-  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-  isShowNoConnectedActiveAdaptersModal: boolean
-  isShowNoActiveAdaptersModal: boolean
-  isDarkMode: boolean
-  portProperties: UI_I_PortProperties
-  mtuFromSwitch: number
-  tcpStacks: UI_I_TCPStack[]
-  ipFourSettings: UI_I_IpFourSettings
-  gatewayFlag: boolean
-  connectionSettings: UI_I_ConnectionSettings
-  readyCompleteFields: UI_I_ReadyCompleteFields[]
-  isGetExistingSwitchesLoading: boolean
-  isGetTcpStackLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'update:connection-type', value: string): void
-  (event: 'change-connection-settings', value: UI_I_ConnectionSettings): void
-  (event: 'hide-alert', value: number, field: string): void
-  (event: 'change-gateway-flag', value: boolean): void
-  (event: 'change-ip-four-settings', value: UI_I_IpFourSettings): void
-  (event: 'change-port-properties', value: UI_I_PortProperties): void
-  (event: 'get-free-adapters', cb: () => void): void
-  (event: 'change-added-adapters', value: string[]): void
-  (event: 'change-adapter-status', value: UI_I_AdapterStatus): void
-  (event: 'confirm-no-active-adapters-modal'): void
-  (event: 'hide-no-connected-active-adapters-modal'): void
-  (event: 'hide-no-active-adapters-modal'): void
-  (event: 'change-target-device', value: UI_I_TargetDevice): void
-  (event: 'change-steps', value: UI_I_WizardStep[]): void
-  (event: 'hide'): void
-  (event: 'submit'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const texts = computed<UI_I_WizardTexts>(() => ({
-  cancel: localization.value.common.cancel,
-  back: localization.value.common.backCap,
-  processing: localization.value.common.processing,
-  next: localization.value.common.next,
-  finish: localization.value.common.create,
-  incompleteTitle: localization.value.common.incompleteProcess,
-  incompleteMessage: localization.value.common.incompleteProcessMessage,
-  incompleteCancel: localization.value.common.cancel,
-  incompleteLeave: localization.value.common.leave,
-  step: localization.value.common.step,
-  of: localization.value.common.of2,
-}))
-
-const connectionTypeLocal = computed<string>({
-  get() {
-    return props.connectionType
-  },
-  set(newValue: string) {
-    emits('update:connection-type', newValue)
-  },
-})
-
-const selectConnectionTypeBlock = ref<HTMLElement | null>(null)
-const { height: selectConnectionTypeHeight } = useElementSize(
-  selectConnectionTypeBlock
-)
-
-const selectTargetDeviceBlock = ref<HTMLElement | null>(null)
-const { height: selectTargetDeviceHeight } = useElementSize(
-  selectTargetDeviceBlock
-)
-
-const connectionSettingsBlock = ref<HTMLElement | null>(null)
-const { height: connectionSettingsHeight } = useElementSize(
-  connectionSettingsBlock
-)
-
-const createStandardSwitchBlock = ref<HTMLElement | null>(null)
-const { height: createStandardSwitchHeight } = useElementSize(
-  createStandardSwitchBlock
-)
-
-const portPropertiesBlock = ref<HTMLElement | null>(null)
-const { height: portPropertiesHeight } = useElementSize(portPropertiesBlock)
-
-const ipFourSettingsBlock = ref<HTMLElement | null>(null)
-const { height: ipFourSettingsHeight } = useElementSize(ipFourSettingsBlock)
-
-const readyCompleteBlock = ref<HTMLElement | null>(null)
-const { height: readyCompleteHeight } = useElementSize(readyCompleteBlock)
-
-const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
-  emits('change-added-adapters', addedAdaptersNew)
-}
-
-const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
-  emits('change-adapter-status', adapterStatusNew)
-}
-
-const onChangeTargetDevice = (newTargetDevice: UI_I_TargetDevice): void => {
-  emits('change-target-device', newTargetDevice)
-}
-
-const onChangePortProperties = (newFields: UI_I_PortProperties): void => {
-  emits('change-port-properties', newFields)
-}
-
-const onChangeIpFourSettings = (newFields: UI_I_IpFourSettings): void => {
-  emits('change-ip-four-settings', newFields)
-}
-
-const onChangeGatewayFlag = (newValue: boolean) => {
-  emits('change-gateway-flag', newValue)
-}
-
-const onChangeConnectionSettings = (
-  newFields: UI_I_ConnectionSettings
-): void => {
-  emits('change-connection-settings', newFields)
-}
-
-const onGetFreeAdapters = (showModal: () => void): void => {
-  emits('get-free-adapters', showModal)
-}
-
-const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
-  emits('change-steps', value)
-}
-</script>
-
-<style scoped lang="scss">
-.is-manager-step {
-  :deep(.ui-wizard-content-right-bottom) {
-    width: calc(100% - min(320px, 29%) - 284px);
-  }
-  :deep(.ui-wizard-content-with-subtitle) {
-    padding-right: 0;
-  }
-}
-
-@media (max-width: 1084px) {
-  .is-manager-step {
-    :deep(.ui-wizard-content-right-bottom) {
-      width: calc(100% - min(320px, 29%) - 16px);
-    }
-  }
-}
-
-:deep(.ui-alert-item) {
-  margin-bottom: 12px;
-
-  &.mb-4 {
-    margin-bottom: 16px;
-  }
-}
-</style>
+<template>
+  <div
+    :class="{
+      'is-manager-step':
+        props.wizard.selectedStepId === 2 || props.wizard.selectedStepId === 6,
+    }"
+  >
+    <ui-wizard
+      :show="props.show"
+      :steps="props.wizard.steps"
+      :selected-scheme="props.selectedScheme"
+      :is-loading="props.wizard.wizardLoader.status"
+      :title="localization.common.addNetworking"
+      :sub-title="props.hostName"
+      :texts="texts"
+      test-id="add-networking-wizard"
+      @change-steps="onChangeSteps"
+      @hide="emits('hide')"
+      @submit="emits('submit')"
+    >
+      <template #content="{ selectedStep }">
+        <ui-wizard-block
+          v-if="selectedStep.id === 0"
+          :sub-title-height="selectConnectionTypeHeight"
+        >
+          <template #subTitle>
+            <div ref="selectConnectionTypeBlock">
+              <div class="subtitle-block flex flex-col">
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-select-connection-type
+              v-model="connectionTypeLocal"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 1"
+          :sub-title-height="selectTargetDeviceHeight"
+        >
+          <template #subTitle>
+            <div ref="selectTargetDeviceBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field, key) in selectedStep.fields"
+                  :key="key"
+                >
+                  <ui-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>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-select-target-device
+              :wizard="props.wizard"
+              :target-device="props.targetDevice"
+              :connection-type="connectionTypeLocal"
+              :standard-switches-initial="props.standardSwitchesInitial"
+              :messages-fields="selectedStep.fields"
+              :alert-messages="props.alertMessages[selectedStep.id]"
+              :selected-standard-switch-id="props.selectedStandardSwitchId"
+              :selected-switch-id="props.selectedSwitchId"
+              :is-get-existing-switches-loading="
+                props.isGetExistingSwitchesLoading
+              "
+              @change-target-device="onChangeTargetDevice"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 2 || selectedStep.id === 6"
+          :sub-title-height="createStandardSwitchHeight"
+        >
+          <template #subTitle>
+            <div ref="createStandardSwitchBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field, key) in selectedStep.fields"
+                  :key="key"
+                >
+                  <ui-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>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-create-standard-switch
+              :free-adapters="props.freeAdapters"
+              :added-adapters="props.addedAdapters"
+              :core-adapters="props.coreAdapters"
+              :adapter-status="props.adapterStatus"
+              :adapters="props.adapters"
+              :is-show-no-connected-active-adapters-modal="
+                props.isShowNoConnectedActiveAdaptersModal
+              "
+              :is-show-no-active-adapters-modal="
+                props.isShowNoActiveAdaptersModal
+              "
+              :is-dark-mode="props.isDarkMode"
+              @get-free-adapters="onGetFreeAdapters"
+              @change-added-adapters="onChangeAddedAdapters"
+              @change-adapter-status="onChangeAdapterStatus"
+              @confirm-no-active-adapters-modal="
+                emits('confirm-no-active-adapters-modal')
+              "
+              @hide-no-connected-active-adapters-modal="
+                emits('hide-no-connected-active-adapters-modal')
+              "
+              @hide-no-active-adapters-modal="
+                emits('hide-no-active-adapters-modal')
+              "
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 3"
+          :sub-title-height="portPropertiesHeight"
+        >
+          <template #subTitle>
+            <div ref="portPropertiesBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field, key) in selectedStep.fields"
+                  :key="key"
+                >
+                  <ui-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>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-port-properties
+              :wizard="props.wizard"
+              :port-properties="props.portProperties"
+              :mtu-from-switch="props.mtuFromSwitch"
+              :project="props.project"
+              :messages-fields="selectedStep.fields"
+              :alert-messages="props.alertMessages[selectedStep.id]"
+              :tcp-stacks="props.tcpStacks"
+              :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
+              :is-processing="props.wizard.wizardLoader.status"
+              @change-gateway-flag="onChangeGatewayFlag"
+              @change-port-properties="onChangePortProperties"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 4"
+          :sub-title-height="ipFourSettingsHeight"
+        >
+          <template #subTitle>
+            <div ref="ipFourSettingsBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field, key) in selectedStep.fields"
+                  :key="key"
+                >
+                  <ui-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>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-ip-four-settings
+              :wizard="props.wizard"
+              :ip-four-settings="props.ipFourSettings"
+              :messages-fields="selectedStep.fields"
+              :alert-messages="props.alertMessages[selectedStep.id]"
+              :tcp-stacks="props.tcpStacks"
+              :tcp="props.portProperties.tcp"
+              :gateway-flag="props.gatewayFlag"
+              @change-gateway-flag="onChangeGatewayFlag"
+              @change-ip-four-settings="onChangeIpFourSettings"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 5"
+          :sub-title-height="connectionSettingsHeight"
+        >
+          <template #subTitle>
+            <div ref="connectionSettingsBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field, key) in selectedStep.fields"
+                  :key="key"
+                >
+                  <ui-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>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-connection-settings
+              :wizard="props.wizard"
+              :connection-settings="props.connectionSettings"
+              :is-processing="props.wizard.wizardLoader.status"
+              :messages-fields="selectedStep.fields"
+              :alert-messages="props.alertMessages[selectedStep.id]"
+              @change-connection-settings="onChangeConnectionSettings"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 7"
+          :sub-title-height="readyCompleteHeight"
+        >
+          <template #subTitle>
+            <div ref="readyCompleteBlock">
+              <div class="subtitle-block flex flex-col">
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-ready-complete
+              :ready-complete-fields="props.readyCompleteFields"
+            />
+          </template>
+        </ui-wizard-block>
+      </template>
+    </ui-wizard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import type { UI_I_WizardStep } from '~/node_modules/bfg-uikit/components/atoms/wizard/lib/models/interfaces'
+import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type {
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type {
+  UI_I_PortProperties,
+  UI_I_IpFourSettings,
+  UI_I_ConnectionSettings,
+  UI_I_TargetDevice,
+  UI_I_Switch,
+  UI_I_ReadyCompleteFields,
+  UI_I_TCPStack,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+  wizard: Wizard
+  selectedScheme: number[]
+  hostName: string
+  project: UI_T_Project
+  connectionType: string
+  targetDevice: UI_I_TargetDevice
+  standardSwitchesInitial: UI_I_Switch[]
+  alertMessages: string[][]
+  selectedStandardSwitchId: string
+  selectedSwitchId: string
+  freeAdapters: UI_I_Adapter[]
+  addedAdapters: string[]
+  coreAdapters: string[]
+  adapterStatus: UI_I_AdapterStatus
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  isShowNoConnectedActiveAdaptersModal: boolean
+  isShowNoActiveAdaptersModal: boolean
+  isDarkMode: boolean
+  portProperties: UI_I_PortProperties
+  mtuFromSwitch: number
+  tcpStacks: UI_I_TCPStack[]
+  ipFourSettings: UI_I_IpFourSettings
+  gatewayFlag: boolean
+  connectionSettings: UI_I_ConnectionSettings
+  readyCompleteFields: UI_I_ReadyCompleteFields[]
+  isGetExistingSwitchesLoading: boolean
+  isGetTcpStackLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:connection-type', value: string): void
+  (event: 'change-connection-settings', value: UI_I_ConnectionSettings): void
+  (event: 'hide-alert', value: number, field: string): void
+  (event: 'change-gateway-flag', value: boolean): void
+  (event: 'change-ip-four-settings', value: UI_I_IpFourSettings): void
+  (event: 'change-port-properties', value: UI_I_PortProperties): void
+  (event: 'get-free-adapters', cb: () => void): void
+  (event: 'change-added-adapters', value: string[]): void
+  (event: 'change-adapter-status', value: UI_I_AdapterStatus): void
+  (event: 'confirm-no-active-adapters-modal'): void
+  (event: 'hide-no-connected-active-adapters-modal'): void
+  (event: 'hide-no-active-adapters-modal'): void
+  (event: 'change-target-device', value: UI_I_TargetDevice): void
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const texts = computed<UI_I_WizardTexts>(() => ({
+  cancel: localization.value.common.cancel,
+  back: localization.value.common.backCap,
+  processing: localization.value.common.processing,
+  next: localization.value.common.next,
+  finish: localization.value.common.create,
+  incompleteTitle: localization.value.common.incompleteProcess,
+  incompleteMessage: localization.value.common.incompleteProcessMessage,
+  incompleteCancel: localization.value.common.cancel,
+  incompleteLeave: localization.value.common.leave,
+  step: localization.value.common.step,
+  of: localization.value.common.of2,
+}))
+
+const connectionTypeLocal = computed<string>({
+  get() {
+    return props.connectionType
+  },
+  set(newValue: string) {
+    emits('update:connection-type', newValue)
+  },
+})
+
+const selectConnectionTypeBlock = ref<HTMLElement | null>(null)
+const { height: selectConnectionTypeHeight } = useElementSize(
+  selectConnectionTypeBlock
+)
+
+const selectTargetDeviceBlock = ref<HTMLElement | null>(null)
+const { height: selectTargetDeviceHeight } = useElementSize(
+  selectTargetDeviceBlock
+)
+
+const connectionSettingsBlock = ref<HTMLElement | null>(null)
+const { height: connectionSettingsHeight } = useElementSize(
+  connectionSettingsBlock
+)
+
+const createStandardSwitchBlock = ref<HTMLElement | null>(null)
+const { height: createStandardSwitchHeight } = useElementSize(
+  createStandardSwitchBlock
+)
+
+const portPropertiesBlock = ref<HTMLElement | null>(null)
+const { height: portPropertiesHeight } = useElementSize(portPropertiesBlock)
+
+const ipFourSettingsBlock = ref<HTMLElement | null>(null)
+const { height: ipFourSettingsHeight } = useElementSize(ipFourSettingsBlock)
+
+const readyCompleteBlock = ref<HTMLElement | null>(null)
+const { height: readyCompleteHeight } = useElementSize(readyCompleteBlock)
+
+const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
+  emits('change-added-adapters', addedAdaptersNew)
+}
+
+const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
+  emits('change-adapter-status', adapterStatusNew)
+}
+
+const onChangeTargetDevice = (newTargetDevice: UI_I_TargetDevice): void => {
+  emits('change-target-device', newTargetDevice)
+}
+
+const onChangePortProperties = (newFields: UI_I_PortProperties): void => {
+  emits('change-port-properties', newFields)
+}
+
+const onChangeIpFourSettings = (newFields: UI_I_IpFourSettings): void => {
+  emits('change-ip-four-settings', newFields)
+}
+
+const onChangeGatewayFlag = (newValue: boolean) => {
+  emits('change-gateway-flag', newValue)
+}
+
+const onChangeConnectionSettings = (
+  newFields: UI_I_ConnectionSettings
+): void => {
+  emits('change-connection-settings', newFields)
+}
+
+const onGetFreeAdapters = (showModal: () => void): void => {
+  emits('get-free-adapters', showModal)
+}
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
+  emits('change-steps', value)
+}
+</script>
+
+<style scoped lang="scss">
+.is-manager-step {
+  :deep(.ui-wizard-content-right-bottom) {
+    width: calc(100% - min(320px, 29%) - 284px);
+  }
+  :deep(.ui-wizard-content-with-subtitle) {
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 1084px) {
+  .is-manager-step {
+    :deep(.ui-wizard-content-right-bottom) {
+      width: calc(100% - min(320px, 29%) - 16px);
+    }
+  }
+}
+
+:deep(.ui-alert-item) {
+  margin-bottom: 12px;
+
+  &.mb-4 {
+    margin-bottom: 16px;
+  }
+}
+</style>