bfg-common 1.5.249 → 1.5.250

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

@@ -35,14 +35,9 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.folder }}
         </span>
-        <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
+        <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">
@@ -63,14 +58,9 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.server }}
         </span>
-        <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
+        <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">
@@ -137,7 +127,9 @@ const props = defineProps<{
   alertMessages: string[]
   messagesFields: UI_I_WizardStep['fields']
 }>()
-
+const emits = defineEmits<{
+  (event: 'remove-errors'): void
+}>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -147,7 +139,6 @@ 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,14 +17,9 @@
         </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>
@@ -35,15 +30,11 @@
 <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,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>

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

@@ -3,15 +3,41 @@
     <span class="subtitle__label">
       {{ localization.common.helpUsImprove }}
     </span>
-
-    <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
+    <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>
   </div>
 </template>
 
@@ -20,6 +46,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>
@@ -29,11 +56,48 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   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,7 +4,6 @@
     test-id="user-preferences-modal"
     width="580px"
     height="345px"
-    :modal-loading="isLoading"
     :title="localization.common.preferences"
     @hide="onHide"
   >
@@ -66,7 +65,7 @@
         id="user-preferences-apply-button"
         data-id="user-preferences-apply-button"
         class="btn btn-primary"
-        @click="onSubmit"
+        @click="emits('submit')"
       >
         {{ localization.common.save }}
       </button>
@@ -106,8 +105,6 @@ 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')
 
@@ -115,11 +112,6 @@ 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,18 +38,13 @@
         {{ item.text }}
       </ui-chip>
 
-      <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>
+      <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"
+      />
     </template>
 
     <template #default-actions="{ item }">
@@ -336,9 +331,6 @@ const onSelectNodeOfTree = (
       margin-left: 8px;
     }
   }
-  &__tooltip {
-    margin-left: 8px;
-  }
 }
 
 .skeleton-header {

package/components/common/pages/tasks/table/errorInfo/ErrorInfo.vue

@@ -0,0 +1,128 @@
+<template>
+  <div :class="['error-info', { 'error-info-small': props.isSmall }]">
+    <ui-icon
+      :id="`task-error-info-icon-${props.id}`"
+      name="info"
+      width="16px"
+      height="16px"
+      :class="[
+        'info-icon pointer',
+        { show: isShowInfo, 'in-collapse-content': props.inCollapseContent },
+      ]"
+      @click.stop="emits('toggle-error', props.id)"
+    />
+    <ui-popup-window
+      v-model="isShowInfo"
+      top
+      left
+      :elem-id="`task-error-info-icon-${props.id}`"
+    >
+      <div class="common-widget-info">
+        <div class="headline justify-between flex-align-center">
+          <div class="flex-align-center">
+            <ui-icon name="error" width="16px" height="16px" />
+            <span class="title">{{ localization.common.failureReason }}</span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click.stop="emits('toggle-error', '')"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ props.error }}
+        </div>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    error: string
+    openedError: string
+    inCollapseContent?: boolean
+    isSmall?: boolean
+  }>(),
+  {
+    inCollapseContent: false,
+    isSmall: false,
+  }
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'toggle-error', value: string): void
+}>()
+
+const isShowInfo = computed<boolean>({
+  get() {
+    return props.openedError === props.id
+  },
+  set() {
+    emits('toggle-error', '')
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.error-info {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 8px;
+
+  &.error-info-small {
+    margin-left: 6px;
+  }
+
+  .info-icon {
+    color: var(--form-icon-color);
+
+    &:hover {
+      color: var(--close-icon);
+    }
+    &.show {
+      color: var(--btn-primary-fill-bg-color);
+    }
+  }
+
+  .common-widget-info {
+    width: 232px;
+    padding: 16px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16px;
+      color: var(--zabbix-text-color);
+      margin-left: 8px;
+    }
+
+    .hide-icon {
+      color: var(--alert-icon);
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--zabbix-text-color);
+      margin-top: 12px;
+    }
+  }
+}
+
+:deep(.in-collapse-content) {
+  path,
+  circle {
+    stroke-width: 1.4 !important;
+  }
+}
+</style>

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

@@ -30,18 +30,15 @@
           {{ normalizedTaskDetails[2].text }}
         </ui-chip>
 
-         <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>
+        <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"
+        />
       </span>
     </div>
 
@@ -185,8 +182,5 @@ const onSelectNodeOfTree = (data: any): void => {
       width: max-content;
     }
   }
-  &__tooltip {
-    margin-left: 6px;
-  }
 }
 </style>

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

@@ -17,16 +17,52 @@
           size="sm"
         />
 
-        <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"
+        <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"
           />
+          <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>
@@ -38,6 +74,7 @@ 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
@@ -56,4 +93,56 @@ const props = defineProps<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
-<style lang="scss" scoped></style>
+<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>