Feat: Azure DevOps Integration

frontend/public/data/frequentConstants.ts

@@ -33,7 +33,8 @@ const integrationSlugNameMapping: Mapping = {
   windmill: "Windmill",
   "gcp-secret-manager": "GCP Secret Manager",
   "hasura-cloud": "Hasura Cloud",
-  rundeck: "Rundeck"
+  rundeck: "Rundeck",
+  "azure-devops": "Azure DevOps"
 };
 
 const envMapping: Mapping = {

frontend/src/pages/integrations/azure-devops/authorize.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+import { useSaveIntegrationAccessToken } from "@app/hooks/api";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+
+export default function AzureDevopsCreateIntegrationPage() {
+  const router = useRouter();
+  const { mutateAsync } = useSaveIntegrationAccessToken();
+
+  const [apiKey, setApiKey] = useState("");
+  const [orgId, setOrgId] = useState("");
+  const [apiKeyErrorText, setApiKeyErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleButtonClick = async () => {
+    try {
+      setApiKeyErrorText("");
+      if (apiKey.length === 0) {
+        setApiKeyErrorText("API Key cannot be blank");
+        return;
+      }
+
+      setIsLoading(true);
+
+      localStorage.setItem("azure-devops-org-id", orgId);
+
+      const integrationAuth = await mutateAsync({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "azure-devops",
+        accessToken: btoa(`:${apiKey}`) // This is a base64 encoding of the API key without any username
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/azure-devops/create?integrationAuthId=${integrationAuth.id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">AzureDevops Integration</CardTitle>
+        <FormControl
+          label="AzureDevops API Token"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== "" ?? false}
+        >
+          <Input placeholder="" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
+        </FormControl>
+        <FormControl
+          label="AzureDevops Organization Slug"
+          tooltipText="This is not the organization ID, but the slug of the organization. An example would be 'my-acme-org'"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== "" ?? false}
+        >
+          <Input placeholder="" value={orgId} onChange={(e) => setOrgId(e.target.value)} />
+        </FormControl>
+
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+        >
+          Connect to AzureDevops
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+AzureDevopsCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/azure-devops/create.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import { useCreateIntegration } from "@app/hooks/api";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById
+} from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+
+export default function AzureDevopsCreateIntegrationPage() {
+  const router = useRouter();
+  const { mutateAsync } = useCreateIntegration();
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    teamId: localStorage.getItem("azure-devops-org-id") ?? ""
+  });
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [targetApp, setTargetApp] = useState("");
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetApp(integrationAuthApps[0].name);
+      } else {
+        setTargetApp("none");
+      }
+    }
+  }, [integrationAuthApps]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?.id) return;
+
+      setIsLoading(true);
+
+      await mutateAsync({
+        integrationAuthId: integrationAuth?.id,
+        isActive: true,
+        app: localStorage.getItem("azure-devops-org-id") || "",
+        appId: targetApp,
+        sourceEnvironment: selectedSourceEnvironment,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetApp ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">AzureDevops Integration</CardTitle>
+        <FormControl label="Project Environment" className="mt-4">
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem
+                value={sourceEnvironment.slug}
+                key={`source-environment-${sourceEnvironment.slug}`}
+              >
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
+        <FormControl label="AzureDevops Project" className="mt-4">
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className="w-full border border-mineshaft-500"
+            isDisabled={integrationAuthApps.length === 0}
+          >
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem
+                  value={integrationAuthApp.name}
+                  key={`target-environment-${integrationAuthApp.name}`}
+                >
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No projects found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
+        >
+          Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : (
+    <div />
+  );
+}
+
+AzureDevopsCreateIntegrationPage.requireAuth = true;

frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx

@@ -131,6 +131,9 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
       case "rundeck":
         link = `${window.location.origin}/integrations/rundeck/authorize`;
         break;
+      case "azure-devops":
+        link = `${window.location.origin}/integrations/azure-devops/authorize`;
+        break;
       default:
         break;
     }