bfg-common 1.5.248 → 1.5.249

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/model/ModelNew.vue

@@ -25,55 +25,23 @@
             test-id="passthrough-host-cpu"
             @change="emits('change-passthrough-host-cpu', $event)"
           />
-          <div id="passthrough-help-icon" class="flex-align-center relative">
-            <ui-icon
-              width="16"
-              height="16"
-              name="info"
-              data-id="show-passthrough-help-icon"
-              :class="[
-                'passthrough-help-icon cursor-pointer disabled',
-                { active: isShowPassthroughHost },
-              ]"
-              @click.stop="isShowPassthroughHost = !isShowPassthroughHost"
-            />
-            <Teleport to="body">
-              <ui-dropdown
-                :show="isShowPassthroughHost"
-                :items="[]"
-                elem-id="passthrough-help-icon"
-                test-id=""
-                width="480px"
-                left
-                @hide="isShowPassthroughHost = 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="cursor-pointer"
-                        @click="isShowPassthroughHost = false"
-                      />
-                    </div>
 
-                    <p class="help-text">
-                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                      A cum eius expedita, fuga mollitia perferendis quod soluta
-                      vel? Dolor, illo, nam? A consequatur, consequuntur eos
-                      impedit iusto labore sunt tempora!
-                    </p>
-                  </div>
-                </template>
-              </ui-dropdown>
-            </Teleport>
-          </div>
+          <common-tooltip-help
+              class="ml-2"
+              test-id="passthrough-help"
+              help-id="passthrough-help-icon"
+              :dropdown-left="true"
+              :is-disabled="true"
+              dropdown-width="480px"
+          >
+            <p class="help-text">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              A cum eius expedita, fuga mollitia perferendis quod soluta
+              vel? Dolor, illo, nam? A consequatur, consequuntur eos
+              impedit iusto labore sunt tempora!
+            </p>
+          </common-tooltip-help>
+
         </div>
         <div class="host-model-cpu-wrap flex-align-center">
           <ui-checkbox
@@ -83,55 +51,22 @@
             test-id="host-model-cpu"
             @change="emits('change-host-model-cpu', $event)"
           />
-          <div id="host-model-help-icon" class="flex-align-center relative">
-            <ui-icon
-              width="16"
-              height="16"
-              name="info"
-              data-id="show-host-model-help-icon"
-              :class="[
-                'host-model-help-icon cursor-pointer disabled',
-                { active: isShowHostModel },
-              ]"
-              @click.stop="isShowHostModel = !isShowHostModel"
-            />
-            <Teleport to="body">
-              <ui-dropdown
-                :show="isShowHostModel"
-                :items="[]"
-                elem-id="host-model-help-icon"
-                test-id=""
-                width="480px"
-                left
-                @hide="isShowHostModel = 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="cursor-pointer"
-                        @click="isShowHostModel = false"
-                      />
-                    </div>
 
-                    <p class="help-text">
-                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                      A cum eius expedita, fuga mollitia perferendis quod soluta
-                      vel? Dolor, illo, nam? A consequatur, consequuntur eos
-                      impedit iusto labore sunt tempora!
-                    </p>
-                  </div>
-                </template>
-              </ui-dropdown>
-            </Teleport>
-          </div>
+          <common-tooltip-help
+              test-id="host-model-help"
+              help-id="host-model-help-icon"
+              :dropdown-left="true"
+              :is-disabled="true"
+              dropdown-width="480px"
+          >
+            <p class="help-text">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              A cum eius expedita, fuga mollitia perferendis quod soluta
+              vel? Dolor, illo, nam? A consequatur, consequuntur eos
+              impedit iusto labore sunt tempora!
+            </p>
+          </common-tooltip-help>
+
         </div>
       </div>
     </template>
@@ -164,22 +99,12 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isShowPassthroughHost = ref<boolean>(false)
-const isShowHostModel = ref<boolean>(false)
-
 const onChangeCpuModel = (data: UI_T_SelectedValue): void => {
   emits('change-cpu-model', { target: { value: data } })
 }
 </script>
 
-<style>
-:root {
-  --cpu-model-help-icon-color: #4d5d69;
-}
-:root.dark-theme {
-  --cpu-model-help-icon-color: #e9eaec;
-}
-</style>
+
 <style scoped lang="scss">
 .limit-title {
   margin-right: 12px;
@@ -199,48 +124,4 @@ const onChangeCpuModel = (data: UI_T_SelectedValue): void => {
   }
 }
 
-#passthrough-help-icon,
-#host-model-help-icon {
-  margin-left: 8px;
-}
-
-.passthrough-help-icon,
-.host-model-help-icon {
-  color: #9da6ad; // for light and dark
-
-  &:hover {
-    color: var(--cpu-model-help-icon-color);
-  }
-  &.active {
-    color: #008fd6;
-  }
-  &.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: #4d5d69;
-    }
-  }
-
-  .help-text {
-    font-size: 13px;
-    line-height: 15.73px;
-    color: #4d5d69;
-  }
-}
 </style>

package/components/common/vm/actions/common/select/name/New.vue

@@ -15,51 +15,18 @@
     <div class="name-field">
       <div class="flex-1 flex-align-center">
         <label for="virtual-machine-name" class="name-label">{{
-          localization.common.name
-        }}</label>
-        <ui-icon
-          id="virtual-machine-name-icon"
-          :class="{ active: isShowHelp }"
-          width="16"
-          height="16"
-          name="info"
-          data-id="virtual-machine-name-icon"
-          @click.stop="isShowHelp = !isShowHelp"
+            localization.common.name
+          }}</label>
+
+        <common-tooltip-help
+            test-id="virtual-machine-name"
+            help-id="virtual-machine-name-icon"
+            :title="localization.vmWizard.vmNameRules"
+            :help-text="localization.common.vmNameValidationDescription"
+            :dropdown-left="true"
+            dropdown-width="320px"
         />
       </div>
-      <Teleport to="body">
-        <ui-dropdown
-          :show="isShowHelp"
-          :items="[]"
-          elem-id="virtual-machine-name-icon"
-          test-id="virtual-machine-name"
-          width="320px"
-          left
-          @hide="isShowHelp = false"
-        >
-          <template #content>
-            <div class="vm-name-help-content">
-              <div class="headline">
-                <ui-icon name="info-2" width="16" height="16" />
-                <h3 class="vm-name-help-title">
-                  {{ localization.vmWizard.vmNameRules }}
-                </h3>
-                <ui-icon
-                  name="close"
-                  width="16"
-                  height="16"
-                  class="hide-icon pointer"
-                  @click="isShowHelp = false"
-                />
-              </div>
-
-              <p class="vm-name-help-text">
-                {{ localization.common.vmNameValidationDescription }}
-              </p>
-            </div>
-          </template>
-        </ui-dropdown>
-      </Teleport>
 
       <div class="flex-2">
         <ui-input
@@ -244,31 +211,4 @@ const onSelectNode = (node: UI_I_TreeNode) => {
   }
 }
 
-.vm-name-help-content {
-  padding: 16px;
-
-  .headline {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 12px;
-
-    .vm-name-help-title {
-      flex: 1;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16.94px;
-      color: var(--select-name-text-color);
-    }
-    .hide-icon {
-      color: var(--select-name-help-hide-icon-color);
-    }
-  }
-
-  .vm-name-help-text {
-    font-size: 13px;
-    line-height: 15.73px;
-    color: var(--select-name-text-color);
-  }
-}
 </style>

package/components/common/wizards/datastore/add/New.vue

@@ -21,9 +21,14 @@
             <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"
-                :description="localization.common.datastoreTypeHelpDesc"
+              <common-tooltip-help
+                  test-id="datastore-type-subtitle"
+                  help-id="datastore-type-subtitle-icon"
+                  :help-text="localization.common.datastoreTypeHelpDesc"
+                  :title="localization.common.information"
+                  dropdown-width="272px"
+                  dropdown-left
+                  dropdown-top
               />
             </div>
           </div>

package/components/common/wizards/datastore/add/steps/nameAndConfigure/NameAndConfigureNew.vue

@@ -26,9 +26,15 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.folder }}
         </span>
-        <common-wizards-datastore-add-steps-common-tooltip-info
-          :id="'option.testId'"
-          :description="'Specify the folder path - for example, /vols/vol0/datastore-001'"
+
+        <common-tooltip-help
+            test-id="configuration-folder-help"
+            help-id="configuration-folder-help-icon"
+            :title="localization.common.information"
+            :help-text="localization.backup.specifyFolderPathExample"
+            dropdown-width="272px"
+            dropdown-left
+            dropdown-top
         />
       </div>
       <div class="basics-step-row-content">
@@ -51,9 +57,14 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.server }}
         </span>
-        <common-wizards-datastore-add-steps-common-tooltip-info
-          :id="'option.testIdserver'"
-          :description="'Specify the server address - for example, nas, nas.it.com or 192.168.0.1.'"
+        <common-tooltip-help
+            test-id="configuration-server-help"
+            help-id="configuration-server-help-icon"
+            :title="localization.common.information"
+            :help-text="localization.backup.specifyServerAddressExample"
+            dropdown-width="272px"
+            dropdown-left
+            dropdown-top
         />
       </div>
       <div class="basics-step-row-content">
@@ -75,6 +86,9 @@
 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/wizards/datastore/add/lib/models/interfaces'
+import type {
+  UI_I_InitialValidationFields
+} from "~/components/common/wizards/vm/migrate/select/targetServer/new/lib/models/interfaces";
 
 const formModelLocal = defineModel<UI_I_CreateDatastoreForm>({ required: true })
 // const isShowAlertInfo = defineModel<boolean>('alertInfo', { required: true })

package/components/common/wizards/datastore/add/steps/nameAndDevice/NameAndDeviceNew.vue

@@ -32,9 +32,15 @@
         <span class="row__title-text">
           {{ localization.common.selectHost }}
         </span>
-        <common-wizards-datastore-add-steps-common-tooltip-info
-          id="device-select-host-tooltip"
-          :description="localization.common.selectHostToViewAccessible"
+
+        <common-tooltip-help
+            test-id="device-select-host-tooltip"
+            help-id="device-select-host-tooltip"
+            :title="localization.common.information"
+            :help-text="localization.common.selectHostToViewAccessible"
+            dropdown-width="272px"
+            dropdown-left
+            dropdown-top
         />
       </div>
       <div v-if="props.isShowSelectHost" class="row__content">

package/components/common/wizards/datastore/add/steps/typeMode/TypeModeNew.vue

@@ -17,9 +17,14 @@
         </template>
 
         <template #tooltip>
-          <common-wizards-datastore-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>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.248",
+  "version": "1.5.249",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

package/components/common/backup/storage/actions/add/steps/common/tooltipInfo/TooltipInfo.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="tooltip-info">
-    <ui-icon
-      :id="`${props.id}-info-trigger`"
-      name="info"
-      width="16"
-      height="16"
-      :class="['tooltip-info__icon pointer', { active: isShowInfo }]"
-      @click.stop="isShowInfo = !isShowInfo"
-    />
-    <ui-popup-window
-      v-model="isShowInfo"
-      top
-      left
-      width="272px"
-      :elem-id="`${props.id}-info-trigger`"
-    >
-      <div class="common-widget-info">
-        <div class="flex justify-between">
-          <div class="flex">
-            <ui-icon name="info-2" width="16px" height="16px" />
-            <span class="title"> {{ localization.common.information }}</span>
-          </div>
-          <ui-icon
-            name="close"
-            class="pointer hide-icon"
-            width="16px"
-            height="16px"
-            @click.stop="isShowInfo = false"
-          />
-        </div>
-
-        <div class="common-widget-info-description">
-          {{ props.description }}
-        </div>
-      </div>
-    </ui-popup-window>
-  </div>
-</template>
-
-<script lang="ts" setup>
-// TODO move to global
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  id: string
-  description: string
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowInfo = ref<boolean>(false)
-</script>
-
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.tooltip-info {
-  @include flex($align: center);
-  &__icon {
-    color: var(--form-icon-color);
-    &:hover {
-      color: var(--close-icon);
-    }
-    &.active {
-      color: var(--btn-primary-fill-bg-color);
-    }
-  }
-
-  .common-widget-info {
-    padding: 16px;
-
-    .title {
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16px;
-      color: var(--zabbix-text-color);
-      margin-left: 8px;
-    }
-
-    .common-widget-info-description {
-      font-size: 13px;
-      line-height: 15.73px;
-      color: var(--zabbix-text-color);
-      margin-top: 12px;
-      white-space: pre-line;
-    }
-
-    svg {
-      color: var(--alert-icon);
-      min-width: 16px;
-    }
-  }
-}
-</style>

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

@@ -1,128 +0,0 @@
-<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>