feat(integration): add integration with BitBucket

frontend/public/data/frequentConstants.ts

@@ -3,25 +3,26 @@ interface Mapping {
 }
 
 const integrationSlugNameMapping: Mapping = {
-  'azure-key-vault': 'Azure Key Vault',
-  'aws-parameter-store': 'AWS Parameter Store',
-  'aws-secret-manager': 'AWS Secret Manager',
-  'heroku': 'Heroku',
-  'vercel': 'Vercel',
-  'netlify': 'Netlify',
-  'github': 'GitHub',
-  'gitlab': 'GitLab',
-  'render': 'Render',
-  'laravel-forge': "Laravel Forge",
-  'railway': 'Railway',
-  'flyio': 'Fly.io',
-  'circleci': 'CircleCI',
-  'travisci': 'TravisCI',
-  'supabase': 'Supabase',
-  'checkly': 'Checkly',
-  'hashicorp-vault': 'Vault',
-  'cloudflare-pages': 'Cloudflare Pages'
-}
+  "azure-key-vault": "Azure Key Vault",
+  "aws-parameter-store": "AWS Parameter Store",
+  "aws-secret-manager": "AWS Secret Manager",
+  heroku: "Heroku",
+  vercel: "Vercel",
+  netlify: "Netlify",
+  github: "GitHub",
+  gitlab: "GitLab",
+  render: "Render",
+  "laravel-forge": "Laravel Forge",
+  railway: "Railway",
+  flyio: "Fly.io",
+  circleci: "CircleCI",
+  travisci: "TravisCI",
+  supabase: "Supabase",
+  checkly: "Checkly",
+  "hashicorp-vault": "Vault",
+  "cloudflare-pages": "Cloudflare Pages",
+  bitbucket: "BitBucket"
+};
 
 const envMapping: Mapping = {
   Development: "dev",

frontend/src/hooks/api/integrationAuth/index.tsx

@@ -1,9 +1,10 @@
 export {
   useDeleteIntegrationAuth,
   useGetIntegrationAuthApps,
+  useGetIntegrationAuthBitBucketWorkspaces,
   useGetIntegrationAuthById,
   useGetIntegrationAuthRailwayEnvironments,
   useGetIntegrationAuthRailwayServices,
   useGetIntegrationAuthTeams,
-  useGetIntegrationAuthVercelBranches
+  useGetIntegrationAuthVercelBranches,
 } from "./queries";

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

@@ -3,13 +3,13 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 import { workspaceKeys } from "../workspace/queries";
-import { App, Environment, IntegrationAuth, Service, Team } from "./types";
+import { App, BitBucketWorkspace, Environment, IntegrationAuth, Service, Team } from "./types";
 
 const integrationAuthKeys = {
   getIntegrationAuthById: (integrationAuthId: string) =>
     [{ integrationAuthId }, "integrationAuth"] as const,
-  getIntegrationAuthApps: (integrationAuthId: string, teamId?: string) =>
-    [{ integrationAuthId, teamId }, "integrationAuthApps"] as const,
+  getIntegrationAuthApps: (integrationAuthId: string, teamId?: string, workspaceSlug?: string) =>
+    [{ integrationAuthId, teamId, workspaceSlug }, "integrationAuthApps"] as const,
   getIntegrationAuthTeams: (integrationAuthId: string) =>
     [{ integrationAuthId }, "integrationAuthTeams"] as const,
   getIntegrationAuthVercelBranches: ({
@@ -32,7 +32,9 @@ const integrationAuthKeys = {
   }: {
     integrationAuthId: string;
     appId: string;
-  }) => [{ integrationAuthId, appId }, "integrationAuthRailwayServices"] as const
+  }) => [{ integrationAuthId, appId }, "integrationAuthRailwayServices"] as const,
+  getIntegrationAuthBitBucketWorkspaces: (integrationAuthId: string) =>
+    [{ integrationAuthId }, "integrationAuthTeams"] as const,
 };
 
 const fetchIntegrationAuthById = async (integrationAuthId: string) => {
@@ -44,12 +46,22 @@ const fetchIntegrationAuthById = async (integrationAuthId: string) => {
 
 const fetchIntegrationAuthApps = async ({
   integrationAuthId,
-  teamId
+  teamId,
+  workspaceSlug
 }: {
   integrationAuthId: string;
   teamId?: string;
+  workspaceSlug?: string;
 }) => {
-  const searchParams = new URLSearchParams(teamId ? { teamId } : undefined);
+  const params: Record<string, string> = {}
+  if (teamId) {
+    params.teamId = teamId
+  }
+  if (workspaceSlug) {
+    params.workspaceSlug = workspaceSlug
+  }
+
+  const searchParams = new URLSearchParams(params);
   const { data } = await apiRequest.get<{ apps: App[] }>(
     `/api/v1/integration-auth/${integrationAuthId}/apps`,
     { params: searchParams }
@@ -127,6 +139,13 @@ const fetchIntegrationAuthRailwayServices = async ({
   return services;
 };
 
+const fetchIntegrationAuthBitBucketWorkspaces = async (integrationAuthId: string) => {
+  const { data: { workspaces } } = await apiRequest.get<{ workspaces: BitBucketWorkspace[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/bitbucket/workspaces`
+  );
+  return workspaces;
+};
+
 export const useGetIntegrationAuthById = (integrationAuthId: string) => {
   return useQuery({
     queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
@@ -137,17 +156,20 @@ export const useGetIntegrationAuthById = (integrationAuthId: string) => {
 
 export const useGetIntegrationAuthApps = ({
   integrationAuthId,
-  teamId
+  teamId,
+  workspaceSlug,
 }: {
   integrationAuthId: string;
   teamId?: string;
+  workspaceSlug?: string;
 }) => {
   return useQuery({
-    queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId, teamId),
+    queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId, teamId, workspaceSlug),
     queryFn: () =>
       fetchIntegrationAuthApps({
         integrationAuthId,
-        teamId
+        teamId,
+        workspaceSlug
       }),
     enabled: true
   });
@@ -224,6 +246,14 @@ export const useGetIntegrationAuthRailwayServices = ({
   });
 };
 
+export const useGetIntegrationAuthBitBucketWorkspaces = (integrationAuthId: string) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthBitBucketWorkspaces(integrationAuthId),
+    queryFn: () => fetchIntegrationAuthBitBucketWorkspaces(integrationAuthId),
+    enabled: true
+  });
+};
+
 export const useDeleteIntegrationAuth = () => {
   const queryClient = useQueryClient();
 

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

@@ -29,3 +29,9 @@ export type Service = {
   name: string;
   serviceId: string;
 };
+
+export type BitBucketWorkspace = {
+  uuid: string;
+  name: string;
+  slug: string;
+}

frontend/src/pages/integrations/bitbucket/create.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthBitBucketWorkspaces,
+  useGetIntegrationAuthById,
+} from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function BitBucketCreateIntegrationPage() {
+  const router = useRouter();
+
+  const [targetAppId, setTargetAppId] = useState("");
+  const [targetEnvironmentId, setTargetEnvironmentId] = useState("");
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: targetEnvironments } = useGetIntegrationAuthBitBucketWorkspaces((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    workspaceSlug: targetEnvironmentId
+  });
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetAppId(integrationAuthApps[0].appId as string);
+      } else {
+        setTargetAppId("none");
+      }
+    }
+  }, [integrationAuthApps]);
+
+  useEffect(() => {
+    if (targetEnvironments) {
+      if (targetEnvironments.length > 0) {
+        setTargetEnvironmentId(targetEnvironments[0].slug);
+      } else {
+        setTargetEnvironmentId("none");
+      }
+    }
+  }, [targetEnvironments]);
+
+  const handleButtonClick = async () => {
+    try {
+      setIsLoading(true);
+
+      if (!integrationAuth?._id) return;
+
+      const targetApp = integrationAuthApps?.find(
+        (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+      );
+      const targetEnvironment = targetEnvironments?.find(
+        (environment) => environment.slug === targetEnvironmentId
+      );
+
+      if (!targetApp || !targetApp.appId || !targetEnvironment) return;
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: targetApp.name,
+        appId: targetApp.appId,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: targetEnvironment.name,
+        targetEnvironmentId: targetEnvironment.slug,
+        targetService: null,
+        targetServiceId: null,
+        owner: null,
+        path: null,
+        region: null,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetEnvironments ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">BitBucket 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="BitBucket Workspace">
+          <Select
+            value={targetEnvironmentId}
+            onValueChange={(val) => setTargetEnvironmentId(val)}
+            className="w-full border border-mineshaft-500"
+            isDisabled={targetEnvironments.length === 0}
+          >
+            {targetEnvironments.length > 0 ? (
+              targetEnvironments.map((targetEnvironment) => (
+                <SelectItem
+                  value={targetEnvironment.slug as string}
+                  key={`target-environment-${targetEnvironment.slug as string}`}
+                >
+                  {targetEnvironment.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-environment-none">
+                No workspaces found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <FormControl label="BitBucket Repo">
+          <Select
+            value={targetAppId}
+            onValueChange={(val) => setTargetAppId(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem
+                  value={integrationAuthApp.appId as string}
+                  key={`target-app-${integrationAuthApp.appId as string}`}
+                >
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No repositories found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
+        >
+          Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : (
+    <div />
+  );
+}
+
+BitBucketCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/bitbucket/oauth2/callback.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function BitBucketOAuth2CallbackPage() {
+  const router = useRouter();
+  const { code, state } = queryString.parse(router.asPath.split("?")[1]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        // validate state
+        if (state !== localStorage.getItem("latestCSRFToken")) return;
+        localStorage.removeItem("latestCSRFToken");
+
+        const integrationAuth = await AuthorizeIntegration({
+          workspaceId: localStorage.getItem("projectData.id") as string,
+          code: code as string,
+          integration: "bitbucket"
+        });
+
+        router.push(`/integrations/bitbucket/create?integrationAuthId=${integrationAuth._id}`);
+      } catch (err) {
+        console.error(err);
+      }
+    })();
+  }, []);
+
+  return <div />;
+}
+
+BitBucketOAuth2CallbackPage.requireAuth = true;

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

@@ -92,6 +92,9 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
       case "cloudflare-pages":
         link = `${window.location.origin}/integrations/cloudflare-pages/authorize`;
         break;
+      case "bitbucket":
+        link = `https://bitbucket.org/site/oauth2/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/bitbucket/oauth2/callback&state=${state}`;
+        break;
       default:
         break;
     }

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -106,7 +106,8 @@ export const IntegrationsSection = ({
                 {(integration.integration === "vercel" ||
                   integration.integration === "netlify" ||
                   integration.integration === "railway" ||
-                  integration.integration === "gitlab") && (
+                  integration.integration === "gitlab" ||
+                  integration.integration === "bitbucket") && (
                   <div className="ml-4 flex flex-col">
                     <FormLabel label="Target Environment" />
                     <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">