bfg-common 1.6.47 → 1.6.49

package/components/common/diagramMain/DiagramMain.vue

@@ -3,16 +3,17 @@
     v-if="props.diagramData"
     :class="{ 'diagram-min-width': !props.inPortlet }"
   >
-    <div
-      :class="[
-        'diagram-main-container',
-        {
-          'is-new-view': isNewView,
-        },
-      ]"
-    >
-      <common-diagram-main-diagram
+    <div class="diagram-main-container">
+      <common-diagram-main-header
         :project="props.project"
+        :in-portlet="props.inPortlet"
+        :is-show-diagram="isShowDiagram"
+        :diagram-name="props.diagramData.diagramName"
+        :test-id="props.diagramData.testId"
+        @toggle-diagram="onToggleDiagram"
+        @show-modal="onShowModal"
+      />
+      <common-diagram-main-diagram
         :diagram-data="props.diagramData"
         :is-show-diagram="isShowDiagram"
         :in-portlet="props.inPortlet"
@@ -27,7 +28,6 @@
         :selected-switch-line-y="selectedSwitchLineY"
         :is-dark-mode="props.isDarkMode"
         :networks-count="networksCount"
-        @toggle-diagram="onToggleDiagram"
         @click-diagram="onClickDiagram"
         @toggle-adapters="onToggleAdapters"
         @select-adapter="onSelectAdapter"
@@ -74,8 +74,6 @@
       :selected-switch-id="selectedSwitchId"
       :tcp-stacks="props.tcpStacks"
       :is-networking-loading="props.isNetworkingLoading"
-      :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
-      :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
       :networks-list="props.networksList"
       :is-migrate-adapter-loading="props.isMigrateAdapterLoading"
       :diagrams-data="props.diagramsData"
@@ -174,8 +172,6 @@ const props = withDefaults(
     diagramsData?: UI_I_DiagramData[]
     isManageAdaptersModalLoading?: boolean
     isNetworkingLoading?: boolean
-    isGetExistingSwitchesLoading?: boolean
-    isGetTcpStackLoading?: boolean
     isRemoveModalLoading?: boolean
     isEditModalLoading?: boolean
     isMigrateAdapterLoading?: boolean
@@ -197,18 +193,12 @@ const props = withDefaults(
     diagramsData: [],
     isManageAdaptersModalLoading: false,
     isNetworkingLoading: false,
-    isGetExistingSwitchesLoading: false,
-    isGetTcpStackLoading: false,
     isRemoveModalLoading: false,
     isEditModalLoading: false,
     isMigrateAdapterLoading: false,
   }
 )
 
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
 const initialData = ref<UI_I_ModalsInitialData>({})
 const switchInitialData = ref<UI_I_ModalsInitialData>({})
 
@@ -890,25 +880,11 @@ const onClickDiagram = (ev: MouseEvent): void => {
   &-min-width {
     //min-width: 745px;
     //min-width: 764px;
-    &:not(:first-of-type) {
-      margin-top: 16px;
-    }
   }
   &-main-container {
     padding-top: 5px;
   }
 }
-
-.diagram-main-container.is-new-view {
-  //display: flex;
-  //justify-content: center;
-  //margin: 16px 16px 30px;
-
-  padding: 16px;
-  border-radius: 8px;
-  background: var(--diagram-container-bg);
-  box-shadow: 0 1px 4px 0 #00000014;
-}
 </style>
 <style lang="scss">
 .diagram-main-actions__popup.navbar-dropdown-menu {

package/components/common/diagramMain/{header/HeaderOld.vue → Header.vue}

@@ -1,67 +1,69 @@
 <template>
-  <div class="diagram-header">
-    <div class="diagram-header-left">
-      <atoms-the-icon
-        :class="[
-          'diagram-header__arrow-icon',
-          {
-            open: props.isShowDiagram,
-          },
-        ]"
-        :data-id="`${props.testId}-toggle-icon`"
-        name="angle"
-        @click="emits('toggle-diagram')"
-      />
-      <a>
-        <span>
-          {{ localization.common.standardSwitch }}:
-          {{ props.diagramName }}
-        </span>
-      </a>
-    </div>
-    <div v-if="props.isShowDiagram" class="diagram-header__btn-container">
-      <span class="vertical-separator"></span>
-      <button
-        id="add-networking-button"
-        v-permission="
-          'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
-        "
-        :data-id="`${props.testId}-add-networking-button`"
-        type="button"
-        @click="onShowModal('add-networking', props.diagramName)"
-      >
-        {{ localization.common.addNetworking }}
-      </button>
-      <button
-        id="switch-edit-button"
-        v-permission="'Networks.UpdateSwitch'"
-        :data-id="`${props.testId}-edit-button`"
-        type="button"
-        @click="onShowModal('switch-edit')"
-      >
-        {{ localization.common.edit }}
-      </button>
-      <button
-        id="switch-manage-physical-adapters-button"
-        v-permission="'Networks.UpdateSwitch'"
-        :data-id="`${props.testId}-manage-physical-adapters-button`"
-        type="button"
-        @click="onShowModal('switch-manage-physical-adapters')"
-      >
-        {{ localization.common.managePhysicalAdapters }}
-      </button>
-      <div class="diagram-main-actions-dots">
-        <atoms-collapse-nav
-          :close-after-click="true"
-          :items="switchMainNavigation"
-          :test-id="`${props.testId}-actions`"
-          popup-class="diagram-main-actions__popup"
-          @change="onShowModal"
+  <template v-if="!props.inPortlet">
+    <div class="diagram-header">
+      <div class="diagram-header-left">
+        <atoms-the-icon
+          :class="[
+            'diagram-header__arrow-icon',
+            {
+              open: props.isShowDiagram,
+            },
+          ]"
+          :data-id="`${props.testId}-toggle-icon`"
+          name="angle"
+          @click="onToggleDiagram"
         />
+        <a>
+          <span>
+            {{ localization.common.standardSwitch }}:
+            {{ props.diagramName }}
+          </span>
+        </a>
+      </div>
+      <div v-if="props.isShowDiagram" class="diagram-header__btn-container">
+        <span class="vertical-separator"></span>
+        <button
+          id="add-networking-button"
+          v-permission="
+            'Networks.CreateSysx Networks.CreatePortGroup Networks.UpdateSwitch Networks.CreateSwitch'
+          "
+          :data-id="`${props.testId}-add-networking-button`"
+          type="button"
+          @click="onShowModal('add-networking', props.diagramName)"
+        >
+          {{ localization.common.addNetworking }}
+        </button>
+        <button
+          id="switch-edit-button"
+          v-permission="'Networks.UpdateSwitch'"
+          :data-id="`${props.testId}-edit-button`"
+          type="button"
+          @click="onShowModal('switch-edit')"
+        >
+          {{ localization.common.edit }}
+        </button>
+        <button
+          id="switch-manage-physical-adapters-button"
+          v-permission="'Networks.UpdateSwitch'"
+          :data-id="`${props.testId}-manage-physical-adapters-button`"
+          type="button"
+          @click="onShowModal('switch-manage-physical-adapters')"
+        >
+          {{ localization.common.managePhysicalAdapters }}
+        </button>
+        <div class="diagram-main-actions-dots">
+          <atoms-collapse-nav
+            :close-after-click="true"
+            :items="switchMainNavigation"
+            :test-id="`${props.testId}-actions`"
+            popup-class="diagram-main-actions__popup"
+            @change="onShowModal"
+          />
+        </div>
       </div>
     </div>
-  </div>
-  <hr class="horizontal-separator" />
+    <hr class="horizontal-separator" />
+  </template>
 </template>
 
 <script setup lang="ts">
@@ -75,6 +77,7 @@ import { switchMainNavigationFunc } from '~/components/common/diagramMain/modals
 
 const props = withDefaults(
   defineProps<{
+    inPortlet: boolean
     isShowDiagram: boolean
     diagramName: string
     testId: string
@@ -100,11 +103,12 @@ const switchMainNavigation = computed<UI_I_NavigationItem[]>(() =>
   switchMainNavigationFunc(localization.value, props.testId)
 )
 
-const onShowModal = (modalName: string, diagramName?: string) => {
+const onToggleDiagram = () => emits('toggle-diagram')
+
+const onShowModal = (modalName: string, diagramName?: string) =>
   diagramName
     ? emits('show-modal', modalName, { switch_name: diagramName })
     : emits('show-modal', modalName)
-}
 </script>
 
 <style scoped lang="scss">
@@ -136,18 +140,7 @@ const onShowModal = (modalName: string, diagramName?: string) => {
 
 .diagram-header {
   display: flex;
-  justify-self: flex-start;
-  width: 100%;
-  padding: 24px 16px 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
+  padding-left: 8px;
   a {
     color: #0072a3;
     cursor: pointer;
@@ -156,7 +149,6 @@ const onShowModal = (modalName: string, diagramName?: string) => {
     line-height: 20px;
     span {
       font-weight: 700;
-      white-space: nowrap;
     }
   }
 
@@ -168,9 +160,7 @@ const onShowModal = (modalName: string, diagramName?: string) => {
 
   &__arrow-icon {
     width: 16px;
-    min-width: 16px;
     height: 16px;
-    min-height: 16px;
     margin-right: 4px;
     transform: rotate(90deg);
     align-self: center;
@@ -223,7 +213,6 @@ const onShowModal = (modalName: string, diagramName?: string) => {
   height: 0;
   overflow: visible;
   border-top: 0px solid #eee;
-  width: 100%;
 }
 
 .vertical-separator {

package/components/common/diagramMain/modals/Modals.vue

@@ -183,8 +183,6 @@
       :tcp-stacks="props.tcpStacks"
       :diagrams-data="props.diagramsData"
       :is-networking-loading="props.isNetworkingLoading"
-      :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
-      :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
       :host-name="props.hostName"
       :project="props.project"
       @check-network-label="onCheckNetworkLabel"
@@ -276,8 +274,6 @@ const props = defineProps<{
   selectedSwitchId: string
   tcpStacks: UI_I_TCPStack[]
   isNetworkingLoading: boolean
-  isGetExistingSwitchesLoading: boolean
-  isGetTcpStackLoading: boolean
   networksList: UI_I_Network[]
   isMigrateAdapterLoading: boolean
   diagramsData: UI_I_DiagramData[]

package/components/common/diagramMain/modals/editSettings/tabs/NetworkProperties.vue

@@ -141,7 +141,7 @@ const isShowErrorMessage = computed<boolean>(
 
 const fieldsValues = ref<UI_I_PropertiesFields>(
   useDeepCopy({
-    vlanId: props.initialData.vlanId || `${localization.value.common.none2} (0)`,
+    vlanId: props.initialData.vlanId || `${localization.value.common.none} (0)`,
     networkLabel: props.initialData.networkLabel || 'Network',
   })
 )
@@ -180,7 +180,7 @@ const setMessageOnChangedField = (
 
   if (
     name === 'vlanId' &&
-    values !== `${localization.value.common.none2} (0)` &&
+    values !== `${localization.value.common.none} (0)` &&
     values !== `${localization.value.common.all} (4095)` &&
     (isNumberInRange(values, 0, 4095) || values === '')
   ) {

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

@@ -1,4 +1,3 @@
-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'
 
@@ -10,7 +9,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,
@@ -21,46 +20,6 @@ export const switchMainNavigationFunc = (
     text: localization.common.remove,
     value: 'switch-remove',
     testId: `${testId}-remove`,
-    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`,
+    permission: 'Networks.RemoveSwitch'
   },
 ]

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

@@ -52,5 +52,4 @@ export const {
   vmKernelAdapterViewSettingsFunc,
 } = vmKernelAdapterData
 // export const { managePhysicalAdapterTableData } = temporaryData
-export const { switchMainNavigationFunc, switchMainNavigationNewFunc } =
-  diagramConfig
+export const { switchMainNavigationFunc } = 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.none2} (0)` },
+      { name: localization.common.vlanId, value: `${localization.common.none} (0)` },
       { name: localization.common.tcpIpStack, value: 'Default' },
       { name: localization.common.enabledServices },
     ],

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.none2} (0)`,
+  vlanId: `${localization.value.common.none} (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.none2} (0)`,
+    vlanId: `${localization.value.common.none} (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.none2} (0)` &&
+  vlanId !== `${localization.common.none} (0)` &&
   vlanId !== `${localization.common.all} (4095)` &&
   (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId === '')

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="md"
+    size="sm"
     position="bottom"
     position-by-tooltip="center"
   >

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

@@ -1,37 +1,35 @@
 <template>
-  <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>
+  <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>
-      </template>
-      <template #footerLeftContent>
-        <span></span>
-      </template>
-    </ui-modal>
-  </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>
 
 <script lang="ts" setup>
@@ -58,12 +56,6 @@ 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,23 +107,24 @@ 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 } = modelLocal.value
+  const { current_password, new_password, confirm_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>(() => {
@@ -165,7 +166,7 @@ const onHideModal = (): void => {
       color: #9da6ad;
       font-size: 12px;
       font-weight: 400;
-      line-height: 18px;
+      line-height: 14.52px;
       margin-bottom: 20px;
     }
     &__alert {

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

@@ -15,7 +15,6 @@
           <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>
 
@@ -24,7 +23,6 @@
             :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)"
           />
@@ -34,7 +32,6 @@
           <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>
 
@@ -58,7 +55,6 @@
             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,7 +19,6 @@
         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
@@ -27,7 +26,6 @@
         :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)"
       />
@@ -42,7 +40,6 @@
         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
@@ -149,12 +146,8 @@ 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)
     }