bfg-common 1.5.186 → 1.5.188

package/components/common/vm/actions/common/customizeHardware/CustomizeHardwareNew.vue

@@ -1,80 +1,80 @@
 <template>
   <div :class="['customize-hardware', themeMode]">
     <ui-tabs
-      v-model="selectedNavItem"
-      :tabs="navItemsLocal"
-      test-id="vm-wizard-tabs"
-      type="underline"
-      class="navigation mx-8"
+        v-model="selectedNavItem"
+        :tabs="navItemsLocal"
+        test-id="vm-wizard-tabs"
+        type="underline"
+        class="navigation mx-8"
     />
     <ui-alert
-      v-show="props.errors.length"
-      :messages="props.errors"
-      status="alert-danger"
-      test-id="customize-hardware-alert"
-      class="errors-alert"
-      @remove="emits('remove-validation-errors')"
+        v-show="props.errors.length"
+        :messages="props.errors"
+        status="alert-danger"
+        test-id="customize-hardware-alert"
+        class="errors-alert"
+        @remove="emits('remove-validation-errors')"
     />
 
     <div v-show="selectedNavItem === 0">
       <common-vm-actions-common-customize-hardware-virtual-hardware
-        :vm-name="vmName"
-        :storage="props.storage"
-        :max-cpus="props.maxCpus"
-        :max-memory="props.maxMemory"
-        :cpu-models="props.cpuModels"
-        :cpu="props.cpu"
-        :memory="props.memory"
-        :is-edit="props.isEdit"
-        :is-clone="props.isClone"
-        :state="props.state"
-        :hard-disks="props.hardDisks"
-        :cd-dvd-drives="props.cdDvdDrives"
-        :networks="props.networks"
-        :networks-table="props.networksTable"
-        :video-card="props.videoCard"
-        :usb-controller="props.usbController"
-        :pci-devices="props.pciDevices"
-        :nodes="props.nodes"
-        :files="props.files"
-        :error-validation-fields="props.errorValidationFields"
-        :get-datastore-table-func="props.getDatastoreTableFunc"
-        :datastore="props.datastore"
-        :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-        :passthrough-devices="props.passthroughDevices"
-        :mediated-devices="props.mediatedDevices"
-        :project="props.project"
-        :guest-machine-type="guestMachineType"
-        :computeResource="props.computeResource"
-        @send-data="emits('send-data-virtual-hardware-method', $event)"
-        @get-storage="emits('get-storage', $event)"
-        @get-folders-or-files="emits('get-folders-or-files', $event)"
-        @get-active-device-child="emits('get-active-device-child', $event)"
-        @show-datastore-child="emits('show-datastore-child', $event)"
-        @remove-error-by-title="emits('remove-error-by-title', $event)"
-        @invalid="virtualHardwareInvalid = $event"
-        @get-networks-table="emits('get-networks-table', $event)"
-        @get-pci-devices="emits('get-pci-devices')"
+          :vm-name="vmName"
+          :storage="props.storage"
+          :max-cpus="props.maxCpus"
+          :max-memory="props.maxMemory"
+          :cpu-models="props.cpuModels"
+          :cpu="props.cpu"
+          :memory="props.memory"
+          :is-edit="props.isEdit"
+          :is-clone="props.isClone"
+          :state="props.state"
+          :hard-disks="props.hardDisks"
+          :cd-dvd-drives="props.cdDvdDrives"
+          :networks="props.networks"
+          :networks-table="props.networksTable"
+          :video-card="props.videoCard"
+          :usb-controller="props.usbController"
+          :pci-devices="props.pciDevices"
+          :nodes="props.nodes"
+          :files="props.files"
+          :error-validation-fields="props.errorValidationFields"
+          :get-datastore-table-func="props.getDatastoreTableFunc"
+          :datastore="props.datastore"
+          :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+          :passthrough-devices="props.passthroughDevices"
+          :mediated-devices="props.mediatedDevices"
+          :project="props.project"
+          :guest-machine-type="guestMachineType"
+          :computeResource="props.computeResource"
+          @send-data="emits('send-data-virtual-hardware-method', $event)"
+          @get-storage="emits('get-storage', $event)"
+          @get-folders-or-files="emits('get-folders-or-files', $event)"
+          @get-active-device-child="emits('get-active-device-child', $event)"
+          @show-datastore-child="emits('show-datastore-child', $event)"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+          @invalid="virtualHardwareInvalid = $event"
+          @get-networks-table="emits('get-networks-table', $event)"
+          @get-pci-devices="emits('get-pci-devices')"
       />
     </div>
     <div v-show="selectedNavItem === 1">
       <common-vm-actions-common-customize-hardware-vmoptions
-        v-model:vm-name="vmName"
-        v-model:guest-machine-type="guestMachineType"
-        v-model:guest-os-family="guestOsFamily"
-        v-model:guest-os-version="guestOsVersion"
-        :hard-disks="props.hardDisksForBootOptions"
-        :cd-dvd-drives="props.cdDvdDrivesForBootOptions"
-        :networks="props.networksForBootOptions"
-        :options="props.options"
-        :is-edit="props.isEdit"
-        :is-clone="props.isClone"
-        :error-validation-fields="props.errorValidationFields"
-        :state="props.state"
-        @change-boot-order="emits('change-boot-order', $event)"
-        @send-data="emits('send-data-vm-options-method', $event)"
-        @invalid="vmOptionsInvalid = $event"
-        @remove-error-by-title="emits('remove-error-by-title', $event)"
+          v-model:vm-name="vmName"
+          v-model:guest-machine-type="guestMachineType"
+          v-model:guest-os-family="guestOsFamily"
+          v-model:guest-os-version="guestOsVersion"
+          :hard-disks="props.hardDisksForBootOptions"
+          :cd-dvd-drives="props.cdDvdDrivesForBootOptions"
+          :networks="props.networksForBootOptions"
+          :options="props.options"
+          :is-edit="props.isEdit"
+          :is-clone="props.isClone"
+          :error-validation-fields="props.errorValidationFields"
+          :state="props.state"
+          @change-boot-order="emits('change-boot-order', $event)"
+          @send-data="emits('send-data-vm-options-method', $event)"
+          @invalid="vmOptionsInvalid = $event"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
       />
     </div>
   </div>
@@ -122,8 +122,8 @@ const selectedNavItem = defineModel<UI_T_SelectedNavItem>('selectedNavItem', {
   required: true,
 })
 const guestMachineType = defineModel<UI_I_OptionItem | null>(
-  'guestMachineType',
-  { required: true }
+    'guestMachineType',
+    { required: true }
 )
 const vmOptionsInvalid = defineModel<string[]>('vmOptionsInvalid', {
   required: true,
@@ -177,8 +177,8 @@ const emits = defineEmits<{
   (event: 'remove-validation-errors'): void
   (event: 'send-data-vm-options-method', value: UI_I_SendDataVmoptions): void
   (
-    event: 'send-data-virtual-hardware-method',
-    value: UI_I_SendDataVirtualHardware
+      event: 'send-data-virtual-hardware-method',
+      value: UI_I_SendDataVirtualHardware
   ): void
   (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void
 }>()
@@ -186,7 +186,7 @@ const emits = defineEmits<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const navItemsLocal = computed<UI_I_TabItem[]>(() =>
-  navItemsNewViewFunc(localization.value)
+    navItemsNewViewFunc(localization.value)
 )
 
 const themeMode = useLocalStorage('themeMode')
@@ -216,14 +216,23 @@ const themeMode = useLocalStorage('themeMode')
   //flex: 0 0 280px;
   max-width: 280px;
   margin-right: 12px;
+  line-height: 32px;
+
+  .ui-checkbox-label {
+    min-height: 32px;
+  }
 }
 :deep(.stack-block .stack-block-label .stack-block-content) {
   width: unset;
+
+  .ui-checkbox-label {
+    min-height: 32px;
+  }
 }
 </style>
 <style lang="scss">
 .light-theme {
-  .stack-block-label .ui-main-select-toggle {
+  .stack-block-label .ui-main-select-toggle:not(.error) {
     background-color: #ffffff;
   }
   .stack-block-expanded > .stack-block-label .ui-main-select-toggle {
@@ -253,6 +262,14 @@ const themeMode = useLocalStorage('themeMode')
     border-color: #e9ebed3d;
     color: #e9eaec;
   }
+  .stack-block-expanded {
+    .ui-custom-checkbox {
+      background-color: transparent;
+    }
+    .ui-checkbox-label-text {
+      color: #e9eaec;
+    }
+  }
 }
 
 .dark-theme {
@@ -267,11 +284,22 @@ const themeMode = useLocalStorage('themeMode')
     }
   }
   .stack-block-expanded > .stack-block-label .ui-main-select-toggle {
-    background-color: #ffffff;
-    border-color: #d3d6da;
+    &:not(.error) {
+      background-color: #ffffff;
+      border-color: #d3d6da;
+    }
+    &:not(.error):not(.open):not(:disabled):hover {
+      border-color: #9da6ad;
+    }
+    &.open {
+      border-color: #008FD6;
 
+      .ui-arrow-icon {
+        color: #008FD6;
+      }
+    }
     .ui-arrow-icon {
-      color: #182531;
+      color: #213444;
     }
   }
   .stack-block-expanded > .stack-block-label .combobox-input {
@@ -294,5 +322,13 @@ const themeMode = useLocalStorage('themeMode')
     border-color: #d3d6da14;
     color: #bdc3c770;
   }
+  .stack-block-expanded {
+    .ui-custom-checkbox {
+      background-color: transparent;
+    }
+    .ui-checkbox-label-text {
+      color: #4d5d69;
+    }
+  }
 }
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/bus/BusNew.vue

@@ -27,7 +27,7 @@
             width="16"
             height="16"
             name="info"
-            class="bus-help-icon cursor-pointer"
+            :class="['bus-help-icon cursor-pointer', {active: isShowHelp}]"
             @click.stop="isShowHelp = !isShowHelp"
           />
           <Teleport to="body">
@@ -36,8 +36,8 @@
               :elem-id="props.helpId"
               :items="[]"
               test-id=""
-              width="auto"
-              show-from-left
+              width="480px"
+              left
               @hide="isShowHelp = false"
             >
               <template #content>
@@ -51,7 +51,7 @@
                       name="close"
                       width="16"
                       height="16"
-                      class="cursor-pointer"
+                      class="bus-help-close-icon cursor-pointer"
                       @click="isShowHelp = false"
                     />
                   </div>
@@ -95,10 +95,16 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
 <style>
 :root {
-  --bus-help-icon-color: #4d5d69;
+  --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-icon-color: #e9eaec;
+  --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>
@@ -106,10 +112,10 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   color: #9da6ad; // for light and dark
 
   &:hover {
-    color: var(--bus-help-icon-color);
+    color: var(--bus-help-icon-hover-color);
   }
   &.active {
-    color: #008fd6;
+    color: var(--bus-help-icon-active-color);
   }
 }
 .help-content {
@@ -126,14 +132,17 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       font-size: 14px;
       font-weight: 500;
       line-height: 16.94px;
-      color: #4d5d69;
+      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: #4d5d69;
+    color: var(--bus-help-color);
   }
 }
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cdDvdDrive/CdDvdDriveNew.vue

@@ -46,6 +46,7 @@
               :test-id="`cd-dvd-delete-files-from-datastore-${props.index}`"
               :disabled="props.disabled"
               :label-text="localization.common.deleteFilesFromDatastore"
+              size="md"
             />
           </div>
         </template>

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

@@ -18,15 +18,19 @@
           test-id="vm-wizard-dvd-media-button"
           size="sm"
           class="media-button"
+          variant="text"
           @click="emits('browse')"
         >
-          {{ localization.common.browse }}...
+          {{ localization.vmWizard.browse }}
         </ui-button>
+        <div class="divider"></div>
         <ui-button
           id="vm-wizard-dvd-media-eject"
           data-id="vm-wizard-dvd-media-eject"
           size="sm"
           class="eject-button"
+          variant="text"
+          type="error"
           @click="cdDvdMedia = ''"
         >
           {{ localization.vmWizard.eject }}
@@ -48,23 +52,27 @@ const emits = defineEmits<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
-<style scoped>
+<style>
+:root {
+  --media-content-border-color: #e9ebeda3;
+}
+:root {
+  --media-content-border-color: #e9ebed1f;
+}
+</style>
+<style lang="scss" scoped>
 .media-content {
-  gap: 8px;
+  gap: 12px;
 
-  .media-button {
-    min-width: 89px;
-    height: 26px;
-    white-space: nowrap;
-  }
+  .media-button,
   .eject-button {
-    min-width: 63px;
-    height: 26px;
     white-space: nowrap;
+    padding: 0;
+  }
+  .divider {
+    width: 1px;
+    height: 20px;
+    background-color: var(--media-content-border-color);
   }
-}
-:deep(.ui-main.ui-main-sm .ui-main-input) {
-  width: 190px;
-  height: 26px;
 }
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/hotPlug/HotPlugNew.vue

@@ -11,6 +11,7 @@
         :disabled="props.disabled"
         :label-text="localization.common.enableCpuHotAdd"
         test-id="enable-cpu-hot-add"
+        size="md"
       />
     </template>
   </ui-stack-block>

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

@@ -29,7 +29,10 @@
               height="16"
               name="info"
               data-id="show-passthrough-help-icon"
-              class="passthrough-help-icon cursor-pointer"
+              :class="[
+                'passthrough-help-icon cursor-pointer disabled',
+                { active: isShowPassthroughHost },
+              ]"
               @click.stop="isShowPassthroughHost = !isShowPassthroughHost"
             />
             <Teleport to="body">
@@ -38,8 +41,8 @@
                 :items="[]"
                 elem-id="passthrough-help-icon"
                 test-id=""
-                width="auto"
-                show-from-left
+                width="480px"
+                left
                 @hide="isShowPassthroughHost = false"
               >
                 <template #content>
@@ -84,7 +87,10 @@
               height="16"
               name="info"
               data-id="show-host-model-help-icon"
-              class="host-model-help-icon cursor-pointer"
+              :class="[
+                'host-model-help-icon cursor-pointer disabled',
+                { active: isShowHostModel },
+              ]"
               @click.stop="isShowHostModel = !isShowHostModel"
             />
             <Teleport to="body">
@@ -93,8 +99,8 @@
                 :items="[]"
                 elem-id="host-model-help-icon"
                 test-id=""
-                width="auto"
-                show-from-left
+                width="480px"
+                left
                 @hide="isShowHostModel = false"
               >
                 <template #content>
@@ -199,6 +205,10 @@ const onChangeCpuModel = (data: UI_T_SelectedValue): void => {
   &.active {
     color: #008fd6;
   }
+  &.disabled {
+    color: #bdc3c7;
+    pointer-events: none;
+  }
 }
 .help-content {
   padding: 16px;

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/tooltip/TooltipNew.vue

@@ -30,7 +30,7 @@
                 name="close"
                 width="16"
                 height="16"
-                class="cursor-pointer"
+                class="cpu-help-close-icon cursor-pointer"
                 @click="isShowCpuHelp = false"
               />
             </div>
@@ -75,12 +75,33 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 const isShowCpuHelp = ref<boolean>(false)
 </script>
 
-<style>
+<style lang="scss">
 :root {
+  --cpu-help-color: #4d5d69;
   --cpu-help-icon-hover-color: #4d5d69;
+  --cpu-help-icon-active-color: #008fd6;
+  --cpu-help-close-icon-color: #182531;
+  --cpu-help-more-info-color: #008fd6;
 }
 :root.dark-theme {
+  --cpu-help-color: #e9eaec;
   --cpu-help-icon-hover-color: #e9eaec;
+  --cpu-help-icon-active-color: #2ba2de;
+  --cpu-help-close-icon-color: #e9eaec;
+  --cpu-help-more-info-color: #2ba2de;
+}
+
+.light-theme {
+  .stack-block-expanded {
+    --cpu-help-icon-hover-color: #e9eaec;
+    --cpu-help-icon-active-color: #2ba2de;
+  }
+}
+.dark-theme {
+  .stack-block-expanded {
+    --cpu-help-icon-hover-color: #4d5d69;
+    --cpu-help-icon-active-color: #008fd6;
+  }
 }
 </style>
 <style lang="scss" scoped>
@@ -91,7 +112,7 @@ const isShowCpuHelp = ref<boolean>(false)
     color: var(--cpu-help-icon-hover-color);
   }
   &.active {
-    color: #008fd6;
+    color: var(--cpu-help-icon-active-color);
   }
 }
 .cpu-help-content {
@@ -108,14 +129,17 @@ const isShowCpuHelp = ref<boolean>(false)
       font-size: 14px;
       font-weight: 500;
       line-height: 16.94px;
-      color: #4d5d69;
+      color: var(--cpu-help-color);
+    }
+    .cpu-help-close-icon {
+      color: var(--cpu-help-close-icon-color);
     }
   }
 
   .cpu-help-text {
     font-size: 13px;
     line-height: 15.73px;
-    color: #4d5d69;
+    color: var(--cpu-help-color);
     margin-bottom: 12px;
   }
 
@@ -123,15 +147,8 @@ const isShowCpuHelp = ref<boolean>(false)
     font-size: 13px;
     font-weight: 500;
     line-height: 15.73px;
-    color: #008fd6;
+    color: var(--cpu-help-more-info-color);
     text-decoration: none;
   }
 }
 </style>
-<style lang="scss">
-.light-theme {
-  .stack-block-expanded {
-    --cpu-help-icon-hover-color: #e9eaec;
-  }
-}
-</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/memory/hotPlug/HotPlugNew.vue

@@ -9,6 +9,7 @@
         :disabled="props.disabled"
         :label-text="localization.common.enable"
         test-id="memory-hot-plug-input"
+        size="md"
       />
     </template>
   </ui-stack-block>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDiskNew.vue

@@ -69,7 +69,7 @@
             :error-text="props.errorText"
             input-style="rounded"
             type="number"
-            size="md"
+            size="sm"
             @blur="emits('validate-size')"
           />
 
@@ -222,8 +222,44 @@ const emits = defineEmits<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
-<style scoped lang="scss">
+<style>
+:root {
+  --device-will-removed-color: #9da6ad;
+  --device-will-removed-border-color: #e9ebeda3;
+}
+:root.dark-theme {
+  --device-will-removed-color: #9da6ad;
+  --device-will-removed-border-color: #e9ebed1f;
+}
+
+.light-theme {
+  .stack-block-expanded {
+    --device-will-removed-color: #9da6ad;
+    --device-will-removed-border-color: #e9ebed1f;
 
+    .ui-custom-checkbox {
+      background-color: transparent;
+    }
+    .ui-checkbox-label-text {
+      color: #e9eaec;
+    }
+  }
+}
+.dark-theme {
+  .stack-block-expanded {
+    --device-will-removed-color: #9da6ad;
+    --device-will-removed-border-color: #d3d6da66;
+
+    .ui-custom-checkbox {
+      background-color: transparent;
+    }
+    .ui-checkbox-label-text {
+      color: #4d5d69;
+    }
+  }
+}
+</style>
+<style scoped lang="scss">
 .new-hard-disk-content {
   gap: 8px;
   &.removed {
@@ -232,13 +268,13 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
   .device-will-removed-text {
     font-size: 13px;
-    color: #9da6ad;
+    color: var(--device-will-removed-color);
   }
   .checkbox-wrap {
     padding: 0 12px;
     margin: 0 12px;
-    border-right: 1px solid #e9ebeda3;
-    border-left: 1px solid #e9ebeda3;
+    border-right: 1px solid var(--device-will-removed-border-color);
+    border-left: 1px solid var(--device-will-removed-border-color);
   }
 }
 
@@ -256,7 +292,4 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 :deep(.unit .ui-main-select-toggle) {
   width: 80px;
 }
-:deep(.ui-main.ui-main-sm .ui-main-input) {
-  height: 26px;
-}
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/file/FileNew.vue

@@ -30,7 +30,7 @@ const props = defineProps<{
 <style scoped>
 .file-path {
   font-size: 13px;
-  line-height: 15.73px;
   color: var(--vm-wizard-file-path-color);
+  line-height: 32px;
 }
 </style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/macAddress/MacAddressNew.vue

@@ -60,8 +60,4 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   align-items: center;
   gap: 8px;
 }
-
-:deep(.ui-main.ui-main-sm .ui-main-input) {
-  height: 26px;
-}
 </style>