feat: add metadata based permissions for dynamic secret

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

@@ -25,6 +25,8 @@ import { gatewaysQueryKeys, useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders, SqlProviders } from "@app/hooks/api/dynamicSecret/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
 
+import { MetadataForm } from "../../DynamicSecretListView/MetadataForm";
+
 const passwordRequirementsSchema = z
   .object({
     length: z.number().min(1).max(250),
@@ -82,8 +84,16 @@ const formSchema = z.object({
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
   name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
-  environment: z.object({ name: z.string(), slug: z.string() })
+  environment: z.object({ name: z.string(), slug: z.string() }),
+  metadata: z
+    .object({
+      key: z.string().trim().min(1),
+      value: z.string().trim().default("")
+    })
+    .array()
+    .optional()
 });
+
 type TForm = z.infer<typeof formSchema>;
 
 type Props = {
@@ -192,7 +202,8 @@ export const SqlDatabaseInputForm = ({
     maxTTL,
     provider,
     defaultTTL,
-    environment
+    environment,
+    metadata
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
@@ -205,7 +216,8 @@ export const SqlDatabaseInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment.slug
+        environmentSlug: environment.slug,
+        metadata
       });
       onCompleted();
     } catch {
@@ -283,46 +295,47 @@ export const SqlDatabaseInputForm = ({
               />
             </div>
           </div>
-          <div>
-            <Controller
-              control={control}
-              name="provider.projectGatewayId"
-              defaultValue=""
-              render={({ field: { value, onChange }, fieldState: { error } }) => (
-                <FormControl
-                  isError={Boolean(error?.message)}
-                  errorText={error?.message}
-                  label="Gateway"
-                >
-                  <Select
-                    value={value}
-                    onValueChange={onChange}
-                    className="w-full border border-mineshaft-500"
-                    dropdownContainerClassName="max-w-none"
-                    isLoading={isProjectGatewaysLoading}
-                    placeholder="Internet gateway"
-                    position="popper"
-                  >
-                    <SelectItem
-                      value={null as unknown as string}
-                      onClick={() => onChange(undefined)}
-                    >
-                      Internet Gateway
-                    </SelectItem>
-                    {projectGateways?.map((el) => (
-                      <SelectItem value={el.projectGatewayId} key={el.projectGatewayId}>
-                        {el.name}
-                      </SelectItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              )}
-            />
-          </div>
+          <MetadataForm control={control} />
           <div>
             <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
               Configuration
             </div>
+            <div>
+              <Controller
+                control={control}
+                name="provider.projectGatewayId"
+                defaultValue=""
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Gateway"
+                  >
+                    <Select
+                      value={value}
+                      onValueChange={onChange}
+                      className="w-full border border-mineshaft-500"
+                      dropdownContainerClassName="max-w-none"
+                      isLoading={isProjectGatewaysLoading}
+                      placeholder="Internet gateway"
+                      position="popper"
+                    >
+                      <SelectItem
+                        value={null as unknown as string}
+                        onClick={() => onChange(undefined)}
+                      >
+                        Internet Gateway
+                      </SelectItem>
+                      {projectGateways?.map((el) => (
+                        <SelectItem value={el.projectGatewayId} key={el.projectGatewayId}>
+                          {el.name}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+            </div>
             <div className="flex flex-col">
               <div className="pb-0.5 pl-1 text-sm text-mineshaft-400">Service</div>
               <Controller

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

@@ -23,6 +23,8 @@ import { useWorkspace } from "@app/context";
 import { gatewaysQueryKeys, useUpdateDynamicSecret } from "@app/hooks/api";
 import { SqlProviders, TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
 
+import { MetadataForm } from "../MetadataForm";
+
 const passwordRequirementsSchema = z
   .object({
     length: z.number().min(1).max(250),
@@ -85,6 +87,13 @@ const formSchema = z.object({
   newName: z
     .string()
     .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+    .optional(),
+  metadata: z
+    .object({
+      key: z.string().trim().min(1),
+      value: z.string().trim().default("")
+    })
+    .array()
     .optional()
 });
 type TForm = z.infer<typeof formSchema>;
@@ -126,6 +135,7 @@ export const EditDynamicSecretSqlProviderForm = ({
       defaultTTL: dynamicSecret.defaultTTL,
       maxTTL: dynamicSecret.maxTTL,
       newName: dynamicSecret.name,
+      metadata: dynamicSecret.metadata,
       inputs: {
         ...(dynamicSecret.inputs as TForm["inputs"]),
         passwordRequirements:
@@ -147,7 +157,13 @@ export const EditDynamicSecretSqlProviderForm = ({
   const isGatewayInActive =
     projectGateways?.findIndex((el) => el.projectGatewayId === selectedProjectGatewayId) === -1;
 
-  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+  const handleUpdateDynamicSecret = async ({
+    inputs,
+    maxTTL,
+    defaultTTL,
+    newName,
+    metadata
+  }: TForm) => {
     // wait till previous request is finished
     if (updateDynamicSecret.isPending) return;
     try {
@@ -163,7 +179,8 @@ export const EditDynamicSecretSqlProviderForm = ({
             ...inputs,
             projectGatewayId: isGatewayInActive ? null : inputs.projectGatewayId
           },
-          newName: newName === dynamicSecret.name ? undefined : newName
+          newName: newName === dynamicSecret.name ? undefined : newName,
+          metadata
         }
       });
       onClose();
@@ -229,46 +246,50 @@ export const EditDynamicSecretSqlProviderForm = ({
             />
           </div>
         </div>
-        <div>
-          <Controller
-            control={control}
-            name="inputs.projectGatewayId"
-            defaultValue=""
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                isError={Boolean(error?.message) || isGatewayInActive}
-                errorText={
-                  isGatewayInActive && selectedProjectGatewayId
-                    ? `Project Gateway ${selectedProjectGatewayId} is removed`
-                    : error?.message
-                }
-                label="Gateway"
-                helperText=""
-              >
-                <Select
-                  value={value || undefined}
-                  onValueChange={onChange}
-                  className="w-full border border-mineshaft-500"
-                  dropdownContainerClassName="max-w-none"
-                  isLoading={isProjectGatewaysLoading}
-                  placeholder="Internet Gateway"
-                  position="popper"
-                >
-                  <SelectItem value={null as unknown as string} onClick={() => onChange(undefined)}>
-                    Internet Gateway
-                  </SelectItem>
-                  {projectGateways?.map((el) => (
-                    <SelectItem value={el.projectGatewayId} key={el.id}>
-                      {el.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
-            )}
-          />
-        </div>
+        <MetadataForm control={control} />
         <div>
           <div className="mb-4 border-b border-b-mineshaft-600 pb-2">Configuration</div>
+          <div>
+            <Controller
+              control={control}
+              name="inputs.projectGatewayId"
+              defaultValue=""
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  isError={Boolean(error?.message) || isGatewayInActive}
+                  errorText={
+                    isGatewayInActive && selectedProjectGatewayId
+                      ? `Project Gateway ${selectedProjectGatewayId} is removed`
+                      : error?.message
+                  }
+                  label="Gateway"
+                  helperText=""
+                >
+                  <Select
+                    value={value || undefined}
+                    onValueChange={onChange}
+                    className="w-full border border-mineshaft-500"
+                    dropdownContainerClassName="max-w-none"
+                    isLoading={isProjectGatewaysLoading}
+                    placeholder="Internet Gateway"
+                    position="popper"
+                  >
+                    <SelectItem
+                      value={null as unknown as string}
+                      onClick={() => onChange(undefined)}
+                    >
+                      Internet Gateway
+                    </SelectItem>
+                    {projectGateways?.map((el) => (
+                      <SelectItem value={el.projectGatewayId} key={el.id}>
+                        {el.name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+          </div>
           <div className="flex flex-col">
             <Controller
               control={control}

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

@@ -0,0 +1,76 @@
+import { Control, Controller, useFieldArray } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { FormControl, FormLabel, IconButton, Input } from "@app/components/v2";
+
+export const MetadataForm = ({ control }: { control: Control<any> }) => {
+  const metadataFormFields = useFieldArray({
+    control,
+    name: "metadata"
+  });
+
+  return (
+    <FormControl label="Metadata">
+      <div className="flex flex-col space-y-2">
+        {metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
+          <div key={metadataFieldId} className="flex items-end space-x-2">
+            <div className="flex-grow">
+              {i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
+              <Controller
+                control={control}
+                name={`metadata.${i}.key`}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    className="mb-0"
+                  >
+                    <Input {...field} className="max-h-8" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="flex-grow">
+              {i === 0 && (
+                <FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
+              )}
+              <Controller
+                control={control}
+                name={`metadata.${i}.value`}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    className="mb-0"
+                  >
+                    <Input {...field} className="max-h-8" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <IconButton
+              ariaLabel="delete key"
+              className="bottom-0.5 max-h-8"
+              variant="outline_bg"
+              onClick={() => metadataFormFields.remove(i)}
+            >
+              <FontAwesomeIcon icon={faTrash} />
+            </IconButton>
+          </div>
+        ))}
+        <div className={`${metadataFormFields.fields.length > 0 ? "pt-2" : ""}`}>
+          <IconButton
+            ariaLabel="Add Key"
+            variant="outline_bg"
+            size="xs"
+            className="rounded-md"
+            onClick={() => metadataFormFields.append({ key: "", value: "" })}
+          >
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        </div>
+      </div>
+    </FormControl>
+  );
+};