bfg-common 1.5.251 → 1.5.253

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

@@ -21,10 +21,15 @@
             <div class="subtitle-block flex-row">
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
 
-              <common-wizards-datastore-add-steps-common-tooltip-info
-                id="datastore-type-subtitle-tooltip"
-                class="ml-2"
-                :description="localization.common.datastoreTypeHelpDesc"
+              <common-tooltip-help
+                  test-id="datastore-type-subtitle-tooltip"
+                  help-id="datastore-type-subtitle-tooltip-icon"
+                  :title="localization.common.information"
+                  :help-text="localization.common.datastoreTypeHelpDesc"
+                  dropdown-width="272px"
+                  dropdown-left
+                  dropdown-top
+                  class="ml-2"
               />
             </div>
           </div>

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

@@ -35,9 +35,14 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.folder }}
         </span>
-        <common-backup-storage-actions-add-steps-common-tooltip-info
-          id="backup-storage-tooltip-info-folder"
-          :description="localization.backup.specifyFolderPathExample"
+        <common-tooltip-help
+            test-id="backup-storage-tooltip-info-folder"
+            help-id="backup-storage-tooltip-info-folder-icon"
+            :title="localization.common.information"
+            :help-text="localization.backup.specifyFolderPathExample"
+            dropdown-width="272px"
+            dropdown-left
+            dropdown-top
         />
       </div>
       <div class="basics-step-row-content">
@@ -58,9 +63,14 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.server }}
         </span>
-        <common-backup-storage-actions-add-steps-common-tooltip-info
-          id="backup-storage-tooltip-info-server"
-          :description="localization.backup.specifyServerAddressExample"
+        <common-tooltip-help
+            test-id="backup-storage-tooltip-info-server"
+            help-id="backup-storage-tooltip-info-server-icon"
+            :title="localization.common.information"
+            :help-text="localization.backup.specifyServerAddressExample"
+            dropdown-width="272px"
+            dropdown-left
+            dropdown-top
         />
       </div>
       <div class="basics-step-row-content">
@@ -127,9 +137,7 @@ const props = defineProps<{
   alertMessages: string[]
   messagesFields: UI_I_WizardStep['fields']
 }>()
-const emits = defineEmits<{
-  (event: 'remove-errors'): void
-}>()
+
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -139,6 +147,7 @@ const isEmptyAlertMessages = computed<boolean>(() => {
     (props.alertMessages && !props.alertMessages.flat().length)
   )
 })
+
 /* Validation error text for Name input field */
 const nameErrorText = computed<string>(() => {
   if (isEmptyAlertMessages.value && props.messagesFields?.name?.field) {

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

@@ -17,9 +17,14 @@
         </template>
 
         <template #tooltip>
-          <common-backup-storage-actions-add-steps-common-tooltip-info
-            :id="option.testId"
-            :description="option.tooltipContent"
+          <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
           />
         </template>
       </ui-radio>
@@ -30,11 +35,15 @@
 <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>

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

@@ -3,42 +3,15 @@
     <span class="headline__label">
       {{ localization.common.additionalDetails }}
     </span>
-    <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>
+    <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
+    />
   </div>
 </template>
 
@@ -47,7 +20,6 @@ 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>
@@ -56,15 +28,6 @@ const isShowInfo = ref<boolean>(false)
   @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;
@@ -72,27 +35,5 @@ const isShowInfo = ref<boolean>(false)
     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>

package/components/common/layout/theHeader/feedback/new/subtitle/Subtitle.vue

@@ -3,41 +3,15 @@
     <span class="subtitle__label">
       {{ localization.common.helpUsImprove }}
     </span>
-    <ui-icon
-      id="feedback-description-info-icon"
-      name="info"
-      width="16"
-      height="16"
-      :class="['subtitle__icon pointer', isShowInfo && 'active']"
-      @click="isShowInfo = !isShowInfo"
-    />
-    <ui-popup-window
-      v-model="isShowInfo"
-      :elem-id="'feedback-description-info-icon'"
-      width="320px"
-      class="subtitle__tooltip"
-      is-priority-right-position
-    >
-      <div class="common-widget-info">
-        <div class="headline justify-between flex-align-start">
-          <div class="flex-align-start">
-            <ui-icon name="info-2" width="16px" height="16px" />
-            <span class="title">{{ localization.common.feedbackHelp }}</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.common.anyFeedbackYouProvideMay }}
-        </div>
-      </div>
-    </ui-popup-window>
+    <common-tooltip-help
+        test-id="feedback-description-help"
+        help-id="feedback-description-info-icon"
+        dropdown-width="320px"
+        :title="localization.common.feedbackHelp"
+        :help-text="localization.common.anyFeedbackYouProvideMay"
+        dropdown-left
+    />
   </div>
 </template>
 
@@ -46,7 +20,6 @@ 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>
@@ -56,48 +29,11 @@ const isShowInfo = ref<boolean>(false)
   border-bottom: 1px solid var(--horizontal-line);
   padding: 24px 0 12px;
 
-  &__icon {
-    color: var(--feedback-tooltip-trigger-color);
-    &:hover {
-      color: var(--feedback-tooltip-hover-trigger-color);
-    }
-    &.active {
-      color: var(--feedback-tooltip-acctive-trigger-color);
-    }
-  }
-  &__tooltip {
-    .flex-align-center {
-      height: 16px;
-    }
-  }
-
   &__label {
     font-size: 12px;
     font-weight: 400;
     line-height: 14.52px;
     color: #9da6ad;
   }
-  .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 {
-      flex: none;
-      color: var(--feedback-tooltip-close-color);
-    }
-  }
 }
 </style>

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

@@ -4,6 +4,7 @@
     test-id="user-preferences-modal"
     width="580px"
     height="345px"
+    :modal-loading="isLoading"
     :title="localization.common.preferences"
     @hide="onHide"
   >
@@ -65,7 +66,7 @@
         id="user-preferences-apply-button"
         data-id="user-preferences-apply-button"
         class="btn btn-primary"
-        @click="emits('submit')"
+        @click="onSubmit"
       >
         {{ localization.common.save }}
       </button>
@@ -105,6 +106,8 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const isLoading = ref<boolean>(false)
+
 const isSphere = ref<boolean>(props.project === 'sphere')
 const selectedTab = ref<UI_T_UserPreferenceTab>('time-tab')
 
@@ -112,6 +115,11 @@ const tabsItems = computed<UI_I_CollapseNavItem[]>(() =>
   preferencesTabs(localization.value, props.project)
 )
 
+const onSubmit = (): void => {
+  isLoading.value = true
+  emits('submit')
+}
+
 const onHide = (): void => {
   emits('hide')
 

package/components/common/pages/tasks/table/Table.vue

@@ -38,13 +38,18 @@
         {{ item.text }}
       </ui-chip>
 
-      <common-pages-tasks-table-error-info
-        v-if="item.data.error"
-        :id="item.data.testId"
-        :error="item.data.error"
-        :opened-error="openedError"
-        @toggle-error="onToggleError"
-      />
+      <div v-if="item.data.error" class="task-table__tooltip">
+        <common-tooltip-help
+            :test-id="item.data.testId"
+            :help-id="item.data.testId + 'icon'"
+            :title="localization.common.failureReason"
+            :help-text="item.data.error"
+            status="error"
+            dropdown-width="232px"
+            dropdown-left
+            dropdown-top
+        />
+      </div>
     </template>
 
     <template #default-actions="{ item }">
@@ -331,6 +336,9 @@ const onSelectNodeOfTree = (
       margin-left: 8px;
     }
   }
+  &__tooltip {
+    margin-left: 8px;
+  }
 }
 
 .skeleton-header {

package/components/common/pages/tasks/table/expandDetails/ExpandDetails.vue

@@ -30,15 +30,18 @@
           {{ normalizedTaskDetails[2].text }}
         </ui-chip>
 
-        <common-pages-tasks-table-error-info
-          v-if="normalizedTaskDetails[2].data.error"
-          :id="`${normalizedTaskDetails[2].data.testId}-expand-details`"
-          :error="normalizedTaskDetails[2].data.error"
-          :opened-error="openedError"
-          in-collapse-content
-          is-small
-          @toggle-error="onToggleError"
-        />
+         <div v-if="normalizedTaskDetails[2].data.error" class="expand-details__tooltip">
+          <common-tooltip-help
+              :test-id="normalizedTaskDetails[2].data.testId"
+              :help-id="`${normalizedTaskDetails[2].data.testId}-expand-icon`"
+              :title="localization.common.failureReason"
+              :help-text="normalizedTaskDetails[2].data.error"
+              status="error"
+              dropdown-width="232px"
+              dropdown-left
+              dropdown-top
+          />
+        </div>
       </span>
     </div>
 
@@ -182,5 +185,8 @@ const onSelectNodeOfTree = (data: any): void => {
       width: max-content;
     }
   }
+  &__tooltip {
+    margin-left: 6px;
+  }
 }
 </style>

package/components/common/tooltip/Help.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="flex-align-center relative">
+    <ui-icon
+        :id="`${props.helpId}`"
+        :data-id="`${props.testId}-show-help-icon`"
+        name="info"
+        :width="props.iconWidth || '16'"
+        :height="props.iconHeight || '16'"
+        :class="['help-icon cursor-pointer', {active: isShowHelp}, {disabled: props.isDisabled}]"
+        @click.stop="isShowHelp = !isShowHelp"
+    />
+    <ui-popup-window
+        v-model="isShowHelp"
+        :left="props.dropdownLeft"
+        :right="props.dropdownRight"
+        :top="props.dropdownTop"
+        :elem-id="props.helpId"
+        :width="props.dropdownWidth || 'max-content'"
+        :max-height="props.dropdownMaxHeight || 'unset'"
+
+    >
+      <div class="help-content" :style="{ width: props.dropdownWidth }">
+        <div class="headline">
+          <ui-icon :name="tooltipStatus" width="16" height="16" />
+          <h3 class="help-title">
+            {{ props.title || localization.mainNavigation.help }}
+          </h3>
+          <ui-icon
+              name="close"
+              width="16"
+              height="16"
+              class="help-close-icon cursor-pointer"
+              @click.stop="isShowHelp = false"
+          />
+        </div>
+
+        <slot />
+
+        <p v-if="props.helpText" class="help-text">
+          {{ props.helpText }}
+        </p>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+<script setup lang="ts">
+
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { T_TooltipHelpStatus } from '~/components/common/tooltip/lib/models/types'
+
+const props = defineProps<{
+  testId: string,
+  helpId: string,
+  dropdownWidth?: string
+  helpText?: string,
+  iconWidth?: string,
+  iconHeight?: string,
+  dropdownMaxHeight?: string,
+  dropdownLeft?: boolean,
+  dropdownRight?: boolean,
+  dropdownTop?: boolean,
+  isDisabled?: boolean,
+  title?: string,
+  status?: T_TooltipHelpStatus
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowHelp = ref<boolean>(false)
+
+const tooltipStatus = computed<string>(() => props.status === 'error' ? 'error' : 'info-2')
+
+</script>
+<style>
+:root {
+  --help-color: #4d5d69;
+  --help-icon-hover-color: #4d5d69;
+  --help-icon-active-color: #008fd6;
+  --help-close-icon-color: #182531;
+}
+:root.dark-theme {
+  --help-color: #e9eaec;
+  --help-icon-hover-color: #e9eaec;
+  --help-icon-active-color: #2ba2de;
+  --help-close-icon-color: #e9eaec;
+}
+</style>
+<style scoped lang="scss">
+.help-icon {
+  color: #9da6ad; // for light and dark
+
+  &:hover {
+    color: var(--help-icon-hover-color);
+  }
+  &.active {
+    color: var(--help-icon-active-color);
+  }
+  &.disabled {
+    color: #bdc3c7;
+    pointer-events: none;
+  }
+}
+.help-content {
+  padding: 16px;
+
+  .headline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+
+    .help-title {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+      color: var(--help-color);
+    }
+    .help-close-icon {
+      color: var(--help-close-icon-color)
+    }
+  }
+
+  :deep(.help-text) {
+    font-size: 13px;
+    line-height: 15.73px;
+    color: var(--help-color);
+    word-break: break-word;
+    white-space: normal;
+  }
+}
+</style>

package/components/common/tooltip/lib/models/types.ts

@@ -0,0 +1 @@
+export type T_TooltipHelpStatus = 'info' | 'error'

package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/BusNew.vue

@@ -17,52 +17,16 @@
           size="sm"
         />
 
-        <div
-          v-if="props.helpText"
-          :id="props.helpId"
-          class="flex-align-center relative"
-        >
-          <ui-icon
-            :data-id="`${props.testId}-show-help-icon`"
-            width="20"
-            height="20"
-            name="info"
-            :class="['bus-help-icon cursor-pointer', {active: isShowHelp}]"
-            @click.stop="isShowHelp = !isShowHelp"
+        <div v-if="props.helpText">
+          <common-tooltip-help
+              :test-id="`${props.testId}`"
+              :help-id="`${props.helpId}`"
+              :help-text="props.helpText"
+              :dropdown-left="true"
+              dropdown-width="480px"
+              icon-width="20"
+              icon-height="20"
           />
-          <Teleport to="body">
-            <ui-dropdown
-              :show="isShowHelp"
-              :elem-id="props.helpId"
-              :items="[]"
-              test-id=""
-              width="480px"
-              left
-              @hide="isShowHelp = false"
-            >
-              <template #content>
-                <div class="help-content">
-                  <div class="headline">
-                    <ui-icon name="info-2" width="16" height="16" />
-                    <h3 class="help-title">
-                      {{ localization.mainNavigation.help }}
-                    </h3>
-                    <ui-icon
-                      name="close"
-                      width="16"
-                      height="16"
-                      class="bus-help-close-icon cursor-pointer"
-                      @click="isShowHelp = false"
-                    />
-                  </div>
-
-                  <p class="help-text">
-                    {{ props.helpText }}
-                  </p>
-                </div>
-              </template>
-            </ui-dropdown>
-          </Teleport>
         </div>
       </div>
     </template>
@@ -74,7 +38,6 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 
 const bus = defineModel<string>('bus')
-const isShowHelp = defineModel<boolean>('isShowHelp')
 
 const props = defineProps<{
   index: number
@@ -93,56 +56,4 @@ const props = defineProps<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
-<style>
-:root {
-  --bus-help-color: #4d5d69;
-  --bus-help-icon-hover-color: #4d5d69;
-  --bus-help-icon-active-color: #008fd6;
-  --bus-help-close-icon-color: #182531;
-}
-:root.dark-theme {
-  --bus-help-color: #e9eaec;
-  --bus-help-icon-hover-color: #e9eaec;
-  --bus-help-icon-active-color: #2ba2de;
-  --bus-help-close-icon-color: #e9eaec;
-}
-</style>
-<style lang="scss" scoped>
-.bus-help-icon {
-  color: #9da6ad; // for light and dark
-
-  &:hover {
-    color: var(--bus-help-icon-hover-color);
-  }
-  &.active {
-    color: var(--bus-help-icon-active-color);
-  }
-}
-.help-content {
-  padding: 16px;
-
-  .headline {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 12px;
-
-    .help-title {
-      flex: 1;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16.94px;
-      color: var(--bus-help-color);
-    }
-    .bus-help-close-icon {
-      color: var(--bus-help-close-icon-color)
-    }
-  }
-
-  .help-text {
-    font-size: 13px;
-    line-height: 15.73px;
-    color: var(--bus-help-color);
-  }
-}
-</style>
+<style lang="scss" scoped></style>