bfg-common 1.5.242 → 1.5.243

package/components/common/vm/actions/editSettings/new/Skeleton.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="skeleton-wrap">
-    <div class="tabs">
-      <ui-skeleton-item width="64px" height="16px" />
-      <ui-skeleton-item width="64px" height="16px" />
-    </div>
-    <div class="actions">
-      <ui-skeleton-item width="80px" height="16px" />
-      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
-    </div>
-    <div class="stack-block-wrap">
-      <div class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 2" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 5" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.skeleton-wrap {
-  padding: 0 32px;
-
-  .tabs {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-    padding: 8px 0 12px;
-    border-bottom: 1px solid var(--divider-color);
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 12px 0;
-  }
-
-  .stack-block-wrap {
-    display: grid;
-    grid-gap: 12px;
-
-    .stack-block {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 8px 12px;
-      background: var(--stack-block-bg-color);
-      border-radius: 6px;
-
-      .stack-label,
-      .stack-value {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="skeleton-wrap">
+    <div class="tabs">
+      <ui-skeleton-item width="64px" height="16px" />
+      <ui-skeleton-item width="64px" height="16px" />
+    </div>
+    <div class="actions">
+      <ui-skeleton-item width="80px" height="16px" />
+      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
+    </div>
+    <div class="stack-block-wrap">
+      <div class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 2" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 5" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  padding: 0 32px;
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    padding: 8px 0 12px;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 12px 0;
+  }
+
+  .stack-block-wrap {
+    display: grid;
+    grid-gap: 12px;
+
+    .stack-block {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+      background: var(--stack-block-bg-color);
+      border-radius: 6px;
+
+      .stack-label,
+      .stack-value {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+  }
+}
+</style>

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

@@ -21,10 +21,21 @@
             <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
               />
+              <!--      // TODO Удалить компонент если не используется? -->
+
+<!--              <common-wizards-datastore-add-steps-common-tooltip-info-->
+<!--                id="datastore-type-subtitle-tooltip"-->
+<!--                :description="localization.common.datastoreTypeHelpDesc"-->
+<!--              />-->
             </div>
           </div>
         </template>

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

@@ -26,10 +26,22 @@
         <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="'Specify the folder path - for example, /vols/vol0/datastore-001'"
+            dropdown-width="272px"
+            dropdown-left
+            dropdown-top
         />
+        <!--      // TODO Удалить компонент если не используется? -->
+
+        <!--        <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">
         <ui-input
@@ -51,10 +63,19 @@
         <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="'Specify the server address - for example, nas, nas.it.com or 192.168.0.1.'"
+            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">
         <ui-input

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

@@ -32,10 +32,22 @@
         <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
         />
+        <!--      // TODO Удалить компонент если не используется? -->
+
+<!--        <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">
         <ui-select

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

@@ -17,10 +17,21 @@
         </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
           />
+          <!--      // TODO Удалить компонент если не используется? -->
+
+<!--          <common-wizards-datastore-add-steps-common-tooltip-info-->
+<!--            :id="option.testId"-->
+<!--            :description="option.tooltipContent"-->
+<!--          />-->
         </template>
       </ui-radio>
     </div>