bfg-common 1.4.393 → 1.4.395

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/Old.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="hardware-remote-console">
+    <atoms-stack-block :has-children="true" test-id="remote-console-stack-block">
+      <template #stackBlockKey>
+        <div
+          id="vm-wizard-toggle-block-remote-console"
+          data-id="vm-wizard-toggle-block-remote-console"
+          class="flex-align-center"
+        >
+          <span>{{ localization.common.remoteConsoleOptions }}</span>
+          <atoms-the-icon
+            v-show="remoteConsoleOptionsInvalid"
+            width="24px"
+            height="24px"
+            class="is-error tooltip-trigger"
+            name="info"
+          />
+        </div>
+      </template>
+      <template #stackChildren>
+        <!--        TODO возможно вернем, НЕ УДАЛЯТЬ-->
+
+        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-type-->
+        <!--          v-models:remote-console-type="remoteConsoleType"-->
+        <!--          :error-validation-fields="props.errorValidationFields"-->
+        <!--          :disabled="isDisabled"-->
+        <!--          @input="changeRemoteConsoleType"-->
+        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+        <!--        />-->
+        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-keymap
+          v-model:keymap="keymap"
+          :disabled="isDisabled"
+        />
+        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-password
+          v-model:password="password"
+          :disabled="isDisabled"
+          @valid="passwordIsValid = $event"
+        />
+        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-power-control-->
+        <!--          v-if="remoteConsoleType === 'vnc'"-->
+        <!--          v-models:power-control="powerControl"-->
+        <!--        />-->
+        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-share-policy-->
+        <!--          v-if="remoteConsoleType === 'vnc'"-->
+        <!--          v-models:share-policy="sharePolicy"-->
+        <!--        />-->
+        <!--        TODO возможно вернем, НЕ УДАЛЯТЬ-->
+        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-img-compression-->
+        <!--          v-if="remoteConsoleType === 'spice'"-->
+        <!--          v-models:img-compression="imgCompression"-->
+        <!--          :error-validation-fields="props.errorValidationFields"-->
+        <!--          :disabled="isDisabled"-->
+        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+        <!--        />-->
+        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-jpeg-compression-->
+        <!--          v-if="remoteConsoleType === 'spice'"-->
+        <!--          v-models:jpeg-compression="jpegCompression"-->
+        <!--          :error-validation-fields="props.errorValidationFields"-->
+        <!--          :disabled="isDisabled"-->
+        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+        <!--        />-->
+        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-zlib-compression-->
+        <!--          v-if="remoteConsoleType === 'spice'"-->
+        <!--          v-models:zlib-compression="zlibCompression"-->
+        <!--          :error-validation-fields="props.errorValidationFields"-->
+        <!--          :disabled="isDisabled"-->
+        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+        <!--        />-->
+        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-playback-compression-->
+        <!--          v-if="remoteConsoleType === 'spice'"-->
+        <!--          :disabled="isDisabled"-->
+        <!--          v-models:playback-compression="playbackCompression"-->
+        <!--        />-->
+        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-streaming-mode-->
+        <!--          v-if="remoteConsoleType === 'spice'"-->
+        <!--          v-models:streaming-mode="streamingMode"-->
+        <!--          :error-validation-fields="props.errorValidationFields"-->
+        <!--          :disabled="isDisabled"-->
+        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
+        <!--        />-->
+        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-copy-paste
+          v-if="remoteConsoleType === 'spice'"
+          v-model:copy-paste="copyPaste"
+          :disabled="isDisabled"
+        />
+        <!--        TODO возможно вернем, НЕ УДАЛЯТЬ-->
+        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-mouse-mode-->
+        <!--          v-if="remoteConsoleType === 'spice'"-->
+        <!--          v-models:mouse-mode="mouseMode"-->
+        <!--        />-->
+        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-file-transfer
+          v-if="remoteConsoleType === 'spice'"
+          v-model:file-transfer="fileTransfer"
+          :disabled="isDisabled"
+        />
+        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-usb-redirection
+          v-if="remoteConsoleType === 'spice'"
+          v-model:usb-redirection="usbRedirection"
+          :disabled="isDisabled"
+        />
+        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-folder-sharing
+          v-if="remoteConsoleType === 'spice'"
+          v-model:folder-sharing="folderSharing"
+          :disabled="isDisabled"
+        />
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_SendDataRemoteConsoleOptions } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+// import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+
+const props = defineProps<{
+  remoteConsoleOptions?: UI_I_SendDataRemoteConsoleOptions
+  // TODO возможно вернем, НЕ УДАЛЯТЬ
+  // errorValidationFields: UI_I_ErrorValidationField<string>[]
+  isEdit: boolean
+  state?: string | number
+}>()
+const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataRemoteConsoleOptions): void
+  (event: 'invalid', value: boolean): void
+  // TODO возможно вернем, НЕ УДАЛЯТЬ
+  // (event: 'remove-error-by-title', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isDisabled = computed<boolean>(() => props.isEdit && props.state !== 1)
+
+const remoteConsoleType = ref<string>('spice')
+// TODO возможно вернем, НЕ УДАЛЯТЬ
+// const changeRemoteConsoleType = (): void => {
+//   // powerControl.value = false
+//   // sharePolicy.value = 'allow-exclusive'
+//   imgCompression.value = 'auto_glz'
+//   jpegCompression.value = 'auto'
+//   zlibCompression.value = 'auto'
+//   playbackCompression.value = true
+//   streamingMode.value = 'all'
+//   copyPaste.value = true
+//   mouseMode.value = 'client'
+//   fileTransfer.value = true
+//   usbRedirection.value = 3
+//   folderSharing.value = true
+// }
+
+const keymap = ref<string>('en_US')
+
+const password = ref<string>('')
+const passwordIsValid = ref<boolean>(true)
+
+// const powerControl = ref<boolean>(false)
+
+// const sharePolicy = ref<string>('allow-exclusive')
+
+const imgCompression = ref<string>('auto_glz')
+
+const jpegCompression = ref<string>('auto')
+
+const zlibCompression = ref<string>('auto')
+
+const playbackCompression = ref<boolean>(true)
+
+const streamingMode = ref<string>('all')
+
+const copyPaste = ref<boolean>(true)
+
+const mouseMode = ref<string>('client')
+
+const fileTransfer = ref<boolean>(true)
+
+const usbRedirection = ref<number>(3)
+
+const folderSharing = ref<boolean>(true)
+
+watch(
+  [
+    remoteConsoleType,
+    keymap,
+    password,
+    // powerControl,
+    // sharePolicy,
+    imgCompression,
+    jpegCompression,
+    zlibCompression,
+    playbackCompression,
+    streamingMode,
+    copyPaste,
+    mouseMode,
+    fileTransfer,
+    usbRedirection,
+    folderSharing,
+  ],
+  () => {
+    emits('send-data', {
+      type: remoteConsoleType.value,
+      port: 0,
+      keymap: keymap.value,
+      password: password.value,
+      guest_os_lock: false,
+      limit_sessions: 0,
+      spice: {
+        img_compression: imgCompression.value,
+        jpeg_compression: jpegCompression.value,
+        zlib_glz_compression: zlibCompression.value,
+        streaming_mode: streamingMode.value,
+        playback_compression: playbackCompression.value,
+        file_transfer: fileTransfer.value,
+        clipboard: copyPaste.value,
+      },
+    })
+  },
+  { immediate: true }
+)
+
+// Добавляем данные для редактирования
+watch(
+  () => props.remoteConsoleOptions,
+  (newValue) => {
+    if (!newValue || !props.remoteConsoleOptions) return
+
+    remoteConsoleType.value = props.remoteConsoleOptions.type
+    keymap.value = props.remoteConsoleOptions.keymap
+    password.value = props.remoteConsoleOptions.password
+    imgCompression.value = props.remoteConsoleOptions.spice.img_compression
+    jpegCompression.value = props.remoteConsoleOptions.spice.jpeg_compression
+    zlibCompression.value =
+      props.remoteConsoleOptions.spice.zlib_glz_compression
+    streamingMode.value = props.remoteConsoleOptions.spice.streaming_mode
+    playbackCompression.value =
+      props.remoteConsoleOptions.spice.playback_compression
+    fileTransfer.value = props.remoteConsoleOptions.spice.file_transfer
+    copyPaste.value = props.remoteConsoleOptions.spice.clipboard
+  },
+  { immediate: true }
+)
+
+const remoteConsoleOptionsInvalid = computed<boolean>(
+  () => !passwordIsValid.value
+)
+watch(
+  remoteConsoleOptionsInvalid,
+  (newValue) => {
+    emits('invalid', newValue)
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/PowerControl.vue

@@ -37,7 +37,7 @@ const powerControlLocal = computed<boolean>({
   get() {
     return props.powerControl
   },
-  set(newValue) {
+  set(newValue: boolean) {
     emits('update:power-control', newValue)
   },
 })

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/RemoteConsoleOptions.vue

@@ -1,117 +1,34 @@
 <template>
-  <div class="hardware-remote-console">
-    <atoms-stack-block :has-children="true" test-id="remote-console-stack-block">
-      <template #stackBlockKey>
-        <div
-          id="vm-wizard-toggle-block-remote-console"
-          data-id="vm-wizard-toggle-block-remote-console"
-          class="flex-align-center"
-        >
-          <span>{{ localization.common.remoteConsoleOptions }}</span>
-          <atoms-the-icon
-            v-show="remoteConsoleOptionsInvalid"
-            width="24px"
-            height="24px"
-            class="is-error tooltip-trigger"
-            name="info"
-          />
-        </div>
-      </template>
-      <template #stackChildren>
-        <!--        TODO возможно вернем, НЕ УДАЛЯТЬ-->
-
-        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-type-->
-        <!--          v-models:remote-console-type="remoteConsoleType"-->
-        <!--          :error-validation-fields="props.errorValidationFields"-->
-        <!--          :disabled="isDisabled"-->
-        <!--          @input="changeRemoteConsoleType"-->
-        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
-        <!--        />-->
-        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-keymap
-          v-model:keymap="keymap"
-          :disabled="isDisabled"
-        />
-        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-password
-          v-model:password="password"
-          :disabled="isDisabled"
-          @valid="passwordIsValid = $event"
-        />
-        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-power-control-->
-        <!--          v-if="remoteConsoleType === 'vnc'"-->
-        <!--          v-models:power-control="powerControl"-->
-        <!--        />-->
-        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-share-policy-->
-        <!--          v-if="remoteConsoleType === 'vnc'"-->
-        <!--          v-models:share-policy="sharePolicy"-->
-        <!--        />-->
-        <!--        TODO возможно вернем, НЕ УДАЛЯТЬ-->
-        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-img-compression-->
-        <!--          v-if="remoteConsoleType === 'spice'"-->
-        <!--          v-models:img-compression="imgCompression"-->
-        <!--          :error-validation-fields="props.errorValidationFields"-->
-        <!--          :disabled="isDisabled"-->
-        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
-        <!--        />-->
-        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-jpeg-compression-->
-        <!--          v-if="remoteConsoleType === 'spice'"-->
-        <!--          v-models:jpeg-compression="jpegCompression"-->
-        <!--          :error-validation-fields="props.errorValidationFields"-->
-        <!--          :disabled="isDisabled"-->
-        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
-        <!--        />-->
-        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-zlib-compression-->
-        <!--          v-if="remoteConsoleType === 'spice'"-->
-        <!--          v-models:zlib-compression="zlibCompression"-->
-        <!--          :error-validation-fields="props.errorValidationFields"-->
-        <!--          :disabled="isDisabled"-->
-        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
-        <!--        />-->
-        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-playback-compression-->
-        <!--          v-if="remoteConsoleType === 'spice'"-->
-        <!--          :disabled="isDisabled"-->
-        <!--          v-models:playback-compression="playbackCompression"-->
-        <!--        />-->
-        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-streaming-mode-->
-        <!--          v-if="remoteConsoleType === 'spice'"-->
-        <!--          v-models:streaming-mode="streamingMode"-->
-        <!--          :error-validation-fields="props.errorValidationFields"-->
-        <!--          :disabled="isDisabled"-->
-        <!--          @remove-error-by-title="emits('remove-error-by-title', $event)"-->
-        <!--        />-->
-        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-copy-paste
-          v-if="remoteConsoleType === 'spice'"
-          v-model:copy-paste="copyPaste"
-          :disabled="isDisabled"
-        />
-        <!--        TODO возможно вернем, НЕ УДАЛЯТЬ-->
-        <!--        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-mouse-mode-->
-        <!--          v-if="remoteConsoleType === 'spice'"-->
-        <!--          v-models:mouse-mode="mouseMode"-->
-        <!--        />-->
-        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-file-transfer
-          v-if="remoteConsoleType === 'spice'"
-          v-model:file-transfer="fileTransfer"
-          :disabled="isDisabled"
-        />
-        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-usb-redirection
-          v-if="remoteConsoleType === 'spice'"
-          v-model:usb-redirection="usbRedirection"
-          :disabled="isDisabled"
-        />
-        <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-folder-sharing
-          v-if="remoteConsoleType === 'spice'"
-          v-model:folder-sharing="folderSharing"
-          :disabled="isDisabled"
-        />
-      </template>
-    </atoms-stack-block>
-  </div>
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-new
+    v-if="isNewView"
+    v-model:keymap="keymap"
+    v-model:password="password"
+    v-model:password-is-valid="passwordIsValid"
+    v-model:remote-console-type="remoteConsoleType"
+    v-model:copy-paste="copyPaste"
+    v-model:file-transfer="fileTransfer"
+    v-model:usb-redirection="usbRedirection"
+    v-model:folder-sharing="folderSharing"
+    :remote-console-options-invalid="remoteConsoleOptionsInvalid"
+    :is-disabled="isDisabled"
+    />
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-old
+    v-else
+    v-model:keymap="keymap"
+    v-model:password="password"
+    v-model:password-is-valid="passwordIsValid"
+    v-model:remote-console-type="remoteConsoleType"
+    v-model:copy-paste="copyPaste"
+    v-model:file-transfer="fileTransfer"
+    v-model:usb-redirection="usbRedirection"
+    v-model:folder-sharing="folderSharing"
+    :remote-console-options-invalid="remoteConsoleOptionsInvalid"
+    :is-disabled="isDisabled"
+    />
 </template>
 
 <script setup lang="ts">
 import type { UI_I_SendDataRemoteConsoleOptions } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-// import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
 
 const props = defineProps<{
   remoteConsoleOptions?: UI_I_SendDataRemoteConsoleOptions
@@ -127,7 +44,8 @@ const emits = defineEmits<{
   // (event: 'remove-error-by-title', value: string): void
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const isDisabled = computed<boolean>(() => props.isEdit && props.state !== 1)
 

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/copyPaste/CopyPaste.vue

@@ -0,0 +1,26 @@
+<template>
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-copy-paste-new
+    v-if="isNewView"
+    v-model:copy-paste="copyPaste"
+    :disabled="props.disabled"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-copy-paste-old
+    v-else
+    v-model:copy-paste="copyPaste"
+    :disabled="props.disabled"
+  />
+</template>
+
+<script setup lang="ts">
+const copyPaste = defineModel<boolean>('copy-paste')
+
+const props = defineProps<{
+  disabled: boolean
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped>
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/copyPaste/CopyPasteNew.vue

@@ -0,0 +1,30 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.copyPaste }}
+    </template>
+    <template #stackBlockContent>
+      <ui-checkbox
+        id="copy-paste"
+        v-model="copyPaste"
+        test-id="copy-paste-checkbox"
+        :disabled="props.disabled"
+        :label-text="localization.common.enable"
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const copyPaste = defineModel<boolean>('copy-paste')
+
+const props = defineProps<{
+  disabled: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/copyPaste/CopyPasteOld.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.copyPaste }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <input
+            id="copy-paste"
+            v-model="copyPaste"
+            data-id="copy-paste-checkbox"
+            :disabled="props.disabled"
+            type="checkbox"
+          />
+          <label for="copy-paste" class="label-text-normal">{{
+              localization.common.enable
+            }}</label>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const copyPaste = defineModel<boolean>('copy-paste')
+
+const props = defineProps<{
+  disabled: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped>
+#copy-paste {
+  margin: 0 4px 4px 0;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/fileTransfer/FileTransfer.vue

@@ -0,0 +1,26 @@
+<template>
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-file-transfer-new
+    v-if="isNewView"
+    v-model:file-transfer="fileTransfer"
+    :disabled="props.disabled"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-file-transfer-old
+    v-else
+    v-model:file-transfer="fileTransfer"
+    :disabled="props.disabled"
+  />
+</template>
+
+<script setup lang="ts">
+const fileTransfer = defineModel<boolean>('file-transfer', {required: true})
+
+const props = defineProps<{
+  disabled: boolean
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped>
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/fileTransfer/FileTransferNew.vue

@@ -0,0 +1,30 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.fileTransfer }}
+    </template>
+    <template #stackBlockContent>
+      <ui-checkbox
+        id="file-transfer"
+        v-model="fileTransfer"
+        test-id="file-transfer-checkbox"
+        :disabled="props.disabled"
+        :label-text="localization.common.enable"
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const fileTransfer = defineModel<boolean>('file-transfer', { required: true })
+
+const props = defineProps<{
+  disabled: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped></style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/fileTransfer/FileTransferOld.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="">
+    <atoms-stack-block :has-children="false">
+      <template #stackBlockKey>
+        {{ localization.common.fileTransfer }}
+      </template>
+      <template #stackBlockContent>
+        <div class="flex-align-center">
+          <input
+            id="file-transfer"
+            v-model="fileTransfer"
+            data-id="file-transfer-checkbox"
+            :disabled="props.disabled"
+            type="checkbox"
+          />
+          <label for="file-transfer" class="label-text-normal">{{
+              localization.common.enable
+            }}</label>
+        </div>
+      </template>
+    </atoms-stack-block>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const fileTransfer = defineModel<boolean>('file-transfer', {required: true})
+
+const props = defineProps<{
+  disabled: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped>
+#file-transfer {
+  margin: 0 4px 4px 0;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/folderSharing/FolderSharing.vue

@@ -0,0 +1,20 @@
+<template>
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-folder-sharing-new
+    v-if="isNewView"
+    v-model:folder-sharing="folderSharing"
+  />
+  <common-vm-actions-common-customize-hardware-vmoptions-remote-console-options-folder-sharing-old
+    v-else
+    v-model:folder-sharing="folderSharing"
+  />
+</template>
+
+<script setup lang="ts">
+const folderSharing = defineModel<boolean>('folder-sharing')
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+</script>
+
+<style scoped>
+</style>

package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/folderSharing/FolderSharingNew.vue

@@ -0,0 +1,30 @@
+<template>
+  <ui-stack-block :has-children="false">
+    <template #stackBlockKey>
+      {{ localization.common.folderSharing }}
+    </template>
+    <template #stackBlockContent>
+      <ui-checkbox
+        id="folder-sharing"
+        v-model="folderSharing"
+        test-id="folder-sharing-checkbox"
+        :label-text="localization.common.enable"
+        disabled
+      />
+    </template>
+  </ui-stack-block>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const folderSharing = defineModel<boolean>('folder-sharing')
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped>
+#folder-sharing {
+  margin: 0 4px 4px 0;
+}
+</style>