From ed16e19cda0c8995b03149e9f07f55debcd5354b Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Fri, 27 Dec 2024 10:12:06 +0800
Subject: [PATCH] wip

---
 .../src/components/ClusterNodes.vue           |  8 ++++
 .../components/FieldArrayCardContainer.vue    |  5 +++
 .../src/components/RedisConfigurationForm.vue | 43 +++++++++++++++++--
 .../src/components/SentinelNodes.vue          |  8 ++++
 .../composables/useRedisConfigurationForm.ts  |  9 +++-
 .../src/locales/en.json                       |  2 +-
 .../components/VaultSecretPickerProvider.vue  | 10 ++++-
 7 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/packages/entities/entities-redis-configurations/src/components/ClusterNodes.vue b/packages/entities/entities-redis-configurations/src/components/ClusterNodes.vue
index 960adac82d..7cf44c7c22 100644
--- a/packages/entities/entities-redis-configurations/src/components/ClusterNodes.vue
+++ b/packages/entities/entities-redis-configurations/src/components/ClusterNodes.vue
@@ -10,6 +10,7 @@
       <FieldArrayCardContainer
         v-for="(node, index) of nodes"
         :key="`${index}`"
+        :disabled="readonly"
         @remove-item="removeItem(index)"
       >
         <div class="cluster-node-items">
@@ -20,6 +21,7 @@
               info: t('form.fields.cluster_node_ip.tooltip'),
               tooltipAttributes: { maxWidth: '400' },
             }"
+            :readonly="readonly"
             required
           />
           <KInput
@@ -29,12 +31,14 @@
               info: t('form.fields.cluster_node_port.tooltip'),
               tooltipAttributes: { maxWidth: '400' },
             }"
+            :readonly="readonly"
             type="number"
           />
         </div>
       </FieldArrayCardContainer>
       <KButton
         appearance="tertiary"
+        :disabled="readonly"
         @click="addItem"
       >
         <AddCircleIcon />
@@ -52,6 +56,10 @@ import composables from '../composables'
 import type { ClusterNode, Identifiable } from '../types'
 import { genDefaultClusterNode } from '../helpers'
 
+defineProps<{
+  readonly?: boolean
+}>()
+
 const nodes = defineModel<Identifiable<ClusterNode>[]>({ required: true })
 
 const { i18n: { t } } = composables.useI18n()
diff --git a/packages/entities/entities-redis-configurations/src/components/FieldArrayCardContainer.vue b/packages/entities/entities-redis-configurations/src/components/FieldArrayCardContainer.vue
index 4f1f1d1607..5c8104e12a 100644
--- a/packages/entities/entities-redis-configurations/src/components/FieldArrayCardContainer.vue
+++ b/packages/entities/entities-redis-configurations/src/components/FieldArrayCardContainer.vue
@@ -7,6 +7,7 @@
     <KButton
       appearance="tertiary"
       class="array-card-remove-button"
+      :disabled="disabled"
       @click="$emit('remove-item')"
     >
       <TrashIcon />
@@ -30,6 +31,10 @@ defineProps({
     type: Number,
     default: undefined,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 defineEmits<{
diff --git a/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue b/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue
index 99ff26e406..3763ae1122 100644
--- a/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue
+++ b/packages/entities/entities-redis-configurations/src/components/RedisConfigurationForm.vue
@@ -21,8 +21,10 @@
       >
         <KSelect
           v-model="form.fields.mode"
+          :disabled="isEdit"
           :items="typeOptions"
           :label="t('form.fields.type.label')"
+          :readonly="form.readonly"
           required
         >
           <template #selected-item-template="{ item }">
@@ -39,6 +41,7 @@
           v-model.trim="form.fields.name"
           :label="t('form.fields.name.label')"
           :placeholder="t('form.fields.name.placeholder')"
+          :readonly="form.readonly"
           required
         />
       </EntityFormSection>
@@ -55,6 +58,7 @@
             info: t('form.fields.sentinel_master.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
         />
         <KSelect
           v-model="form.fields.sentinel_role"
@@ -64,8 +68,12 @@
             info: t('form.fields.sentinel_role.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
+        />
+        <SentinelNodes
+          v-model="form.fields.sentinel_nodes"
+          :readonly="form.readonly"
         />
-        <SentinelNodes v-model="form.fields.sentinel_nodes" />
         <KInput
           v-model.trim="form.fields.sentinel_username"
           :label="t('form.fields.sentinel_username.label')"
@@ -73,9 +81,11 @@
             info: t('form.fields.sentinel_username.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
         />
         <VaultSecretPickerProvider
           class="secret-picker-provider"
+          :disabled="form.readonly"
           :update="v => form.fields.sentinel_username = v"
           :value="form.fields.sentinel_username"
           @open="(value, update) => setUpVaultSecretPicker(value, update)"
@@ -87,10 +97,12 @@
             info: t('form.fields.sentinel_password.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
           type="password"
         />
         <VaultSecretPickerProvider
           class="secret-picker-provider"
+          :disabled="form.readonly"
           :update="v => form.fields.sentinel_password = v"
           :value="form.fields.sentinel_password"
           @open="(value, update) => setUpVaultSecretPicker(value, update)"
@@ -102,7 +114,10 @@
         :description="t('form.sections.cluster.description')"
         :title="t('form.sections.cluster.title')"
       >
-        <ClusterNodes v-model="form.fields.cluster_nodes" />
+        <ClusterNodes
+          v-model="form.fields.cluster_nodes"
+          :readonly="form.readonly"
+        />
         <KInput
           v-model="form.fields.cluster_max_redirections"
           :label="t('form.fields.cluster_max_redirections.label')"
@@ -110,6 +125,7 @@
             info: t('form.fields.cluster_max_redirections.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
           type="number"
         />
       </EntityFormSection>
@@ -126,7 +142,7 @@
             info: t('form.fields.host.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
-          required
+          :readonly="form.readonly"
         />
         <KInput
           v-if="form.fields.mode === Mode.HOST_PORT_OPEN_SOURCE || form.fields.mode === Mode.HOST_PORT_ENTERPRISE"
@@ -136,12 +152,14 @@
             info: t('form.fields.port.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
           type="number"
         />
 
         <KCheckbox
           v-if="form.fields.mode === Mode.HOST_PORT_ENTERPRISE"
           v-model="form.fields.connection_is_proxied"
+          :disabled="form.readonly"
           :label="t('form.fields.connection_is_proxied.label')"
           :label-attributes="{
             info: t('form.fields.connection_is_proxied.tooltip'),
@@ -157,6 +175,7 @@
             info: t('form.fields.timeout.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
           type="number"
         />
 
@@ -167,6 +186,7 @@
             info: t('form.fields.database.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
           type="number"
         />
         <KInput
@@ -176,9 +196,11 @@
             info: t('form.fields.username.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
         />
         <VaultSecretPickerProvider
           class="secret-picker-provider"
+          :disabled="form.readonly"
           :update="v => form.fields.username = v"
           :value="form.fields.username"
           @open="(value, update) => setUpVaultSecretPicker(value, update)"
@@ -190,10 +212,12 @@
             info: t('form.fields.password.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
           type="password"
         />
         <VaultSecretPickerProvider
           class="secret-picker-provider"
+          :disabled="form.readonly"
           :update="v => form.fields.password = v"
           :value="form.fields.password"
           @open="(value, update) => setUpVaultSecretPicker(value, update)"
@@ -207,11 +231,13 @@
         <KCheckbox
           v-model="form.fields.ssl"
           :description="t('form.fields.ssl.description')"
+          :disabled="form.readonly"
           :label="t('form.fields.ssl.label')"
         />
         <KCheckbox
           v-model="form.fields.ssl_verify"
           :description="t('form.fields.ssl_verify.description')"
+          :disabled="form.readonly"
           :label="t('form.fields.ssl_verify.label')"
         />
         <KInput
@@ -221,6 +247,7 @@
             info: t('form.fields.server_name.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
         />
       </EntityFormSection>
 
@@ -236,6 +263,7 @@
             info: t('form.fields.keepalive_backlog.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
           type="number"
         />
         <KInput
@@ -245,6 +273,7 @@
             info: t('form.fields.keepalive_pool_size.tooltip'),
             tooltipAttributes: { maxWidth: '400' },
           }"
+          :readonly="form.readonly"
           type="number"
         />
       </EntityFormSection>
@@ -257,16 +286,19 @@
         <KInput
           v-model="form.fields.read_timeout"
           :label="t('form.fields.read_timeout.label')"
+          :readonly="form.readonly"
           type="number"
         />
         <KInput
           v-model="form.fields.send_timeout"
           :label="t('form.fields.send_timeout.label')"
+          :readonly="form.readonly"
           type="number"
         />
         <KInput
           v-model="form.fields.connect_timeout"
           :label="t('form.fields.connect_timeout.label')"
+          :readonly="form.readonly"
           type="number"
         />
       </EntityFormSection>
@@ -357,7 +389,10 @@ const {
   form,
   canSubmit,
   payload,
-} = useRedisConfigurationForm()
+  isEdit,
+} = useRedisConfigurationForm({
+  partialId: props.partialId,
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/entities/entities-redis-configurations/src/components/SentinelNodes.vue b/packages/entities/entities-redis-configurations/src/components/SentinelNodes.vue
index c80ea0b666..621e799cb2 100644
--- a/packages/entities/entities-redis-configurations/src/components/SentinelNodes.vue
+++ b/packages/entities/entities-redis-configurations/src/components/SentinelNodes.vue
@@ -10,6 +10,7 @@
       <FieldArrayCardContainer
         v-for="(node, index) of nodes"
         :key="node.id"
+        :disabled="readonly"
         @remove-item="removeItem(index)"
       >
         <div class="sentinel-node-items">
@@ -20,6 +21,7 @@
               info: t('form.fields.sentinel_node_host.tooltip'),
               tooltipAttributes: { maxWidth: '400' },
             }"
+            :readonly="readonly"
             required
           />
           <KInput
@@ -29,12 +31,14 @@
               info: t('form.fields.sentinel_node_port.tooltip'),
               tooltipAttributes: { maxWidth: '400' },
             }"
+            :readonly="readonly"
             type="number"
           />
         </div>
       </FieldArrayCardContainer>
       <KButton
         appearance="tertiary"
+        :disabled="readonly"
         @click="addItem"
       >
         <AddCircleIcon />
@@ -52,6 +56,10 @@ import composables from '../composables'
 import type { Identifiable, SentinelNode } from '../types'
 import { genDefaultSentinelNode } from '../helpers'
 
+defineProps<{
+  readonly?: boolean
+}>()
+
 const nodes = defineModel<Identifiable<SentinelNode>[]>({ required: true })
 
 const { i18n: { t } } = composables.useI18n()
diff --git a/packages/entities/entities-redis-configurations/src/composables/useRedisConfigurationForm.ts b/packages/entities/entities-redis-configurations/src/composables/useRedisConfigurationForm.ts
index 68b1ac5bf6..1cee8129ff 100644
--- a/packages/entities/entities-redis-configurations/src/composables/useRedisConfigurationForm.ts
+++ b/packages/entities/entities-redis-configurations/src/composables/useRedisConfigurationForm.ts
@@ -5,7 +5,13 @@ import { shallowCopyWithoutId } from '../helpers'
 
 import type { RedisConfigurationFormState } from '../types'
 
-export const useRedisConfigurationForm = () => {
+export type Options = {
+  partialId?: string
+}
+
+export const useRedisConfigurationForm = (options: Options) => {
+  const { partialId } = options
+  const isEdit = !!partialId
   const form = reactive<RedisConfigurationFormState>({
     fields: {
       name: '',
@@ -139,5 +145,6 @@ export const useRedisConfigurationForm = () => {
     form,
     canSubmit,
     payload,
+    isEdit,
   }
 }
diff --git a/packages/entities/entities-redis-configurations/src/locales/en.json b/packages/entities/entities-redis-configurations/src/locales/en.json
index 5332729a7f..c1963759fd 100644
--- a/packages/entities/entities-redis-configurations/src/locales/en.json
+++ b/packages/entities/entities-redis-configurations/src/locales/en.json
@@ -108,7 +108,7 @@
         "tooltip": "Sentinel password to authenticate with a Redis Sentinel instance. If undefined, no AUTH commands are sent to Redis Sentinels."
       },
       "cluster_node_ip": {
-        "label": "Ip",
+        "label": "IP",
         "tooltip": "A string representing a host name, such as example.com."
       },
       "cluster_node_port": {
diff --git a/packages/entities/entities-vaults/src/components/VaultSecretPickerProvider.vue b/packages/entities/entities-vaults/src/components/VaultSecretPickerProvider.vue
index c2faa00bd5..42dddcf5ec 100644
--- a/packages/entities/entities-vaults/src/components/VaultSecretPickerProvider.vue
+++ b/packages/entities/entities-vaults/src/components/VaultSecretPickerProvider.vue
@@ -6,8 +6,8 @@
     >
       <template #cta>
         <span
-          class="vault-secret-picker-provider-action"
-          @click="() => emit('open', props.value, props.update)"
+          :class="{ 'vault-secret-picker-provider-action': true, 'disabled': props.disabled }"
+          @click="() => !props.disabled && emit('open', props.value, props.update)"
         >
           {{ t('vault_secret_picker.provider.cta') }}
         </span>
@@ -21,6 +21,7 @@ import composables from '../composables'
 
 type Props = {
   value: string
+  disabled?: boolean
   update: (value: string) => void
 }
 
@@ -41,6 +42,11 @@ const { i18n: { t }, i18nT } = composables.useI18n()
   &-action {
     color: $kui-color-text-primary;
     cursor: pointer;
+
+    &.disabled {
+      color: $kui-color-text-disabled;
+      cursor: not-allowed;
+    }
   }
 }
 </style>