feat(pam): account credential rotation

frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/PostgresResourceForm.tsx

@@ -5,9 +5,11 @@ import { z } from "zod";
 
 import { Button, ModalClose } from "@app/components/v2";
 import { PamResourceType, TPostgresResource } from "@app/hooks/api/pam";
+import { BaseSqlAccountSchema } from "@app/pages/pam/PamAccountsPage/components/PamAccountForm/shared/sql-account-schemas";
 
 import { BaseSqlResourceSchema } from "./shared/sql-resource-schemas";
 import { SqlResourceFields } from "./shared/SqlResourceFields";
+import { SqlRotateAccountFields } from "./shared/SqlRotateAccountFields";
 import { GenericResourceFields, genericResourceFieldsSchema } from "./GenericResourceFields";
 
 type Props = {
@@ -17,7 +19,8 @@ type Props = {
 
 const formSchema = genericResourceFieldsSchema.extend({
   resourceType: z.literal(PamResourceType.Postgres),
-  connectionDetails: BaseSqlResourceSchema
+  connectionDetails: BaseSqlResourceSchema,
+  rotationAccountCredentials: BaseSqlAccountSchema.nullable().optional()
 });
 
 type FormData = z.infer<typeof formSchema>;
@@ -59,6 +62,7 @@ export const PostgresResourceForm = ({ resource, onSubmit }: Props) => {
           selectedTabIndex={selectedTabIndex}
           setSelectedTabIndex={setSelectedTabIndex}
         />
+        <SqlRotateAccountFields />
         <div className="mt-6 flex items-center">
           <Button
             className="mr-4"

frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SqlRotateAccountFields.tsx

@@ -0,0 +1,64 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  FormControl,
+  Input,
+  SecretInput
+} from "@app/components/v2";
+
+export const SqlRotateAccountFields = () => {
+  const { control } = useFormContext();
+
+  return (
+    <Accordion type="single" collapsible className="w-full">
+      <AccordionItem value="advance-settings" className="data-[state=open]:border-none">
+        <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
+          <div className="order-1 ml-3">Credential Rotation Account</div>
+        </AccordionTrigger>
+        <AccordionContent childrenClassName="px-0 py-0">
+          <p className="mb-2 text-xs">
+            Credentials to the high privilege account which will be used for rotating other accounts
+            under this resource
+          </p>
+          <div className="flex gap-2">
+            <Controller
+              name="rotationAccountCredentials.username"
+              control={control}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  className="mb-0 flex-1"
+                  errorText={error?.message}
+                  isError={Boolean(error?.message)}
+                  label="Username"
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <Controller
+              name="rotationAccountCredentials.password"
+              control={control}
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  className="mb-0 flex-1"
+                  errorText={error?.message}
+                  isError={Boolean(error?.message)}
+                  label="Password"
+                >
+                  <SecretInput
+                    containerClassName="text-gray-400 group-focus-within:border-primary-400/50! border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                    {...field}
+                  />
+                </FormControl>
+              )}
+            />
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};