Merge pull request #3834 from Infisical/misc/add-self-serve-for-github-app-connection-setup

misc: add self-serve for github app connection setup

frontend/src/const/routes.ts

@@ -16,6 +16,12 @@ export const ROUTE_PATHS = Object.freeze({
     PasswordResetPage: setRoute("/password-reset", "/_restrict-login-signup/password-reset"),
     PasswordSetupPage: setRoute("/password-setup", "/_authenticate/password-setup")
   },
+  Admin: {
+    IntegrationsPage: setRoute(
+      "/admin/integrations",
+      "/_authenticate/_inject-org-details/admin/_admin-layout/integrations"
+    )
+  },
   Organization: {
     Settings: {
       OauthCallbackPage: setRoute(

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

@@ -56,6 +56,11 @@ export type TUpdateServerConfigDTO = {
   microsoftTeamsAppId?: string;
   microsoftTeamsClientSecret?: string;
   microsoftTeamsBotId?: string;
+  gitHubAppConnectionClientId?: string;
+  gitHubAppConnectionClientSecret?: string;
+  gitHubAppConnectionSlug?: string;
+  gitHubAppConnectionId?: string;
+  gitHubAppConnectionPrivateKey?: string;
 } & Partial<TServerConfig>;
 
 export type TCreateAdminUserDTO = {
@@ -100,6 +105,13 @@ export type AdminIntegrationsConfig = {
     clientSecret: string;
     botId: string;
   };
+  gitHubAppConnection: {
+    clientId: string;
+    clientSecret: string;
+    appSlug: string;
+    appId: string;
+    privateKey: string;
+  };
 };
 
 export type TGetServerRootKmsEncryptionDetails = {

frontend/src/pages/admin/IntegrationsPage/components/GitHubAppConnectionForm.tsx

@@ -0,0 +1,222 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { FaGithub } from "react-icons/fa";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  TextArea
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { useUpdateServerConfig } from "@app/hooks/api";
+import { AdminIntegrationsConfig } from "@app/hooks/api/admin/types";
+
+const gitHubAppFormSchema = z.object({
+  clientId: z.string(),
+  clientSecret: z.string(),
+  appSlug: z.string(),
+  appId: z.string(),
+  privateKey: z.string()
+});
+
+type TGitHubAppConnectionForm = z.infer<typeof gitHubAppFormSchema>;
+
+type Props = {
+  adminIntegrationsConfig?: AdminIntegrationsConfig;
+};
+
+export const GitHubAppConnectionForm = ({ adminIntegrationsConfig }: Props) => {
+  const { mutateAsync: updateAdminServerConfig } = useUpdateServerConfig();
+  const [isGitHubAppClientSecretFocused, setIsGitHubAppClientSecretFocused] = useToggle();
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TGitHubAppConnectionForm>({
+    resolver: zodResolver(gitHubAppFormSchema)
+  });
+
+  const onSubmit = async (data: TGitHubAppConnectionForm) => {
+    await updateAdminServerConfig({
+      gitHubAppConnectionClientId: data.clientId,
+      gitHubAppConnectionClientSecret: data.clientSecret,
+      gitHubAppConnectionSlug: data.appSlug,
+      gitHubAppConnectionId: data.appId,
+      gitHubAppConnectionPrivateKey: data.privateKey
+    });
+
+    createNotification({
+      text: "Updated GitHub app connection configuration. It can take up to 5 minutes to take effect.",
+      type: "success"
+    });
+  };
+
+  useEffect(() => {
+    if (adminIntegrationsConfig) {
+      setValue("clientId", adminIntegrationsConfig.gitHubAppConnection.clientId);
+      setValue("clientSecret", adminIntegrationsConfig.gitHubAppConnection.clientSecret);
+      setValue("appSlug", adminIntegrationsConfig.gitHubAppConnection.appSlug);
+      setValue("appId", adminIntegrationsConfig.gitHubAppConnection.appId);
+      setValue("privateKey", adminIntegrationsConfig.gitHubAppConnection.privateKey);
+    }
+  }, [adminIntegrationsConfig]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Accordion type="single" collapsible className="w-full">
+        <AccordionItem value="github-app-integration" className="data-[state=open]:border-none">
+          <AccordionTrigger className="flex h-fit w-full justify-start rounded-md border border-mineshaft-500 bg-mineshaft-700 px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
+            <div className="text-md group order-1 ml-3 flex items-center gap-2">
+              <FaGithub className="text-lg group-hover:text-primary-400" />
+              <div className="text-[15px] font-semibold">GitHub App</div>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent childrenClassName="px-0 py-0">
+            <div className="flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 border-mineshaft-500 bg-mineshaft-700 px-4 py-4">
+              <div className="mb-2 max-w-lg text-sm text-mineshaft-300">
+                Step 1: Create and configure GitHub App. Please refer to the documentation below for
+                more information.
+              </div>
+              <div className="mb-6">
+                <a
+                  href="https://infisical.com/docs/integrations/app-connections/github#self-hosted-instance"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button colorSchema="secondary">Documentation</Button>
+                </a>
+              </div>
+              <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
+                Step 2: Configure your instance-wide settings to enable GitHub App connections. Copy
+                the credentials from your GitHub App&apos;s settings page.
+              </div>
+              <Controller
+                control={control}
+                name="clientId"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Client ID"
+                    className="w-96"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || ""}
+                      type="text"
+                      onChange={(e) => field.onChange(e.target.value)}
+                    />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="clientSecret"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Client Secret"
+                    tooltipText="You can find your Client Secret in the GitHub App's settings under 'Client secrets'."
+                    className="w-96"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || ""}
+                      type={isGitHubAppClientSecretFocused ? "text" : "password"}
+                      onFocus={() => setIsGitHubAppClientSecretFocused.on()}
+                      onBlur={() => setIsGitHubAppClientSecretFocused.off()}
+                      onChange={(e) => field.onChange(e.target.value)}
+                    />
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                control={control}
+                name="appSlug"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="App Slug"
+                    tooltipText="The GitHub App slug from the app's URL (e.g., 'my-app' from github.com/apps/my-app)."
+                    className="w-96"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || ""}
+                      type="text"
+                      onChange={(e) => field.onChange(e.target.value)}
+                    />
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                control={control}
+                name="appId"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="App ID"
+                    tooltipText="The numeric App ID found in your GitHub App's settings."
+                    className="w-96"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input
+                      {...field}
+                      value={field.value || ""}
+                      type="text"
+                      onChange={(e) => field.onChange(e.target.value)}
+                    />
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                control={control}
+                name="privateKey"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Private Key"
+                    tooltipText="The private key generated for your GitHub App (PEM format)."
+                    className="w-96"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <TextArea
+                      {...field}
+                      value={field.value || ""}
+                      className="min-h-32"
+                      onChange={(e) => field.onChange(e.target.value)}
+                    />
+                  </FormControl>
+                )}
+              />
+              <div>
+                <Button
+                  className="mt-2"
+                  type="submit"
+                  isLoading={isSubmitting}
+                  isDisabled={isSubmitting || !isDirty}
+                >
+                  Save
+                </Button>
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </form>
+  );
+};

frontend/src/pages/admin/IntegrationsPage/components/IntegrationsPageForm.tsx

@@ -1,24 +1,94 @@
-import { useGetAdminIntegrationsConfig } from "@app/hooks/api";
+import { useNavigate, useSearch } from "@tanstack/react-router";
 
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { useGetAdminIntegrationsConfig } from "@app/hooks/api";
+import { AdminIntegrationsConfig } from "@app/hooks/api/admin/types";
+
+import { GitHubAppConnectionForm } from "./GitHubAppConnectionForm";
 import { MicrosoftTeamsIntegrationForm } from "./MicrosoftTeamsIntegrationForm";
 import { SlackIntegrationForm } from "./SlackIntegrationForm";
 
+enum IntegrationTabSections {
+  Workflow = "workflow",
+  AppConnections = "app-connections"
+}
+
+interface WorkflowTabProps {
+  adminIntegrationsConfig: AdminIntegrationsConfig;
+}
+
+interface AppConnectionsTabProps {
+  adminIntegrationsConfig: AdminIntegrationsConfig;
+}
+
+const WorkflowTab = ({ adminIntegrationsConfig }: WorkflowTabProps) => (
+  <div className="flex flex-col gap-2">
+    <SlackIntegrationForm adminIntegrationsConfig={adminIntegrationsConfig} />
+    <MicrosoftTeamsIntegrationForm adminIntegrationsConfig={adminIntegrationsConfig} />
+  </div>
+);
+
+const AppConnectionsTab = ({ adminIntegrationsConfig }: AppConnectionsTabProps) => (
+  <div className="flex flex-col gap-2">
+    <GitHubAppConnectionForm adminIntegrationsConfig={adminIntegrationsConfig} />
+  </div>
+);
+
 export const IntegrationsPageForm = () => {
   const { data: adminIntegrationsConfig } = useGetAdminIntegrationsConfig();
 
+  const navigate = useNavigate({
+    from: ROUTE_PATHS.Admin.IntegrationsPage.path
+  });
+
+  const selectedTab = useSearch({
+    from: ROUTE_PATHS.Admin.IntegrationsPage.id,
+    select: (el: { selectedTab?: string }) => el.selectedTab || IntegrationTabSections.Workflow,
+    structuralSharing: true
+  });
+
+  const updateSelectedTab = (tab: string) => {
+    navigate({
+      search: { selectedTab: tab }
+    });
+  };
+
+  const tabSections = [
+    {
+      key: IntegrationTabSections.Workflow,
+      label: "Workflows",
+      component: WorkflowTab
+    },
+    {
+      key: IntegrationTabSections.AppConnections,
+      label: "App Connections",
+      component: AppConnectionsTab
+    }
+  ];
+
   return (
     <div className="mb-6 min-h-64 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4">
         <div className="text-xl font-semibold text-mineshaft-100">Integrations</div>
         <div className="text-sm text-mineshaft-300">
-          Configure your instance-wide settings to enable integration with Slack and Microsoft
-          Teams.
+          Configure your instance-wide settings to enable integration with third-party services.
         </div>
       </div>
-      <div className="flex flex-col gap-2">
-        <SlackIntegrationForm adminIntegrationsConfig={adminIntegrationsConfig} />
-        <MicrosoftTeamsIntegrationForm adminIntegrationsConfig={adminIntegrationsConfig} />
-      </div>
+      <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
+        <TabList>
+          {tabSections.map((section) => (
+            <Tab value={section.key} key={`integration-tab-${section.key}`}>
+              {section.label}
+            </Tab>
+          ))}
+        </TabList>
+        {tabSections.map(({ key, component: Component }) => (
+          <TabPanel value={key} key={`integration-tab-panel-${key}`}>
+            <Component adminIntegrationsConfig={adminIntegrationsConfig!} />
+          </TabPanel>
+        ))}
+      </Tabs>
     </div>
   );
 };

frontend/src/pages/admin/IntegrationsPage/components/MicrosoftTeamsIntegrationForm.tsx

@@ -75,7 +75,7 @@ export const MicrosoftTeamsIntegrationForm = ({ adminIntegrationsConfig }: Props
           <AccordionTrigger className="flex h-fit w-full justify-start rounded-md border border-mineshaft-500 bg-mineshaft-700 px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
             <div className="text-md group order-1 ml-3 flex items-center gap-2">
               <BsMicrosoftTeams className="text-lg group-hover:text-primary-400" />
-              <div className="text-[15px] font-semibold">Microsoft Teams Integration</div>
+              <div className="text-[15px] font-semibold">Microsoft Teams</div>
             </div>
           </AccordionTrigger>
           <AccordionContent childrenClassName="px-0 py-0">

frontend/src/pages/admin/IntegrationsPage/components/SlackIntegrationForm.tsx

@@ -108,7 +108,7 @@ export const SlackIntegrationForm = ({ adminIntegrationsConfig }: Props) => {
           <AccordionTrigger className="flex h-fit w-full justify-start rounded-md border border-mineshaft-500 bg-mineshaft-700 px-4 py-6 text-sm transition-colors data-[state=open]:rounded-b-none">
             <div className="text-md group order-1 ml-3 flex items-center gap-2">
               <BsSlack className="text-lg group-hover:text-primary-400" />
-              <div className="text-[15px] font-semibold">Slack Integration</div>
+              <div className="text-[15px] font-semibold">Slack</div>
             </div>
           </AccordionTrigger>
           <AccordionContent childrenClassName="px-0 py-0">

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GitHubConnectionForm.tsx

@@ -111,10 +111,10 @@ export const GitHubConnectionForm = ({ appConnection }: Props) => {
               }. This field cannot be changed after creation.`}
               errorText={
                 !isLoading && isMissingConfig
-                  ? `Environment variables have not been configured. ${
+                  ? `Credentials have not been configured. ${
                       isInfisicalCloud()
                         ? "Please contact Infisical."
-                        : `See Docs to configure GitHub ${methodDetails.name} Connections.`
+                        : `See Docs to configure Github ${methodDetails.name} Connections.`
                     }`
                   : error?.message
               }