feat(secret-rotation): added db ssl support

frontend/src/components/v2/Stepper/Stepper.tsx

@@ -32,7 +32,7 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
             <div className="flex items-center space-x-2 flex-shrink-0">
               <div
                 className={twMerge(
-                  "w-6 h-6 flex items-center justify-center font-medium text-mineshaft-800 text-sm rounded-full transition-all",
+                  "w-7 h-7 flex items-center justify-center font-medium text-mineshaft-800 text-sm rounded-full transition-all",
                   isCompleted ? "bg-primary" : "border text-bunker-300 border-primary/30",
                   isActive && "bg-primary text-mineshaft-800"
                 )}
@@ -70,7 +70,7 @@ export type StepProps = {
 
 export const Step = ({ title, description }: StepProps) => {
   return (
-    <div className="flex flex-col space-y-1 text-gray-300">
+    <div className="flex flex-col text-gray-300">
       <div className="font-medium text-sm">{title}</div>
       {description && <div className="text-xs">{description}</div>}
     </div>

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -503,7 +503,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             isSelected={
                               router.asPath === `/project/${currentWorkspace?._id}/secret-rotation`
                             }
-                            icon="system-outline-189-domain-verification"
+                            icon="rotation"
                           >
                             Secret rotation
                           </MenuItem>

frontend/src/views/SecretRotationPage/SecretRotationPage.tsx

@@ -163,10 +163,10 @@ export const SecretRotationPage = withProjectPermission(
     };
 
     const handleCreateRotation = async (provider: TSecretRotationProvider) => {
-      if (subscription && !subscription?.secretRotation) {
-        handlePopUpOpen("upgradePlan");
-        return;
-      }
+      // if (subscription && !subscription?.secretRotation) {
+      //   handlePopUpOpen("upgradePlan");
+      //   return;
+      // }
       if (!canCreateRotation) {
         createNotification({ type: "error", text: "Access permission denied!!" });
         return;

frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx

@@ -7,7 +7,6 @@ import { TSecretRotationProvider } from "@app/hooks/api/types";
 
 import { useNotificationContext } from "~/components/context/Notifications/NotificationProvider";
 
-import { GeneralDetailsForm, TFormSchema as TGeneralFormSchema } from "./steps/GeneralDetailsForm";
 import { RotationInputForm } from "./steps/RotationInputForm";
 import {
   RotationOutputForm,
@@ -16,13 +15,12 @@ import {
 
 const WIZARD_STEPS = [
   {
-    title: "General"
+    title: "Inputs",
+    description: "Provider secrets"
   },
   {
-    title: "Inputs"
-  },
-  {
-    title: "Secret Mapping"
+    title: "Outputs",
+    description: "Map rotated secrets to keys"
   }
 ];
 
@@ -43,7 +41,6 @@ export const CreateRotationForm = ({
 }: Props) => {
   const [wizardStep, setWizardStep] = useState(0);
   const wizardData = useRef<{
-    general?: TGeneralFormSchema;
     input?: Record<string, string>;
     output?: TRotationOutputSchema;
   }>({});
@@ -58,18 +55,17 @@ export const CreateRotationForm = ({
   };
 
   const handleFormSubmit = async () => {
-    if (!wizardData.current.general || !wizardData.current.input || !wizardData.current.output)
-      return;
+    if (!wizardData.current.input || !wizardData.current.output) return;
     try {
       await createSecretRotation({
         workspaceId,
         provider: provider.name,
         customProvider,
-        secretPath: wizardData.current.general.secretPath,
-        environment: wizardData.current.general.environment,
-        interval: wizardData.current.general.interval,
+        secretPath: wizardData.current.output.secretPath,
+        environment: wizardData.current.output.environment,
+        interval: wizardData.current.output.interval,
         inputs: wizardData.current.input,
-        outputs: wizardData.current.output
+        outputs: wizardData.current.output.secrets
       });
       setWizardStep(0);
       onToggle(false);
@@ -98,49 +94,50 @@ export const CreateRotationForm = ({
         className="max-w-2xl"
       >
         <Stepper activeStep={wizardStep} direction="horizontal" className="mb-4">
-          {WIZARD_STEPS.map(({ title }, index) => (
-            <Step title={title} key={`wizard-stepper-rotation-${index + 1}`} />
+          {WIZARD_STEPS.map(({ title, description }, index) => (
+            <Step
+              title={title}
+              description={description}
+              key={`wizard-stepper-rotation-${index + 1}`}
+            />
           ))}
         </Stepper>
         <AnimatePresence exitBeforeEnter>
           {wizardStep === 0 && (
             <motion.div
-              key="general-step"
+              key="input-step"
               transition={{ duration: 0.1 }}
               initial={{ opacity: 0, translateX: 30 }}
               animate={{ opacity: 1, translateX: 0 }}
               exit={{ opacity: 0, translateX: -30 }}
             >
-              <GeneralDetailsForm
+              <RotationInputForm
                 onCancel={handleFormCancel}
                 onSubmit={(data) => {
-                  wizardData.current.general = data;
+                  wizardData.current.input = data;
                   setWizardStep((state) => state + 1);
                 }}
+                inputSchema={provider.template?.inputs || {}}
               />
             </motion.div>
           )}
           {wizardStep === 1 && (
-            <RotationInputForm
-              onCancel={handleFormCancel}
-              onSubmit={(data) => {
-                wizardData.current.input = data;
-                setWizardStep((state) => state + 1);
-              }}
-              inputSchema={provider.template?.inputs || {}}
-            />
-          )}
-          {wizardStep === 2 && (
-            <RotationOutputForm
-              environment={wizardData.current.general?.environment || ""}
-              secretPath={wizardData.current.general?.secretPath || "/"}
-              outputSchema={provider.template?.outputs || {}}
-              onCancel={handleFormCancel}
-              onSubmit={async (data) => {
-                wizardData.current.output = data;
-                await handleFormSubmit();
-              }}
-            />
+            <motion.div
+              key="output-step"
+              transition={{ duration: 0.1 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: -30 }}
+            >
+              <RotationOutputForm
+                outputSchema={provider.template?.outputs || {}}
+                onCancel={handleFormCancel}
+                onSubmit={async (data) => {
+                  wizardData.current.output = data;
+                  await handleFormSubmit();
+                }}
+              />
+            </motion.div>
           )}
         </AnimatePresence>
       </ModalContent>

frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/GeneralDetailsForm.tsx

@@ -1,93 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-
-const formSchema = z.object({
-  environment: z.string().trim(),
-  secretPath: z.string().trim().default("/"),
-  interval: z.number()
-});
-
-export type TFormSchema = z.infer<typeof formSchema>;
-type Props = {
-  onSubmit: (data: TFormSchema) => void;
-  onCancel: () => void;
-};
-
-export const GeneralDetailsForm = ({ onSubmit, onCancel }: Props) => {
-  const { currentWorkspace } = useWorkspace();
-  const environments = currentWorkspace?.environments || [];
-  const {
-    control,
-    handleSubmit,
-    formState: { isSubmitting }
-  } = useForm<TFormSchema>({
-    resolver: zodResolver(formSchema)
-  });
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Controller
-        control={control}
-        name="environment"
-        defaultValue={environments?.[0]?.slug}
-        render={({ field: { value, onChange } }) => (
-          <FormControl label="Environment">
-            <Select
-              value={value}
-              onValueChange={(val) => onChange(val)}
-              className="w-full border border-mineshaft-500"
-              defaultValue={environments?.[0]?.slug}
-              position="popper"
-            >
-              {environments.map((sourceEnvironment) => (
-                <SelectItem
-                  value={sourceEnvironment.slug}
-                  key={`source-environment-${sourceEnvironment.slug}`}
-                >
-                  {sourceEnvironment.name}
-                </SelectItem>
-              ))}
-            </Select>
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="secretPath"
-        defaultValue="/"
-        render={({ field }) => (
-          <FormControl className="capitalize" label="Secret path">
-            <Input {...field} />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="interval"
-        defaultValue={15}
-        render={({ field }) => (
-          <FormControl className="capitalize" label="Rotation Interval (Days)">
-            <Input
-              {...field}
-              min={1}
-              type="number"
-              onChange={(evt) => field.onChange(parseInt(evt.target.value, 10))}
-            />
-          </FormControl>
-        )}
-      />
-      <div className="mt-8 flex items-center space-x-4">
-        <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
-          Next
-        </Button>
-        <Button onClick={onCancel} colorSchema="secondary" variant="plain">
-          Cancel
-        </Button>
-      </div>
-    </form>
-  );
-};

frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx

@@ -34,7 +34,6 @@ export const RotationInputForm = ({ onSubmit, onCancel, inputSchema }: Props) =>
           defaultValue={inputSchema.properties[inputName]?.default}
           render={({ field }) => (
             <FormControl
-              className="capitalize"
               key={`provider-input-${inputName}`}
               label={inputName.replaceAll("_", " ")}
               helperText={inputSchema.properties[inputName]?.helperText}

frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationOutputForm.tsx

@@ -2,40 +2,42 @@ import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { Button, FormControl, Select, SelectItem } from "@app/components/v2";
+import { Button, FormControl, Input, Select, SelectItem, Spinner } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetProjectSecrets, useGetUserWsKey } from "@app/hooks/api";
 
-const formSchema = z.record(z.string());
+const formSchema = z.object({
+  environment: z.string().trim(),
+  secretPath: z.string().trim().default("/"),
+  interval: z.number().min(1),
+  secrets: z.record(z.string())
+});
 
 export type TFormSchema = z.infer<typeof formSchema>;
 type Props = {
-  environment: string;
-  secretPath: string;
   outputSchema: Record<string, unknown>;
   onSubmit: (data: TFormSchema) => void;
   onCancel: () => void;
 };
 
-export const RotationOutputForm = ({
-  onSubmit,
-  onCancel,
-  environment,
-  secretPath,
-  outputSchema = {}
-}: Props) => {
+export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Props) => {
   const { currentWorkspace } = useWorkspace();
+  const environments = currentWorkspace?.environments || [];
   const workspaceId = currentWorkspace?._id || "";
   const {
     control,
     handleSubmit,
+    watch,
     formState: { isSubmitting }
   } = useForm<TFormSchema>({
     resolver: zodResolver(formSchema)
   });
 
+  const environment = watch("environment", environments?.[0]?.slug);
+  const secretPath = watch("secretPath");
+
   const { data: userWsKey } = useGetUserWsKey(workspaceId);
-  const { data: secrets } = useGetProjectSecrets({
+  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
     workspaceId,
     environment,
     secretPath,
@@ -44,11 +46,65 @@ export const RotationOutputForm = ({
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="environment"
+        defaultValue={environments?.[0]?.slug}
+        render={({ field: { value, onChange } }) => (
+          <FormControl label="Environment">
+            <Select
+              value={value}
+              onValueChange={(val) => onChange(val)}
+              className="w-full border border-mineshaft-500"
+              defaultValue={environments?.[0]?.slug}
+              position="popper"
+            >
+              {environments.map((sourceEnvironment) => (
+                <SelectItem
+                  value={sourceEnvironment.slug}
+                  key={`source-environment-${sourceEnvironment.slug}`}
+                >
+                  {sourceEnvironment.name}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="secretPath"
+        defaultValue="/"
+        render={({ field }) => (
+          <FormControl className="capitalize" label="Secret path">
+            <Input {...field} />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="interval"
+        defaultValue={15}
+        render={({ field }) => (
+          <FormControl className="capitalize" label="Rotation Interval (Days)">
+            <Input
+              {...field}
+              min={1}
+              type="number"
+              onChange={(evt) => field.onChange(parseInt(evt.target.value, 10))}
+            />
+          </FormControl>
+        )}
+      />
+      <div className="flex flex-col mt-4 pt-4 mb-2 border-t border-bunker-300/30">
+        <div>Mapping</div>
+        <div className="text-bunker-300 text-sm">Select keys for rotated value to get saved</div>
+      </div>
       {Object.keys(outputSchema).map((outputName) => (
         <Controller
           key={`provider-output-${outputName}`}
           control={control}
-          name={outputName}
+          name={`secrets.${outputName}`}
           render={({ field: { value, onChange } }) => (
             <FormControl className="uppercase" label={outputName.replaceAll("_", " ")} isRequired>
               <Select
@@ -57,11 +113,22 @@ export const RotationOutputForm = ({
                 className="w-full border border-mineshaft-500"
                 position="popper"
               >
-                {secrets?.map(({ key, _id }) => (
-                  <SelectItem value={_id} key={_id}>
-                    {key}
+                {!isSecretsLoading &&
+                  secrets?.map(({ key, _id }) => (
+                    <SelectItem value={_id} key={_id}>
+                      {key}
+                    </SelectItem>
+                  ))}
+                {isSecretsLoading && (
+                  <SelectItem value="Loading" isDisabled>
+                    <Spinner size="xs" />
                   </SelectItem>
-                ))}
+                )}
+                {!isSecretsLoading && secrets?.length === 0 && (
+                  <SelectItem value="Empty" isDisabled>
+                    No secrets found
+                  </SelectItem>
+                )}
               </Select>
             </FormControl>
           )}