misc: added tabs for admin integrations

frontend/src/const/routes.ts

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

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

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