Change Azure Client Secret Rotation to show app client id

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAzureClientSecretRotationGeneratedCredentials.tsx

@@ -19,7 +19,7 @@ export const ViewAzureClientSecretRotationGeneratedCredentials = ({
     <ViewRotationGeneratedCredentialsDisplay
       activeCredentials={
         <>
-          <CredentialDisplay label="Secret ID">{activeCredentials?.clientId}</CredentialDisplay>
+          <CredentialDisplay label="Client ID">{activeCredentials?.clientId}</CredentialDisplay>
           <CredentialDisplay isSensitive label="Client Secret">
             {activeCredentials?.clientSecret}
           </CredentialDisplay>
@@ -27,7 +27,7 @@ export const ViewAzureClientSecretRotationGeneratedCredentials = ({
       }
       inactiveCredentials={
         <>
-          <CredentialDisplay label="Secret ID">{inactiveCredentials?.clientId}</CredentialDisplay>
+          <CredentialDisplay label="Client ID">{inactiveCredentials?.clientId}</CredentialDisplay>
           <CredentialDisplay isSensitive label="Client Secret">
             {inactiveCredentials?.clientSecret}
           </CredentialDisplay>

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

@@ -61,6 +61,7 @@ export const AzureClientSecretRotationParametersFields = () => {
             onChange={(option) => {
               onChange((option as SingleValue<TAzureClient>)?.id ?? null);
               setValue("parameters.appName", (option as SingleValue<TAzureClient>)?.name ?? "");
+              setValue("parameters.clientId", (option as SingleValue<TAzureClient>)?.appId ?? "");
             }}
             options={clients}
             placeholder="Select an application..."

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

@@ -16,6 +16,24 @@ export const AzureClientSecretRotationSecretsMappingFields = () => {
   const { rotationOption } = useSecretRotationV2Option(SecretRotation.AzureClientSecret);
 
   const items = [
+    {
+      name: "Client ID",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.clientId}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.clientId"
+        />
+      )
+    },
     {
       name: "Client Secret",
       input: (

frontend/src/components/secret-rotations-v2/forms/schemas/azure-client-secret-rotation-schema.ts

@@ -8,7 +8,8 @@ export const AzureClientSecretRotationSchema = z
     type: z.literal(SecretRotation.AzureClientSecret),
     parameters: z.object({
       appId: z.string().trim().min(1, "App ID required"),
-      appName: z.string().trim().min(1, "App Name required")
+      appName: z.string().trim().min(1, "App Name required"),
+      clientId: z.string().trim().min(1, "Client ID required")
     }),
     secretsMapping: z.object({
       clientId: z.string().trim().min(1, "Client ID required"),

frontend/src/hooks/api/appConnections/azure/types.ts

@@ -1,4 +1,5 @@
 export type TAzureClient = {
   name: string;
+  appId: string;
   id: string;
 };