feat(dynamic-secret): Add custom tags to AWS IAM dynamic secret

frontend/src/hooks/api/dynamicSecret/types.ts

@@ -15,6 +15,7 @@ export type TDynamicSecret = {
   maxTTL: string;
   usernameTemplate?: string | null;
   metadata?: { key: string; value: string }[];
+  tags?: { key: string; value: string }[];
 };
 
 export enum DynamicSecretProviders {
@@ -89,6 +90,7 @@ export type TDynamicSecretProvider =
     }
   | {
       type: DynamicSecretProviders.AwsIam;
+      tags?: { key: string; value: string }[];
       inputs:
         | {
             method: DynamicSecretAwsIamAuth.AccessKey;
@@ -345,6 +347,7 @@ export type TCreateDynamicSecretDTO = {
   name: string;
   metadata?: { key: string; value: string }[];
   usernameTemplate?: string;
+  tags?: { key: string; value: string }[];
 };
 
 export type TUpdateDynamicSecretDTO = {
@@ -359,6 +362,7 @@ export type TUpdateDynamicSecretDTO = {
     maxTTL?: string | null;
     inputs?: unknown;
     usernameTemplate?: string | null;
+    tags?: { key: string; value: string }[];
   };
 };
 

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsIamInputForm.tsx

@@ -21,6 +21,8 @@ import {
 } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
 
+import { MetadataForm } from "../../DynamicSecretListView/MetadataForm";
+
 const formSchema = z.object({
   provider: z.discriminatedUnion("method", [
     z.object({
@@ -67,7 +69,10 @@ const formSchema = z.object({
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
   environment: z.object({ name: z.string(), slug: z.string() }),
-  usernameTemplate: z.string().nullable().optional()
+  usernameTemplate: z.string().nullable().optional(),
+  tags: z
+    .array(z.object({ key: z.string().trim().min(1), value: z.string().trim().min(1) }))
+    .optional()
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -100,7 +105,8 @@ export const AwsIamInputForm = ({
       usernameTemplate: "{{randomUsername}}",
       provider: {
         method: DynamicSecretAwsIamAuth.AssumeRole
-      }
+      },
+      tags: []
     }
   });
 
@@ -113,7 +119,8 @@ export const AwsIamInputForm = ({
     provider,
     defaultTTL,
     environment,
-    usernameTemplate
+    usernameTemplate,
+    tags
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
@@ -129,7 +136,8 @@ export const AwsIamInputForm = ({
         projectSlug,
         environmentSlug: environment.slug,
         usernameTemplate:
-          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate
+          !usernameTemplate || isDefaultUsernameTemplate ? undefined : usernameTemplate,
+        tags
       });
       onCompleted();
     } catch {
@@ -398,6 +406,7 @@ export const AwsIamInputForm = ({
                   </FormControl>
                 )}
               />
+              <MetadataForm control={control} name="tags" isValueRequired />
               {!isSingleEnvironmentMode && (
                 <Controller
                   control={control}

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsIamForm.tsx

@@ -10,6 +10,8 @@ import { useUpdateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretAwsIamAuth, TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
 import { slugSchema } from "@app/lib/schemas";
 
+import { MetadataForm } from "../MetadataForm";
+
 const formSchema = z.object({
   inputs: z.discriminatedUnion("method", [
     z.object({
@@ -56,6 +58,9 @@ const formSchema = z.object({
     })
     .nullable(),
   newName: slugSchema().optional(),
+  tags: z
+    .array(z.object({ key: z.string().trim().min(1), value: z.string().trim().min(1) }))
+    .optional(),
   usernameTemplate: z.string().trim().nullable().optional()
 });
 type TForm = z.infer<typeof formSchema>;
@@ -89,7 +94,8 @@ export const EditDynamicSecretAwsIamForm = ({
       usernameTemplate: dynamicSecret?.usernameTemplate || "{{randomUsername}}",
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"])
-      }
+      },
+      tags: dynamicSecret.tags
     }
   });
   const isAccessKeyMethod = watch("inputs.method") === DynamicSecretAwsIamAuth.AccessKey;
@@ -101,7 +107,8 @@ export const EditDynamicSecretAwsIamForm = ({
     maxTTL,
     defaultTTL,
     newName,
-    usernameTemplate
+    usernameTemplate,
+    tags
   }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
@@ -117,7 +124,9 @@ export const EditDynamicSecretAwsIamForm = ({
           defaultTTL,
           inputs,
           newName: newName === dynamicSecret.name ? undefined : newName,
-          usernameTemplate: !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate
+          usernameTemplate:
+            !usernameTemplate || isDefaultUsernameTemplate ? null : usernameTemplate,
+          tags
         }
       });
       onClose();
@@ -380,6 +389,7 @@ export const EditDynamicSecretAwsIamForm = ({
                 </FormControl>
               )}
             />
+            <MetadataForm control={control} name="tags" isValueRequired />
           </div>
         </div>
         <div className="mt-4 flex items-center space-x-4">

frontend/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/MetadataForm.tsx

@@ -4,14 +4,22 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { FormControl, FormLabel, IconButton, Input } from "@app/components/v2";
 
-export const MetadataForm = ({ control }: { control: Control<any> }) => {
+export const MetadataForm = ({
+  control,
+  name = "metadata",
+  isValueRequired = false
+}: {
+  control: Control<any>;
+  name?: string;
+  isValueRequired?: boolean;
+}) => {
   const metadataFormFields = useFieldArray({
     control,
-    name: "metadata"
+    name
   });
 
   return (
-    <FormControl label="Metadata">
+    <FormControl label={name.charAt(0).toUpperCase() + name.slice(1)}>
       <div className="flex flex-col space-y-2">
         {metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
           <div key={metadataFieldId} className="flex items-end space-x-2">
@@ -19,7 +27,7 @@ export const MetadataForm = ({ control }: { control: Control<any> }) => {
               {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
               <Controller
                 control={control}
-                name={`metadata.${i}.key`}
+                name={`${name}.${i}.key`}
                 render={({ field, fieldState: { error } }) => (
                   <FormControl
                     isError={Boolean(error?.message)}
@@ -33,11 +41,15 @@ export const MetadataForm = ({ control }: { control: Control<any> }) => {
             </div>
             <div className="flex-grow">
               {i === 0 && (
-                <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
+                <FormLabel
+                  label="Value"
+                  className="text-xs text-mineshaft-400"
+                  isOptional={!isValueRequired}
+                />
               )}
               <Controller
                 control={control}
-                name={`metadata.${i}.value`}
+                name={`${name}.${i}.value`}
                 render={({ field, fieldState: { error } }) => (
                   <FormControl
                     isError={Boolean(error?.message)}