Merge pull request #1064 from Infisical/github-checkly-suffixes

allow multiple simultaneous integrations with checkly and github

backend/src/integrations/sync.ts

@@ -87,13 +87,15 @@ const syncSecrets = async ({
   integrationAuth,
   secrets,
   accessId,
-  accessToken
+  accessToken,
+  appendices
 }: {
   integration: IIntegration;
   integrationAuth: IIntegrationAuth;
   secrets: Record<string, { value: string; comment?: string }>;
   accessId: string | null;
   accessToken: string;
+  appendices?: { prefix: string, suffix: string };
 }) => {
   switch (integration.integration) {
     case INTEGRATION_GCP_SECRET_MANAGER:
@@ -153,7 +155,8 @@ const syncSecrets = async ({
       await syncSecretsGitHub({
         integration,
         secrets,
-        accessToken
+        accessToken,
+        appendices
       });
       break;
     case INTEGRATION_GITLAB:
@@ -218,7 +221,8 @@ const syncSecrets = async ({
       await syncSecretsCheckly({
         integration,
         secrets,
-        accessToken
+        accessToken,
+        appendices
       });
       break;
     case INTEGRATION_QOVERY:
@@ -1342,11 +1346,13 @@ const syncSecretsNetlify = async ({
 const syncSecretsGitHub = async ({
   integration,
   secrets,
-  accessToken
+  accessToken,
+  appendices
 }: {
   integration: IIntegration;
   secrets: Record<string, { value: string; comment?: string }>;
   accessToken: string;
+  appendices?: { prefix: string, suffix: string };
 }) => {
   interface GitHubRepoKey {
     key_id: string;
@@ -1376,7 +1382,7 @@ const syncSecretsGitHub = async ({
   ).data;
 
   // Get local copy of decrypted secrets. We cannot decrypt them as we dont have access to GH private key
-  const encryptedSecrets: GitHubSecretRes = (
+  let encryptedSecrets: GitHubSecretRes = (
     await octokit.request("GET /repos/{owner}/{repo}/actions/secrets", {
       owner: integration.owner,
       repo: integration.app
@@ -1389,6 +1395,15 @@ const syncSecretsGitHub = async ({
     {}
   );
 
+  encryptedSecrets = Object.keys(encryptedSecrets).reduce((result: {
+    [key: string]: GitHubSecret;
+  }, key) => {
+    if ((appendices?.prefix !== undefined ? key.startsWith(appendices?.prefix) : true) && (appendices?.suffix !== undefined ? key.endsWith(appendices?.suffix) : true)) {
+      result[key] = encryptedSecrets[key];
+    }
+    return result;
+  }, {});
+
   Object.keys(encryptedSecrets).map(async (key) => {
     if (!(key in secrets)) {
       await octokit.request("DELETE /repos/{owner}/{repo}/actions/secrets/{secret_name}", {
@@ -2074,13 +2089,15 @@ const syncSecretsSupabase = async ({
 const syncSecretsCheckly = async ({
   integration,
   secrets,
-  accessToken
+  accessToken,
+  appendices
 }: {
   integration: IIntegration;
   secrets: Record<string, { value: string; comment?: string }>;
   accessToken: string;
+  appendices?: { prefix: string, suffix: string };
 }) => {
-  const getSecretsRes = (
+  let getSecretsRes = (
     await standardRequest.get(`${INTEGRATION_CHECKLY_API_URL}/v1/variables`, {
       headers: {
         Authorization: `Bearer ${accessToken}`,
@@ -2096,6 +2113,15 @@ const syncSecretsCheckly = async ({
     {}
   );
 
+  getSecretsRes = Object.keys(getSecretsRes).reduce((result: {
+    [key: string]: string;
+  }, key) => {
+    if ((appendices?.prefix !== undefined ? key.startsWith(appendices?.prefix) : true) && (appendices?.suffix !== undefined ? key.endsWith(appendices?.suffix) : true)) {
+      result[key] = getSecretsRes[key];
+    }
+    return result;
+  }, {});
+
   // add secrets
   for await (const key of Object.keys(secrets)) {
     if (!(key in getSecretsRes)) {

backend/src/queues/integrations/syncSecretsToThirdPartyServices.ts

@@ -60,7 +60,8 @@ syncSecretsToThirdPartyServices.process(async (job: Job) => {
       integrationAuth,
       secrets: Object.keys(suffixedSecrets).length !== 0 ? suffixedSecrets : secrets,
       accessId: access.accessId === undefined ? null : access.accessId,
-      accessToken: access.accessToken
+      accessToken: access.accessToken,
+      appendices: { prefix: integration.metadata?.secretPrefix || "", suffix: integration.metadata?.secretSuffix || "" }
     });
   }
 })

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(

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

@@ -3,8 +3,9 @@ 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";
 
 import {
@@ -15,10 +16,18 @@ import {
   Button,
   Card,
   CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   FormControl,
   Input,
   Select,
-  SelectItem
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
 } from "../../../components/v2";
 import {
   useGetIntegrationAuthApps,
@@ -26,6 +35,11 @@ import {
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
+enum TabSections {
+  Connection = "connection",
+  Options = "options"
+}
+
 export default function GitHubCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
@@ -40,7 +54,8 @@ 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);
 
@@ -53,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]);
@@ -66,20 +81,27 @@ export default function GitHubCreateIntegrationPage() {
 
       if (!integrationAuth?._id) return;
 
-      const targetApp = integrationAuthApps?.find(
+      const targetApps = integrationAuthApps?.filter(
-        (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+        (integrationAuthApp) => targetAppIds.includes(String(integrationAuthApp.appId))
       );
 
-      if (!targetApp || !targetApp.owner) return;
+      if (!targetApps) return;
 
-      await mutateAsync({
+      await Promise.all(
-        integrationAuthId: integrationAuth?._id,
+        targetApps.map(async (targetApp) => {
-        isActive: true,
+          await mutateAsync({
-        app: targetApp.name,
+            integrationAuthId: integrationAuth?._id,
-        sourceEnvironment: selectedSourceEnvironment,
+            isActive: true,
-        owner: targetApp.owner,
+            app: targetApp.name,
-        secretPath
+            sourceEnvironment: selectedSourceEnvironment,
-      });
+            owner: targetApp.owner,
+            secretPath,
+            metadata: {
+              secretSuffix
+            }
+          })
+        })
+      );
 
       setIsLoading(false);
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
@@ -92,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>
@@ -124,59 +146,109 @@ export default function GitHubCreateIntegrationPage() {
             </Link>
           </div>
         </CardTitle>
-        <FormControl label="Project Environment" className="px-6">
+        <Tabs defaultValue={TabSections.Connection} className="px-6">
-          <Select
+          <TabList>
-            value={selectedSourceEnvironment}
+            <div className="flex flex-row border-b border-mineshaft-600 w-full">
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+              <Tab value={TabSections.Connection}>Connection</Tab>
-            className="w-full border border-mineshaft-500"
+              <Tab value={TabSections.Options}>Options</Tab>
-          >
+            </div>
-            {workspace?.environments.map((sourceEnvironment) => (
+          </TabList>
-              <SelectItem
+          <TabPanel value={TabSections.Connection}>
-                value={sourceEnvironment.slug}
+            <motion.div
-                key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
+              key="panel-1"
-              >
+              transition={{ duration: 0.15 }}
-                {sourceEnvironment.name}
+              initial={{ opacity: 0, translateX: 30 }}
-              </SelectItem>
+              animate={{ opacity: 1, translateX: 0 }}
-            ))}
+              exit={{ opacity: 0, translateX: 30 }}
-          </Select>
+            >
-        </FormControl>
+              <FormControl label="Project Environment">
-        <FormControl label="Secrets Path" className="px-6">
+                <Select
-          <Input
+                  value={selectedSourceEnvironment}
-            value={secretPath}
+                  onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            onChange={(evt) => setSecretPath(evt.target.value)}
+                  className="w-full border border-mineshaft-500"
-            placeholder="Provide a path, default is /"
-          />
-        </FormControl>
-        <FormControl label="GitHub Repo" className="px-6">
-          <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}
+                  {workspace?.environments.map((sourceEnvironment) => (
-                </SelectItem>
+                    <SelectItem
-              ))
+                      value={sourceEnvironment.slug}
-            ) : (
+                      key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
-              <SelectItem value="none" key="target-app-none">
+                    >
-                No repositories found
+                      {sourceEnvironment.name}
-              </SelectItem>
+                    </SelectItem>
-            )}
+                  ))}
-          </Select>
+                </Select>
-        </FormControl>
+              </FormControl>
+              <FormControl label="Secrets Path">
+                <Input
+                  value={secretPath}
+                  onChange={(evt) => setSecretPath(evt.target.value)}
+                  placeholder="Provide a path, default is /"
+                />
+              </FormControl>
+              <FormControl label="GitHub Repo">
+                <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>
+          <TabPanel value={TabSections.Options}>
+            <motion.div
+              key="panel-1"
+              transition={{ duration: 0.15 }}
+              initial={{ opacity: 0, translateX: -30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 30 }}
+            >
+              <FormControl label="Append Secret Names with..." className="pb-[9.75rem]">
+                <Input
+                  value={secretSuffix}
+                  onChange={(evt) => setSecretSuffix(evt.target.value)}
+                  placeholder="Provide a suffix for secret names, default is no suffix"
+                />
+              </FormControl>
+            </motion.div>
+          </TabPanel>
+        </Tabs>
         <Button
           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>

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

@@ -139,7 +139,7 @@ export const IntegrationsSection = ({
                     </div>
                   </div>
                 )}
-                {(integration.integration === "checkly") && (
+                {((integration.integration === "checkly") || (integration.integration === "github")) && (
                   <div className="ml-2 flex flex-col">
                     <FormLabel label="Secret Suffix" />
                     <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">

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>