feat(secret-sync): Add Azure Devops Secret Sync

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/AzureDevopsSyncFields.tsx

@@ -0,0 +1,76 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import { useGetAzureDevOpsProjects } from "@app/hooks/api/appConnections/azure";
+import { AzureDevOpsProject } from "@app/hooks/api/appConnections/azure/types";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const AzureDevOpsSyncFields = () => {
+  const { control, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.AzureDevOps }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+
+  const { data: { projects } = { projects: [] }, isLoading: isProjectsLoading } =
+    useGetAzureDevOpsProjects(connectionId, {
+      enabled: Boolean(connectionId)
+    });
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.devopsProjectId", "");
+        }}
+      />
+
+      <Controller
+        name="destinationConfig.devopsProjectId"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Project"
+            helperText={
+              <Tooltip
+                className="max-w-md"
+                content="Ensure the project exists in the connection's Azure DevOps instance URL."
+              >
+                <div>
+                  <span>Don&#39;t see the project you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isProjectsLoading && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={projects?.find((v) => v.appId === value) ?? null}
+              onChange={(option) => {
+                onChange((option as SingleValue<AzureDevOpsProject>)?.appId ?? null);
+                setValue(
+                  "destinationConfig.devopsProjectName",
+                  (option as SingleValue<AzureDevOpsProject>)?.name ?? ""
+                );
+              }}
+              options={projects}
+              placeholder="Select a project..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+      />
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx

@@ -7,6 +7,7 @@ import { OnePassSyncFields } from "./1PasswordSyncFields";
 import { AwsParameterStoreSyncFields } from "./AwsParameterStoreSyncFields";
 import { AwsSecretsManagerSyncFields } from "./AwsSecretsManagerSyncFields";
 import { AzureAppConfigurationSyncFields } from "./AzureAppConfigurationSyncFields";
+import { AzureDevOpsSyncFields } from "./AzureDevopsSyncFields";
 import { AzureKeyVaultSyncFields } from "./AzureKeyVaultSyncFields";
 import { CamundaSyncFields } from "./CamundaSyncFields";
 import { DatabricksSyncFields } from "./DatabricksSyncFields";
@@ -38,6 +39,8 @@ export const SecretSyncDestinationFields = () => {
       return <AzureKeyVaultSyncFields />;
     case SecretSync.AzureAppConfiguration:
       return <AzureAppConfigurationSyncFields />;
+    case SecretSync.AzureDevOps:
+      return <AzureDevOpsSyncFields />;
     case SecretSync.Databricks:
       return <DatabricksSyncFields />;
     case SecretSync.Humanitec:

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx

@@ -41,6 +41,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
     case SecretSync.GCPSecretManager:
     case SecretSync.AzureKeyVault:
     case SecretSync.AzureAppConfiguration:
+    case SecretSync.AzureDevOps:
     case SecretSync.Databricks:
     case SecretSync.Humanitec:
     case SecretSync.TerraformCloud:

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AzureDevopsSyncReviewFields.tsx

@@ -0,0 +1,18 @@
+import { useFormContext } from "react-hook-form";
+
+import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const AzureDevOpsSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.AzureDevOps }>();
+  const devopsProjectId = watch("destinationConfig.devopsProjectId");
+  const devopsProjectName = watch("destinationConfig.devopsProjectName");
+
+  return (
+    <>
+      <GenericFieldLabel label="Project">{devopsProjectName}</GenericFieldLabel>
+      <GenericFieldLabel label="Project ID">{devopsProjectId}</GenericFieldLabel>
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -16,6 +16,7 @@ import {
   AwsSecretsManagerSyncReviewFields
 } from "./AwsSecretsManagerSyncReviewFields";
 import { AzureAppConfigurationSyncReviewFields } from "./AzureAppConfigurationSyncReviewFields";
+import { AzureDevOpsSyncReviewFields } from "./AzureDevopsSyncReviewFields";
 import { AzureKeyVaultSyncReviewFields } from "./AzureKeyVaultSyncReviewFields";
 import { CamundaSyncReviewFields } from "./CamundaSyncReviewFields";
 import { DatabricksSyncReviewFields } from "./DatabricksSyncReviewFields";
@@ -70,6 +71,9 @@ export const SecretSyncReviewFields = () => {
     case SecretSync.AzureAppConfiguration:
       DestinationFieldsComponent = <AzureAppConfigurationSyncReviewFields />;
       break;
+    case SecretSync.AzureDevOps:
+      DestinationFieldsComponent = <AzureDevOpsSyncReviewFields />;
+      break;
     case SecretSync.Databricks:
       DestinationFieldsComponent = <DatabricksSyncReviewFields />;
       break;

frontend/src/components/secret-syncs/forms/schemas/azure-devops-sync-destination-schema.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+
+export const AzureDevOpsSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.AzureDevOps),
+    destinationConfig: z.object({
+      devopsProjectId: z.string().trim().min(1, { message: "Azure DevOps Project ID is required" }),
+      devopsProjectName: z
+        .string()
+        .trim()
+        .min(1, { message: "Azure DevOps Project Name is required" })
+    })
+  })
+);

frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts

@@ -4,6 +4,7 @@ import { OnePassSyncDestinationSchema } from "./1password-sync-destination-schem
 import { AwsParameterStoreSyncDestinationSchema } from "./aws-parameter-store-sync-destination-schema";
 import { AwsSecretsManagerSyncDestinationSchema } from "./aws-secrets-manager-sync-destination-schema";
 import { AzureAppConfigurationSyncDestinationSchema } from "./azure-app-configuration-sync-destination-schema";
+import { AzureDevOpsSyncDestinationSchema } from "./azure-devops-sync-destination-schema";
 import { AzureKeyVaultSyncDestinationSchema } from "./azure-key-vault-sync-destination-schema";
 import { CamundaSyncDestinationSchema } from "./camunda-sync-destination-schema";
 import { DatabricksSyncDestinationSchema } from "./databricks-sync-destination-schema";
@@ -24,6 +25,7 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   GcpSyncDestinationSchema,
   AzureKeyVaultSyncDestinationSchema,
   AzureAppConfigurationSyncDestinationSchema,
+  AzureDevOpsSyncDestinationSchema,
   DatabricksSyncDestinationSchema,
   HumanitecSyncDestinationSchema,
   TerraformCloudSyncDestinationSchema,