feat(pam): account credential rotation

frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/PamAccountForm.tsx

@@ -37,7 +37,10 @@ const CreateForm = ({
   console.log({ folderId });
 
   const onSubmit = async (
-    formData: DiscriminativePick<TPamAccount, "name" | "description" | "credentials">
+    formData: DiscriminativePick<
+      TPamAccount,
+      "name" | "description" | "credentials" | "rotationEnabled" | "rotationIntervalSeconds"
+    >
   ) => {
     try {
       const account = await createPamAccount.mutateAsync({
@@ -74,7 +77,10 @@ const UpdateForm = ({ account, onComplete }: UpdateFormProps) => {
   const updatePamAccount = useUpdatePamAccount();
 
   const onSubmit = async (
-    formData: DiscriminativePick<TPamAccount, "name" | "description" | "credentials">
+    formData: DiscriminativePick<
+      TPamAccount,
+      "name" | "description" | "credentials" | "rotationEnabled" | "rotationIntervalSeconds"
+    >
   ) => {
     try {
       const updatedAccount = await updatePamAccount.mutateAsync({

frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/PostgresAccountForm.tsx

@@ -8,13 +8,14 @@ import { TPostgresAccount } from "@app/hooks/api/pam";
 import { BaseSqlAccountSchema } from "./shared/sql-account-schemas";
 import { SqlAccountFields } from "./shared/SqlAccountFields";
 import { GenericAccountFields, genericAccountFieldsSchema } from "./GenericAccountFields";
+import { RotateAccountFields, rotateAccountFieldsSchema } from "./RotateAccountFields";
 
 type Props = {
   account?: TPostgresAccount;
   onSubmit: (formData: FormData) => Promise<void>;
 };
 
-const formSchema = genericAccountFieldsSchema.extend({
+const formSchema = genericAccountFieldsSchema.extend(rotateAccountFieldsSchema.shape).extend({
   credentials: BaseSqlAccountSchema
 });
 
@@ -50,6 +51,7 @@ export const PostgresAccountForm = ({ account, onSubmit }: Props) => {
       >
         <GenericAccountFields />
         <SqlAccountFields isUpdate={isUpdate} />
+        <RotateAccountFields />
         <div className="mt-6 flex items-center">
           <Button
             className="mr-4"

frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/RotateAccountFields.tsx

@@ -0,0 +1,71 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { z } from "zod";
+
+import { FormControl, Select, SelectItem, Switch } from "@app/components/v2";
+
+export const rotateAccountFieldsSchema = z.object({
+  rotationEnabled: z.boolean(),
+  rotationIntervalSeconds: z.number()
+});
+
+export const RotateAccountFields = () => {
+  const { control, watch } = useFormContext<{
+    rotationEnabled: boolean;
+    rotationIntervalSeconds: number;
+  }>();
+
+  const rotationEnabled = watch("rotationEnabled");
+
+  return (
+    <div className="flex h-9 items-center gap-3">
+      <Controller
+        control={control}
+        name="rotationEnabled"
+        defaultValue={false}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message} className="mb-0">
+            <Switch
+              className="ml-0 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+              id="can-remove-certificates"
+              thumbClassName="bg-mineshaft-800"
+              onCheckedChange={onChange}
+              isChecked={value}
+            />
+          </FormControl>
+        )}
+      />
+      <span className="text-sm">Rotate Credentials Every</span>
+
+      <Controller
+        name="rotationIntervalSeconds"
+        control={control}
+        defaultValue={2592000}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            errorText={error?.message}
+            isError={Boolean(error?.message)}
+            className="mb-0"
+          >
+            <Select
+              value={value.toString()}
+              onValueChange={(val) => onChange(parseInt(val, 10))}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              placeholder="Select an interval..."
+              dropdownContainerClassName="max-w-none"
+              isDisabled={!rotationEnabled}
+              dropdownContainerStyle={{
+                width: "120px"
+              }}
+            >
+              <SelectItem value="2592000">30 Days</SelectItem>
+              <SelectItem value="604800">7 Days</SelectItem>
+              <SelectItem value="259200">3 Days</SelectItem>
+              <SelectItem value="86400">1 Day</SelectItem>
+            </Select>
+          </FormControl>
+        )}
+      />
+    </div>
+  );
+};