improvements: address feedback

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx

@@ -1,8 +1,14 @@
 import { Controller, useFormContext } from "react-hook-form";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format, setHours, setMinutes } from "date-fns";
 
 import { FilterableSelect, FormControl, Input, Switch } from "@app/components/v2";
-import { getRotateAtLocal } from "@app/helpers/secretRotationsV2";
+import {
+  getRotateAtLocal,
+  IS_ROTATION_DUAL_CREDENTIALS,
+  SECRET_ROTATION_MAP
+} from "@app/helpers/secretRotationsV2";
 import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
 
 import { TSecretRotationV2Form } from "./schemas";
@@ -14,7 +20,9 @@ type Props = {
 };
 
 export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }: Props) => {
-  const { control } = useFormContext<TSecretRotationV2Form>();
+  const { control, watch } = useFormContext<TSecretRotationV2Form>();
+
+  const [type, isAutoRotationEnabled] = watch(["type", "isAutoRotationEnabled"]);
 
   return (
     <>
@@ -117,6 +125,14 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
           );
         }}
       />
+      {!IS_ROTATION_DUAL_CREDENTIALS[type] && isAutoRotationEnabled && (
+        <div className="rounded border border-yellow bg-yellow/10 p-2 px-3 text-sm text-yellow">
+          <FontAwesomeIcon icon={faWarning} className="mr-1" /> Due to{" "}
+          {SECRET_ROTATION_MAP[type].name} Rotations rotating a single credential set, auto-rotation
+          may result in service interruptions. If you need to ensure service continuity, we
+          recommend disabling this option.
+        </div>
+      )}
     </>
   );
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx

@@ -12,7 +12,7 @@ import { SecretRotationV2ReviewFields } from "@app/components/secret-rotations-v
 import { SecretRotationV2SecretsMappingFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields";
 import { Button } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
-import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { IS_ROTATION_DUAL_CREDENTIALS, SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
 import {
   SecretRotation,
   TSecretRotationV2,
@@ -84,7 +84,7 @@ export const SecretRotationV2Form = ({
         }
       : {
           type,
-          isAutoRotationEnabled: true,
+          isAutoRotationEnabled: IS_ROTATION_DUAL_CREDENTIALS[type],
           rotationInterval: DEFAULT_ROTATION_INTERVAL,
           rotateAtUtc: {
             hours: 0,

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/Auth0ClientSecretRotationParametersFields.tsx

@@ -1,30 +1,70 @@
 import { Controller, useFormContext } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
-import { FormControl, Input } from "@app/components/v2";
+import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import { useAuth0ConnectionListClients } from "@app/hooks/api/appConnections/auth0";
+import { TAuth0Client } from "@app/hooks/api/appConnections/auth0/types";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 
 export const Auth0ClientSecretRotationParametersFields = () => {
-  const { control } = useFormContext<
+  const { control, watch } = useFormContext<
     TSecretRotationV2Form & {
       type: SecretRotation.Auth0ClientSecret;
     }
   >();
 
+  const connectionId = watch("connection.id");
+
+  const { data: clients, isPending: isClientsPending } = useAuth0ConnectionListClients(
+    connectionId,
+    { enabled: Boolean(connectionId) }
+  );
+
   return (
     <Controller
+      name="parameters.clientId"
+      control={control}
       render={({ field: { value, onChange }, fieldState: { error } }) => (
         <FormControl
-          tooltipText="The Client ID of the Auth0 Application you want to rotate the client secret for."
           isError={Boolean(error)}
           errorText={error?.message}
-          label="Client ID"
+          label="Application"
+          helperText={
+            <Tooltip
+              className="max-w-md"
+              content={
+                <>
+                  Ensure that your connection has the{" "}
+                  <span className="font-semibold">read_clients</span> permission and the application
+                  exists in the connection&#39;s audience.
+                </>
+              }
+            >
+              <div>
+                <span>Don&#39;t see the application you&#39;re looking for?</span>{" "}
+                <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+              </div>
+            </Tooltip>
+          }
         >
-          <Input value={value} onChange={onChange} />
+          <FilterableSelect
+            menuPlacement="top"
+            isLoading={isClientsPending && Boolean(connectionId)}
+            isDisabled={!connectionId}
+            value={clients?.find((client) => client.id === value) ?? null}
+            onChange={(option) => {
+              onChange((option as SingleValue<TAuth0Client>)?.id ?? null);
+            }}
+            options={clients}
+            placeholder="Select an application..."
+            getOptionLabel={(option) => option.name}
+            getOptionValue={(option) => option.id}
+          />
         </FormControl>
       )}
-      control={control}
-      name="parameters.clientId"
     />
   );
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlCredentialsRotationParametersFields.tsx

@@ -8,7 +8,7 @@ import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secret
 export const SqlCredentialsRotationParametersFields = () => {
   const { control, watch } = useFormContext<
     TSecretRotationV2Form & {
-      type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
+      type: SecretRotation.PostgresCredentials | SecretRotation.MsSqlCredentials;
     }
   >();
 

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SqlCredentialsRotationReviewFields.tsx

@@ -9,7 +9,7 @@ import { SecretRotationReviewSection } from "./SecretRotationReviewSection";
 export const SqlCredentialsRotationReviewFields = () => {
   const { watch } = useFormContext<
     TSecretRotationV2Form & {
-      type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
+      type: SecretRotation.PostgresCredentials | SecretRotation.MsSqlCredentials;
     }
   >();
 

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SqlCredentialsRotationSecretsMappingFields.tsx

@@ -9,7 +9,7 @@ import { SecretsMappingTable } from "./SecretsMappingTable";
 export const SqlCredentialsRotationSecretsMappingFields = () => {
   const { control, watch } = useFormContext<
     TSecretRotationV2Form & {
-      type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
+      type: SecretRotation.PostgresCredentials | SecretRotation.MsSqlCredentials;
     }
   >();