bfg-common 1.5.487 → 1.5.489

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

@@ -34,14 +34,17 @@ export const switchViewSettingsModalTabsFunc = (
   {
     text: localization.common.all,
     value: 0,
+    testId: 'switch-view-settings-all',
   },
   {
     text: localization.common.properties,
     value: 1,
+    testId: 'switch-view-settings-properties',
   },
   {
     text: localization.common.policies,
     value: 2,
+    testId: 'switch-view-settings-policies',
   },
 ]
 

package/components/common/diagramMain/modals/remove/RemoveModal.vue

@@ -11,6 +11,8 @@
     :type="props.type"
     :switch-name="props.switchName"
     :host-name="props.hostName"
+    :network-type="props.networkType"
+    :project="props.project"
     @remove="onRemove"
     @hide="onHideModal"
   />
@@ -24,12 +26,16 @@
     :show="props.show"
     :is-show-loader="props.isShowLoader"
     :type="props.type"
+    :network-type="props.networkType"
+    :project="props.project"
     @remove="onRemove"
     @hide="onHideModal"
   />
 </template>
 
 <script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+
 // Props from up
 const props = withDefaults(
   defineProps<{
@@ -43,6 +49,8 @@ const props = withDefaults(
     label?: string
     switchName?: string
     hostName?: string
+    networkType: string
+    project: UI_T_Project
   }>(),
   {
     id: '',

package/components/common/diagramMain/modals/remove/RemoveModalNew.vue

@@ -1,95 +1,106 @@
-<template>
-  <ui-popup
-    :v-if="props.show"
-    :title="title"
-    :message="text"
-    :texts="buttons"
-    icon-name="info-status"
-    size="sm"
-    @hide="onHideModal"
-    @submit="onRemove"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    modalName: string
-    viewName: string
-    title: string
-    type: string
-    id?: string
-    isShowLoader?: boolean
-    label?: string
-    switchName?: string
-    hostName?: string
-  }>(),
-  {
-    id: '',
-    isShowLoader: false,
-    label: '',
-    switchName: '',
-    hostName: '',
-  }
-)
-
-// Modal hiding
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'remove', id: string, type: string): void
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const title = computed<string>(() => {
-  switch (props.type) {
-    case 'network':
-      return localization.value.common.confirmNetworkRemoval
-    case 'port':
-      return localization.value.common.confirmPortRemoval
-    case 'switch':
-      return localization.value.common.confirmSwitchRemoval
-    default:
-      return ''
-  }
-})
-
-const text = computed<string>(() => {
-  switch (props.type) {
-    case 'network':
-      return localization.value.common.confirmNetworkRemovalMessage
-        .replace('{networkName}', props.label)
-        .replace('{switchName}', props.switchName)
-    case 'port':
-      return localization.value.common.confirmPortRemovalMessage
-        .replace('{portName}', props.id)
-        .replace('{switchName}', props.switchName)
-    case 'switch':
-      return localization.value.common.confirmSwitchRemovalMessage
-        .replace('{switchName}', props.switchName)
-        .replace('{hostName}', props.hostName)
-    default:
-      return ''
-  }
-})
-
-const buttons = computed<UI_I_ModalTexts>(() => ({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.confirm,
-}))
-
-const onRemove = (): void => {
-  emits('remove', props.id, props.type)
-}
-const onHideModal = (): void => {
-  emits('hide')
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <ui-popup
+    :v-if="props.show"
+    :title="title"
+    :message="text"
+    :texts="buttons"
+    icon-name="info-status"
+    size="sm"
+    @hide="onHideModal"
+    @submit="onRemove"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    modalName: string
+    viewName: string
+    title: string
+    type: string
+    id?: string
+    isShowLoader?: boolean
+    label?: string
+    switchName?: string
+    hostName?: string
+    networkType: string
+    project: UI_T_Project
+  }>(),
+  {
+    id: '',
+    isShowLoader: false,
+    label: '',
+    switchName: '',
+    hostName: '',
+  }
+)
+
+// Modal hiding
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'remove', id: string, type: string): void
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const title = computed<string>(() => {
+  switch (props.type) {
+    case 'network':
+      return localization.value.common.confirmNetworkRemoval
+    case 'port':
+      return localization.value.common.confirmPortRemoval
+    case 'switch':
+      return localization.value.common.confirmSwitchRemoval
+    default:
+      return ''
+  }
+})
+
+const text = computed<string>(() => {
+  switch (props.type) {
+    case 'network':
+      return localization.value.common.confirmNetworkRemovalMessage
+        .replace('{networkName}', props.label)
+        .replace('{switchName}', props.switchName)
+    case 'port':
+      return localization.value.common.confirmPortRemovalMessage
+        .replace('{portName}', props.id)
+        .replace('{switchName}', props.switchName)
+    case 'switch':
+      return localization.value.common.confirmSwitchRemovalMessage
+        .replace('{switchName}', props.switchName)
+        .replace('{hostName}', props.hostName)
+    default:
+      return ''
+  }
+})
+
+const buttons = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.confirm,
+}))
+
+const isSphereProject = computed<boolean>(() => props.project === 'sphere')
+
+const onRemove = (): void => {
+  const type = isSphereProject.value
+    ? props.networkType
+      ? `${props.type}${props.networkType}`
+      : props.type
+    : props.type
+
+  emits('remove', props.id, type)
+}
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/diagramMain/modals/remove/RemoveModalOld.vue

@@ -127,6 +127,7 @@
 </template>
 
 <script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 // Props from up
@@ -140,6 +141,8 @@ const props = withDefaults(
     id?: string
     isShowLoader?: boolean
     label?: string
+    networkType: string
+    project: UI_T_Project
   }>(),
   {
     id: '',
@@ -182,8 +185,16 @@ const removeModalTextPort = computed<string>(
     ${localization.value.common.portRemoveSecondLineText} ${props.id}?`
 )
 
+const isSphereProject = computed<boolean>(() => props.project === 'sphere')
+
 const onRemove = (id: string, type: string) => {
-  emits('remove', id, type)
+  const typeLocal = isSphereProject.value
+    ? props.networkType
+      ? `${type}${props.networkType}`
+      : type
+    : type
+
+  emits('remove', id, typeLocal)
 }
 const onHideModal = (): void => {
   emits('hide')

package/components/common/diagramMain/modals/viewSettings/info/Info.vue

@@ -26,8 +26,6 @@ import type {
   UI_I_ModalTab,
 } from '~/components/common/diagramMain/lib/models/interfaces'
 
-// Props from up
-
 const props = withDefaults(
   defineProps<{
     show: boolean

package/components/common/diagramMain/modals/viewSettings/viewSettings/ViewSettings.vue

@@ -3,6 +3,8 @@
     v-if="isNewView"
     :view-name="props.viewName"
     :view-settings-field="props.viewSettingsField"
+    :is-labels-with-dots="props.isLabelsWithDots"
+    :is-ready-complete="props.isReadyComplete"
   />
   <common-diagram-main-modals-view-settings-view-settings-old
     v-else
@@ -21,10 +23,14 @@ const props = withDefaults(
     viewSettingsField: UI_I_ViewSettingsFields
     viewName?: string
     withCollapse?: boolean
+    isLabelsWithDots?: boolean
+    isReadyComplete?: boolean
   }>(),
   {
     viewName: '',
     withCollapse: undefined,
+    isLabelsWithDots: false,
+    isReadyComplete: false,
   }
 )
 

package/components/common/diagramMain/modals/viewSettings/viewSettings/ViewSettingsNew.vue

@@ -1,81 +1,91 @@
 <template>
-  <div>
-    <div class="table-wrapper">
-      <table class="settings-table">
-        <tbody>
-          <tr>
-            <td colspan="2">
+  <div class="table-wrapper">
+    <ui-line v-if="props.viewSettingsField.separator" margin="24px 0 16px" />
+    <table
+      :class="['settings-table', { 'ready-complete': props.isReadyComplete }]"
+    >
+      <tbody>
+        <tr>
+          <td colspan="2">
+            <span>
+              {{ props.viewSettingsField.title }}
+            </span>
+          </td>
+        </tr>
+        <template v-if="props.viewSettingsField.rows.length > 0">
+          <tr
+            v-for="(row, rowKey) in props.viewSettingsField.rows"
+            :key="row.name"
+            class="table-block"
+          >
+            <td class="row-name-container">
               <span>
-                {{ props.viewSettingsField.title }}
+                {{ row.name
+                }}<template v-if="props.isLabelsWithDots">:</template>
               </span>
             </td>
-          </tr>
-          <template v-if="props.viewSettingsField.rows.length > 0">
-            <tr
-              v-for="(row, rowKey) in props.viewSettingsField.rows"
-              :key="row.name"
-              class="table-block"
-            >
-              <td class="row-name-container">
-                <span>
-                  {{ row.name }}
-                </span>
-              </td>
-              <td class="row-value-container">
+            <td class="row-value-container">
+              <span
+                :class="[
+                  'settings-table__values',
+                  row.status && {
+                    'is-status-yes': row.color,
+                    'is-status-no': !row.color,
+                  },
+                  {
+                    'is-array':
+                      Array.isArray(row.value) && row.value.length > 0,
+                  },
+                ]"
+              >
                 <span
-                  :class="[
-                    'settings-table__values',
-                    row.status && {
-                      'is-status-yes': row.color,
-                      'is-status-no': !row.color,
-                    },
-                  ]"
-                >
-                  <template v-if="Array.isArray(row.value)">
-                    <template v-if="row.value.length > 0">
-                      <span
-                        v-for="(value, key) in row.value"
-                        :key="value"
-                        :data-id="`view-settings-${rowKey}-${key}`"
-                        class="settings-table__value array-items"
-                      >
-                        {{ value }}
-                      </span>
-                    </template>
-                    <template v-else>
-                      <span
-                        :data-id="`view-settings-${rowKey}`"
-                        class="settings-table__value"
-                        >--</span
-                      >
-                    </template>
+                  v-if="row.icon"
+                  :class="['settings-table__value-icon', row.icon]"
+                ></span>
+                <template v-if="Array.isArray(row.value)">
+                  <template v-if="row.value.length > 0">
+                    <span
+                      v-for="(value, key) in row.value"
+                      :key="value"
+                      :data-id="`view-settings-${rowKey}-${key}`"
+                      class="settings-table__value array-items"
+                    >
+                      {{ value }}
+                    </span>
                   </template>
-                  <span
-                    v-else
-                    :data-id="`view-settings-${rowKey}`"
-                    class="settings-table__value"
-                  >
-                    {{ row.value || '--' }}
-                  </span>
-                </span>
-              </td>
-            </tr>
-          </template>
-          <tr v-else-if="props.viewSettingsField.rows.length === 0">
-            <td colspan="2">
-              <div class="not-available">
-                <span><ui-icon width="16" height="16" name="info" /></span>
-                <span>
-                  {{ props.viewSettingsField.title }}
-                  {{ localization.common.isNotAvailableOnThis }}
-                  {{ props.viewName }}
+                  <template v-else>
+                    <span
+                      :data-id="`view-settings-${rowKey}`"
+                      class="settings-table__value"
+                      >--</span
+                    >
+                  </template>
+                </template>
+                <span
+                  v-else
+                  :data-id="`view-settings-${rowKey}`"
+                  class="settings-table__value"
+                >
+                  {{ row.value || '--' }}
                 </span>
-              </div>
+              </span>
             </td>
           </tr>
-        </tbody>
-      </table>
-    </div>
+        </template>
+        <tr v-else-if="props.viewSettingsField.rows.length === 0">
+          <td colspan="2">
+            <div class="not-available">
+              <span><ui-icon width="16" height="16" name="info" /></span>
+              <span>
+                {{ props.viewSettingsField.title }}
+                {{ localization.common.isNotAvailableOnThis }}
+                {{ props.viewName }}
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 
@@ -88,9 +98,13 @@ const props = withDefaults(
   defineProps<{
     viewSettingsField: UI_I_ViewSettingsFields
     viewName?: string
+    isLabelsWithDots?: boolean
+    isReadyComplete?: boolean
   }>(),
   {
     viewName: '',
+    isLabelsWithDots: false,
+    isReadyComplete: false,
   }
 )
 
@@ -158,10 +172,10 @@ const localization = computed<UI_I_Localization>(() => useLocal())
             color: var(--diagram-info-text);
 
             &.is-status-yes {
-              color: #239332;
+              color: var(--text-green);
             }
             &.is-status-no {
-              color: #ea3223;
+              color: var(--text-red);
             }
 
             .array-items {
@@ -177,6 +191,10 @@ const localization = computed<UI_I_Localization>(() => useLocal())
             width: 100%;
             display: inline-block;
           }
+          &__value-icon {
+            //width: 20px;
+            //height: 20px;
+          }
         }
       }
 
@@ -203,6 +221,57 @@ const localization = computed<UI_I_Localization>(() => useLocal())
         margin-right: 8px;
       }
     }
+
+    &.ready-complete {
+      .row-name-container {
+        span {
+          font-weight: 400;
+          font-size: 13px;
+          line-height: 20px;
+          letter-spacing: 0;
+          vertical-align: middle;
+        }
+      }
+      .row-value-container {
+        & > .settings-table__values {
+          display: flex;
+          align-items: center;
+          column-gap: 8px;
+        }
+        & > .settings-table__values.is-array {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 8px;
+          width: 100%;
+
+          .settings-table__value {
+            width: auto;
+            padding: 2.5px 12px;
+            height: 20px;
+            background: var(--horizontal-line);
+            border-radius: 16px;
+            line-height: unset;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 15px;
+            letter-spacing: 0;
+            text-align: center;
+          }
+        }
+      }
+      .settings-table__value {
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 20px;
+        letter-spacing: 0;
+        vertical-align: middle;
+      }
+      .settings-table__value-icon {
+        //width: 20px;
+        //height: 20px;
+      }
+    }
   }
 }
 </style>

package/components/common/diagramMain/modals/viewSettings/viewSettings/ViewSettingsOld.vue

@@ -14,7 +14,7 @@
                   },
                 ]"
                 name="angle"
-                data-id="virtual-switch-toggle-icon"
+                :data-id="`virtual-switch-toggle-icon-${props.viewSettingsField.id}`"
                 @click="onToggle"
               />
               <span :class="{ 'title-with-collapse': props.withCollapse }">
@@ -57,7 +57,7 @@
                       <span
                         v-for="(value, key) in row.value"
                         :key="value"
-                        :data-id="`view-settings-${rowKey}-${key}`"
+                        :data-id="`view-settings-value-${props.viewSettingsField.id}-${rowKey}-${key}`"
                         class="settings-table__value"
                       >
                         {{ value }}
@@ -65,7 +65,7 @@
                     </template>
                     <template v-else>
                       <span
-                        :data-id="`view-settings-${rowKey}`"
+                        :data-id="`view-settings-value-${props.viewSettingsField.id}-${rowKey}`"
                         class="settings-table__value"
                         >--</span
                       >
@@ -73,7 +73,7 @@
                   </template>
                   <span
                     v-else
-                    :data-id="`view-settings-${rowKey}`"
+                    :data-id="`view-settings-value-${props.viewSettingsField.id}-${rowKey}`"
                     class="settings-table__value"
                   >
                     {{ row.value || '--' }}