allowed creating multiple github integrations to different apps at once

2026-09-22 13:39:35 +00:00 · 2023-10-08 17:05:26 -07:00
parent 5971480ca9
commit ee6afa8983
3 changed files with 67 additions and 44 deletions
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -22,7 +22,7 @@ const sanitizeConf = {

 const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
  if (content === "") return "EMPTY";
-  if (!content) return "missing";
+  if (!content) return "EMPTY";
  if (!isVisible) return replaceContentWithDot(content);

  const sanitizedContent = sanitizeHtml(
--- a/frontend/src/pages/integrations/github/create.tsx
+++ b/frontend/src/pages/integrations/github/create.tsx
@@ -3,7 +3,7 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown, faArrowUpRightFromSquare, faBookOpen, faBugs, faCheckCircle, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { motion } from "framer-motion";
 import queryString from "query-string";
@@ -16,6 +16,10 @@ import {
  Button,
  Card,
  CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
  FormControl,
  Input,
  Select,
@@ -50,7 +54,7 @@ export default function GitHubCreateIntegrationPage() {

  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
  const [secretPath, setSecretPath] = useState("/");
-  const [targetAppId, setTargetAppId] = useState("");
+  const [targetAppIds, setTargetAppIds] = useState<string[]>([]);
  const [secretSuffix, setSecretSuffix] = useState("");

  const [isLoading, setIsLoading] = useState(false);
@@ -64,9 +68,9 @@ export default function GitHubCreateIntegrationPage() {
  useEffect(() => {
    if (integrationAuthApps) {
      if (integrationAuthApps.length > 0) {
-        setTargetAppId(integrationAuthApps[0].appId as string);
+        setTargetAppIds([String(integrationAuthApps[0].appId)]);
      } else {
-        setTargetAppId("none");
+        setTargetAppIds(["none"]);
      }
    }
  }, [integrationAuthApps]);
@@ -77,23 +81,27 @@ export default function GitHubCreateIntegrationPage() {

      if (!integrationAuth?._id) return;

-      const targetApp = integrationAuthApps?.find(
-        (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+      const targetApps = integrationAuthApps?.filter(
+        (integrationAuthApp) => targetAppIds.includes(String(integrationAuthApp.appId))
      );

-      if (!targetApp || !targetApp.owner) return;
+      if (!targetApps) return;

-      await mutateAsync({
-        integrationAuthId: integrationAuth?._id,
-        isActive: true,
-        app: targetApp.name,
-        sourceEnvironment: selectedSourceEnvironment,
-        owner: targetApp.owner,
-        secretPath,
-        metadata: {
-          secretSuffix
-        }
-      });
+      await Promise.all(
+        targetApps.map(async (targetApp) => {
+          await mutateAsync({
+            integrationAuthId: integrationAuth?._id,
+            isActive: true,
+            app: targetApp.name,
+            sourceEnvironment: selectedSourceEnvironment,
+            owner: targetApp.owner,
+            secretPath,
+            metadata: {
+              secretSuffix
+            }
+          })
+        })
+      );

      setIsLoading(false);
      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
@@ -106,7 +114,7 @@ export default function GitHubCreateIntegrationPage() {
    workspace &&
    selectedSourceEnvironment &&
    integrationAuthApps &&
-    targetAppId ? (
+    targetAppIds ? (
    <div className="flex flex-col h-full w-full items-center justify-center">
      <Head>
        <title>Set Up GitHub Integration</title>
@@ -177,27 +185,42 @@ export default function GitHubCreateIntegrationPage() {
                />
              </FormControl>
              <FormControl label="GitHub Repo">
-                <Select
-                  value={targetAppId}
-                  onValueChange={(val) => setTargetAppId(val)}
-                  className="w-full border border-mineshaft-500"
-                  isDisabled={integrationAuthApps.length === 0}
-                >
-                  {integrationAuthApps.length > 0 ? (
-                    integrationAuthApps.map((integrationAuthApp) => (
-                      <SelectItem
-                        value={integrationAuthApp.appId as string}
-                        key={`github-repo-${integrationAuthApp.appId}`}
-                      >
-                        {integrationAuthApp.name}
-                      </SelectItem>
-                    ))
-                  ) : (
-                    <SelectItem value="none" key="target-app-none">
-                      No repositories found
-                    </SelectItem>
-                  )}
-                </Select>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    {(integrationAuthApps.length > 0) ? <div className="w-full cursor-pointer border border-mineshaft-600 inline-flex items-center justify-between rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                        {targetAppIds.length === 1 ? integrationAuthApps?.find(
+                          (integrationAuthApp) => targetAppIds[0] === String(integrationAuthApp.appId)
+                        )?.name : `${targetAppIds.length} repositories selected`}
+                        <FontAwesomeIcon icon={faAngleDown} className="text-xs" />
+                      </div> : <div className="w-full cursor-default border border-mineshaft-600 inline-flex items-center justify-between rounded-md bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                        No repositories found
+                      </div>}
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="z-[100] max-h-80 overflow-y-scroll thin-scrollbar">
+                    {(integrationAuthApps.length > 0) ? (
+                      integrationAuthApps.map((integrationAuthApp) => {
+                        const isSelected = targetAppIds.includes(String(integrationAuthApp.appId));
+
+                        return (
+                          <DropdownMenuItem
+                            onClick={() => {
+                              if (targetAppIds.includes(String(integrationAuthApp.appId))) {
+                                setTargetAppIds(targetAppIds.filter((appId) => appId !== String(integrationAuthApp.appId)));
+                              } else {
+                                setTargetAppIds([...targetAppIds, String(integrationAuthApp.appId)]);
+                              }
+                            }}
+                            key={integrationAuthApp.appId}
+                            icon={isSelected ? <FontAwesomeIcon icon={faCheckCircle} className="text-primary pr-0.5" /> : <div className="pl-[1.01rem]"/>}
+                            iconPos="left"
+                            className="w-[28.4rem] text-sm"
+                          >
+                            {integrationAuthApp.name}
+                          </DropdownMenuItem> 
+                        )})
+                    ) : <div/>}
+                  </DropdownMenuContent>
+                </DropdownMenu>
              </FormControl>
            </motion.div>
          </TabPanel>
@@ -223,9 +246,9 @@ export default function GitHubCreateIntegrationPage() {
          onClick={handleButtonClick}
          color="mineshaft"
          variant="outline_bg"
-          className="mt-2 mb-6 ml-auto mr-6"
+          className="mb-6 ml-auto mr-6"
          isLoading={isLoading}
-          isDisabled={integrationAuthApps.length === 0}
+          isDisabled={integrationAuthApps.length === 0 || targetAppIds.length === 0}
        >
          Create Integration
        </Button>
--- a/frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx
+++ b/frontend/src/views/SecretApprovalPage/SecretApprovalPage.tsx
@@ -14,7 +14,7 @@ export const SecretApprovalPage = () => {
  const workspaceId = currentWorkspace?._id || "";

  return (
-    <div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl">
+    <div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl px-6">
      <div className="my-6">
        <p className="text-3xl font-semibold text-gray-200">Secret Approvals</p>
      </div>