fix: replace secret ID with Name in CreateSecretDialog and SecretTable (

#1271) Because - replace secret ID with Name in CreateSecretDialog and SecretTable This commit - replace secret ID with Name in CreateSecretDialog and SecretTable
instill-ai · Jul 2, 2024 · ffe6608 · ffe6608
1 parent 3694ce8
commit ffe6608
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 19 deletions.
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.95.0-rc.17",
+  "version": "0.95.0-rc.18",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",

diff --git a/packages/toolkit/src/view/settings/api-tokens/APITokenTable.tsx b/packages/toolkit/src/view/settings/api-tokens/APITokenTable.tsx
@@ -61,7 +61,7 @@ export const APITokenTable = (props: APITokenTableProps) => {
                 column.toggleSorting(column.getIsSorted() === "asc")
               }
             >
-              <span className="text-left min-w-[130px]">Date added</span>
+              <span className="text-left">Date added</span>
               <SortIcon type={column.getIsSorted()} />
             </Button>
           </div>
@@ -89,7 +89,7 @@ export const APITokenTable = (props: APITokenTableProps) => {
                 column.toggleSorting(column.getIsSorted() === "asc")
               }
             >
-              <span className="min-w-[130px] text-left">Last Used</span>
+              <span className="text-left">Last Used</span>
               <SortIcon type={column.getIsSorted()} />
             </Button>
           </div>

diff --git a/packages/toolkit/src/view/settings/secrets/CreateSecretDialog.tsx b/packages/toolkit/src/view/settings/secrets/CreateSecretDialog.tsx
@@ -32,16 +32,16 @@ import { validateInstillResourceID } from "../../../server";
 
 const CreateSecretSchema = z
   .object({
-    id: z.string().min(1, "Secret id is required"),
+    name: z.string().min(1, "Secret name is required"),
     value: z.string(),
     description: z.string().optional().nullable(),
   })
   .superRefine((state, ctx) => {
-    if (!validateInstillResourceID(state.id)) {
+    if (!validateInstillResourceID(state.name)) {
       return ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: InstillErrors.ResourceIDInvalidError,
-        path: ["id"],
+        path: ["name"],
       });
     }
   });
@@ -66,7 +66,7 @@ export const CreateSecretDialog = () => {
   const form = useForm<z.infer<typeof CreateSecretSchema>>({
     resolver: zodResolver(CreateSecretSchema),
     defaultValues: {
-      id: "",
+      name: "",
       value: "",
       description: "",
     },
@@ -76,7 +76,7 @@ export const CreateSecretDialog = () => {
 
   React.useEffect(() => {
     reset({
-      id: "",
+      name: "",
       value: "",
       description: "",
     });
@@ -89,7 +89,7 @@ export const CreateSecretDialog = () => {
     if (!accessToken || !me.isSuccess) return;
 
     const payload: CreateUserSecretPayload = {
-      id: data.id,
+      id: data.name,
       value: data.value,
       description: data.description ?? undefined,
     };
@@ -121,7 +121,7 @@ export const CreateSecretDialog = () => {
       if (!isAxiosError(error)) return;
 
       if (error.response?.status === 409) {
-        form.setError("id", {
+        form.setError("name", {
           type: "manual",
           message: "Secret name already exists",
         });
@@ -181,13 +181,11 @@ export const CreateSecretDialog = () => {
                 <div className="mb-6 flex flex-col gap-y-5">
                   <Form.Field
                     control={form.control}
-                    name="id"
+                    name="name"
                     render={({ field }) => {
                       return (
                         <Form.Item>
-                          <Form.Label htmlFor={field.name}>
-                            Secret ID *
-                          </Form.Label>
+                          <Form.Label htmlFor={field.name}>Name *</Form.Label>
                           <Form.Control>
                             <Input.Root>
                               <Input.Core

diff --git a/packages/toolkit/src/view/settings/secrets/SecretTable.tsx b/packages/toolkit/src/view/settings/secrets/SecretTable.tsx
@@ -19,7 +19,7 @@ export const SecretTable = (props: APITokenTableProps) => {
   const columns: ColumnDef<Secret>[] = [
     {
       accessorKey: "id",
-      header: () => <div className="min-w-[200px] text-left">id</div>,
+      header: () => <div className="min-w-[200px] text-left">Name</div>,
       cell: ({ row }) => {
         return (
           <div className="flex flex-col">
@@ -35,16 +35,16 @@ export const SecretTable = (props: APITokenTableProps) => {
       accessorKey: "createTime",
       header: ({ column }) => {
         return (
-          <div className="text-center">
+          <div className="text-left">
             <Button
-              className="gap-x-2 py-0"
+              className="gap-x-2 p-0"
               variant="tertiaryGrey"
               size="sm"
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")
               }
             >
-              <span className="min-w-[130px]">Date added</span>
+              <span className="text-left">Date added</span>
               <SortIcon type={column.getIsSorted()} />
             </Button>
           </div>
@@ -53,7 +53,7 @@ export const SecretTable = (props: APITokenTableProps) => {
 
       cell: ({ row }) => {
         return (
-          <div className="truncate text-center text-semantic-fg-secondary product-body-text-3-regular">
+          <div className="truncate text-left text-semantic-fg-secondary product-body-text-3-regular">
             {formatDate(row.getValue("createTime"))}
           </div>
         );