bfg-common 1.5.249 → 1.5.250

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>

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

@@ -25,23 +25,55 @@
             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>
 
-          <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>
-
+                    <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>
         </div>
         <div class="host-model-cpu-wrap flex-align-center">
           <ui-checkbox
@@ -51,22 +83,55 @@
             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>
 
-          <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>
-
+                    <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>
         </div>
       </div>
     </template>
@@ -99,12 +164,22 @@ 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;
@@ -124,4 +199,48 @@ 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,18 +15,51 @@
     <div class="name-field">
       <div class="flex-1 flex-align-center">
         <label for="virtual-machine-name" class="name-label">{{
-            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"
+          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"
         />
       </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
@@ -211,4 +244,31 @@ 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,14 +21,9 @@
             <div class="subtitle-block flex-row">
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
 
-              <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
+              <common-wizards-datastore-add-steps-common-tooltip-info
+                id="datastore-type-subtitle-tooltip"
+                :description="localization.common.datastoreTypeHelpDesc"
               />
             </div>
           </div>

package/components/common/wizards/datastore/add/steps/common/tooltipInfo/TooltipInfo.vue

@@ -0,0 +1,93 @@
+<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>
+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/wizards/datastore/add/steps/nameAndConfigure/NameAndConfigureNew.vue

@@ -26,15 +26,9 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.folder }}
         </span>
-
-        <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
+        <common-wizards-datastore-add-steps-common-tooltip-info
+          :id="'option.testId'"
+          :description="'Specify the folder path - for example, /vols/vol0/datastore-001'"
         />
       </div>
       <div class="basics-step-row-content">
@@ -57,14 +51,9 @@
         <span class="basics-step-row-title-text">
           {{ localization.common.server }}
         </span>
-        <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
+        <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.'"
         />
       </div>
       <div class="basics-step-row-content">
@@ -86,9 +75,6 @@
 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,15 +32,9 @@
         <span class="row__title-text">
           {{ localization.common.selectHost }}
         </span>
-
-        <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
+        <common-wizards-datastore-add-steps-common-tooltip-info
+          id="device-select-host-tooltip"
+          :description="localization.common.selectHostToViewAccessible"
         />
       </div>
       <div v-if="props.isShowSelectHost" class="row__content">

package/components/common/wizards/datastore/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-wizards-datastore-add-steps-common-tooltip-info
+            :id="option.testId"
+            :description="option.tooltipContent"
           />
         </template>
       </ui-radio>

package/package.json

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