Merge pull request #2360 from Infisical/daniel/redirect-node-docs

feat(integrations): Add visibility support to Github Integration

backend/src/lib/api-docs/constants.ts

@@ -964,6 +964,10 @@ export const INTEGRATION = {
       shouldAutoRedeploy: "Used by Render to trigger auto deploy.",
       secretGCPLabel: "The label for GCP secrets.",
       secretAWSTag: "The tags for AWS secrets.",
+      githubVisibility:
+        "Define where the secrets from the Github Integration should be visible. Option 'selected' lets you directly define which repositories to sync secrets to.",
+      githubVisibilityRepoIds:
+        "The repository IDs to sync secrets to when using the Github Integration. Only applicable when using Organization scope, and visibility is set to 'selected'",
       kmsKeyId: "The ID of the encryption key from AWS KMS.",
       shouldDisableDelete: "The flag to disable deletion of secrets in AWS Parameter Store.",
       shouldMaskSecrets: "Specifies if the secrets synced from Infisical to Gitlab should be marked as 'Masked'.",

backend/src/services/integration-auth/integration-sync-secret.ts

@@ -1625,7 +1625,11 @@ const syncSecretsGitHub = async ({
           await octokit.request("PUT /orgs/{org}/actions/secrets/{secret_name}", {
             org: integration.owner as string,
             secret_name: key,
-            visibility: "all",
+            visibility: metadata.githubVisibility ?? "all",
+            ...(metadata.githubVisibility === "selected" && {
+              // we need to map the githubVisibilityRepoIds to numbers
+              selected_repository_ids: metadata.githubVisibilityRepoIds?.map(Number) ?? []
+            }),
             encrypted_value: encryptedSecret,
             key_id: repoPublicKey.key_id
           });

backend/src/services/integration/integration-schema.ts

@@ -5,14 +5,18 @@ import { INTEGRATION } from "@app/lib/api-docs";
 import { IntegrationMappingBehavior } from "../integration-auth/integration-list";
 
 export const IntegrationMetadataSchema = z.object({
+  initialSyncBehavior: z.string().optional().describe(INTEGRATION.CREATE.metadata.initialSyncBehavoir),
+
   secretPrefix: z.string().optional().describe(INTEGRATION.CREATE.metadata.secretPrefix),
   secretSuffix: z.string().optional().describe(INTEGRATION.CREATE.metadata.secretSuffix),
-  initialSyncBehavior: z.string().optional().describe(INTEGRATION.CREATE.metadata.initialSyncBehavoir),
+
   mappingBehavior: z
     .nativeEnum(IntegrationMappingBehavior)
     .optional()
     .describe(INTEGRATION.CREATE.metadata.mappingBehavior),
+
   shouldAutoRedeploy: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.shouldAutoRedeploy),
+
   secretGCPLabel: z
     .object({
       labelName: z.string(),
@@ -20,6 +24,7 @@ export const IntegrationMetadataSchema = z.object({
     })
     .optional()
     .describe(INTEGRATION.CREATE.metadata.secretGCPLabel),
+
   secretAWSTag: z
     .array(
       z.object({
@@ -29,7 +34,15 @@ export const IntegrationMetadataSchema = z.object({
     )
     .optional()
     .describe(INTEGRATION.CREATE.metadata.secretAWSTag),
+
+  githubVisibility: z
+    .union([z.literal("selected"), z.literal("private"), z.literal("all")])
+    .optional()
+    .describe(INTEGRATION.CREATE.metadata.githubVisibility),
+  githubVisibilityRepoIds: z.array(z.string()).optional().describe(INTEGRATION.CREATE.metadata.githubVisibilityRepoIds),
+
   kmsKeyId: z.string().optional().describe(INTEGRATION.CREATE.metadata.kmsKeyId),
+
   shouldDisableDelete: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.shouldDisableDelete),
   shouldEnableDelete: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.shouldEnableDelete),
   shouldMaskSecrets: z.boolean().optional().describe(INTEGRATION.CREATE.metadata.shouldMaskSecrets),

backend/src/services/integration/integration-types.ts

@@ -27,6 +27,10 @@ export type TCreateIntegrationDTO = {
       key: string;
       value: string;
     }[];
+
+    githubVisibility?: string;
+    githubVisibilityRepoIds?: string[];
+
     kmsKeyId?: string;
     shouldDisableDelete?: boolean;
     shouldMaskSecrets?: boolean;

docs/integrations/cicd/githubactions.mdx

@@ -41,6 +41,13 @@ Prerequisites:
           </Tab>
           <Tab title="Organization">
             ![integrations github](../../images/integrations/github/integrations-github-scope-org.png)
+
+            When using the organization scope, your secrets will be saved in the top-level of your Github Organization.
+
+            You can choose the visibility, which defines which repositories can access the secrets. The options are:
+            - **All public repositories**: All public repositories in the organization can access the secrets.
+            - **All private repositories**: All private repositories in the organization can access the secrets.
+            - **Selected repositories**: Only the selected repositories can access the secrets. This gives a more fine-grained control over which repositories can access the secrets. You can select _both_ private and public repositories with this option.
           </Tab>
           <Tab title="Repository Environment">
           ![integrations github](../../images/integrations/github/integrations-github-scope-env.png)

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -13,8 +13,8 @@ export type FormLabelProps = {
   label?: ReactNode;
   icon?: ReactNode;
   className?: string;
-  tooltipText?: string;
   tooltipClassName?: string;
+  tooltipText?: ReactNode;
 };
 
 export const FormLabel = ({
@@ -24,8 +24,8 @@ export const FormLabel = ({
   icon,
   className,
   isOptional,
-  tooltipText,
+  tooltipClassName,
-  tooltipClassName
+  tooltipText
 }: FormLabelProps) => (
   <Label.Root
     className={twMerge(

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

@@ -71,6 +71,8 @@ export const useCreateIntegration = () => {
           key: string;
           value: string;
         }[];
+        githubVisibility?: string;
+        githubVisibilityRepoIds?: string[];
         kmsKeyId?: string;
         shouldDisableDelete?: boolean;
         shouldMaskSecrets?: boolean;

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

@@ -34,6 +34,9 @@ export type TIntegration = {
   syncMessage?: string;
   __v: number;
   metadata?: {
+    githubVisibility?: string;
+    githubVisibilityRepoIds?: string[];
+
     secretSuffix?: string;
     syncBehavior?: IntegrationSyncBehavior;
     mappingBehavior?: IntegrationMappingBehavior;

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import Head from "next/head";
 import Image from "next/image";
@@ -53,6 +53,21 @@ enum TabSections {
   Options = "options"
 }
 
+const secretsVisibility = [
+  {
+    value: "selected",
+    label: "Select repositories"
+  },
+  {
+    value: "all",
+    label: "All public repositories"
+  },
+  {
+    value: "private",
+    label: "All private repositories"
+  }
+] as const;
+
 const targetEnv = ["github-repo", "github-org", "github-env"] as const;
 type TargetEnv = (typeof targetEnv)[number];
 
@@ -63,9 +78,12 @@ const schema = yup.object({
   shouldEnableDelete: yup.boolean().optional(),
   scope: yup.mixed<TargetEnv>().oneOf(targetEnv.slice()).required(),
 
-  repoIds: yup.mixed().when("scope", {
+  // Explanation: If scope is (github-repo) OR (github-org AND visibility is set to selected), then repoIds is required
-    is: "github-repo",
+  repoIds: yup.mixed().when(["scope", "visibility"], {
-    then: yup.array(yup.string().required()).min(1, "Select at least one repositories")
+    is: (scope: string, visibility: string) =>
+      scope === "github-repo" || (scope === "github-org" && visibility === "selected"),
+    then: yup.array(yup.string().required()).min(1, "Select at least one repository"),
+    otherwise: yup.mixed().notRequired()
   }),
 
   repoId: yup.mixed().when("scope", {
@@ -91,6 +109,10 @@ const schema = yup.object({
   orgId: yup.mixed().when("scope", {
     is: "github-org",
     then: yup.string().required("Organization is required")
+  }),
+  visibility: yup.mixed().when("scope", {
+    is: "github-org",
+    then: yup.string().required("Visibility is required")
   })
 });
 
@@ -121,6 +143,7 @@ export default function GitHubCreateIntegrationPage() {
       secretPath: "/",
       scope: "github-repo",
       repoIds: [],
+      visibility: "all",
       shouldEnableDelete: false
     }
   });
@@ -130,6 +153,7 @@ export default function GitHubCreateIntegrationPage() {
   const repoIds = watch("repoIds");
   const repoName = watch("repoName");
   const repoOwner = watch("repoOwner");
+  const selectedOrgId = watch("orgId");
 
   const { data: integrationAuthGithubEnvs } = useGetIntegrationAuthGithubEnvs(
     integrationAuthId as string,
@@ -196,6 +220,8 @@ export default function GitHubCreateIntegrationPage() {
             scope: data.scope,
             owner: integrationAuthOrgs?.find((e) => e.orgId === data.orgId)?.name,
             metadata: {
+              githubVisibility: data.visibility,
+              githubVisibilityRepoIds: data.repoIds,
               secretSuffix: data.secretSuffix,
               shouldEnableDelete: data.shouldEnableDelete
             }
@@ -242,6 +268,15 @@ export default function GitHubCreateIntegrationPage() {
     }
   };
 
+  const selectedOrganization = useMemo(() => {
+    if (!integrationAuthApps) return null;
+
+    return integrationAuthApps.filter(
+      (authApp) =>
+        integrationAuthOrgs?.find((e) => e.orgId === selectedOrgId)?.name === authApp.owner
+    );
+  }, [selectedOrgId, integrationAuthApps]);
+
   return integrationAuth && workspace && integrationAuthApps ? (
     <div className="flex h-full w-full flex-col items-center justify-center py-4">
       <Head>
@@ -339,7 +374,10 @@ export default function GitHubCreateIntegrationPage() {
                     <FormControl label="Scope" errorText={error?.message} isError={Boolean(error)}>
                       <Select
                         defaultValue={field.value}
-                        onValueChange={onChange}
+                        onValueChange={(e) => {
+                          setValue("repoIds", []);
+                          onChange(e);
+                        }}
                         className="w-full border border-mineshaft-500"
                       >
                         <SelectItem value="github-org">Organization</SelectItem>
@@ -430,32 +468,143 @@ export default function GitHubCreateIntegrationPage() {
                   />
                 )}
                 {scope === "github-org" && (
-                  <Controller
+                  <>
-                    control={control}
+                    <Controller
-                    name="orgId"
+                      control={control}
-                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      name="orgId"
-                      <FormControl
+                      render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                        label="Organization"
+                        <FormControl
-                        errorText={
+                          label="Organization"
-                          integrationAuthOrgs?.length ? error?.message : "No organizations found"
+                          errorText={
-                        }
+                            integrationAuthOrgs?.length ? error?.message : "No organizations found"
-                        isError={Boolean(integrationAuthOrgs?.length && error?.message)}
+                          }
-                      >
+                          isError={Boolean(integrationAuthOrgs?.length && error?.message)}
-                        <Select
-                          value={field.value}
-                          onValueChange={onChange}
-                          className="w-full border border-mineshaft-500"
                         >
-                          {integrationAuthOrgs &&
+                          <Select
-                            integrationAuthOrgs.map(({ name, orgId }) => (
+                            value={field.value}
-                              <SelectItem key={`github-organization-${orgId}`} value={orgId}>
+                            onValueChange={onChange}
-                                {name}
+                            className="w-full border border-mineshaft-500"
+                          >
+                            {integrationAuthOrgs &&
+                              integrationAuthOrgs.map(({ name, orgId }) => (
+                                <SelectItem key={`github-organization-${orgId}`} value={orgId}>
+                                  {name}
+                                </SelectItem>
+                              ))}
+                          </Select>
+                        </FormControl>
+                      )}
+                    />
+
+                    <Controller
+                      control={control}
+                      name="visibility"
+                      render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                        <FormControl
+                          tooltipText="Select which type of repositories that the secrets should be synced to."
+                          label="Visibility"
+                          errorText={error?.message}
+                          isError={Boolean(error?.message)}
+                        >
+                          <Select
+                            value={field.value}
+                            onValueChange={onChange}
+                            className="w-full border border-mineshaft-500"
+                          >
+                            {secretsVisibility.map(({ label, value }) => (
+                              <SelectItem key={`github-visibility-${value}`} value={value}>
+                                {label}
                               </SelectItem>
                             ))}
-                        </Select>
+                          </Select>
-                      </FormControl>
+                        </FormControl>
+                      )}
+                    />
+
+                    {watch("visibility") === "selected" && (
+                      <Controller
+                        control={control}
+                        name="repoIds"
+                        render={({ field: { onChange }, fieldState: { error } }) => (
+                          <FormControl
+                            label="Selected Repositories"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                {integrationAuthApps.length > 0 ? (
+                                  <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                                    {repoIds.length === 1
+                                      ? integrationAuthApps?.reduce(
+                                          (acc, { appId, name, owner }) =>
+                                            repoIds[0] === appId ? `${owner}/${name}` : acc,
+                                          ""
+                                        )
+                                      : `${repoIds.length} repositories selected`}
+                                    <FontAwesomeIcon icon={faAngleDown} className="text-xs" />
+                                  </div>
+                                ) : (
+                                  <div className="inline-flex w-full cursor-default items-center justify-between rounded-md border border-mineshaft-600 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="thin-scrollbar z-[100] max-h-80 overflow-y-scroll"
+                              >
+                                {selectedOrganization ? (
+                                  selectedOrganization.map((integrationAuthApp) => {
+                                    const isSelected = repoIds.includes(
+                                      String(integrationAuthApp.appId)
+                                    );
+
+                                    return (
+                                      <DropdownMenuItem
+                                        onClick={() => {
+                                          if (repoIds.includes(String(integrationAuthApp.appId))) {
+                                            onChange(
+                                              repoIds.filter(
+                                                (appId: string) =>
+                                                  appId !== String(integrationAuthApp.appId)
+                                              )
+                                            );
+                                          } else {
+                                            onChange([
+                                              ...repoIds,
+                                              String(integrationAuthApp.appId)
+                                            ]);
+                                          }
+                                        }}
+                                        key={`repos-id-${integrationAuthApp.appId}`}
+                                        icon={
+                                          isSelected ? (
+                                            <FontAwesomeIcon
+                                              icon={faCheckCircle}
+                                              className="pr-0.5 text-primary"
+                                            />
+                                          ) : (
+                                            <div className="pl-[1.01rem]" />
+                                          )
+                                        }
+                                        iconPos="left"
+                                        className="w-[28.4rem] text-sm"
+                                      >
+                                        {integrationAuthApp.owner}/{integrationAuthApp.name}
+                                      </DropdownMenuItem>
+                                    );
+                                  })
+                                ) : (
+                                  <div />
+                                )}
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </FormControl>
+                        )}
+                      />
                     )}
-                  />
+                  </>
                 )}
                 {scope === "github-env" && (
                   <Controller

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

@@ -0,0 +1,229 @@
+import {
+  faArrowRight,
+  faCalendarCheck,
+  faRefresh,
+  faWarning,
+  faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { integrationSlugNameMapping } from "public/data/frequentConstants";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, FormLabel, IconButton, Tag, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types";
+import { TIntegration } from "@app/hooks/api/types";
+
+type IProps = {
+  integration: TIntegration;
+  environments: Array<{ name: string; slug: string; id: string }>;
+  onRemoveIntegration: VoidFunction;
+  onManualSyncIntegration: VoidFunction;
+};
+
+export const ConfiguredIntegrationItem = ({
+  integration,
+  environments,
+  onRemoveIntegration,
+  onManualSyncIntegration
+}: IProps) => {
+  return (
+    <div
+      className="max-w-8xl flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3"
+      key={`integration-${integration?.id.toString()}`}
+    >
+      <div className="flex">
+        <div className="ml-2 flex flex-col">
+          <FormLabel label="Environment" />
+          <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+            {environments.find((e) => e.id === integration.envId)?.name || "-"}
+          </div>
+        </div>
+        <div className="ml-2 flex flex-col">
+          <FormLabel label="Secret Path" />
+          <div className="min-w-[8rem] rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+            {integration.secretPath}
+          </div>
+        </div>
+        <div className="flex h-full items-center">
+          <FontAwesomeIcon icon={faArrowRight} className="mx-4 text-gray-400" />
+        </div>
+        <div className="ml-4 flex flex-col">
+          <FormLabel
+            tooltipText={
+              integration.integration === "github" ? (
+                <div className="text-xs">
+                  {/* eslint-disable-next-line no-nested-ternary */}
+                  {integration.metadata?.githubVisibility === "selected"
+                    ? "Syncing to selected repositories in the organization. "
+                    : integration.metadata?.githubVisibility === "private"
+                    ? "Syncing to all private repositories in the organization"
+                    : "Syncing to all public and private repositories in the organization"}
+                </div>
+              ) : undefined
+            }
+            label="Integration"
+          />
+          <div className="min-w-[8rem] rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+            {integrationSlugNameMapping[integration.integration]}
+          </div>
+        </div>
+        {integration.integration === "qovery" && (
+          <div className="flex flex-row">
+            <div className="ml-2 flex flex-col">
+              <FormLabel label="Org" />
+              <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                {integration?.owner || "-"}
+              </div>
+            </div>
+            <div className="ml-2 flex flex-col">
+              <FormLabel label="Project" />
+              <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                {integration?.targetService || "-"}
+              </div>
+            </div>
+            <div className="ml-2 flex flex-col">
+              <FormLabel label="Env" />
+              <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                {integration?.targetEnvironment || "-"}
+              </div>
+            </div>
+          </div>
+        )}
+        {!(
+          integration.integration === "aws-secret-manager" &&
+          integration.metadata?.mappingBehavior === IntegrationMappingBehavior.ONE_TO_ONE
+        ) && (
+          <div className="ml-2 flex flex-col">
+            <FormLabel
+              label={
+                (integration.integration === "qovery" && integration?.scope) ||
+                (integration.integration === "aws-secret-manager" && "Secret") ||
+                (["aws-parameter-store", "rundeck"].includes(integration.integration) && "Path") ||
+                (integration?.integration === "terraform-cloud" && "Project") ||
+                (integration?.scope === "github-org" && "Organization") ||
+                (["github-repo", "github-env"].includes(integration?.scope as string) &&
+                  "Repository") ||
+                "App"
+              }
+            />
+            <div className="no-scrollbar::-webkit-scrollbar min-w-[8rem] max-w-[12rem] overflow-scroll whitespace-nowrap rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 no-scrollbar">
+              {(integration.integration === "hashicorp-vault" &&
+                `${integration.app} - path: ${integration.path}`) ||
+                (integration.scope === "github-org" && `${integration.owner}`) ||
+                (["aws-parameter-store", "rundeck"].includes(integration.integration) &&
+                  `${integration.path}`) ||
+                (integration.scope?.startsWith("github-") &&
+                  `${integration.owner}/${integration.app}`) ||
+                integration.app}
+            </div>
+          </div>
+        )}
+        {(integration.integration === "vercel" ||
+          integration.integration === "netlify" ||
+          integration.integration === "railway" ||
+          integration.integration === "gitlab" ||
+          integration.integration === "teamcity" ||
+          integration.integration === "bitbucket" ||
+          (integration.integration === "github" && integration.scope === "github-env")) && (
+          <div className="ml-4 flex flex-col">
+            <FormLabel label="Target Environment" />
+            <div className="overflow-clip text-ellipsis whitespace-nowrap rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+              {integration.targetEnvironment || integration.targetEnvironmentId}
+            </div>
+          </div>
+        )}
+        {integration.integration === "checkly" && integration.targetService && (
+          <div className="ml-2">
+            <FormLabel label="Group" />
+            <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+              {integration.targetService}
+            </div>
+          </div>
+        )}
+        {integration.integration === "terraform-cloud" && integration.targetService && (
+          <div className="ml-2">
+            <FormLabel label="Category" />
+            <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+              {integration.targetService}
+            </div>
+          </div>
+        )}
+        {(integration.integration === "checkly" || integration.integration === "github") && (
+          <div className="ml-2">
+            <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">
+              {integration?.metadata?.secretSuffix || "-"}
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="mt-[1.5rem] flex cursor-default">
+        {integration.isSynced != null && integration.lastUsed != null && (
+          <Tag key={integration.id} className={integration.isSynced ? "bg-green-800" : "bg-red/80"}>
+            <Tooltip
+              center
+              className="max-w-xs whitespace-normal break-words"
+              content={
+                <div className="flex max-h-[10rem] flex-col overflow-auto ">
+                  <div className="flex self-start">
+                    <FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 text-sm" />
+                    <div className="text-sm">Last sync</div>
+                  </div>
+                  <div className="pl-5 text-left text-xs">
+                    {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
+                  </div>
+                  {!integration.isSynced && (
+                    <>
+                      <div className="mt-2 flex self-start">
+                        <FontAwesomeIcon icon={faXmark} className="pt-1 pr-2 text-sm" />
+                        <div className="text-sm">Fail reason</div>
+                      </div>
+                      <div className="pl-5 text-left text-xs">{integration.syncMessage}</div>
+                    </>
+                  )}
+                </div>
+              }
+            >
+              <div className="flex items-center space-x-2 text-white">
+                <div>{integration.isSynced ? "Synced" : "Not synced"}</div>
+                {!integration.isSynced && <FontAwesomeIcon icon={faWarning} />}
+              </div>
+            </Tooltip>
+          </Tag>
+        )}
+        <div className="mr-1 flex items-end opacity-80 duration-200 hover:opacity-100">
+          <Tooltip className="text-center" content="Manually sync integration secrets">
+            <Button
+              onClick={() => onManualSyncIntegration()}
+              className="max-w-[2.5rem] border-none bg-mineshaft-500"
+            >
+              <FontAwesomeIcon icon={faRefresh} className="px-1 text-bunker-200" />
+            </Button>
+          </Tooltip>
+        </div>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Delete}
+          a={ProjectPermissionSub.Integrations}
+        >
+          {(isAllowed: boolean) => (
+            <div className="flex items-end opacity-80 duration-200 hover:opacity-100">
+              <Tooltip content="Remove Integration">
+                <IconButton
+                  onClick={() => onRemoveIntegration()}
+                  ariaLabel="delete"
+                  isDisabled={!isAllowed}
+                  colorSchema="danger"
+                  variant="star"
+                >
+                  <FontAwesomeIcon icon={faXmark} className="px-0.5" />
+                </IconButton>
+              </Tooltip>
+            </div>
+          )}
+        </ProjectPermissionCan>
+      </div>
+    </div>
+  );
+};

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

@@ -1,27 +1,10 @@
-import { faCalendarCheck } from "@fortawesome/free-regular-svg-icons";
+import { Checkbox, DeleteActionModal, EmptyState, Skeleton } from "@app/components/v2";
-import { faArrowRight, faRefresh, faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";
-import { integrationSlugNameMapping } from "public/data/frequentConstants";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  Checkbox,
-  DeleteActionModal,
-  EmptyState,
-  FormLabel,
-  IconButton,
-  Skeleton,
-  Tag,
-  Tooltip
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { usePopUp, useToggle } from "@app/hooks";
 import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
-import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types";
 import { TIntegration } from "@app/hooks/api/types";
 
+import { ConfiguredIntegrationItem } from "./ConfiguredIntegrationItem";
+
 type Props = {
   environments: Array<{ name: string; slug: string; id: string }>;
   integrations?: TIntegration[];
@@ -72,207 +55,22 @@ export const IntegrationsSection = ({
       {!isLoading && (
         <div className="flex min-w-max flex-col space-y-4 p-6 pt-0">
           {integrations?.map((integration) => (
-            <div
+            <ConfiguredIntegrationItem
-              className="max-w-8xl flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3"
+              key={`integration-${integration.id}`}
-              key={`integration-${integration?.id.toString()}`}
+              onManualSyncIntegration={() => {
-            >
+                syncIntegration({
-              <div className="flex">
+                  workspaceId,
-                <div className="ml-2 flex flex-col">
+                  id: integration.id,
-                  <FormLabel label="Environment" />
+                  lastUsed: integration.lastUsed as string
-                  <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                });
-                    {environments.find((e) => e.id === integration.envId)?.name || "-"}
+              }}
-                  </div>
+              onRemoveIntegration={() => {
-                </div>
+                setShouldDeleteSecrets.off();
-                <div className="ml-2 flex flex-col">
+                handlePopUpOpen("deleteConfirmation", integration);
-                  <FormLabel label="Secret Path" />
+              }}
-                  <div className="min-w-[8rem] rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+              integration={integration}
-                    {integration.secretPath}
+              environments={environments}
-                  </div>
+            />
-                </div>
-                <div className="flex h-full items-center">
-                  <FontAwesomeIcon icon={faArrowRight} className="mx-4 text-gray-400" />
-                </div>
-                <div className="ml-4 flex flex-col">
-                  <FormLabel label="Integration" />
-                  <div className="min-w-[8rem] rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                    {integrationSlugNameMapping[integration.integration]}
-                  </div>
-                </div>
-                {integration.integration === "qovery" && (
-                  <div className="flex flex-row">
-                    <div className="ml-2 flex flex-col">
-                      <FormLabel label="Org" />
-                      <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                        {integration?.owner || "-"}
-                      </div>
-                    </div>
-                    <div className="ml-2 flex flex-col">
-                      <FormLabel label="Project" />
-                      <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                        {integration?.targetService || "-"}
-                      </div>
-                    </div>
-                    <div className="ml-2 flex flex-col">
-                      <FormLabel label="Env" />
-                      <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                        {integration?.targetEnvironment || "-"}
-                      </div>
-                    </div>
-                  </div>
-                )}
-                {!(
-                  integration.integration === "aws-secret-manager" &&
-                  integration.metadata?.mappingBehavior === IntegrationMappingBehavior.ONE_TO_ONE
-                ) && (
-                  <div className="ml-2 flex flex-col">
-                    <FormLabel
-                      label={
-                        (integration.integration === "qovery" && integration?.scope) ||
-                        (integration.integration === "aws-secret-manager" && "Secret") ||
-                        (["aws-parameter-store", "rundeck"].includes(integration.integration) &&
-                          "Path") ||
-                        (integration?.integration === "terraform-cloud" && "Project") ||
-                        (integration?.scope === "github-org" && "Organization") ||
-                        (["github-repo", "github-env"].includes(integration?.scope as string) &&
-                          "Repository") ||
-                        "App"
-                      }
-                    />
-                    <div className="no-scrollbar::-webkit-scrollbar min-w-[8rem] max-w-[12rem] overflow-scroll whitespace-nowrap rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 no-scrollbar">
-                      {(integration.integration === "hashicorp-vault" &&
-                        `${integration.app} - path: ${integration.path}`) ||
-                        (integration.scope === "github-org" && `${integration.owner}`) ||
-                        (["aws-parameter-store", "rundeck"].includes(integration.integration) &&
-                          `${integration.path}`) ||
-                        (integration.scope?.startsWith("github-") &&
-                          `${integration.owner}/${integration.app}`) ||
-                        integration.app}
-                    </div>
-                  </div>
-                )}
-                {(integration.integration === "vercel" ||
-                  integration.integration === "netlify" ||
-                  integration.integration === "railway" ||
-                  integration.integration === "gitlab" ||
-                  integration.integration === "teamcity" ||
-                  integration.integration === "bitbucket" ||
-                  (integration.integration === "github" && integration.scope === "github-env")) && (
-                  <div className="ml-4 flex flex-col">
-                    <FormLabel label="Target Environment" />
-                    <div className="overflow-clip text-ellipsis whitespace-nowrap rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                      {integration.targetEnvironment || integration.targetEnvironmentId}
-                    </div>
-                  </div>
-                )}
-                {integration.integration === "checkly" && integration.targetService && (
-                  <div className="ml-2">
-                    <FormLabel label="Group" />
-                    <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                      {integration.targetService}
-                    </div>
-                  </div>
-                )}
-                {integration.integration === "terraform-cloud" && integration.targetService && (
-                  <div className="ml-2">
-                    <FormLabel label="Category" />
-                    <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                      {integration.targetService}
-                    </div>
-                  </div>
-                )}
-                {(integration.integration === "checkly" ||
-                  integration.integration === "github") && (
-                  <div className="ml-2">
-                    <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">
-                      {integration?.metadata?.secretSuffix || "-"}
-                    </div>
-                  </div>
-                )}
-              </div>
-              <div className="mt-[1.5rem] flex cursor-default">
-                {integration.isSynced != null && integration.lastUsed != null && (
-                  <Tag
-                    key={integration.id}
-                    className={integration.isSynced ? "bg-green-800" : "bg-red/80"}
-                  >
-                    <Tooltip
-                      center
-                      className="max-w-xs whitespace-normal break-words"
-                      content={
-                        <div className="flex max-h-[10rem] flex-col overflow-auto ">
-                          <div className="flex self-start">
-                            <FontAwesomeIcon
-                              icon={faCalendarCheck}
-                              className="pt-0.5 pr-2 text-sm"
-                            />
-                            <div className="text-sm">Last sync</div>
-                          </div>
-                          <div className="pl-5 text-left text-xs">
-                            {format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
-                          </div>
-                          {!integration.isSynced && (
-                            <>
-                              <div className="mt-2 flex self-start">
-                                <FontAwesomeIcon icon={faXmark} className="pt-1 pr-2 text-sm" />
-                                <div className="text-sm">Fail reason</div>
-                              </div>
-                              <div className="pl-5 text-left text-xs">
-                                {integration.syncMessage}
-                              </div>
-                            </>
-                          )}
-                        </div>
-                      }
-                    >
-                      <div className="flex items-center space-x-2 text-white">
-                        <div>{integration.isSynced ? "Synced" : "Not synced"}</div>
-                        {!integration.isSynced && <FontAwesomeIcon icon={faWarning} />}
-                      </div>
-                    </Tooltip>
-                  </Tag>
-                )}
-                <div className="mr-1 flex items-end opacity-80 duration-200 hover:opacity-100">
-                  <Tooltip className="text-center" content="Manually sync integration secrets">
-                    <Button
-                      onClick={() =>
-                        syncIntegration({
-                          workspaceId,
-                          id: integration.id,
-                          lastUsed: integration.lastUsed as string
-                        })
-                      }
-                      className="max-w-[2.5rem] border-none bg-mineshaft-500"
-                    >
-                      <FontAwesomeIcon icon={faRefresh} className="px-1 text-bunker-200" />
-                    </Button>
-                  </Tooltip>
-                </div>
-                <ProjectPermissionCan
-                  I={ProjectPermissionActions.Delete}
-                  a={ProjectPermissionSub.Integrations}
-                >
-                  {(isAllowed: boolean) => (
-                    <div className="flex items-end opacity-80 duration-200 hover:opacity-100">
-                      <Tooltip content="Remove Integration">
-                        <IconButton
-                          onClick={() => {
-                            setShouldDeleteSecrets.off();
-                            handlePopUpOpen("deleteConfirmation", integration);
-                          }}
-                          ariaLabel="delete"
-                          isDisabled={!isAllowed}
-                          colorSchema="danger"
-                          variant="star"
-                        >
-                          <FontAwesomeIcon icon={faXmark} className="px-0.5" />
-                        </IconButton>
-                      </Tooltip>
-                    </div>
-                  )}
-                </ProjectPermissionCan>
-              </div>
-            </div>
           ))}
         </div>
       )}