fix: requested changes

backend/src/lib/api-docs/constants.ts

@@ -1126,8 +1126,7 @@ export const INTEGRATION = {
       shouldAutoRedeploy: "Used by Render to trigger auto deploy.",
       secretGCPLabel: "The label for GCP secrets.",
       secretAWSTag: "The tags for AWS secrets.",
-      azureUseLabels:
-        "If enabled, each secret will be given a label that represents which Infisical environment they belong to.",
+      azureLabel: "Define which label to assign to secrets created in Azure App Configuration.",
       githubVisibility:
         "Define where the secrets from the Github Integration should be visible. Option 'selected' lets you directly define which repositories to sync secrets to.",
       githubVisibilityRepoIds:

backend/src/services/integration-auth/integration-sync-secret.ts

@@ -422,9 +422,9 @@ const syncSecretsAzureAppConfig = async ({
           })
         },
         {
-          ...(metadata.azureUseLabels && {
+          ...(metadata.azureLabel && {
             params: {
-              label: integration.environment.slug
+              label: metadata.azureLabel
             }
           }),
 
@@ -447,9 +447,9 @@ const syncSecretsAzureAppConfig = async ({
         headers: {
           Authorization: `Bearer ${accessToken}`
         },
-        ...(metadata.azureUseLabels && {
+        ...(metadata.azureLabel && {
           params: {
-            label: integration.environment.slug
+            label: metadata.azureLabel
           }
         }),
         // we force IPV4 because docker setup fails with ipv6

backend/src/services/integration/integration-schema.ts

@@ -35,7 +35,7 @@ export const IntegrationMetadataSchema = z.object({
     .optional()
     .describe(INTEGRATION.CREATE.metadata.secretAWSTag),
 
-  azureUseLabels: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.azureUseLabels),
+  azureLabel: z.string().optional().describe(INTEGRATION.CREATE.metadata.azureLabel),
 
   githubVisibility: z
     .union([z.literal("selected"), z.literal("private"), z.literal("all")])

frontend/src/hooks/api/integrations/queries.tsx

@@ -80,7 +80,7 @@ export const useCreateIntegration = () => {
           key: string;
           value: string;
         }[];
-        azureUseLabels?: boolean;
+        azureLabel?: string;
         githubVisibility?: string;
         githubVisibilityRepoIds?: string[];
         kmsKeyId?: string;

frontend/src/hooks/api/integrations/types.ts

@@ -41,6 +41,7 @@ export type TIntegration = {
       key: string;
       value: string;
     }[];
+    azureLabel?: string;
 
     kmsKeyId?: string;
     secretSuffix?: string;

frontend/src/pages/integrations/azure-app-configuration/create.tsx

@@ -14,6 +14,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import queryString from "query-string";
 import { z } from "zod";
 
+import { createNotification } from "@app/components/notifications";
 import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { useCreateIntegration } from "@app/hooks/api";
 import { IntegrationSyncBehavior } from "@app/hooks/api/integrations/types";
@@ -46,7 +47,8 @@ const schema = z.object({
   sourceEnvironment: z.string().trim().min(1, { message: "Source environment is required" }),
   initialSyncBehavior: z.nativeEnum(IntegrationSyncBehavior),
   secretPrefix: z.string().default(""),
-  useLabels: z.boolean().default(false)
+  useLabels: z.boolean().default(false),
+  azureLabel: z.string().min(1).optional()
 });
 
 type TFormSchema = z.infer<typeof schema>;
@@ -93,7 +95,7 @@ export default function AzureAppConfigurationCreateIntegration() {
     }
   }, [workspace]);
 
-  const sourceEnv = watch("sourceEnvironment");
+  const shouldUseLabels = watch("useLabels");
 
   const handleIntegrationSubmit = async ({
     secretPath,
@@ -101,11 +103,20 @@ export default function AzureAppConfigurationCreateIntegration() {
     sourceEnvironment,
     baseUrl,
     initialSyncBehavior,
-    secretPrefix
+    secretPrefix,
+    azureLabel
   }: TFormSchema) => {
     try {
       if (!integrationAuth?.id) return;
 
+      if (useLabels && !azureLabel) {
+        createNotification({
+          type: "error",
+          text: "Label must be provided when 'Use Labels' is enabled"
+        });
+        return;
+      }
+
       await mutateAsync({
         integrationAuthId: integrationAuth?.id,
         isActive: true,
@@ -115,7 +126,7 @@ export default function AzureAppConfigurationCreateIntegration() {
         metadata: {
           initialSyncBehavior,
           secretPrefix,
-          azureUseLabels: useLabels
+          ...(useLabels && { azureLabel })
         }
       });
 
@@ -167,7 +178,7 @@ export default function AzureAppConfigurationCreateIntegration() {
           </div>
         </CardTitle>
         <div className="px-6">
-          <div className="mb-2 -space-y-2">
+          <div className="">
             <Controller
               control={control}
               name="sourceEnvironment"
@@ -198,43 +209,43 @@ export default function AzureAppConfigurationCreateIntegration() {
               )}
             />
 
-            <Controller
-              control={control}
-              name="useLabels"
-              render={({ field: { onChange, value } }) => (
-                <Switch
-                  id="use-environment-labels"
-                  onCheckedChange={(isChecked) => onChange(isChecked)}
-                  isChecked={value}
-                >
-                  <div className="flex items-center gap-1">
-                    Use Environment Labels
-                    <Tooltip
-                      content={
-                        <div>
-                          <p>
-                            Use the environment slug as the label on the secret keys created in
-                            Azure App Configuration.
-                            <br />
-                            <br />
-                            {sourceEnv && (
-                              <p>
-                                You have selected the{" "}
-                                <span className="font-semibold">{sourceEnv}</span> environment,
-                                therefore the label will be set to{" "}
-                                <span className="font-semibold">{sourceEnv}</span>.
-                              </p>
-                            )}
-                          </p>
-                        </div>
-                      }
+            <div className="flex w-full flex-col gap-1">
+              <Controller
+                control={control}
+                name="useLabels"
+                render={({ field: { onChange, value } }) => (
+                  <Switch
+                    id="use-environment-labels"
+                    onCheckedChange={(isChecked) => onChange(isChecked)}
+                    isChecked={value}
+                  >
+                    <div className="flex w-full items-center gap-1">
+                      Use Labels
+                      <Tooltip content="Assign a label to each key-value pair that gets synced to your Azure App Configuration.">
+                        <FontAwesomeIcon icon={faQuestionCircle} size="1x" />
+                      </Tooltip>
+                    </div>
+                  </Switch>
+                )}
+              />
+
+              {shouldUseLabels && (
+                <Controller
+                  control={control}
+                  name="azureLabel"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      className=""
+                      // label="Label"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
                     >
-                      <FontAwesomeIcon icon={faQuestionCircle} size="1x" />
-                    </Tooltip>
-                  </div>
-                </Switch>
+                      <Input {...field} placeholder="pre-prod" />
+                    </FormControl>
+                  )}
+                />
               )}
-            />
+            </div>
           </div>
           <Controller
             control={control}

frontend/src/views/IntegrationsPage/IntegrationDetailsPage/components/IntegrationSettingsSection.tsx

@@ -14,6 +14,7 @@ const metadataMappings: Record<keyof NonNullable<TIntegrationWithEnv["metadata"]
   githubVisibilityRepoIds: "Github Visibility Repo Ids",
   shouldAutoRedeploy: "Auto Redeploy Target Application When Secrets Change",
   secretAWSTag: "Tags For Secrets Stored In AWS",
+  azureLabel: "Azure Label",
   kmsKeyId: "AWS KMS Key ID",
   secretSuffix: "Secret Suffix",
   secretPrefix: "Secret Prefix",
@@ -86,7 +87,7 @@ export const IntegrationSettingsSection = ({ integration }: Props) => {
           Object.entries(integration.metadata).map(([key, value]) => (
             <div key={key} className="flex flex-col">
               <p className="text-sm text-gray-400">
-                {metadataMappings[key as keyof typeof metadataMappings]}
+                {!!value && metadataMappings[key as keyof typeof metadataMappings]}
               </p>
               <p className="text-sm text-gray-200">{renderValue(key as MetadataKey, value)}</p>
             </div>