fix: added empty state

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>
+        {!!slackConfig || !!microsoftTeamsConfig ? (
-          <THead>
+          <Table>
-            <Tr>
+            <THead>
-              <Td>Provider</Td>
+              <Tr>
-              <Td>Access Request Notifications Destination</Td>
+                <Td>Provider</Td>
-              <Td>Secret Request Notifications Destination</Td>
+                <Td>Access Request Notifications Destination</Td>
-              <Td />
+                <Td>Secret Request Notifications Destination</Td>
-            </Tr>
+                <Td />
-          </THead>
+              </Tr>
-          <TBody>
+            </THead>
-            <SlackConfigRow handlePopUpOpen={handlePopUpOpen} />
+            <TBody>
-            <MicrosoftTeamsConfigRow handlePopUpOpen={handlePopUpOpen} />
+              <SlackConfigRow
-          </TBody>
+                handlePopUpOpen={handlePopUpOpen}
-        </Table>
+                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}

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,
+  ProjectWorkflowIntegrationConfig,
-  useGetWorkspaceWorkflowIntegrationConfig
+  WorkflowIntegrationPlatform
-} from "@app/hooks/api";
+} from "@app/hooks/api/workflowIntegrations/types";
-import { 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) => {
+export const MicrosoftTeamsConfigRow = ({
-  const { currentWorkspace } = useWorkspace();
+  handlePopUpOpen,
-  const { data: microsoftTeamsConfig, isPending: isMicrosoftTeamsConfigLoading } =
+  isMicrosoftTeamsConfigLoading,
-    useGetWorkspaceWorkflowIntegrationConfig({
+  microsoftTeamsConfig
-      workspaceId: currentWorkspace?.id ?? "",
+}: Props) => {
-      integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS
-    });
-
   const { data: microsoftTeamsChannels, isPending: isMicrosoftTeamsChannelsLoading } =
     useGetMicrosoftTeamsIntegrationTeams(microsoftTeamsConfig?.integrationId);
   const microsoftTeamsChannelIdToName = Object.fromEntries(

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,
+  ProjectWorkflowIntegrationConfig,
-  useGetWorkspaceWorkflowIntegrationConfig
+  WorkflowIntegrationPlatform
-} from "@app/hooks/api";
+} from "@app/hooks/api/workflowIntegrations/types";
-import { 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) => {
+export const SlackConfigRow = ({ handlePopUpOpen, isSlackConfigLoading, slackConfig }: Props) => {
-  const { currentWorkspace } = useWorkspace();
-  const { data: slackConfig, isPending: isSlackConfigLoading } =
-    useGetWorkspaceWorkflowIntegrationConfig({
-      workspaceId: currentWorkspace?.id ?? "",
-      integration: WorkflowIntegrationPlatform.SLACK
-    });
-
   const { data: slackChannels, isPending: isSlackChannelsLoading } = useGetSlackIntegrationChannels(
     slackConfig?.integrationId
   );