bfg-common 1.5.301 → 1.5.303

package/assets/localization/local_be.json

@@ -2411,7 +2411,8 @@
     "lock": "Замак",
     "added": "Дададзена",
     "errorSelectLocationHost": "Калі ласка, выберыце дапушчальнае месцазнаходжанне для гэтага хоста. Вы можаце размясціць яго толькі ў дата-цэнтры, тэчцы хостаў і кластараў або ў кластары.",
-    "nameAndDeviceSelectionHostAlertInfo": "Вы праглядаеце дыскі/LUN, даступныя на бягучым хосце. Калі патрэбны дыск/LUN не адлюстроўваецца, магчыма, ён недаступны для гэтага хоста. Паспрабуйце наладзіць доступ да гэтага дыска/LUN."
+    "nameAndDeviceSelectionHostAlertInfo": "Вы праглядаеце дыскі/LUN, даступныя на бягучым хосце. Калі патрэбны дыск/LUN не адлюстроўваецца, магчыма, ён недаступны для гэтага хоста. Паспрабуйце наладзіць доступ да гэтага дыска/LUN.",
+    "selectVirtualMachineToProceed": "Абярыце віртуальную машыну для працягвання."
   },
   "auth": {
     "welcomeTo": "Сардэчна запрашаем у",
@@ -3208,7 +3209,8 @@
     "folderPlaceholder": "Напрыклад: /vols/vol0/datastore-001",
     "specifyServerAddressExample": "Укажыце адрас сервера, напрыклад: nas, nas.it.com або 192.168.0.1.",
     "serverPlaceholder": "Напрыклад: nas, nas.it.com або 192.168.0.1",
-    "storageReview": "Перагледзьце падрабязнасці перад стварэннем рэзервовага сховішча."
+    "storageReview": "Перагледзьце падрабязнасці перад стварэннем рэзервовага сховішча.",
+    "backupStorageName": "Назва рэзервовага сховішча"
   },
   "ssoUsers": {
     "passwordRequirements": "Патрабаванні да пароля",

package/assets/localization/local_en.json

@@ -2415,7 +2415,8 @@
     "lock": "Lock",
     "added": "Added",
     "errorSelectLocationHost": "Please select a valid location for this host. You can only place it in a datacenter, a host and cluster folder, or a cluster.",
-    "nameAndDeviceSelectionHostAlertInfo": "You are viewing disks/LUN available on the current host. If the disk/LUN you’re looking for is not listed, it might not be accessible to this host. Try configuring accessibility of that disk/LUN."
+    "nameAndDeviceSelectionHostAlertInfo": "You are viewing disks/LUN available on the current host. If the disk/LUN you’re looking for is not listed, it might not be accessible to this host. Try configuring accessibility of that disk/LUN.",
+    "selectVirtualMachineToProceed": "Select a virtual machine to proceed."
   },
   "auth": {
     "welcomeTo": "Welcome to",
@@ -3212,7 +3213,8 @@
     "folderPlaceholder": "E.g: /vols/vol0/datastore-001",
     "specifyServerAddressExample": "Specify the server address - for example, nas, nas.it.com or 192.168.0.1.",
     "serverPlaceholder": "E.g: nas, nas.it.com or 192.168.0.1",
-    "storageReview": "Review the details before the backup storage is created."
+    "storageReview": "Review the details before the backup storage is created.",
+    "backupStorageName": "Backup Storage Name"
   },
   "ssoUsers": {
     "passwordRequirements": "Password requirements",

package/assets/localization/local_hy.json

@@ -2415,7 +2415,8 @@
     "lock": "Ամրոց",
     "added": "Ավելացվել է",
     "errorSelectLocationHost": "Խնդրում ենք ընտրել այս հոսթը տեղադրելու վավեր տեղ։ Դուք կարող եք այն տեղադրել միայն տվյալների կենտրոնում, հոսթերի և կլաստերների պանակում կամ կլաստերում։",
-    "nameAndDeviceSelectionHostAlertInfo": "Դուք դիտում եք ընթացիկ հոսթում հասանելի սկավառակները/LUN-երը։ Եթե դուք փնտրում եք սկավառակ/LUN, որը ցուցադրված չէ, ապա այն հնարավոր է հասանելի չէ այս հոսթին։ Փորձեք կազմաձևել այդ սկավառակի/LUN-ի հասանելիությունը։"
+    "nameAndDeviceSelectionHostAlertInfo": "Դուք դիտում եք ընթացիկ հոսթում հասանելի սկավառակները/LUN-երը։ Եթե դուք փնտրում եք սկավառակ/LUN, որը ցուցադրված չէ, ապա այն հնարավոր է հասանելի չէ այս հոսթին։ Փորձեք կազմաձևել այդ սկավառակի/LUN-ի հասանելիությունը։",
+    "selectVirtualMachineToProceed": "Ընտրեք վիրտուալ մեքենա շարունակելու համար։"
   },
   "auth": {
     "welcomeTo": "Բարի գալուստ",
@@ -3212,7 +3213,8 @@
     "folderPlaceholder": "Օրինակ՝ /vols/vol0/datastore-001",
     "specifyServerAddressExample": "Նշեք սերվերի հասցեն, օրինակ՝ nas, nas.it.com կամ 192.168.0.1։",
     "serverPlaceholder": "Օրինակ՝ nas, nas.it.com կամ 192.168.0.1",
-    "storageReview": "Մինչ պահուստային պահեստի ստեղծումը, վերանայեք մանրամասները։"
+    "storageReview": "Մինչ պահուստային պահեստի ստեղծումը, վերանայեք մանրամասները։",
+    "backupStorageName": "Պահուստային պահեստի անունը"
   },
   "ssoUsers": {
     "passwordRequirements": "Գաղտնաբառի պահանջներ",

package/assets/localization/local_kk.json

@@ -2414,7 +2414,8 @@
     "lock": "Құлып",
     "added": "Қосылды",
     "errorSelectLocationHost": "Осы хостты орналастыру үшін жарамды орынды таңдаңыз. Сіз оны тек деректер орталығына, хосттар мен кластерлер қалтасына немесе кластерге орналастыра аласыз.",
-    "nameAndDeviceSelectionHostAlertInfo": "Сіз ағымдағы хостта қолжетімді диск/LUN тізімін қарап отырсыз. Егер іздеген диск/LUN көрсетілмесе, бұл хост үшін ол қолжетімсіз болуы мүмкін. Осы диск/LUN-ның қолжетімділігін баптап көріңіз."
+    "nameAndDeviceSelectionHostAlertInfo": "Сіз ағымдағы хостта қолжетімді диск/LUN тізімін қарап отырсыз. Егер іздеген диск/LUN көрсетілмесе, бұл хост үшін ол қолжетімсіз болуы мүмкін. Осы диск/LUN-ның қолжетімділігін баптап көріңіз.",
+    "selectVirtualMachineToProceed": "Жалғастыру үшін виртуалды машинаны таңдаңыз."
   },
   "auth": {
     "welcomeTo": "Қош келдіңіз",
@@ -3211,7 +3212,8 @@
     "folderPlaceholder": "Мысалы: /vols/vol0/datastore-001",
     "specifyServerAddressExample": "Сервердің мекенжайын көрсетіңіз, мысалы: nas, nas.it.com немесе 192.168.0.1.",
     "serverPlaceholder": "Мысалы: nas, nas.it.com немесе 192.168.0.1",
-    "storageReview": "Резервтік сақтау орнын жасамас бұрын мәліметтерді қарап шығыңыз."
+    "storageReview": "Резервтік сақтау орнын жасамас бұрын мәліметтерді қарап шығыңыз.",
+    "backupStorageName": "Резервтік сақтау атауы"
   },
   "ssoUsers": {
     "passwordRequirements": "Парольге қойылатын талаптар",

package/assets/localization/local_ru.json

@@ -2414,7 +2414,8 @@
     "lock": "Блокировать",
     "added": "Добавлено",
     "errorSelectLocationHost": "Пожалуйста, выберите допустимое расположение для этого хоста. Вы можете поместить его только в датацентр, папку хостов и кластеров или в кластер.",
-    "nameAndDeviceSelectionHostAlertInfo": "Вы просматриваете диски/LUN, доступные на текущем хосте. Если нужный диск/LUN не отображается, возможно, он недоступен для этого хоста. Попробуйте настроить доступ к этому диску/LUN."
+    "nameAndDeviceSelectionHostAlertInfo": "Вы просматриваете диски/LUN, доступные на текущем хосте. Если нужный диск/LUN не отображается, возможно, он недоступен для этого хоста. Попробуйте настроить доступ к этому диску/LUN.",
+    "selectVirtualMachineToProceed": "Выберите виртуальную машину для продолжения."
   },
   "auth": {
     "welcomeTo": "Добро пожаловать в",
@@ -3211,7 +3212,8 @@
     "folderPlaceholder": "Например: /vols/vol0/datastore-001",
     "specifyServerAddressExample": "Укажите адрес сервера, например: nas, nas.it.com или 192.168.0.1.",
     "serverPlaceholder": "Например: nas, nas.it.com или 192.168.0.1",
-    "storageReview": "Просмотрите информацию перед созданием хранилища резервных копий."
+    "storageReview": "Просмотрите информацию перед созданием хранилища резервных копий.",
+    "backupStorageName": "Имя хранилища резервных копий"
   },
   "ssoUsers": {
     "passwordRequirements": "Требования к паролю",

package/assets/localization/local_zh.json

@@ -2412,7 +2412,8 @@
     "lock": "锁,锁",
     "added": "已添加",
     "errorSelectLocationHost": "请选择此主机的有效位置。您只能将其放置在数据中心、主机与集群文件夹或集群中。",
-    "nameAndDeviceSelectionHostAlertInfo": "您正在查看当前主机上可用的磁盘/LUN。如果您查找的磁盘/LUN未列出，可能该主机无法访问。请尝试配置该磁盘/LUN 的可访问性。"
+    "nameAndDeviceSelectionHostAlertInfo": "您正在查看当前主机上可用的磁盘/LUN。如果您查找的磁盘/LUN未列出，可能该主机无法访问。请尝试配置该磁盘/LUN 的可访问性。",
+    "selectVirtualMachineToProceed": "请选择一个虚拟机以继续。"
   },
   "auth": {
     "welcomeTo": "欢迎来到",
@@ -3209,7 +3210,8 @@
     "folderPlaceholder": "例如：/vols/vol0/datastore-001",
     "specifyServerAddressExample": "指定服务器地址，例如：nas、nas.it.com 或 192.168.0.1。",
     "serverPlaceholder": "例如：nas、nas.it.com 或 192.168.0.1",
-    "storageReview": "在创建备份存储之前，请查看详细信息。"
+    "storageReview": "在创建备份存储之前，请查看详细信息。",
+    "backupStorageName": "备份存储名称"
   },
   "ssoUsers": {
     "passwordRequirements": "密码要求",

package/components/common/backup/storage/actions/add/New.vue

@@ -22,13 +22,15 @@
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
 
               <common-tooltip-help
-                  test-id="datastore-type-subtitle-tooltip"
-                  help-id="datastore-type-subtitle-tooltip-icon"
-                  :title="localization.common.information"
-                  :help-text="localization.common.datastoreTypeHelpDesc"
-                  dropdown-width="320px"
-                  dropdown-left
-                  class="ml-2"
+                test-id="datastore-type-subtitle-tooltip"
+                help-id="datastore-type-subtitle-tooltip-icon"
+                :title="localization.common.information"
+                :help-text="localization.common.datastoreTypeHelpDesc"
+                :is-show-help="isShowFirstStepHelp"
+                dropdown-width="320px"
+                dropdown-left
+                class="ml-2"
+                @update-is-show="onUpdateIsShowFirstStepHelp"
               />
             </div>
           </div>
@@ -38,6 +40,8 @@
             v-if="selectedStep.id === dynamicSteps.type"
             v-model="formModelLocal.type_code"
             :project="props.project"
+            :updater-hide-all-help-popups="updaterHideAllHelpPopups"
+            @hide-all-help-popups="isShowFirstStepHelp = false"
           />
         </template>
       </ui-wizard-block>
@@ -125,15 +129,17 @@
           </div>
         </template>
         <template #content>
-          <common-vm-actions-common-select-storage
-            :datastore="props.datastore"
-            :is-datastore-loading="props.isDatastoreLoading"
-            :get-datastore-table-func="props.getDatastoreTableFunc"
-            hide-compatibility
-            hide-alert
-            class="storage-datatable h-full"
-            @change-storage="onChangeStorage"
-          />
+          <div class="pb-4">
+            <common-vm-actions-common-select-storage
+              :datastore="props.datastore"
+              :is-datastore-loading="props.isDatastoreLoading"
+              :get-datastore-table-func="props.getDatastoreTableFunc"
+              hide-compatibility
+              hide-alert
+              class="storage-datatable h-full"
+              @change-storage="onChangeStorage"
+            />
+          </div>
         </template>
       </ui-wizard-block>
 
@@ -245,6 +251,13 @@ const texts = computed<UI_I_WizardTexts>(() => ({
   of: localization.value.common.of2,
 }))
 
+const updaterHideAllHelpPopups = ref<number>(0)
+const isShowFirstStepHelp = ref<boolean>(false)
+const onUpdateIsShowFirstStepHelp = (value: boolean): void => {
+  updaterHideAllHelpPopups.value++
+  isShowFirstStepHelp.value = value
+}
+
 const subTitleBlock0 = ref<HTMLElement | null>(null)
 const { height: height0 } = useElementSize(subTitleBlock0)
 

package/components/common/backup/storage/actions/add/lib/validations.ts

@@ -221,7 +221,7 @@ export const checkStorageSync = (
   if (!storm_id) {
     stepHasError = wizard.setValidation(dynamicSteps.storage, 'storage', {
       fieldMessage: '',
-      alertMessage: localization.common.selectLeastEntityContinue,
+      alertMessage: localization.common.selectValidDestinationStorage,
     })
   } else if (wizard.hasMessage(dynamicSteps.storage, 'storage')) {
     value = wizard.removeValidation(dynamicSteps.storage, 'storage', value)

package/components/common/backup/storage/actions/add/steps/hostAccessibility/table/new/lib/config/compatibleTable.ts

@@ -45,7 +45,6 @@ export const options: UI_I_DataTableOptions = {
   isResizable: true,
   showSelectedRows: true,
   showColumnManager: false,
-  inBlock: true,
   inModal: true
 }
 

package/components/common/backup/storage/actions/add/steps/name/New.vue

@@ -38,6 +38,8 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 const nameErrorText = computed<string>(() => {
   if (!props.alertMessages?.length && props.messagesFields?.name?.field) {
     return props.messagesFields.name.field
+  } else if (!formModelLocal.value.name) {
+    return localization.value.common.fieldRequired
   }
   return ''
 })

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

@@ -36,13 +36,13 @@
           {{ 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
+          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
         />
       </div>
       <div class="basics-step-row-content">
@@ -64,13 +64,13 @@
           {{ 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
+          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
         />
       </div>
       <div class="basics-step-row-content">
@@ -138,7 +138,6 @@ const props = defineProps<{
   messagesFields: UI_I_WizardStep['fields']
 }>()
 
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const isEmptyAlertMessages = computed<boolean>(() => {
@@ -152,6 +151,8 @@ const isEmptyAlertMessages = computed<boolean>(() => {
 const nameErrorText = computed<string>(() => {
   if (isEmptyAlertMessages.value && props.messagesFields?.name?.field) {
     return props.messagesFields.name.field
+  } else if (!formModelLocal.value.name) {
+    return localization.value.common.fieldRequired
   }
   return ''
 })

package/components/common/backup/storage/actions/add/steps/readyComplete/lib/config/propertiesDetails.ts

@@ -48,11 +48,11 @@ const localDetailsFunc = (
       value: '',
       items: [
         {
-          label: localization.common.name,
+          label: localization.backup.backupStorageName,
           value: name,
           items: [],
           testId: 'view-selected-name-in-complete',
-          iconClassName: 'vsphere-icon-datastore',
+          iconClassName: 'icon-backup-storage',
         },
       ],
       actions: [],
@@ -95,11 +95,11 @@ const nfsDetailsFunc = (
       value: '',
       items: [
         {
-          label: localization.common.name,
+          label: localization.backup.backupStorageName,
           value: name,
           items: [],
           testId: 'view-storage-name-in-complete',
-          iconClassName: 'vsphere-icon-datastore',
+          iconClassName: 'icon-backup-storage',
         },
         {
           label: localization.common.server,

package/components/common/backup/storage/actions/add/steps/typeMode/TypeMode.vue

@@ -3,6 +3,8 @@
     v-if="isNewView"
     v-model="formDatastoreTypeMode"
     :options="datastoreTypeOptions"
+    :updater-hide-all-help-popups="props.updaterHideAllHelpPopups"
+    @hide-all-help-popups="emits('hide-all-help-popups')"
   />
 
   <common-backup-storage-actions-add-steps-type-mode-old
@@ -14,13 +16,17 @@
 
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {UI_T_Project} from "~/lib/models/types";
+import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
 import { datastoreTypesFunc } from '~/components/common/backup/storage/actions/add/steps/typeMode/lib/config/typeOptions'
 
 const formDatastoreTypeMode = defineModel<number>({ required: true })
 const props = defineProps<{
   project: UI_T_Project
+  updaterHideAllHelpPopups: number
+}>()
+const emits = defineEmits<{
+  (event: 'hide-all-help-popups'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/backup/storage/actions/add/steps/typeMode/TypeModeNew.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="datastore-type">
-    <div class="datastore-type__radio-container">
+    <div ref="datastoreTypeContainer" class="datastore-type__radio-container">
       <ui-radio
         v-for="(option, key) in props.options"
         :key="key"
@@ -18,15 +18,17 @@
 
         <template #tooltip>
           <common-tooltip-help
-              :test-id="`${option.testId}-${key}`"
-              :help-id="`${option.testId}-${key}`"
-              :help-text="option.tooltipContent"
-              :title="localization.common.information"
-              icon-width="18"
-              icon-height="18"
-              dropdown-width="320px"
-              dropdown-left
-              dropdown-top
+            :test-id="`${option.testId}-${key}`"
+            :help-id="`${option.testId}-${key}`"
+            :help-text="option.tooltipContent"
+            :title="localization.common.information"
+            :is-show-help="tooltipsShowState[key]"
+            icon-width="18"
+            icon-height="18"
+            dropdown-width="320px"
+            dropdown-left
+            dropdown-top
+            @update-is-show="onUpdateIsShow(key, $event)"
           />
         </template>
       </ui-radio>
@@ -36,16 +38,48 @@
 
 <script lang="ts" setup>
 // TODO this component is duplicate
+import { useElementSize } from '@vueuse/core'
 import type { UI_I_RadioOption } from '~/components/common/select/radio/lib/models/interfaces'
-import type {UI_I_Localization} from "~/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[]
+  updaterHideAllHelpPopups: number
+}>()
+const emits = defineEmits<{
+  (event: 'hide-all-help-popups'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const tooltipsShowState = ref<boolean[]>([])
+const onUpdateIsShow = (key: number, value: boolean): void => {
+  tooltipsShowState.value = Array(props.options.length).fill(false)
+  emits('hide-all-help-popups')
+  tooltipsShowState.value[key] = value
+}
+watch(
+  () => [props.updaterHideAllHelpPopups, props.options],
+  (newValue) => {
+    tooltipsShowState.value = Array(newValue[1].length).fill(false)
+  },
+  { immediate: true, deep: true }
+)
+const datastoreTypeContainer = ref<HTMLElement | null>(null)
+const { width } = useElementSize(datastoreTypeContainer)
+watch([datastoreTypeContainer, width], (newValue) => {
+  if (!newValue[0]?.children.length) return
+
+  let maxHeight = 0
+  for (const child of newValue[0].children) {
+    const height = child.getBoundingClientRect().height
+    if (height > maxHeight) maxHeight = height
+  }
+  for (const child of newValue[0].children) {
+    child.style.height = newValue[1] <= 600 ? 'auto' : `${maxHeight}px`
+  }
+})
 </script>
 
 <style>

package/components/common/context/lib/models/interfaces.ts

@@ -14,6 +14,7 @@ export interface UI_I_ContextMenu<T = string> {
   items: UI_I_ContextMenuItem[]
 }
 export interface UI_I_ContextMenuItem<T = string> {
+  key: number
   name: string
   actionType: T | ''
   iconClassName: string
@@ -23,6 +24,7 @@ export interface UI_I_ContextMenuItem<T = string> {
   isHeader?: boolean
   disabled?: boolean
   development?: boolean
+  permission?: string
   isShowItems?: boolean
   testId?: string
   style?: {

package/components/common/context/recursion/RecursionNew.vue

@@ -4,9 +4,10 @@
       <ui-loader2 class="context-loader" test-id="context-menu" />
     </template>
     <li
-      v-for="(item, key) in props.items"
-      :key="key"
+      v-for="item in props.items"
       v-development="item.development"
+      v-permission="item.permission"
+      :key="item.key"
       :class="[
         'menu-item',
         { disabled: item.disabled || isLoading },

package/components/common/context/recursion/RecursionOld.vue

@@ -8,9 +8,10 @@
       />
     </template>
     <li
-      v-for="(item, key) in props.items"
+      v-for="item in props.items"
       v-development="item.development"
-      :key="key"
+      v-permission="item.permission"
+      :key="item.key"
       :class="[
         'menu-item',
         { disabled: item.disabled || item.development || isLoading },

package/components/common/tooltip/Help.vue

@@ -1,23 +1,26 @@
 <template>
   <div class="flex-align-center relative">
     <ui-icon
-        :id="`${props.helpId}`"
-        :data-id="`${props.testId}-show-help-icon`"
-        name="info"
-        :width="props.iconWidth || '16'"
-        :height="props.iconHeight || '16'"
-        :class="['help-icon cursor-pointer', {active: isShowHelp}, {disabled: props.isDisabled}]"
-        @click.stop.prevent="isShowHelp = !isShowHelp"
+      :id="`${props.helpId}`"
+      :data-id="`${props.testId}-show-help-icon`"
+      name="info"
+      :width="props.iconWidth || '16'"
+      :height="props.iconHeight || '16'"
+      :class="[
+        'help-icon cursor-pointer',
+        { active: currentIsShowHelp },
+        { disabled: props.isDisabled },
+      ]"
+      @click.stop.prevent="currentIsShowHelp = !currentIsShowHelp"
     />
     <ui-popup-window
-        v-model="isShowHelp"
-        :left="props.dropdownLeft"
-        :right="props.dropdownRight"
-        :top="props.dropdownTop"
-        :elem-id="props.helpId"
-        :width="props.dropdownWidth || 'max-content'"
-        :max-height="props.dropdownMaxHeight || 'unset'"
-
+      v-model="currentIsShowHelp"
+      :left="props.dropdownLeft"
+      :right="props.dropdownRight"
+      :top="props.dropdownTop"
+      :elem-id="props.helpId"
+      :width="props.dropdownWidth || 'max-content'"
+      :max-height="props.dropdownMaxHeight || 'unset'"
     >
       <div class="help-content" :style="{ width: props.dropdownWidth }">
         <div class="headline">
@@ -26,11 +29,11 @@
             {{ props.title || localization.mainNavigation.help }}
           </h3>
           <ui-icon
-              name="close"
-              width="16"
-              height="16"
-              class="help-close-icon cursor-pointer"
-              @click.stop.prevent="isShowHelp = false"
+            name="close"
+            width="16"
+            height="16"
+            class="help-close-icon cursor-pointer"
+            @click.stop.prevent="currentIsShowHelp = false"
           />
         </div>
 
@@ -44,32 +47,66 @@
   </div>
 </template>
 <script setup lang="ts">
-
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import { T_TooltipHelpStatus } from '~/components/common/tooltip/lib/models/types'
 
-const props = defineProps<{
-  testId: string,
-  helpId: string,
-  dropdownWidth?: string
-  helpText?: string,
-  iconWidth?: string,
-  iconHeight?: string,
-  dropdownMaxHeight?: string,
-  dropdownLeft?: boolean,
-  dropdownRight?: boolean,
-  dropdownTop?: boolean,
-  isDisabled?: boolean,
-  title?: string,
-  status?: T_TooltipHelpStatus
+const props = withDefaults(
+  defineProps<{
+    testId: string
+    helpId: string
+    dropdownWidth?: string
+    helpText?: string
+    iconWidth?: string
+    iconHeight?: string
+    dropdownMaxHeight?: string
+    dropdownLeft?: boolean
+    dropdownRight?: boolean
+    dropdownTop?: boolean
+    isDisabled?: boolean
+    title?: string
+    status?: T_TooltipHelpStatus
+    isShowHelp?: boolean
+  }>(),
+  {
+    dropdownWidth: undefined,
+    helpText: undefined,
+    iconWidth: undefined,
+    iconHeight: undefined,
+    dropdownMaxHeight: undefined,
+    dropdownLeft: undefined,
+    dropdownRight: undefined,
+    dropdownTop: undefined,
+    isDisabled: undefined,
+    title: undefined,
+    status: undefined,
+    isShowHelp: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'update-is-show', value: boolean): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isShowHelp = ref<boolean>(false)
+const isShowHelpLocal = ref<boolean>(false)
 
-const tooltipStatus = computed<string>(() => props.status === 'error' ? 'error' : 'info-2')
+const currentIsShowHelp = computed<boolean>({
+  get() {
+    return typeof props.isShowHelp === 'undefined'
+      ? isShowHelpLocal.value
+      : props.isShowHelp
+  },
+  set(newValue) {
+    if (typeof props.isShowHelp === 'undefined')
+      isShowHelpLocal.value = newValue
+    else emits('update-is-show', newValue)
+  },
+})
 
+const tooltipStatus = computed<string>(() =>
+  props.status === 'error' ? 'error' : 'info-2'
+)
 </script>
 <style>
 :root {
@@ -117,7 +154,7 @@ const tooltipStatus = computed<string>(() => props.status === 'error' ? 'error'
       color: var(--help-color);
     }
     .help-close-icon {
-      color: var(--help-close-icon-color)
+      color: var(--help-close-icon-color);
     }
   }
 
@@ -129,4 +166,4 @@ const tooltipStatus = computed<string>(() => props.status === 'error' ? 'error'
     white-space: normal;
   }
 }
-</style>
+</style>