bfg-common 1.5.246 → 1.5.248

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/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>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/media/MediaNew.vue

@@ -56,7 +56,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 :root {
   --media-content-border-color: #e9ebeda3;
 }
-:root {
+:root.dark-theme {
   --media-content-border-color: #e9ebed1f;
 }
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CpuNew.vue

@@ -34,38 +34,9 @@
             width="auto"
           />
 
-          <common-tooltip-help
-              test-id="cpu-help-tooltip"
-              help-id="cpu-help-tooltip-icon"
-              icon-width="20"
-              icon-height="20"
-              :title="localization.common.cpu"
-              :dropdown-left="true"
-              dropdown-width="480px"
-          >
-              <div class="cpu-info-block">
-                <p class="help-text">
-                  {{ localization.common.vmCpuHelpText1 }}
-                </p>
-                <p class="help-text">
-                  {{ props.vmCpuHelpTextSecond }}
-                </p>
-                <p class="help-text">
-                  {{ localization.common.vmCpuHelpText3 }}
-                </p>
-                <p class="help-text">
-                  {{ localization.common.vmCpuHelpText4 }}
-                </p>
-                <div>
-                  <a
-                      id="cpu-more-info-link"
-                      href="javascript:void(0)"
-                      class="cpu-more-info"
-                  >{{ localization.common.moreInformation }}</a
-                  >
-                </div>
-              </div>
-            </common-tooltip-help>
+          <common-vm-actions-common-customize-hardware-virtual-hardware-cpu-tooltip
+            :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+          />
         </div>
       </template>
       <template #stackChildren>
@@ -202,14 +173,6 @@ const emits = defineEmits<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
-<style>
-:root {
-  --cpu-help-more-info-color: #008fd6;
-}
-:root.dark-theme {
-  --cpu-help-more-info-color: #2ba2de;
-}
-</style>
 <style scoped lang="scss">
 :deep(.ui-main-select-toggle) {
   display: flex;
@@ -228,16 +191,4 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 :deep(.unit .ui-main-select-toggle) {
   width: 80px;
 }
-.cpu-info-block {
-  :deep(.help-text) {
-    margin-bottom: 12px;
-  }
-  :deep(.cpu-more-info) {
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 15.73px;
-    color: var(--cpu-help-more-info-color);
-    text-decoration: none;
-  }
-}
 </style>