Fix merge conflicts

2026-10-15 21:40:31 +00:00 · 2024-09-11 10:38:47 -07:00
parent 2e8ad18285 af1905a39e
commit e442f10fa5
95 changed files with 4213 additions and 401 deletions
@@ -129,8 +129,7 @@ export const AddOrgMemberModal = ({
        organizationId: currentOrg?.id,
        inviteeEmails: emails.split(",").map((email) => email.trim()),
        organizationRoleSlug,
-        projectIds,
-        projectRoleSlug
+        projects: projectIds.map((id) => ({ id, projectRoleSlug: [projectRoleSlug] }))
      });

      setCompleteInviteLinks(data?.completeInviteLinks ?? null);
@@ -444,6 +444,23 @@ export const LogsTableRow = ({ auditLog, isOrgAuditLogs, showActorColumn }: Prop
            <p>{`Certificate Template ID: ${event.metadata.certificateTemplateId}`}</p>
          </Td>
        );
+      case EventType.GET_PROJECT_SLACK_CONFIG:
+        return (
+          <Td>
+            <p>{`Project Slack Config ID: ${event.metadata.id}`}</p>
+          </Td>
+        );
+      case EventType.UPDATE_PROJECT_SLACK_CONFIG:
+        return (
+          <Td>
+            <p>{`Project Slack Config ID: ${event.metadata.id}`}</p>
+            <p>{`Slack integration ID: ${event.metadata.slackIntegrationId}`}</p>
+            <p>{`Access Request Notification Status: ${event.metadata.isAccessRequestNotificationEnabled}`}</p>
+            <p>{`Access Request Channels: ${event.metadata.accessRequestChannels}`}</p>
+            <p>{`Secret Approval Request Notification Status: ${event.metadata.isSecretRequestNotificationEnabled}`}</p>
+            <p>{`Secret Request Channels: ${event.metadata.secretRequestChannels}`}</p>
+          </Td>
+        );
      default:
        return <Td />;
    }
@@ -101,9 +101,7 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
    members?.forEach((member) => {
      wsUserUsernames.set(member.user.username, true);
    });
-    return (orgUsers || []).filter(
-      ({ status, user: u }) => status === "accepted" && !wsUserUsernames.has(u.username)
-    );
+    return (orgUsers || []).filter(({ user: u }) => !wsUserUsernames.has(u.username));
  }, [orgUsers, members]);

  return (
@@ -1,10 +1,11 @@
-import { useMemo,useState } from "react";
+import { useMemo, useState } from "react";
 import {
  faClock,
  faEdit,
  faMagnifyingGlass,
  faTrash,
-  faUsers} from "@fortawesome/free-solid-svg-icons";
+  faUsers
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";

@@ -27,12 +28,14 @@ import {
  Th,
  THead,
  Tooltip,
-  Tr} from "@app/components/v2";
+  Tr
+} from "@app/components/v2";
 import {
  ProjectPermissionActions,
  ProjectPermissionSub,
  useUser,
-  useWorkspace} from "@app/context";
+  useWorkspace
+} from "@app/context";
 import { useGetWorkspaceUsers } from "@app/hooks/api";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { TWorkspaceUser } from "@app/hooks/api/types";
@@ -104,7 +107,7 @@ export const MembersTable = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Prop
            {!isMembersLoading &&
              filterdUsers?.map((projectMember, index) => {
                const { user: u, inviteEmail, id: membershipId, roles } = projectMember;
-                const name = u ? `${u.firstName} ${u.lastName}` : "-";
+                const name = u.firstName || u.lastName ? `${u.firstName} ${u.lastName || ""}` : "-";
                const email = u?.email || inviteEmail;

                return (
@@ -1,20 +1,36 @@
-import { Fragment } from "react";
+import { Fragment, useEffect, useState } from "react";
+import { useRouter } from "next/router";
 import { Tab } from "@headlessui/react";

 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { OrgAuthTab } from "../OrgAuthTab";
 import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
+import { OrgWorkflowIntegrationTab } from "../OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab";

 const tabs = [
  { name: "General", key: "tab-org-general" },
  { name: "Security", key: "tab-org-security" },
  { name: "Encryption", key: "tab-org-encryption" },
+  { name: "Workflow Integrations", key: "workflow-integrations" },
  { name: "Audit Log Streams", key: "tag-audit-log-streams" }
 ];
 export const OrgTabGroup = () => {
+  const { query } = useRouter();
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  const selectedTab = query.selectedTab as string;
+
+  useEffect(() => {
+    if (selectedTab) {
+      const index = tabs.findIndex((tab) => tab.key === selectedTab);
+      if (index !== -1) {
+        setSelectedTabIndex(index);
+      }
+    }
+  }, [selectedTab]);
+
  return (
-    <Tab.Group>
+    <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
      <Tab.List className="mb-6 w-full border-b-2 border-mineshaft-800">
        {tabs.map((tab) => (
          <Tab as={Fragment} key={tab.key}>
@@ -41,6 +57,9 @@ export const OrgTabGroup = () => {
        <Tab.Panel>
          <OrgEncryptionTab />
        </Tab.Panel>
+        <Tab.Panel>
+          <OrgWorkflowIntegrationTab />
+        </Tab.Panel>
        <Tab.Panel>
          <AuditLogStreamsTab />
        </Tab.Panel>
@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { faSlack } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Modal, ModalContent } from "@app/components/v2";
+import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
+
+import { SlackIntegrationForm } from "./SlackIntegrationForm";
+
+type Props = {
+  isOpen?: boolean;
+  onToggle: (isOpen: boolean) => void;
+};
+
+enum WizardSteps {
+  SelectPlatform = "select-platform",
+  PlatformInputs = "platform-inputs"
+}
+
+const PLATFORM_LIST = [
+  {
+    icon: faSlack,
+    platform: WorkflowIntegrationPlatform.SLACK,
+    title: "Slack"
+  }
+];
+
+export const AddWorkflowIntegrationForm = ({ isOpen, onToggle }: Props) => {
+  const [wizardStep, setWizardStep] = useState(WizardSteps.SelectPlatform);
+  const [selectedPlatform, setSelectedPlatform] = useState<string | null>(null);
+
+  const handleFormReset = (state: boolean = false) => {
+    onToggle(state);
+    setWizardStep(WizardSteps.SelectPlatform);
+    setSelectedPlatform(null);
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={(state) => handleFormReset(state)}>
+      <ModalContent title={`Add a ${selectedPlatform ?? "workflow"} integration`} className="my-4">
+        <AnimatePresence exitBeforeEnter>
+          {wizardStep === WizardSteps.SelectPlatform && (
+            <motion.div
+              key="select-type-step"
+              transition={{ duration: 0.1 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: -30 }}
+            >
+              <div className="mb-4 text-mineshaft-300">Select a platform</div>
+              <div className="flex items-center space-x-4">
+                {PLATFORM_LIST.map(({ icon, platform, title }) => (
+                  <div
+                    key={platform}
+                    className="flex h-28 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      setSelectedPlatform(platform);
+                      setWizardStep(WizardSteps.PlatformInputs);
+                    }}
+                    onKeyDown={(evt) => {
+                      if (evt.key === "Enter") {
+                        setSelectedPlatform(platform);
+                        setWizardStep(WizardSteps.PlatformInputs);
+                      }
+                    }}
+                  >
+                    <FontAwesomeIcon icon={icon} size="lg" />
+                    <div className="whitespace-pre-wrap text-center text-sm">{title}</div>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          )}
+          {wizardStep === WizardSteps.PlatformInputs &&
+            selectedPlatform === WorkflowIntegrationPlatform.SLACK && (
+              <motion.div
+                key="slack-platform"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <SlackIntegrationForm onClose={() => onToggle(false)} />
+              </motion.div>
+            )}
+        </AnimatePresence>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,26 @@
+import { Modal, ModalContent } from "@app/components/v2";
+import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
+
+import { SlackIntegrationForm } from "./SlackIntegrationForm";
+
+type Props = {
+  isOpen: boolean;
+  id: string;
+  workflowPlatform: WorkflowIntegrationPlatform;
+  onOpenChange: (state: boolean) => void;
+};
+
+export const IntegrationFormDetails = ({ isOpen, id, onOpenChange, workflowPlatform }: Props) => {
+  const modalTitle =
+    workflowPlatform === WorkflowIntegrationPlatform.SLACK ? "Slack integration" : "Integration";
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent title={modalTitle}>
+        {workflowPlatform === WorkflowIntegrationPlatform.SLACK && (
+          <SlackIntegrationForm id={id} onClose={() => onOpenChange(false)} />
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,240 @@
+import { useRouter } from "next/router";
+import { faSlack } from "@fortawesome/free-brands-svg-icons";
+import { faEllipsis, faGear, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import axios from "axios";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { withPermission } from "@app/hoc";
+import { usePopUp } from "@app/hooks";
+import {
+  fetchSlackReinstallUrl,
+  useDeleteSlackIntegration,
+  useGetWorkflowIntegrations
+} from "@app/hooks/api";
+import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
+
+import { AddWorkflowIntegrationForm } from "./AddWorkflowIntegrationForm";
+import { IntegrationFormDetails } from "./IntegrationFormDetails";
+
+export const OrgWorkflowIntegrationTab = withPermission(
+  () => {
+    const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+      "addWorkflowIntegration",
+      "integrationDetails",
+      "removeIntegration"
+    ] as const);
+
+    const { currentOrg } = useOrganization();
+    const router = useRouter();
+    const { data: workflowIntegrations, isLoading: isWorkflowIntegrationsLoading } =
+      useGetWorkflowIntegrations(currentOrg?.id);
+
+    const { mutateAsync: deleteSlackIntegration } = useDeleteSlackIntegration();
+
+    const handleRemoveIntegration = async () => {
+      if (!currentOrg) {
+        return;
+      }
+
+      const { platform, id } = popUp.removeIntegration.data;
+      if (platform === WorkflowIntegrationPlatform.SLACK) {
+        await deleteSlackIntegration({
+          id,
+          orgId: currentOrg?.id
+        });
+      }
+
+      handlePopUpClose("removeIntegration");
+      createNotification({
+        text: "Successfully deleted integration",
+        type: "success"
+      });
+    };
+
+    const triggerReinstall = async (platform: WorkflowIntegrationPlatform, id: string) => {
+      if (platform === WorkflowIntegrationPlatform.SLACK) {
+        try {
+          const slackReinstallUrl = await fetchSlackReinstallUrl({
+            id
+          });
+
+          if (slackReinstallUrl) {
+            router.push(slackReinstallUrl);
+          }
+        } catch (err) {
+          if (axios.isAxiosError(err)) {
+            createNotification({
+              text: (err.response?.data as { message: string })?.message,
+              type: "error"
+            });
+          }
+        }
+      }
+    };
+
+    return (
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="flex justify-between">
+          <p className="text-xl font-semibold text-mineshaft-100">Workflow Integrations</p>
+          <OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Settings}>
+            {(isAllowed) => (
+              <Button
+                onClick={() => {
+                  handlePopUpOpen("addWorkflowIntegration");
+                }}
+                isDisabled={!isAllowed}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              >
+                Add
+              </Button>
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="mb-4 text-gray-400">
+          Connect Infisical to other platforms for notification and workflow integrations.
+        </p>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Td>Provider</Td>
+                <Td>Alias</Td>
+              </Tr>
+            </THead>
+            <TBody>
+              {isWorkflowIntegrationsLoading && (
+                <TableSkeleton columns={2} innerKey="integrations-loading" />
+              )}
+              {!isWorkflowIntegrationsLoading &&
+                workflowIntegrations &&
+                workflowIntegrations.length === 0 && (
+                  <Tr>
+                    <Td colSpan={5}>
+                      <EmptyState title="No workflow integrations found" icon={faGear} />
+                    </Td>
+                  </Tr>
+                )}
+              {workflowIntegrations?.map((workflowIntegration) => (
+                <Tr key={workflowIntegration.id}>
+                  <Td className="flex max-w-xs items-center overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
+                    <FontAwesomeIcon icon={faSlack} />
+                    <div className="ml-2">{workflowIntegration.integration.toUpperCase()}</div>
+                  </Td>
+                  <Td>{workflowIntegration.slug}</Td>
+                  <Td>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild className="rounded-lg">
+                        <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
+                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="p-1">
+                        <DropdownMenuItem
+                          onClick={(e) => {
+                            e.stopPropagation();
+
+                            handlePopUpOpen("integrationDetails", {
+                              id: workflowIntegration.id,
+                              platform: workflowIntegration.integration
+                            });
+                          }}
+                        >
+                          More details
+                        </DropdownMenuItem>
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Create}
+                          an={OrgPermissionSubjects.Settings}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              disabled={!isAllowed}
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+
+                                triggerReinstall(
+                                  workflowIntegration.integration,
+                                  workflowIntegration.id
+                                );
+                              }}
+                            >
+                              Reinstall
+                            </DropdownMenuItem>
+                          )}
+                        </OrgPermissionCan>
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Delete}
+                          an={OrgPermissionSubjects.Settings}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              disabled={!isAllowed}
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+
+                                handlePopUpOpen("removeIntegration", {
+                                  id: workflowIntegration.id,
+                                  slug: workflowIntegration.slug,
+                                  platform: workflowIntegration.integration
+                                });
+                              }}
+                            >
+                              Delete
+                            </DropdownMenuItem>
+                          )}
+                        </OrgPermissionCan>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Td>
+                </Tr>
+              ))}
+            </TBody>
+          </Table>
+        </TableContainer>
+        <AddWorkflowIntegrationForm
+          isOpen={popUp.addWorkflowIntegration.isOpen}
+          onToggle={(state) => handlePopUpToggle("addWorkflowIntegration", state)}
+        />
+        <IntegrationFormDetails
+          isOpen={popUp.integrationDetails?.isOpen}
+          workflowPlatform={popUp.integrationDetails?.data?.platform}
+          id={popUp.integrationDetails?.data?.id}
+          onOpenChange={(state) => handlePopUpToggle("integrationDetails", state)}
+        />
+        <DeleteActionModal
+          isOpen={popUp.removeIntegration.isOpen}
+          title={`Are you sure want to remove ${popUp?.removeIntegration?.data?.slug}?`}
+          onChange={(isOpen) => handlePopUpToggle("removeIntegration", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={handleRemoveIntegration}
+        />
+      </div>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Settings }
+);
@@ -0,0 +1,144 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
+import { zodResolver } from "@hookform/resolvers/zod";
+import slugify from "@sindresorhus/slugify";
+import axios from "axios";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useToggle } from "@app/hooks";
+import {
+  fetchSlackInstallUrl,
+  useGetSlackIntegrationById,
+  useUpdateSlackIntegration
+} from "@app/hooks/api";
+
+type Props = {
+  id?: string;
+  onClose: () => void;
+};
+
+const slackFormSchema = z.object({
+  slug: z
+    .string()
+    .trim()
+    .min(1)
+    .refine((v) => slugify(v) === v, {
+      message: "Alias must be a valid slug"
+    }),
+  description: z.string().optional()
+});
+
+type TSlackFormData = z.infer<typeof slackFormSchema>;
+
+export const SlackIntegrationForm = ({ id, onClose }: Props) => {
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TSlackFormData>({
+    resolver: zodResolver(slackFormSchema)
+  });
+
+  const router = useRouter();
+  const [isConnectLoading, setIsConnectLoading] = useToggle(false);
+  const { currentOrg } = useOrganization();
+  const { data: slackIntegration } = useGetSlackIntegrationById(id);
+  const { mutateAsync: updateSlackIntegration } = useUpdateSlackIntegration();
+
+  useEffect(() => {
+    if (slackIntegration) {
+      setValue("slug", slackIntegration.slug);
+      setValue("description", slackIntegration.description ?? "");
+    }
+  }, [slackIntegration]);
+
+  const triggerSlackInstall = async (slug: string, description?: string) => {
+    setIsConnectLoading.on();
+    try {
+      const slackInstallUrl = await fetchSlackInstallUrl({
+        slug,
+        description
+      });
+      if (slackInstallUrl) {
+        router.push(slackInstallUrl);
+      }
+    } catch (err) {
+      if (axios.isAxiosError(err)) {
+        createNotification({
+          text: (err.response?.data as { message: string })?.message,
+          type: "error"
+        });
+      }
+    } finally {
+      setIsConnectLoading.off();
+    }
+  };
+
+  const handleSlackFormSubmit = async ({ slug, description }: TSlackFormData) => {
+    if (id && slackIntegration) {
+      if (!currentOrg) {
+        return;
+      }
+
+      await updateSlackIntegration({
+        id,
+        orgId: currentOrg?.id,
+        slug,
+        description
+      });
+
+      onClose();
+      createNotification({
+        text: "Successfully updated Slack integration",
+        type: "success"
+      });
+    } else {
+      await triggerSlackInstall(slug, description);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleSlackFormSubmit)} autoComplete="off">
+      <Controller
+        control={control}
+        name="slug"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Alias" isRequired errorText={error?.message} isError={Boolean(error)}>
+            <Input placeholder="" {...field} />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="description"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Description" errorText={error?.message} isError={Boolean(error)}>
+            <Input placeholder="" {...field} />
+          </FormControl>
+        )}
+      />
+      {slackIntegration && (
+        <FormControl label="Connected Slack workspace">
+          <Input value={slackIntegration?.teamName} isReadOnly className="bg-white/[0.07]" />
+        </FormControl>
+      )}
+      <div className="mt-6 flex items-center space-x-4">
+        <Button
+          type="submit"
+          isLoading={isSubmitting || isConnectLoading}
+          isDisabled={!isDirty || isConnectLoading || isSubmitting}
+        >
+          {slackIntegration ? "Save" : "Connect Slack"}
+        </Button>
+        <Button variant="outline_bg" onClick={onClose}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};
@@ -8,6 +8,7 @@ import { ProjectVersion } from "@app/hooks/api/workspace/types";
 import { EncryptionTab } from "./components/EncryptionTab";
 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
 import { WebhooksTab } from "./components/WebhooksTab";
+import { WorkflowIntegrationTab } from "./components/WorkflowIntegrationSection";

 export const ProjectSettingsPage = () => {
  const { t } = useTranslation();
@@ -19,6 +20,7 @@ export const ProjectSettingsPage = () => {
      key: "tab-project-encryption",
      isHidden: currentWorkspace?.version !== ProjectVersion.V3
    },
+    { name: "Workflow Integrations", key: "tab-workflow-integrations" },
    { name: "Webhooks", key: "tab-project-webhooks" }
  ];

@@ -56,6 +58,9 @@ export const ProjectSettingsPage = () => {
                <EncryptionTab />
              </Tab.Panel>
            )}
+            <Tab.Panel>
+              <WorkflowIntegrationTab />
+            </Tab.Panel>
            <Tab.Panel>
              <WebhooksTab />
            </Tab.Panel>
@@ -0,0 +1,336 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Link from "next/link";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  ContentLoader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  FormControl,
+  Input,
+  Select,
+  SelectItem,
+  Switch
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import {
+  useGetSlackIntegrationChannels,
+  useGetSlackIntegrations,
+  useGetWorkspaceSlackConfig,
+  useUpdateProjectSlackConfig
+} from "@app/hooks/api";
+
+const formSchema = z.object({
+  slackIntegrationId: z.string(),
+  isSecretRequestNotificationEnabled: z.boolean(),
+  secretRequestChannels: z.string().array(),
+  isAccessRequestNotificationEnabled: z.boolean(),
+  accessRequestChannels: z.string().array()
+});
+
+type TSlackConfigForm = z.infer<typeof formSchema>;
+
+export const WorkflowIntegrationTab = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { data: slackConfig, isLoading: isSlackConfigLoading } = useGetWorkspaceSlackConfig({
+    workspaceId: currentWorkspace?.id ?? ""
+  });
+  const { data: slackIntegrations } = useGetSlackIntegrations(currentWorkspace?.orgId);
+  const { mutateAsync: updateProjectSlackConfig } = useUpdateProjectSlackConfig();
+
+  const {
+    control,
+    watch,
+    handleSubmit,
+    setValue,
+    formState: { isDirty, isSubmitting }
+  } = useForm<TSlackConfigForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      isAccessRequestNotificationEnabled: false,
+      accessRequestChannels: [],
+      isSecretRequestNotificationEnabled: false,
+      secretRequestChannels: []
+    }
+  });
+
+  const secretRequestNotifState = watch("isSecretRequestNotificationEnabled");
+  const selectedSlackIntegrationId = watch("slackIntegrationId");
+  const accessRequestNotifState = watch("isAccessRequestNotificationEnabled");
+
+  const { data: slackChannels } = useGetSlackIntegrationChannels(selectedSlackIntegrationId);
+  const slackChannelIdToName = Object.fromEntries(
+    (slackChannels || []).map((channel) => [channel.id, channel.name])
+  );
+  const sortedSlackChannels = slackChannels?.sort((a, b) =>
+    a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+  );
+
+  const handleIntegrationSave = async (data: TSlackConfigForm) => {
+    if (!currentWorkspace) {
+      return;
+    }
+
+    await updateProjectSlackConfig({
+      workspaceId: currentWorkspace.id,
+      ...data,
+      accessRequestChannels: data.accessRequestChannels.filter(Boolean).join(", "),
+      secretRequestChannels: data.secretRequestChannels.filter(Boolean).join(", ")
+    });
+
+    createNotification({
+      type: "success",
+      text: "Successfully updated slack integration"
+    });
+  };
+
+  useEffect(() => {
+    if (slackConfig) {
+      setValue("slackIntegrationId", slackConfig.slackIntegrationId);
+      setValue(
+        "isSecretRequestNotificationEnabled",
+        slackConfig.isSecretRequestNotificationEnabled
+      );
+      setValue(
+        "isAccessRequestNotificationEnabled",
+        slackConfig.isAccessRequestNotificationEnabled
+      );
+
+      if (slackChannels) {
+        setValue(
+          "secretRequestChannels",
+          slackConfig.secretRequestChannels
+            .split(", ")
+            .filter((channel) => channel in slackChannelIdToName)
+        );
+        setValue(
+          "accessRequestChannels",
+          slackConfig.accessRequestChannels
+            .split(", ")
+            .filter((channel) => channel in slackChannelIdToName)
+        );
+      }
+    }
+  }, [slackConfig, slackChannels]);
+
+  if (isSlackConfigLoading) {
+    return <ContentLoader />;
+  }
+
+  return !slackIntegrations?.length ? (
+    <EmptyState title="You do not have any integrations configured.">
+      <Link href={`/org/${currentWorkspace?.orgId}/settings?selectedTab=workflow-integrations`}>
+        <div className="mt-2 underline decoration-primary-800 underline-offset-4 duration-200 hover:cursor-pointer hover:text-mineshaft-100 hover:decoration-primary-600">
+          Create one now
+        </div>
+      </Link>
+    </EmptyState>
+  ) : (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex justify-between">
+        <h2 className="mb-2 flex-1 text-xl font-semibold text-mineshaft-100">Slack Integration</h2>
+      </div>
+      <p className="mb-4 text-gray-400">
+        This integration allows you to send notifications to your Slack workspace in response to
+        events in your project.
+      </p>
+      <form onSubmit={handleSubmit(handleIntegrationSave)}>
+        <div className="max-w-md">
+          <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
+            {(isAllowed) => (
+              <Controller
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl errorText={error?.message} isError={Boolean(error)}>
+                    <Select
+                      {...field}
+                      isDisabled={!isAllowed}
+                      placeholder="None"
+                      onValueChange={onChange}
+                      defaultValue={slackConfig?.slackIntegrationId}
+                      className="w-3/4 bg-mineshaft-600"
+                    >
+                      {slackIntegrations?.map((slackIntegration) => (
+                        <SelectItem
+                          value={slackIntegration.id}
+                          key={`slack-integration-${slackIntegration.id}`}
+                        >
+                          {slackIntegration.slug}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+                control={control}
+                name="slackIntegrationId"
+              />
+            )}
+          </ProjectPermissionCan>
+        </div>
+        {selectedSlackIntegrationId && (
+          <>
+            <h2 className="mb-2 flex-1 text-lg font-semibold text-mineshaft-100">Events</h2>
+            <Controller
+              control={control}
+              name="isSecretRequestNotificationEnabled"
+              render={({ field, fieldState: { error } }) => {
+                return (
+                  <FormControl
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    className="mt-3 mb-2"
+                  >
+                    <Switch
+                      id="secret-approval-notification"
+                      onCheckedChange={(value) => field.onChange(value)}
+                      isChecked={field.value}
+                    >
+                      <p className="w-full">Secret Approval Requests</p>
+                    </Switch>
+                  </FormControl>
+                );
+              }}
+            />
+            {secretRequestNotifState && (
+              <Controller
+                control={control}
+                name="secretRequestChannels"
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    label="Slack channels"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Input
+                          isReadOnly
+                          value={value
+                            ?.filter(Boolean)
+                            .map((entry) => slackChannelIdToName[entry])
+                            .join(", ")}
+                          className="text-left"
+                        />
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+                        align="start"
+                      >
+                        {sortedSlackChannels?.map((slackChannel) => {
+                          const isChecked = value?.includes(slackChannel.id);
+                          return (
+                            <DropdownMenuItem
+                              onClick={(evt) => {
+                                evt.preventDefault();
+                                onChange(
+                                  isChecked
+                                    ? value?.filter((el: string) => el !== slackChannel.id)
+                                    : [...(value || []), slackChannel.id]
+                                );
+                              }}
+                              key={`secret-requests-slack-channel-${slackChannel.id}`}
+                              iconPos="right"
+                              icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+                            >
+                              {slackChannel.name}
+                            </DropdownMenuItem>
+                          );
+                        })}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </FormControl>
+                )}
+              />
+            )}
+            <Controller
+              control={control}
+              name="isAccessRequestNotificationEnabled"
+              render={({ field, fieldState: { error } }) => {
+                return (
+                  <FormControl isError={Boolean(error)} errorText={error?.message} className="mb-2">
+                    <Switch
+                      id="access-request-notification"
+                      onCheckedChange={(value) => field.onChange(value)}
+                      isChecked={field.value}
+                    >
+                      <p className="w-full">Access Requests</p>
+                    </Switch>
+                  </FormControl>
+                );
+              }}
+            />
+            {accessRequestNotifState && (
+              <Controller
+                control={control}
+                name="accessRequestChannels"
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    label="Slack channels"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Input
+                          isReadOnly
+                          value={value
+                            ?.filter(Boolean)
+                            .map((entry) => slackChannelIdToName[entry])
+                            .join(", ")}
+                          className="text-left"
+                        />
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+                        align="start"
+                      >
+                        {sortedSlackChannels?.map((slackChannel) => {
+                          const isChecked = value?.includes(slackChannel.id);
+                          return (
+                            <DropdownMenuItem
+                              onClick={(evt) => {
+                                evt.preventDefault();
+                                onChange(
+                                  isChecked
+                                    ? value?.filter((el: string) => el !== slackChannel.id)
+                                    : [...(value || []), slackChannel.id]
+                                );
+                              }}
+                              key={`access-requests-slack-channel-${slackChannel.id}`}
+                              iconPos="right"
+                              icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+                            >
+                              {slackChannel.name}
+                            </DropdownMenuItem>
+                          );
+                        })}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </FormControl>
+                )}
+              />
+            )}
+            <Button
+              colorSchema="secondary"
+              className="mt-4"
+              type="submit"
+              isDisabled={!isDirty}
+              isLoading={isSubmitting}
+            >
+              Save
+            </Button>
+          </>
+        )}
+      </form>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from "./WorkflowIntegrationTab";
@@ -25,6 +25,7 @@ import { useOrganization, useServerConfig, useUser } from "@app/context";
 import { useGetOrganizations, useUpdateServerConfig } from "@app/hooks/api";

 import { AuthPanel } from "./AuthPanel";
+import { IntegrationPanel } from "./IntegrationPanel";
 import { RateLimitPanel } from "./RateLimitPanel";
 import { UserPanel } from "./UserPanel";

@@ -32,6 +33,7 @@ enum TabSections {
  Settings = "settings",
  Auth = "auth",
  RateLimit = "rate-limit",
+  Integrations = "integrations",
  Users = "users"
 }

@@ -137,6 +139,7 @@ export const AdminDashboardPage = () => {
                <Tab value={TabSections.Settings}>General</Tab>
                <Tab value={TabSections.Auth}>Authentication</Tab>
                <Tab value={TabSections.RateLimit}>Rate Limit</Tab>
+                <Tab value={TabSections.Integrations}>Integrations</Tab>
                <Tab value={TabSections.Users}>Users</Tab>
              </div>
            </TabList>
@@ -323,6 +326,9 @@ export const AdminDashboardPage = () => {
            <TabPanel value={TabSections.RateLimit}>
              <RateLimitPanel />
            </TabPanel>
+            <TabPanel value={TabSections.Integrations}>
+              <IntegrationPanel />
+            </TabPanel>
            <TabPanel value={TabSections.Users}>
              <UserPanel />
            </TabPanel>
@@ -0,0 +1,157 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useGetAdminSlackConfig, useUpdateServerConfig } from "@app/hooks/api";
+
+const slackFormSchema = z.object({
+  clientId: z.string(),
+  clientSecret: z.string()
+});
+
+type TSlackForm = z.infer<typeof slackFormSchema>;
+
+const getCustomSlackAppCreationUrl = () =>
+  `https://api.slack.com/apps?new_app=1&manifest_json=${encodeURIComponent(
+    JSON.stringify({
+      display_information: {
+        name: "Infisical",
+        description: "Get real-time Infisical updates in Slack",
+        background_color: "#c2d62b",
+        long_description: `This Slack application is designed specifically for use with your self-hosted Infisical instance, allowing seamless integration between your Infisical projects and your Slack workspace. With this integration, your team can stay up-to-date with the latest events, changes, and notifications directly inside Slack.
+        - Notifications: Receive real-time updates and alerts about critical events in your Infisical projects. Whether it's a new project being created, updates to secrets, or changes to your team's configuration, you will be promptly notified within the designated Slack channels of your choice.
+        - Customization: Tailor the notifications to your team's specific needs by configuring which types of events trigger alerts and in which channels they are sent.
+        - Collaboration: Keep your entire team in the loop with notifications that help facilitate more efficient collaboration by ensuring that everyone is aware of important developments in your Infisical projects.
+        
+        By integrating Infisical with Slack, you can enhance your workflow by combining the power of secure secrets management with the communication capabilities of Slack.`
+      },
+      features: {
+        app_home: {
+          home_tab_enabled: false,
+          messages_tab_enabled: false,
+          messages_tab_read_only_enabled: true
+        },
+        bot_user: {
+          display_name: "Infisical",
+          always_online: true
+        }
+      },
+      oauth_config: {
+        redirect_urls: [`${window.origin}/api/v1/workflow-integrations/slack/oauth_redirect`],
+        scopes: {
+          bot: ["chat:write.public", "chat:write", "channels:read", "groups:read"]
+        }
+      },
+      settings: {
+        org_deploy_enabled: false,
+        socket_mode_enabled: false,
+        token_rotation_enabled: false
+      }
+    })
+  )}`;
+
+export const IntegrationPanel = () => {
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TSlackForm>({
+    resolver: zodResolver(slackFormSchema)
+  });
+
+  const { data: adminSlackConfig } = useGetAdminSlackConfig();
+  const { mutateAsync: updateAdminServerConfig } = useUpdateServerConfig();
+
+  useEffect(() => {
+    if (adminSlackConfig) {
+      setValue("clientId", adminSlackConfig.clientId);
+      setValue("clientSecret", adminSlackConfig.clientSecret);
+    }
+  }, [adminSlackConfig]);
+
+  const onSlackFormSubmit = async (data: TSlackForm) => {
+    await updateAdminServerConfig({
+      slackClientId: data.clientId,
+      slackClientSecret: data.clientSecret
+    });
+
+    createNotification({
+      text: "Updated admin slack configuration",
+      type: "success"
+    });
+  };
+
+  return (
+    <form
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      onSubmit={handleSubmit(onSlackFormSubmit)}
+    >
+      <div className="flex flex-col justify-start">
+        <div className="mb-2 text-xl font-semibold text-mineshaft-100">Slack Integration</div>
+        <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
+          Step 1: Create your Infisical Slack App
+        </div>
+        <div className="mb-6">
+          <Button
+            colorSchema="secondary"
+            onClick={() => window.open(getCustomSlackAppCreationUrl())}
+          >
+            Create Slack App
+          </Button>
+        </div>
+        <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
+          Step 2: Configure your instance-wide settings to enable integration with Slack. Copy the
+          values from the App Credentials page of your custom Slack App.
+        </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 || ""}
+                onChange={(e) => field.onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="clientSecret"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Client Secret"
+              className="w-96"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                {...field}
+                value={field.value || ""}
+                onChange={(e) => field.onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+      </div>
+      <Button
+        className="mt-2"
+        type="submit"
+        isLoading={isSubmitting}
+        isDisabled={isSubmitting || !isDirty}
+      >
+        Save
+      </Button>
+    </form>
+  );
+};