From 4f478ccf700e257d51a5e20156927f9cb63db562 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 29 Oct 2024 16:24:15 +0800
Subject: [PATCH 1/2] fix: prevent undefined key name when creating Secret

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 ui/src/formkit/inputs/secret/SecretSelect.vue | 22 ++++++++++++++++---
 .../secret/components/SecretCreationModal.vue |  9 +++++++-
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/ui/src/formkit/inputs/secret/SecretSelect.vue b/ui/src/formkit/inputs/secret/SecretSelect.vue
index 5afcc63708..bd9d2813dd 100644
--- a/ui/src/formkit/inputs/secret/SecretSelect.vue
+++ b/ui/src/formkit/inputs/secret/SecretSelect.vue
@@ -12,6 +12,7 @@ import { useQueryClient } from "@tanstack/vue-query";
 import { onClickOutside } from "@vueuse/core";
 import Fuse from "fuse.js";
 import { computed, ref, watch, type PropType } from "vue";
+import SecretCreationModal from "./components/SecretCreationModal.vue";
 import SecretEditModal from "./components/SecretEditModal.vue";
 import SecretListModal from "./components/SecretListModal.vue";
 import { Q_KEY, useSecretsFetch } from "./composables/use-secrets-fetch";
@@ -25,6 +26,8 @@ const props = defineProps({
   },
 });
 
+const requiredKey = computed(() => props.context.requiredKey);
+
 const selectedSecret = ref<Secret>();
 const dropdownVisible = ref(false);
 const text = ref("");
@@ -137,10 +140,11 @@ const scrollToSelected = () => {
 
 // Check required key and edit secret
 function hasRequiredKey(secret: Secret) {
-  return !!secret.stringData?.[props.context.requiredKey as string];
+  return !!secret.stringData?.[requiredKey.value as string];
 }
 const secretToUpdate = ref<Secret>();
 const secretEditModalVisible = ref(false);
+const secretCreationModalVisible = ref(false);
 
 const handleSelect = (secret?: Secret) => {
   if (!secret || secret.metadata.name === props.context._value) {
@@ -159,7 +163,7 @@ const handleSelect = (secret?: Secret) => {
   if (!hasRequiredKey(secret)) {
     const stringDataToUpdate = {
       ...secret.stringData,
-      [props.context.requiredKey as string]: "",
+      [requiredKey.value ? (requiredKey.value as string) : ""]: "",
     };
     secretToUpdate.value = {
       ...secret,
@@ -177,6 +181,11 @@ const secretListModalVisible = ref(false);
 
 // Create new secret
 async function handleCreateSecret() {
+  if (!requiredKey.value) {
+    secretCreationModalVisible.value = true;
+    return;
+  }
+
   const { data: newSecret } = await coreApiClient.secret.createSecret({
     secret: {
       metadata: {
@@ -187,7 +196,7 @@ async function handleCreateSecret() {
       apiVersion: "v1alpha1",
       type: "Opaque",
       stringData: {
-        [props.context.requiredKey as string]: text.value,
+        [requiredKey.value as string]: text.value,
       },
     },
   });
@@ -212,6 +221,13 @@ async function handleCreateSecret() {
     :secret="secretToUpdate"
     @close="secretEditModalVisible = false"
   />
+  <SecretCreationModal
+    v-if="secretCreationModalVisible"
+    :form-state="{
+      stringDataArray: [{ key: requiredKey ? requiredKey  as string : '', value: text || '' }],
+    }"
+    @close="secretCreationModalVisible = false"
+  />
   <div
     ref="wrapperRef"
     class="flex h-full w-full items-center border border-gray-300 transition-all"
diff --git a/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue b/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue
index 6e59f1d907..2baab63ea1 100644
--- a/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue
+++ b/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue
@@ -12,6 +12,13 @@ import SecretForm from "./SecretForm.vue";
 const { t } = useI18n();
 const queryClient = useQueryClient();
 
+withDefaults(
+  defineProps<{
+    formState: SecretFormState;
+  }>(),
+  {}
+);
+
 const emit = defineEmits<{
   (event: "close"): void;
 }>();
@@ -61,7 +68,7 @@ function onSubmit(data: SecretFormState) {
     :width="600"
     @close="emit('close')"
   >
-    <SecretForm @submit="onSubmit" />
+    <SecretForm :form-state="formState" @submit="onSubmit" />
 
     <template #footer>
       <VSpace>

From 90331fcab9f163e10a5531a2093196907a0f4653 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 29 Oct 2024 18:29:35 +0800
Subject: [PATCH 2/2] fix ts error

---
 .../formkit/inputs/secret/components/SecretCreationModal.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue b/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue
index 2baab63ea1..a3fad705cf 100644
--- a/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue
+++ b/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue
@@ -14,9 +14,9 @@ const queryClient = useQueryClient();
 
 withDefaults(
   defineProps<{
-    formState: SecretFormState;
+    formState?: SecretFormState;
   }>(),
-  {}
+  { formState: undefined }
 );
 
 const emit = defineEmits<{