Merge branch 'main' into feat/addProjectDeletionProtection

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -207,7 +207,8 @@ export const OverviewPage = () => {
       ProjectPermissionDynamicSecretActions.CreateRootCredential,
       subject(ProjectPermissionSub.DynamicSecrets, {
         environment: env.slug,
-        secretPath
+        secretPath,
+        metadata: ["*"]
       })
     )
   );

frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx

@@ -138,7 +138,7 @@ const Page = () => {
 
   const canReadDynamicSecret = permission.can(
     ProjectPermissionDynamicSecretActions.ReadRootCredential,
-    subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })
+    subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath, metadata: ["*"] })
   );
 
   const canReadSecretRotations = permission.can(
@@ -532,7 +532,7 @@ const Page = () => {
                   importedBy={importedBy}
                 />
               )}
-              {canReadSecret && <SecretNoAccessListView count={noAccessSecretCount} />}
+              {noAccessSecretCount > 0 && <SecretNoAccessListView count={noAccessSecretCount} />}
               {!canReadSecret &&
                 !canReadDynamicSecret &&
                 !canReadSecretImports &&

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

@@ -864,7 +864,8 @@ export const ActionBar = ({
                     environment,
                     secretPath,
                     secretName: "*",
-                    secretTags: ["*"]
+                    secretTags: ["*"],
+                    metadata: ["*"]
                   })}
                 >
                   {(isAllowed) => (

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/DynamicSecretLease.tsx

@@ -29,11 +29,13 @@ import {
 import { ProjectPermissionDynamicSecretActions, ProjectPermissionSub } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useGetDynamicSecretLeases, useRevokeDynamicSecretLease } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
 import { DynamicSecretLeaseStatus } from "@app/hooks/api/dynamicSecretLease/types";
 
 import { RenewDynamicSecretLease } from "./RenewDynamicSecretLease";
 
 type Props = {
+  dynamicSecret: TDynamicSecret;
   dynamicSecretName: string;
   projectSlug: string;
   environment: string;
@@ -48,7 +50,8 @@ export const DynamicSecretLease = ({
   environment,
   secretPath,
   onClickNewLease,
-  onClose
+  onClose,
+  dynamicSecret
 }: Props) => {
   const { handlePopUpOpen, popUp, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "deleteSecret",
@@ -140,7 +143,11 @@ export const DynamicSecretLease = ({
                   <div className="flex items-center space-x-4">
                     <ProjectPermissionCan
                       I={ProjectPermissionDynamicSecretActions.Lease}
-                      a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                      a={subject(ProjectPermissionSub.DynamicSecrets, {
+                        environment,
+                        secretPath,
+                        metadata: dynamicSecret.metadata
+                      })}
                       renderTooltip
                       allowedLabel="Renew"
                     >
@@ -159,7 +166,11 @@ export const DynamicSecretLease = ({
                     </ProjectPermissionCan>
                     <ProjectPermissionCan
                       I={ProjectPermissionDynamicSecretActions.Lease}
-                      a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                      a={subject(ProjectPermissionSub.DynamicSecrets, {
+                        environment,
+                        secretPath,
+                        metadata: dynamicSecret.metadata
+                      })}
                       renderTooltip
                       allowedLabel="Delete"
                     >
@@ -181,7 +192,8 @@ export const DynamicSecretLease = ({
                         I={ProjectPermissionDynamicSecretActions.Lease}
                         a={subject(ProjectPermissionSub.DynamicSecrets, {
                           environment,
-                          secretPath
+                          secretPath,
+                          metadata: dynamicSecret.metadata
                         })}
                         renderTooltip
                         allowedLabel="Force Delete. This action will remove the secret from internal storage, but it will remain in external systems."
@@ -215,7 +227,8 @@ export const DynamicSecretLease = ({
             I={ProjectPermissionDynamicSecretActions.Lease}
             a={subject(ProjectPermissionSub.DynamicSecrets, {
               environment,
-              secretPath
+              secretPath,
+              metadata: dynamicSecret.metadata
             })}
           >
             {(isAllowed) => (

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

@@ -144,7 +144,11 @@ export const DynamicSecretListView = ({
               <div className="flex items-center space-x-2 px-4 py-2">
                 <ProjectPermissionCan
                   I={ProjectPermissionDynamicSecretActions.Lease}
-                  a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                  a={subject(ProjectPermissionSub.DynamicSecrets, {
+                    environment,
+                    secretPath,
+                    metadata: secret.metadata
+                  })}
                   renderTooltip
                   allowedLabel="Edit"
                 >
@@ -186,7 +190,11 @@ export const DynamicSecretListView = ({
               <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
                 <ProjectPermissionCan
                   I={ProjectPermissionDynamicSecretActions.EditRootCredential}
-                  a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                  a={subject(ProjectPermissionSub.DynamicSecrets, {
+                    environment,
+                    secretPath,
+                    metadata: secret.metadata
+                  })}
                   renderTooltip
                   allowedLabel="Edit"
                 >
@@ -208,7 +216,11 @@ export const DynamicSecretListView = ({
                 </ProjectPermissionCan>
                 <ProjectPermissionCan
                   I={ProjectPermissionDynamicSecretActions.DeleteRootCredential}
-                  a={subject(ProjectPermissionSub.DynamicSecrets, { environment, secretPath })}
+                  a={subject(ProjectPermissionSub.DynamicSecrets, {
+                    environment,
+                    secretPath,
+                    metadata: secret.metadata
+                  })}
                   renderTooltip
                   allowedLabel="Delete"
                 >
@@ -236,6 +248,7 @@ export const DynamicSecretListView = ({
               className="max-w-3xl"
             >
               <DynamicSecretLease
+                dynamicSecret={secret}
                 onClickNewLease={() => handlePopUpOpen("createDynamicSecretLease", secret)}
                 onClose={() => handlePopUpClose("dynamicSecretLeases")}
                 projectSlug={projectSlug}

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>
+  );
+};