bfg-common 1.6.74 → 1.6.75

package/components/common/diagramMain/modals/lib/config/diagramConfig.ts

@@ -1,3 +1,4 @@
+import type { UI_I_Button } from '~/node_modules/bfg-common/components/common/tools/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_NavigationItem } from '~/components/common/diagramMain/lib/models/interfaces'
 
@@ -9,7 +10,7 @@ export const switchMainNavigationFunc = (
     text: localization.common.migrateVmKernelAdapter,
     value: 'migrate-vmkernel-adapter',
     testId: `${testId}-migrate-vm-kernel-adapter`,
-    development: true
+    development: true,
   },
   {
     text: localization.common.viewSettings,
@@ -20,6 +21,46 @@ export const switchMainNavigationFunc = (
     text: localization.common.remove,
     value: 'switch-remove',
     testId: `${testId}-remove`,
-    permission: 'Networks.RemoveSwitch'
+    permission: 'Networks.RemoveSwitch',
+  },
+]
+
+export const switchMainNavigationNewFunc = (
+  localization: UI_I_Localization,
+  testId: string
+): UI_I_Button[] => [
+  {
+    text: localization.common.addNetworking,
+    value: 'add-networking',
+    iconName: 'network',
+    testId: `${testId}-add-networking-button`,
+    permission:
+      'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch',
+  },
+  {
+    text: localization.common.edit,
+    value: 'switch-edit',
+    iconName: 'edit',
+    testId: `${testId}-edit-button`,
+    permission: 'Networks.UpdateSwitch',
+  },
+  {
+    text: localization.common.managePhysicalAdapters,
+    value: 'switch-manage-physical-adapters',
+    iconName: 'settings',
+    testId: `${testId}-manage-physical-adapters-button`,
+    permission: 'Networks.UpdateSwitch',
+  },
+  // {
+  //   text: localization.common.migrateVmKernelAdapter,
+  //   value: 'migrate-vmkernel-adapter',
+  //   testId: `${testId}-migrate-vm-kernel-adapter`,
+  //   development: true,
+  // },
+  {
+    text: localization.common.viewSettings,
+    value: 'switch-view-settings',
+    iconName: 'password-hide',
+    testId: `${testId}-view-settings`,
   },
 ]

package/components/common/diagramMain/modals/lib/config/index.ts

@@ -52,4 +52,5 @@ export const {
   vmKernelAdapterViewSettingsFunc,
 } = vmKernelAdapterData
 // export const { managePhysicalAdapterTableData } = temporaryData
-export const { switchMainNavigationFunc } = diagramConfig
+export const { switchMainNavigationFunc, switchMainNavigationNewFunc } =
+  diagramConfig

package/components/common/diagramMain/modals/lib/config/vmKernelAdapter.ts

@@ -18,7 +18,7 @@ export const vmKernelAdapterViewSettingsFunc = (
     type: 0,
     rows: [
       { name: localization.common.networkLabel, value: '' },
-      { name: localization.common.vlanId, value: `${localization.common.none} (0)` },
+      { name: localization.common.vlanId, value: `${localization.common.none2} (0)` },
       { name: localization.common.tcpIpStack, value: 'Default' },
       { name: localization.common.enabledServices },
     ],

package/components/common/diagramMain/modals/lib/utils/index.ts

@@ -2,12 +2,42 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_EditSettingsErrorMessage } from '~/components/common/diagramMain/lib/models/interfaces'
 
 export const validationMessagesArrayFunc = (
-  arr: (keyof UI_I_EditSettingsErrorMessage)[],
+  keyArray: (keyof UI_I_EditSettingsErrorMessage)[],
   errorMessages: UI_I_EditSettingsErrorMessage
 ) =>
-  arr
-    .map((ar: keyof UI_I_EditSettingsErrorMessage) => errorMessages[ar])
-    .filter((err) => err !== '')
+  keyArray
+    .map(
+      (key: keyof UI_I_EditSettingsErrorMessage): string | undefined =>
+        errorMessages[key]
+    )
+    .filter((message: string | undefined): boolean => message !== '')
+
+export const validationMessagesArrayNewFunc = (
+  keyArray: (keyof UI_I_EditSettingsErrorMessage)[],
+  errorMessages: UI_I_EditSettingsErrorMessage
+) =>
+  keyArray
+    .map(
+      (
+        key: keyof UI_I_EditSettingsErrorMessage
+      ):
+        | {
+            key: keyof UI_I_EditSettingsErrorMessage
+            message: string | undefined
+          }
+        | undefined =>
+        errorMessages[key] ? { key, message: errorMessages[key] } : undefined
+    )
+    .filter(
+      (
+        messageObject:
+          | {
+              key: keyof UI_I_EditSettingsErrorMessage
+              message: string | undefined
+            }
+          | undefined
+      ): boolean => !!messageObject
+    )
 
 export const getNicSpeed = (
   speedInitial: number = 0,

package/components/common/diagramMain/modals/migrateVmkernelAdapter/MigrateVmkernelAdapter.vue

@@ -112,7 +112,7 @@ const title = computed<string>(
 
 const connectionSettings = ref<UI_I_ConnectionSettings>({
   networkLabel: 'VM Network',
-  vlanId: `${localization.value.common.none} (0)`,
+  vlanId: `${localization.value.common.none2} (0)`,
 })
 
 const vmkernelAdapter = ref<UI_I_SelectVmkernelAdapter>({
@@ -262,7 +262,7 @@ const reset = (): void => {
   wizard.reset()
   connectionSettings.value = {
     networkLabel: 'VM Network',
-    vlanId: `${localization.value.common.none} (0)`,
+    vlanId: `${localization.value.common.none2} (0)`,
   }
   vmkernelAdapter.value = {
     vm: '',

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/common.ts

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

package/components/common/diagramMain/skeleton/Header.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="diagram-header-skeleton">
+    <div class="diagram-header-skeleton-title">
+      <ui-skeleton-item width="160" height="22" />
+    </div>
+    <div class="diagram-header-skeleton-buttons">
+      <ui-skeleton-item width="112" height="36" border-radius="8" />
+      <ui-skeleton-item width="160" height="36" border-radius="8" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.diagram-header-skeleton {
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: 24px;
+  column-gap: 24px;
+
+  &-buttons {
+    display: flex;
+    column-gap: 16px;
+    margin-left: auto;
+  }
+}
+</style>

package/components/common/diagramMain/skeleton/Switch.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="diagram-skeleton">
+    <div class="diagram-skeleton-item-header">
+      <div class="diagram-skeleton-item-header-icon">
+        <ui-icon
+          class="diagram-skeleton-item-header-icon-arrow"
+          name="arrow"
+          width="20"
+          height="20"
+        />
+      </div>
+      <ui-skeleton-item width="160" height="20" />
+      <div class="diagram-skeleton-item-header-line"></div>
+      <ui-skeleton-item width="400" height="20" />
+    </div>
+    <div class="diagram-skeleton-container">
+      <ui-skeleton-switch width="712" />
+    </div>
+    <div class="diagram-skeleton-footer">
+      <ui-skeleton-item width="80" height="20" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.diagram-skeleton {
+  margin: 0 16px 16px;
+  border-radius: 8px;
+  background: var(--diagram-container-bg);
+  box-shadow: 0 1px 4px 0 #00000014;
+  padding: 16px;
+  overflow-clip-margin: content-box;
+  overflow: clip;
+
+  &-item-header {
+    display: flex;
+    column-gap: 16px;
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      color: var(--select-arrow);
+
+      &-arrow {
+        transform: rotate(180deg);
+        margin-right: -4px;
+      }
+    }
+
+    &-line {
+      height: 20px;
+      border-left: 1px solid var(--horizontal-line);
+    }
+  }
+
+  &-container {
+    display: flex;
+    justify-content: center;
+    min-width: 759px;
+    padding: 48px 23.5px 24px 23.5px;
+
+    //:deep(svg) {
+    //  padding: 22px 14.5px;
+    //}
+  }
+
+  &-footer {
+    padding-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

package/components/common/layout/theHeader/ThemeSwitch.vue

@@ -2,7 +2,7 @@
   <ui-tooltip
     id="tooltip-theme-mode-toggle-button"
     test-id="tooltip-theme-mode-toggle-button"
-    size="sm"
+    size="md"
     position="bottom"
     position-by-tooltip="center"
   >

package/components/common/layout/theHeader/modals/reconnect/New.vue

@@ -1,35 +1,37 @@
 <template>
-  <ui-modal
-    :title="props.title"
-    :texts="modalTexts"
-    test-id="reconnect-modal"
-    size="sm"
-    width="560px"
-    show
-    @hide="emits('logout')"
-    @submit="emits('reconnect')"
-  >
-    <template #content>
-      <div class="reconnect-content">
-        <div class="icon-content flex items-center gap-2">
-          <span class="icon-sessions"></span>
-          <span class="description-text">{{
-            localization.common.reconnectDesc
-          }}</span>
+  <div class="reconnect-modal-container">
+    <ui-modal
+        :title="props.title"
+        :texts="modalTexts"
+        test-id="reconnect-modal"
+        size="sm"
+        width="560px"
+        show
+        @hide="emits('logout')"
+        @submit="emits('reconnect')"
+    >
+      <template #content>
+        <div class="reconnect-content">
+          <div class="icon-content flex items-center gap-2">
+            <span class="icon-sessions"></span>
+            <span class="description-text">{{
+                localization.common.reconnectDesc
+              }}</span>
+          </div>
+          <div class="timer-block mt-4">
+            <common-countdown-timer
+                :timer="props.timer"
+                :total-time="props.totalTime"
+                is-hide-seconds-text
+            />
+          </div>
         </div>
-        <div class="timer-block mt-4">
-          <common-countdown-timer
-            :timer="props.timer"
-            :total-time="props.totalTime"
-            is-hide-seconds-text
-          />
-        </div>
-      </div>
-    </template>
-    <template #footerLeftContent>
-      <span></span>
-    </template>
-  </ui-modal>
+      </template>
+      <template #footerLeftContent>
+        <span></span>
+      </template>
+    </ui-modal>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -56,6 +58,12 @@ const modalTexts = ref<UI_I_ModalTexts>({
 </script>
 
 <style lang="scss" scoped>
+.reconnect-modal-container {
+  :deep(.modal), :deep(.modal-background) {
+    z-index: calc(var(--z-modal) + 3);
+  }
+}
+
 .reconnect-content {
   padding: 8px 32px 8px 32px;
 

package/components/common/layout/theHeader/userMenu/modals/changePassword/New.vue

@@ -107,24 +107,23 @@ const passwordErrorText = computed<string>(() => {
 const newPasswordErrorText = computed<string>(() => {
   if (!initValidationFields.value.newPassword) return ''
 
-  const { current_password, new_password, confirm_password } = modelLocal.value
+  // const { current_password, new_password, confirm_password } = modelLocal.value
+  const { current_password, new_password } = modelLocal.value
 
   const validateText = validateField(
     localization.value,
     current_password,
     new_password
   )
-  const mismatchError = getPasswordMismatchError(
-    localization.value,
-    new_password,
-    confirm_password
-  )
+  // const mismatchError = getPasswordMismatchError(
+  //   localization.value,
+  //   new_password,
+  //   confirm_password
+  // )
   if (!new_password) {
     return localization.value.common.fieldRequired
   } else if (validateText) {
     return validateText
-  } else if (mismatchError) {
-    return mismatchError
   } else return ''
 })
 const confirmPasswordErrorText = computed<string>(() => {
@@ -166,7 +165,7 @@ const onHideModal = (): void => {
       color: #9da6ad;
       font-size: 12px;
       font-weight: 400;
-      line-height: 14.52px;
+      line-height: 18px;
       margin-bottom: 20px;
     }
     &__alert {

package/components/common/layout/theHeader/userMenu/modals/preferences/New.vue

@@ -15,6 +15,7 @@
           <common-layout-the-header-user-menu-modals-preferences-time-format
             v-model:time-format="timeFormat"
             :new-view="props.newView"
+            :project="props.project"
           />
         </ui-modal-block-form-standard>
 
@@ -23,6 +24,7 @@
             :new-view="props.newView"
             :selected-type="props.selectedLanguageType"
             :selected-language="props.selectedLanguage"
+            :project="props.project"
             @update-language="emits('update-language', $event)"
             @update-is-browser="emits('update-is-browser', $event)"
           />
@@ -32,6 +34,7 @@
           <common-layout-the-header-user-menu-modals-preferences-default-console
             v-model="consoleValue"
             :new-view="props.newView"
+            :project="props.project"
           />
         </ui-modal-block-form-standard>
 
@@ -55,6 +58,7 @@
             v-model:new-view-local="newViewLocal"
             v-model:is-show-notification="isShowNotification"
             :new-view="props.newView"
+            :project="props.project"
           />
         </ui-modal-block-form-standard>
       </ui-modal-block-standard>

package/components/common/layout/theHeader/userMenu/modals/preferences/Old.vue

@@ -19,6 +19,7 @@
         v-if="selectedTab === 'time-tab'"
         v-model:time-format="timeFormat"
         :new-view="props.newView"
+        :project="props.project"
       />
 
       <common-layout-the-header-user-menu-modals-preferences-change-language
@@ -26,6 +27,7 @@
         :new-view="props.newView"
         :selected-type="props.selectedLanguageType"
         :selected-language="props.selectedLanguage"
+        :project="props.project"
         @update-language="emits('update-language', $event)"
         @update-is-browser="emits('update-is-browser', $event)"
       />
@@ -40,6 +42,7 @@
         v-if="selectedTab === 'console-tab' && isSphere"
         v-model="consoleValue"
         :new-view="props.newView"
+        :project="props.project"
       />
 
       <common-layout-the-header-user-menu-modals-preferences-security
@@ -146,8 +149,12 @@ const isOn2FaImportant = ref<boolean>(false)
 watch(
   topNotifications,
   (newValue) => {
-    if (newValue === UI_E_TopNotificationActionId.on2Fa || newValue === UI_E_TopNotificationActionId.on2FaImportant) {
-      isOn2FaImportant.value = newValue === UI_E_TopNotificationActionId.on2FaImportant
+    if (
+      newValue === UI_E_TopNotificationActionId.on2Fa ||
+      newValue === UI_E_TopNotificationActionId.on2FaImportant
+    ) {
+      isOn2FaImportant.value =
+        newValue === UI_E_TopNotificationActionId.on2FaImportant
       selectedTab.value = 'security-tab'
       $store.dispatch('main/A_SET_TOP_NOTIFICATION_ACTION_ID', -1)
     }

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/ChangeLanguage.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_T_LangValue } from '~/lib/models/types'
+import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
 import type { UI_T_SelectedRadio } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/types'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioItemLang } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/interfaces'
@@ -24,6 +24,7 @@ import { defineBrowserLangFunc } from '~/components/common/layout/theHeader/lib/
 const props = defineProps<{
   newView: boolean
   selectedType: UI_T_LangValue
+  project: UI_T_Project
   selectedLanguage: UI_I_Dropdown | UI_T_LangValue
 }>()
 
@@ -41,12 +42,15 @@ const currentComponent = computed(() =>
     : defineAsyncComponent(() => import('./Old.vue'))
 )
 
-const description = computed<string>(() => {
-  return localization.value.common.languageDesc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
-})
+/* TODO SC-2104 */
+const description = computed<string>(() =>
+  props.project === 'sphere'
+    ? localization.value.common.languageDesc1
+    : localization.value.common.languageDesc.replaceAll(
+        '{trademark}',
+        String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+      )
+)
 
 const radioOptions = readonly<UI_I_RadioItemLang[]>(
   radioOptionsFunc(localization.value)

package/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/DefaultConsole.vue

@@ -8,11 +8,13 @@
 
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_RadioItemConsole } from '~/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/models/interfaces'
 import { consoleOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/config/consoleOptions'
 
 const consoleValue = defineModel<string>()
 const props = defineProps<{
+  project: UI_T_Project
   newView: boolean
 }>()
 
@@ -24,7 +26,11 @@ const currentComponent = computed(() =>
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+/* TODO SC-2104 */
 const consoleOptions = readonly<UI_I_RadioItemConsole[]>(
-  consoleOptionsFunc(localization.value)
+  consoleOptionsFunc(
+    localization.value,
+    props.newView && props.project === 'sphere'
+  )
 )
 </script>

package/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/config/consoleOptions.ts

@@ -2,14 +2,17 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioItemConsole } from '~/components/common/layout/theHeader/userMenu/modals/preferences/defaultConsole/lib/models/interfaces'
 
 export const consoleOptionsFunc = (
-  localization: UI_I_Localization
+  localization: UI_I_Localization,
+  isSphereNewView: boolean
 ): UI_I_RadioItemConsole[] => {
   const config = useRuntimeConfig()
 
-  const remoteConsole = localization.common.remoteConsoleVmrc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
+  const remoteConsole = isSphereNewView
+    ? localization.common.remoteConsoleVmrc1
+    : localization.common.remoteConsoleVmrc.replaceAll(
+        '{trademark}',
+        String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+      )
 
   return [
     {

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/TimeFormat.vue

@@ -12,12 +12,13 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
 import { formatOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/config/formatOptions'
+import type { UI_T_Project } from '~/lib/models/types'
 
 const timeFormat = defineModel<UI_T_TimeValue>('timeFormat')
 const props = defineProps<{
+  project: UI_T_Project
   newView: boolean
 }>()
-
 const currentComponent = computed(() =>
   props.newView
     ? defineAsyncComponent(() => import('./New.vue'))
@@ -28,11 +29,14 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
 const config = useRuntimeConfig()
 
+/* TODO SC-2104 */
 const description = computed<string>(() =>
-  localization.value.common.timeFormatDesc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
+  props.project === 'sphere'
+    ? localization.value.common.timeFormatDesc1
+    : localization.value.common.timeFormatDesc.replaceAll(
+        '{trademark}',
+        String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+      )
 )
 
 const formatOptions = readonly<UI_I_RadioItem[]>(

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/config/formatOptions.ts

@@ -7,7 +7,7 @@ export const formatOptionsFunc = (
   return [
     {
       id: 1,
-      label: localization.common.languageDefault,
+      label: localization.common.automatic,
       value: 'DEFAULT',
       testId: 'default-type',
     },

package/components/common/layout/theHeader/userMenu/modals/preferences/view/Old.vue

@@ -15,13 +15,9 @@
       />
     </div>
 
-    <div class="description second-description">
-      {{ localization.myPreferences.showNotificationDescription }}
-    </div>
-
-    <div class="flex-align-center">
+    <div class="flex-align-center second-description">
       <label for="show-notification">{{
-        localization.myPreferences.showNotification
+        localization.myPreferences.showNotificationDescription
       }}</label>
       <input
         id="show-notification"
@@ -63,10 +59,10 @@ window.tools = new Proxy(
 <style lang="scss" scoped>
 .description {
   margin-bottom: 10px;
+}
 
-  &.second-description {
-    margin-top: 20px;
-  }
+.second-description {
+  margin-top: 20px;
 }
 
 label {

package/components/common/layout/theHeader/userMenu/modals/preferences/view/View.vue

@@ -30,10 +30,13 @@ const currentComponent = computed(() =>
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const description = computed<string>(() => {
-  return localization.value.common.viewDesc.replaceAll(
-    '{trademark}',
-    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
-  )
-})
+/* TODO SC-2104 */
+const description = computed<string>(() =>
+  props.project === 'sphere'
+    ? localization.value.common.viewDesc1
+    : localization.value.common.viewDesc.replaceAll(
+        '{trademark}',
+        String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+      )
+)
 </script>