bfg-common 1.5.246 → 1.5.248

package/components/common/backup/storage/actions/add/steps/name/New.vue

@@ -12,12 +12,9 @@
           v-model="formModelLocal.name"
           test-id="name-selection-input"
           :error="nameErrorText"
-          @blur="initValidation(true)"
-          @input="initValidation(false)"
         />
       </div>
     </div>
-
   </div>
 </template>
 
@@ -31,27 +28,17 @@ import type { UI_I_CreateDatastoreForm } from '~/components/common/backup/storag
 
 const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
 const props = defineProps<{
+  alertMessages: string[]
   messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isInitDatastoreNameValidation = ref<boolean>(false)
-const initValidation = (onlyBlur: boolean): void => {
-  onlyBlur && (isInitDatastoreNameValidation.value = true)
-}
 const nameErrorText = computed<string>(() => {
-  if (
-    props.messagesFields?.name?.field &&
-    !formModelLocal.value.name
-  ) {
+  if (!props.alertMessages?.length && props.messagesFields?.name?.field) {
     return props.messagesFields.name.field
   }
-
-  if (!isInitDatastoreNameValidation.value) return ''
-  return !formModelLocal.value.name
-    ? localization.value.common.specifyDatastoreName
-    : ''
+  return ''
 })
 </script>
 

package/components/common/backup/storage/actions/add/steps/nameAndConfigure/NameAndConfigure.vue

@@ -3,6 +3,7 @@
     v-if="isNewView"
     v-model="formModel"
     v-model:alert-info="isShowAlertInfo"
+    :alert-messages="props.alertMessages"
     :messages-fields="props.messagesFields"
   />
 

package/components/common/backup/storage/actions/add/steps/nameAndConfigure/NameAndConfigureNew.vue

@@ -6,6 +6,7 @@
       :messages="[localization.common.nameAndConfigurationAlertInfo]"
       type="info"
       class="mb-4"
+      size="md"
       @remove="isShowAlertInfo = false"
     />
 
@@ -23,8 +24,6 @@
           is-focused
           :placeholder="localization.common.name"
           :error="nameErrorText"
-          @blur="initValidation(true, ['name'])"
-          @input="initValidation(false, ['name'])"
         />
       </div>
     </div>
@@ -36,14 +35,9 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.folder }}
         </span>
-        <common-tooltip-help
-            test-id="backup-storage-folder-help"
-            help-id="backup-storage-folder-icon"
-            :title="localization.common.information"
-            :help-text="'Specify the folder path - for example, /vols/vol0/datastore-001'"
-            dropdown-width="272px"
-            dropdown-left
-            dropdown-top
+        <common-backup-storage-actions-add-steps-common-tooltip-info
+          id="backup-storage-tooltip-info-folder"
+          :description="localization.backup.specifyFolderPathExample"
         />
       </div>
       <div class="basics-step-row-content">
@@ -51,10 +45,8 @@
           id="configuration-folder-input"
           v-model="formModelLocal.folder"
           test-id="configuration-folder-input"
-          placeholder="E.g: /vols/vol0/datastore-001"
+          :placeholder="localization.backup.folderPlaceholder"
           :error="folderErrorText"
-          @blur="initValidation(true, ['folder'])"
-          @input="initValidation(false, ['folder'])"
         />
       </div>
     </div>
@@ -66,14 +58,9 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.server }}
         </span>
-        <common-tooltip-help
-            test-id="backup-storage-server-help"
-            help-id="backup-storage-server-icon"
-            :title="localization.common.information"
-            :help-text="'Specify the server address - for example, nas, nas.it.com or 192.168.0.1.'"
-            dropdown-width="272px"
-            dropdown-left
-            dropdown-top
+        <common-backup-storage-actions-add-steps-common-tooltip-info
+          id="backup-storage-tooltip-info-server"
+          :description="localization.backup.specifyServerAddressExample"
         />
       </div>
       <div class="basics-step-row-content">
@@ -81,10 +68,8 @@
           id="configuration-server-input"
           v-model="formModelLocal.server"
           test-id="configuration-server-input"
-          placeholder="E.g: nas, nas.it.com or 192.168.0.1"
+          :placeholder="localization.backup.serverPlaceholder"
           :error="serverErrorText"
-          @blur="initValidation(true, ['server'])"
-          @input="initValidation(false, ['server'])"
         />
       </div>
     </div>
@@ -104,8 +89,6 @@
           test-id="configuration-username-input"
           :placeholder="localization.auth.username"
           :error="usernameErrorText"
-          @blur="initValidation(true, ['user'])"
-          @input="initValidation(false, ['user'])"
         />
       </div>
     </div>
@@ -126,8 +109,6 @@
           test-id="configuration-password-input"
           :placeholder="localization.auth.password"
           :error="passwordErrorText"
-          @blur="initValidation(true, ['password'])"
-          @input="initValidation(false, ['password'])"
         />
       </div>
     </div>
@@ -138,13 +119,12 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_WizardStep } from '~/components/atoms/wizard/lib/models/interfaces'
 import type { UI_I_CreateDatastoreForm } from '~/components/common/backup/storage/actions/add/lib/models/interfaces'
-import type { UI_I_InitialValidationFields } from '~/components/common/backup/storage/actions/add/steps/nameAndConfigure/lib/models/interfaces'
-import type { UI_T_InitialValidationFields } from '~/components/common/backup/storage/actions/add/steps/nameAndConfigure/lib/models/types'
 
 const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
 const isShowAlertInfo = defineModel<boolean>('alertInfo', { required: true })
 
 const props = defineProps<{
+  alertMessages: string[]
   messagesFields: UI_I_WizardStep['fields']
 }>()
 const emits = defineEmits<{
@@ -153,78 +133,50 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const initValidationFields = ref<UI_I_InitialValidationFields>({
-  name: false,
-  folder: false,
-  server: false,
-  user: false,
-  password: false,
+const isEmptyAlertMessages = computed<boolean>(() => {
+  return (
+    !props.alertMessages?.length ||
+    (props.alertMessages && !props.alertMessages.flat().length)
+  )
 })
-const initValidation = (
-  onlyBlur = false,
-  types: UI_T_InitialValidationFields[]
-): void => {
-  onlyBlur && types.forEach((type) => (initValidationFields.value[type] = true))
-}
-
 /* Validation error text for Name input field */
 const nameErrorText = computed<string>(() => {
-  if (props.messagesFields?.name?.field && !formModelLocal.value.name) {
+  if (isEmptyAlertMessages.value && props.messagesFields?.name?.field) {
     return props.messagesFields.name.field
   }
-
-  if (!initValidationFields.value.name) return ''
-  return !formModelLocal.value.name
-    ? localization.value.common.fieldRequired
-    : ''
+  return ''
 })
 
 /* Validation error text for Folder input field */
 const folderErrorText = computed<string>(() => {
-  if (props.messagesFields.folder?.field && !formModelLocal.value.folder) {
+  if (isEmptyAlertMessages.value && props.messagesFields.folder?.field) {
     return props.messagesFields.folder.field
   }
-
-  if (!initValidationFields.value.folder) return ''
-  return !formModelLocal.value.folder
-    ? localization.value.common.fieldRequired
-    : ''
+  return ''
 })
 
 /* Validation error text for Server input field */
 const serverErrorText = computed<string>(() => {
-  if (props.messagesFields.server?.field && !formModelLocal.value.server) {
+  if (isEmptyAlertMessages.value && props.messagesFields.server?.field) {
     return props.messagesFields.server.field
   }
-
-  if (!initValidationFields.value.server) return ''
-  return !formModelLocal.value.server
-    ? localization.value.common.fieldRequired
-    : ''
+  return ''
 })
 
 /* Validation error text for Username input field */
 const usernameErrorText = computed<string>(() => {
-  if (props.messagesFields.user?.field && !formModelLocal.value.user) {
+  if (isEmptyAlertMessages.value && props.messagesFields.user?.field) {
     return props.messagesFields.user.field
   }
-
-  if (!initValidationFields.value.user) return ''
-  return !formModelLocal.value.user
-    ? localization.value.common.fieldRequired
-    : ''
+  return ''
 })
 
 /* Validation error text for Password input field */
 const passwordErrorText = computed<string>(() => {
-  if (props.messagesFields.password?.field && !formModelLocal.value.password) {
+  if (isEmptyAlertMessages.value && props.messagesFields.password?.field) {
     return props.messagesFields.password.field
   }
-
-  if (!initValidationFields.value.password) return ''
-  return !formModelLocal.value.password
-    ? localization.value.common.fieldRequired
-    : ''
+  return ''
 })
 </script>
 

package/components/common/backup/storage/actions/add/steps/readyComplete/ReadyCompleteNew.vue

@@ -14,7 +14,13 @@
             :key="listKey"
             class="details-item"
           >
-            <span class="details-item-label"> {{ list.label }}: </span>
+            <span
+              ref="detailsItemLabel"
+              :style="{ width: labelMaxWidth + 'px' }"
+              class="details-item-label"
+            >
+              {{ list.label }}:
+            </span>
 
             <div class="details-list__col-right">
               <!-- Если value — массив -->
@@ -27,14 +33,20 @@
                   :key="itemKey"
                   class="details-item-value"
                 >
-                  <span :class="['icon', item.iconClassName]"></span>
+                  <span
+                    v-if="item.iconClassName"
+                    :class="['icon', item.iconClassName]"
+                  ></span>
                   {{ item.label }}
                 </span>
               </div>
 
               <!-- Если value — обычная строка -->
               <span v-else class="details-item-value">
-                <span :class="['icon', list.iconClassName]"></span>
+                <span
+                  v-if="list.iconClassName"
+                  :class="['icon', list.iconClassName]"
+                ></span>
                 {{ list.value }}
               </span>
             </div>
@@ -51,17 +63,41 @@ import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/in
 const props = defineProps<{
   dataReadyView: UI_I_DetailsItem[]
 }>()
+
+const detailsItemLabel = ref([])
+const labelMaxWidth = computed(() => {
+  let maxWidth = 0
+  for (const key in detailsItemLabel.value) {
+    const node = detailsItemLabel.value[key]
+    if (node.scrollWidth > maxWidth) maxWidth = node.scrollWidth
+  }
+  return maxWidth
+})
 </script>
 
+<style>
+:root {
+  --ready-to-complate-border-color: #e9ebeda3;
+}
+:root.dark-theme {
+  --ready-to-complate-border-color: #e9ebed1f;
+}
+</style>
 <style lang="scss" scoped>
 .ready-complete {
   &__section {
     &:not(:last-child) {
-      border-bottom: 1px solid #e9ebed; // for dark and light mode
+      color: var(--global-border-color);
+      border-bottom: 1px solid var(--ready-to-complate-border-color);
     }
   }
 
   .details {
+    &:last-child {
+      .details__list {
+        padding-bottom: 16px;
+      }
+    }
     &__container {
       display: flex;
       flex-direction: column;
@@ -71,7 +107,7 @@ const props = defineProps<{
       color: var(--title-form-first-color);
       font-weight: 500;
       font-size: 14px;
-      line-height: 100%;
+      line-height: 18px;
       margin: 16px 0;
     }
 
@@ -113,6 +149,8 @@ const props = defineProps<{
         }
 
         .icon {
+          min-width: 20px;
+          min-height: 20px;
           margin-right: 8px;
         }
       }

package/components/common/backup/storage/actions/add/steps/readyComplete/lib/config/propertiesDetails.ts

@@ -48,10 +48,11 @@ const localDetailsFunc = (
       value: '',
       items: [
         {
-          label: localization.common.datastoreName,
+          label: localization.common.name,
           value: name,
           items: [],
           testId: 'view-selected-name-in-complete',
+          iconClassName: 'vsphere-icon-datastore',
         },
       ],
       actions: [],
@@ -94,7 +95,7 @@ const nfsDetailsFunc = (
       value: '',
       items: [
         {
-          label: localization.common.datastoreName,
+          label: localization.common.name,
           value: name,
           items: [],
           testId: 'view-storage-name-in-complete',
@@ -140,7 +141,7 @@ const sambaDetailsFunc = (
       value: '',
       items: [
         {
-          label: localization.common.datastoreName,
+          label: localization.common.name,
           value: name,
           items: [],
           testId: 'view-storage-name-in-complete',
@@ -187,7 +188,7 @@ const sharedStormDetailsFunc = (
       value: '',
       items: [
         {
-          label: localization.common.datastoreName,
+          label: localization.common.name,
           value: name,
           items: [],
           testId: 'view-storage-name-in-complete',
@@ -201,7 +202,7 @@ const sharedStormDetailsFunc = (
       value: '',
       items: [
         {
-          label: localization.common.datastoreName,
+          label: localization.common.name,
           value: datastore.name,
           items: [],
           testId: 'view-storage-name-in-complete',

package/components/common/backup/storage/actions/add/steps/typeMode/TypeModeNew.vue

@@ -11,20 +11,15 @@
         size="md"
       >
         <template #description>
-          <span class="lockdown-mode__radio-description">
+          <span class="datastore-type__radio-description">
             {{ option.description }}
           </span>
         </template>
 
         <template #tooltip>
-          <common-tooltip-help
-              :test-id="`${option.testId}-${key}`"
-              :help-id="`${option.testId}-${key}`"
-              :help-text="option.tooltipContent"
-              :title="localization.common.information"
-              dropdown-width="272px"
-              dropdown-left
-              dropdown-top
+          <common-backup-storage-actions-add-steps-common-tooltip-info
+            :id="option.testId"
+            :description="option.tooltipContent"
           />
         </template>
       </ui-radio>
@@ -33,16 +28,13 @@
 </template>
 
 <script lang="ts" setup>
+// TODO this component is duplicate
 import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
-import type {UI_I_Localization} from "~/lib/models/interfaces";
 
 const datastoreTypeModeLocal = defineModel<number>({ required: true })
 const props = defineProps<{
   options: UI_I_RadioOption[]
 }>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
 </script>
 
 <style>
@@ -66,9 +58,11 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 12px;
+      padding-bottom: 16px;
     }
     &-description {
       color: #9da6ad;
+      line-height: 18px;
     }
   }
   :deep(input[type='radio']) {
@@ -76,21 +70,26 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       width: 100%;
       height: 100%;
       background-color: var(--select-bg);
-      border: 1px solid var(--line-color);
+      //border: 1px solid var(--line-color);
+      border: none;
       border-radius: 8px;
       padding: 12px;
+      transition: box-shadow 0.1s ease-in-out;
+      box-shadow: inset 0 0 0 1px var(--line-color);
     }
 
     &:not(:checked) {
       & ~ .radio-label:hover {
-        border-color: var(--select-border);
+        //border-color: var(--select-border);
+        box-shadow: inset 0 0 0 1px var(--select-border);
       }
     }
 
     &:checked {
       & ~ .radio-label {
         background-color: var(--radio-btn-active-label-bg-color);
-        border-color: var(--radio-btn-active-label-border-color);
+        //border-color: var(--radio-btn-active-label-border-color);
+        box-shadow: inset 0 0 0 1.5px var(--radio-btn-active-label-border-color);
       }
     }
   }

package/components/common/layout/theHeader/feedback/new/additionalDetails/Headline.vue

@@ -3,15 +3,42 @@
     <span class="headline__label">
       {{ localization.common.additionalDetails }}
     </span>
-
-    <common-tooltip-help
-        test-id="feedback-additional-details-help"
-        help-id="feedback-additional-details-info-icon"
-        dropdown-width="288px"
-        :title="localization.feedback.additionalDetailsHelp"
-        :help-text="localization.feedback.additionalDetailsTooltip"
-        dropdown-left
+    <ui-icon
+      id="feedback-additional-details-info-icon"
+      :class="['headline__icon pointer', isShowInfo && 'active']"
+      name="info"
+      width="16"
+      height="16"
+      @click="isShowInfo = !isShowInfo"
     />
+    <ui-popup-window
+      v-model="isShowInfo"
+      :elem-id="'feedback-additional-details-info-icon'"
+      width="288px"
+      is-priority-right-position
+    >
+      <div class="common-widget-info">
+        <div class="flex justify-between">
+          <div class="flex">
+            <ui-icon-icon3 name="info-2" width="16px" height="16px" />
+            <span class="title">
+              {{ localization.feedback.additionalDetailsHelp }}
+            </span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click="isShowInfo = false"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ localization.feedback.additionalDetailsTooltip }}
+        </div>
+      </div>
+    </ui-popup-window>
   </div>
 </template>
 
@@ -20,6 +47,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const isShowInfo = ref<boolean>(false)
 </script>
 
 <style lang="scss" scoped>
@@ -28,6 +56,15 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   @include flex($align: center);
   margin: 32px 0 16px;
 
+  &__icon {
+    color: var(--feedback-tooltip-trigger-color);
+    &:hover {
+      color: var(--feedback-tooltip-hover-trigger-color);
+    }
+    &.active {
+      color: var(--feedback-tooltip-acctive-trigger-color);
+    }
+  }
   &__label {
     line-height: 19.36px;
     font-size: 16px;
@@ -35,5 +72,27 @@ const localization = computed<UI_I_Localization>(() => useLocal())
     color: var(--feedback-text-color);
     margin-right: 8px;
   }
+  .common-widget-info {
+    padding: 16px;
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+      color: var(--feedback-text-color);
+      margin-left: 8px;
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--feedback-text-color);
+      margin-top: 12px;
+    }
+
+    svg {
+      color: var(--feedback-tooltip-close-color);
+      min-width: 16px;
+    }
+  }
 }
 </style>