From 240f558231e22ff51b220f064f90090f9329b421 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Thu, 1 May 2025 23:49:18 +0400
Subject: [PATCH] fix: added empty state

---
 .../WorkflowIntegrationTab.tsx                | 64 ++++++++++++++-----
 .../components/MicrosoftTeamsConfigRow.tsx    | 25 ++++----
 .../components/SlackConfigRow.tsx             | 21 +++---
 3 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx
index 1cec10b9b..c3e2a20f1 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx
@@ -1,5 +1,5 @@
 import { BsMicrosoftTeams, BsSlack } from "react-icons/bs";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faGear, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
@@ -7,6 +7,7 @@ import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
+  EmptyState,
   Table,
   TableContainer,
   TBody,
@@ -16,7 +17,10 @@ import {
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useDeleteProjectWorkflowIntegration } from "@app/hooks/api";
+import {
+  useDeleteProjectWorkflowIntegration,
+  useGetWorkspaceWorkflowIntegrationConfig
+} from "@app/hooks/api";
 import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
 
 import { AddWorkflowIntegrationModal } from "./components/AddWorkflowIntegrationModal";
@@ -44,6 +48,17 @@ export const WorkflowIntegrationTab = () => {
   ] as const);
 
   const { currentWorkspace } = useWorkspace();
+  const { data: slackConfig, isPending: isSlackConfigLoading } =
+    useGetWorkspaceWorkflowIntegrationConfig({
+      workspaceId: currentWorkspace?.id ?? "",
+      integration: WorkflowIntegrationPlatform.SLACK
+    });
+
+  const { data: microsoftTeamsConfig, isPending: isMicrosoftTeamsConfigLoading } =
+    useGetWorkspaceWorkflowIntegrationConfig({
+      workspaceId: currentWorkspace?.id ?? "",
+      integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS
+    });
 
   const { mutateAsync: deleteIntegration } = useDeleteProjectWorkflowIntegration();
 
@@ -89,20 +104,37 @@ export const WorkflowIntegrationTab = () => {
         Connect Infisical to other platforms for notification and workflow integrations.
       </p>
       <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Td>Provider</Td>
-              <Td>Access Request Notifications Destination</Td>
-              <Td>Secret Request Notifications Destination</Td>
-              <Td />
-            </Tr>
-          </THead>
-          <TBody>
-            <SlackConfigRow handlePopUpOpen={handlePopUpOpen} />
-            <MicrosoftTeamsConfigRow handlePopUpOpen={handlePopUpOpen} />
-          </TBody>
-        </Table>
+        {!!slackConfig || !!microsoftTeamsConfig ? (
+          <Table>
+            <THead>
+              <Tr>
+                <Td>Provider</Td>
+                <Td>Access Request Notifications Destination</Td>
+                <Td>Secret Request Notifications Destination</Td>
+                <Td />
+              </Tr>
+            </THead>
+            <TBody>
+              <SlackConfigRow
+                handlePopUpOpen={handlePopUpOpen}
+                isSlackConfigLoading={isSlackConfigLoading}
+                slackConfig={slackConfig}
+              />
+              <MicrosoftTeamsConfigRow
+                handlePopUpOpen={handlePopUpOpen}
+                isMicrosoftTeamsConfigLoading={isMicrosoftTeamsConfigLoading}
+                microsoftTeamsConfig={microsoftTeamsConfig}
+              />
+            </TBody>
+          </Table>
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <EmptyState
+              title="No project workflow integrations configured. Add a new workflow integration to get started"
+              icon={faGear}
+            />
+          </div>
+        )}
       </TableContainer>
       <AddWorkflowIntegrationModal
         isOpen={popUp.addWorkflowIntegration.isOpen}
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx
index f341b67c9..ad846d2b8 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx
@@ -15,15 +15,17 @@ import {
   Td,
   Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useWorkspace } from "@app/context";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useGetMicrosoftTeamsIntegrationTeams } from "@app/hooks/api";
 import {
-  useGetMicrosoftTeamsIntegrationTeams,
-  useGetWorkspaceWorkflowIntegrationConfig
-} from "@app/hooks/api";
-import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
+  ProjectWorkflowIntegrationConfig,
+  WorkflowIntegrationPlatform
+} from "@app/hooks/api/workflowIntegrations/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
+  microsoftTeamsConfig?: ProjectWorkflowIntegrationConfig;
+  isMicrosoftTeamsConfigLoading: boolean;
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<["removeIntegration", "editIntegration"]>,
     data?: {
@@ -33,14 +35,11 @@ type Props = {
   ) => void;
 };
 
-export const MicrosoftTeamsConfigRow = ({ handlePopUpOpen }: Props) => {
-  const { currentWorkspace } = useWorkspace();
-  const { data: microsoftTeamsConfig, isPending: isMicrosoftTeamsConfigLoading } =
-    useGetWorkspaceWorkflowIntegrationConfig({
-      workspaceId: currentWorkspace?.id ?? "",
-      integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS
-    });
-
+export const MicrosoftTeamsConfigRow = ({
+  handlePopUpOpen,
+  isMicrosoftTeamsConfigLoading,
+  microsoftTeamsConfig
+}: Props) => {
   const { data: microsoftTeamsChannels, isPending: isMicrosoftTeamsChannelsLoading } =
     useGetMicrosoftTeamsIntegrationTeams(microsoftTeamsConfig?.integrationId);
   const microsoftTeamsChannelIdToName = Object.fromEntries(
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx
index d71176927..0993ef6ac 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx
@@ -15,15 +15,17 @@ import {
   Td,
   Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useWorkspace } from "@app/context";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useGetSlackIntegrationChannels } from "@app/hooks/api";
 import {
-  useGetSlackIntegrationChannels,
-  useGetWorkspaceWorkflowIntegrationConfig
-} from "@app/hooks/api";
-import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
+  ProjectWorkflowIntegrationConfig,
+  WorkflowIntegrationPlatform
+} from "@app/hooks/api/workflowIntegrations/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
+  slackConfig?: ProjectWorkflowIntegrationConfig;
+  isSlackConfigLoading: boolean;
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<["removeIntegration", "editIntegration"]>,
     data?: {
@@ -33,14 +35,7 @@ type Props = {
   ) => void;
 };
 
-export const SlackConfigRow = ({ handlePopUpOpen }: Props) => {
-  const { currentWorkspace } = useWorkspace();
-  const { data: slackConfig, isPending: isSlackConfigLoading } =
-    useGetWorkspaceWorkflowIntegrationConfig({
-      workspaceId: currentWorkspace?.id ?? "",
-      integration: WorkflowIntegrationPlatform.SLACK
-    });
-
+export const SlackConfigRow = ({ handlePopUpOpen, isSlackConfigLoading, slackConfig }: Props) => {
   const { data: slackChannels, isPending: isSlackChannelsLoading } = useGetSlackIntegrationChannels(
     slackConfig?.integrationId
   );