Merge pull request #4007 from Infisical/move-sso-settings-to-org-settings

improvement(frontend): Move sso/provision settings back to org settings tabs

frontend/src/const/routes.ts

@@ -29,10 +29,6 @@ export const ROUTE_PATHS = Object.freeze({
         "/_authenticate/_inject-org-details/_org-layout/organization/settings/oauth/callback"
       )
     },
-    SsoPage: setRoute(
-      "/organization/sso",
-      "/_authenticate/_inject-org-details/_org-layout/organization/sso"
-    ),
     SecretSharing: setRoute(
       "/organization/secret-sharing",
       "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/"

frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx

@@ -1,6 +1,5 @@
 import {
   faBook,
-  faCheckCircle,
   faCog,
   faCubes,
   faDoorClosed,
@@ -100,18 +99,6 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                       </MenuItem>
                     )}
                   </Link>
-                  <Link to="/organization/sso">
-                    {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
-                        <div className="mx-1 flex gap-2">
-                          <div className="w-6">
-                            <FontAwesomeIcon icon={faCheckCircle} className="mr-4" />
-                          </div>
-                          SSO Settings
-                        </div>
-                      </MenuItem>
-                    )}
-                  </Link>
                   <Link to="/organization/settings">
                     {({ isActive }) => (
                       <MenuItem isSelected={isActive}>

frontend/src/pages/organization/SettingsPage/components/OrgSecurityTab/OrgSecurityTab.tsx

@@ -1,6 +1,3 @@
-import { Link } from "@tanstack/react-router";
-
-import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";
 
@@ -11,21 +8,6 @@ export const OrgSecurityTab = withPermission(
   () => {
     return (
       <>
-        <NoticeBannerV2
-          className="mx-auto mb-4"
-          titleClassName="text-base"
-          title="Single Sign-On (SSO) Settings"
-        >
-          <p className="mt-1 text-mineshaft-300">
-            SSO Settings have been relocated:{" "}
-            <Link
-              className="text-mineshaft-200 underline underline-offset-2"
-              to="/organization/sso"
-            >
-              Click here to view SSO Settings
-            </Link>
-          </p>
-        </NoticeBannerV2>
         <OrgGenericAuthSection />
         <OrgUserAccessTokenLimitSection />
       </>

frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -9,8 +9,10 @@ import { ImportTab } from "../ImportTab";
 import { KmipTab } from "../KmipTab/OrgKmipTab";
 import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
+import { OrgProvisioningTab } from "../OrgProvisioningTab";
 import { OrgSecurityTab } from "../OrgSecurityTab";
-import { OrgWorkflowIntegrationTab } from "../OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab";
+import { OrgSsoTab } from "../OrgSsoTab";
+import { OrgWorkflowIntegrationTab } from "../OrgWorkflowIntegrationTab";
 import { ProjectTemplatesTab } from "../ProjectTemplatesTab";
 
 export const OrgTabGroup = () => {
@@ -19,6 +21,16 @@ export const OrgTabGroup = () => {
   });
   const tabs = [
     { name: "General", key: "tab-org-general", component: OrgGeneralTab },
+    {
+      name: "SSO",
+      key: "sso-settings",
+      component: OrgSsoTab
+    },
+    {
+      name: "Provisioning",
+      key: "provisioning-settings",
+      component: OrgProvisioningTab
+    },
     { name: "Security", key: "tab-org-security", component: OrgSecurityTab },
     { name: "Encryption", key: "tab-org-encryption", component: OrgEncryptionTab },
     {

frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/index.ts

@@ -0,0 +1 @@
+export * from "./OrgWorkflowIntegrationTab";

frontend/src/pages/organization/SsoPage/SsoPage.tsx

@@ -1,21 +0,0 @@
-import { Helmet } from "react-helmet";
-
-import { PageHeader } from "@app/components/v2";
-
-import { SsoTabGroup } from "./components/SsoTabGroup";
-
-export const SsoPage = () => {
-  return (
-    <>
-      <Helmet>
-        <title>Single Sign-On (SSO)</title>
-      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl">
-          <PageHeader title="Single Sign-On (SSO)" />
-          <SsoTabGroup />
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/pages/organization/SsoPage/components/SsoTabGroup/SsoTabGroup.tsx

@@ -1,37 +0,0 @@
-import { useState } from "react";
-import { useSearch } from "@tanstack/react-router";
-
-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ROUTE_PATHS } from "@app/const/routes";
-
-import { OrgProvisioningTab } from "../OrgProvisioningTab";
-import { OrgSsoTab } from "../OrgSsoTab";
-
-export const SsoTabGroup = () => {
-  const search = useSearch({
-    from: ROUTE_PATHS.Organization.SsoPage.id
-  });
-  const tabs = [
-    { name: "General", key: "tab-sso-auth", component: OrgSsoTab },
-    { name: "Provisioning", key: "tab-sso-identity", component: OrgProvisioningTab }
-  ];
-
-  const [selectedTab, setSelectedTab] = useState(search.selectedTab || tabs[0].key);
-
-  return (
-    <Tabs value={selectedTab} onValueChange={setSelectedTab}>
-      <TabList>
-        {tabs.map((tab) => (
-          <Tab value={tab.key} key={tab.key}>
-            {tab.name}
-          </Tab>
-        ))}
-      </TabList>
-      {tabs.map(({ key, component: Component }) => (
-        <TabPanel value={key} key={`tab-panel-${key}`}>
-          <Component />
-        </TabPanel>
-      ))}
-    </Tabs>
-  );
-};

frontend/src/pages/organization/SsoPage/components/SsoTabGroup/index.tsx

@@ -1 +0,0 @@
-export { SsoTabGroup } from "./SsoTabGroup";

frontend/src/pages/organization/SsoPage/route.tsx

@@ -1,26 +0,0 @@
-import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
-import { zodValidator } from "@tanstack/zod-adapter";
-import { z } from "zod";
-
-import { SsoPage } from "./SsoPage";
-
-const SettingsPageQueryParams = z.object({
-  selectedTab: z.string().catch("")
-});
-
-export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/sso"
-)({
-  component: SsoPage,
-  validateSearch: zodValidator(SettingsPageQueryParams),
-  search: {
-    middlewares: [stripSearchParams({ selectedTab: "" })]
-  },
-  context: () => ({
-    breadcrumbs: [
-      {
-        label: "Single Sign-On (SSO)"
-      }
-    ]
-  })
-});

frontend/src/routeTree.gen.ts

@@ -47,7 +47,6 @@ import { Route as adminEnvironmentPageRouteImport } from './pages/admin/Environm
 import { Route as adminEncryptionPageRouteImport } from './pages/admin/EncryptionPage/route'
 import { Route as adminCachingPageRouteImport } from './pages/admin/CachingPage/route'
 import { Route as adminAuthenticationPageRouteImport } from './pages/admin/AuthenticationPage/route'
-import { Route as organizationSsoPageRouteImport } from './pages/organization/SsoPage/route'
 import { Route as organizationProjectsPageRouteImport } from './pages/organization/ProjectsPage/route'
 import { Route as organizationBillingPageRouteImport } from './pages/organization/BillingPage/route'
 import { Route as organizationAuditLogsPageRouteImport } from './pages/organization/AuditLogsPage/route'
@@ -591,12 +590,6 @@ const adminAuthenticationPageRouteRoute =
     getParentRoute: () => adminLayoutRoute,
   } as any)
 
-const organizationSsoPageRouteRoute = organizationSsoPageRouteImport.update({
-  id: '/sso',
-  path: '/sso',
-  getParentRoute: () => AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute,
-} as any)
-
 const organizationProjectsPageRouteRoute =
   organizationProjectsPageRouteImport.update({
     id: '/projects',
@@ -2159,13 +2152,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof organizationProjectsPageRouteImport
       parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport
     }
-    '/_authenticate/_inject-org-details/_org-layout/organization/sso': {
-      id: '/_authenticate/_inject-org-details/_org-layout/organization/sso'
-      path: '/sso'
-      fullPath: '/organization/sso'
-      preLoaderRoute: typeof organizationSsoPageRouteImport
-      parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport
-    }
     '/_authenticate/_inject-org-details/admin/_admin-layout/authentication': {
       id: '/_authenticate/_inject-org-details/admin/_admin-layout/authentication'
       path: '/authentication'
@@ -3428,7 +3414,6 @@ interface AuthenticateInjectOrgDetailsOrgLayoutOrganizationRouteChildren {
   organizationAuditLogsPageRouteRoute: typeof organizationAuditLogsPageRouteRoute
   organizationBillingPageRouteRoute: typeof organizationBillingPageRouteRoute
   organizationProjectsPageRouteRoute: typeof organizationProjectsPageRouteRoute
-  organizationSsoPageRouteRoute: typeof organizationSsoPageRouteRoute
   AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren
   AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren
   AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren
@@ -3447,7 +3432,6 @@ const AuthenticateInjectOrgDetailsOrgLayoutOrganizationRouteChildren: Authentica
     organizationAuditLogsPageRouteRoute: organizationAuditLogsPageRouteRoute,
     organizationBillingPageRouteRoute: organizationBillingPageRouteRoute,
     organizationProjectsPageRouteRoute: organizationProjectsPageRouteRoute,
-    organizationSsoPageRouteRoute: organizationSsoPageRouteRoute,
     AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRoute:
       AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren,
     AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute:
@@ -4345,7 +4329,6 @@ export interface FileRoutesByFullPath {
   '/organization/audit-logs': typeof organizationAuditLogsPageRouteRoute
   '/organization/billing': typeof organizationBillingPageRouteRoute
   '/organization/projects': typeof organizationProjectsPageRouteRoute
-  '/organization/sso': typeof organizationSsoPageRouteRoute
   '/admin/authentication': typeof adminAuthenticationPageRouteRoute
   '/admin/caching': typeof adminCachingPageRouteRoute
   '/admin/encryption': typeof adminEncryptionPageRouteRoute
@@ -4542,7 +4525,6 @@ export interface FileRoutesByTo {
   '/organization/audit-logs': typeof organizationAuditLogsPageRouteRoute
   '/organization/billing': typeof organizationBillingPageRouteRoute
   '/organization/projects': typeof organizationProjectsPageRouteRoute
-  '/organization/sso': typeof organizationSsoPageRouteRoute
   '/admin/authentication': typeof adminAuthenticationPageRouteRoute
   '/admin/caching': typeof adminCachingPageRouteRoute
   '/admin/encryption': typeof adminEncryptionPageRouteRoute
@@ -4739,7 +4721,6 @@ export interface FileRoutesById {
   '/_authenticate/_inject-org-details/_org-layout/organization/audit-logs': typeof organizationAuditLogsPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/billing': typeof organizationBillingPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/projects': typeof organizationProjectsPageRouteRoute
-  '/_authenticate/_inject-org-details/_org-layout/organization/sso': typeof organizationSsoPageRouteRoute
   '/_authenticate/_inject-org-details/admin/_admin-layout/authentication': typeof adminAuthenticationPageRouteRoute
   '/_authenticate/_inject-org-details/admin/_admin-layout/caching': typeof adminCachingPageRouteRoute
   '/_authenticate/_inject-org-details/admin/_admin-layout/encryption': typeof adminEncryptionPageRouteRoute
@@ -4949,7 +4930,6 @@ export interface FileRouteTypes {
     | '/organization/audit-logs'
     | '/organization/billing'
     | '/organization/projects'
-    | '/organization/sso'
     | '/admin/authentication'
     | '/admin/caching'
     | '/admin/encryption'
@@ -5145,7 +5125,6 @@ export interface FileRouteTypes {
     | '/organization/audit-logs'
     | '/organization/billing'
     | '/organization/projects'
-    | '/organization/sso'
     | '/admin/authentication'
     | '/admin/caching'
     | '/admin/encryption'
@@ -5340,7 +5319,6 @@ export interface FileRouteTypes {
     | '/_authenticate/_inject-org-details/_org-layout/organization/audit-logs'
     | '/_authenticate/_inject-org-details/_org-layout/organization/billing'
     | '/_authenticate/_inject-org-details/_org-layout/organization/projects'
-    | '/_authenticate/_inject-org-details/_org-layout/organization/sso'
     | '/_authenticate/_inject-org-details/admin/_admin-layout/authentication'
     | '/_authenticate/_inject-org-details/admin/_admin-layout/caching'
     | '/_authenticate/_inject-org-details/admin/_admin-layout/encryption'
@@ -5732,7 +5710,6 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/organization/audit-logs",
         "/_authenticate/_inject-org-details/_org-layout/organization/billing",
         "/_authenticate/_inject-org-details/_org-layout/organization/projects",
-        "/_authenticate/_inject-org-details/_org-layout/organization/sso",
         "/_authenticate/_inject-org-details/_org-layout/organization/app-connections",
         "/_authenticate/_inject-org-details/_org-layout/organization/gateways",
         "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing",
@@ -5782,10 +5759,6 @@ export const routeTree = rootRoute
       "filePath": "organization/ProjectsPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/organization"
     },
-    "/_authenticate/_inject-org-details/_org-layout/organization/sso": {
-      "filePath": "organization/SsoPage/route.tsx",
-      "parent": "/_authenticate/_inject-org-details/_org-layout/organization"
-    },
     "/_authenticate/_inject-org-details/admin/_admin-layout/authentication": {
       "filePath": "admin/AuthenticationPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/admin/_admin-layout"

frontend/src/routes.ts

@@ -31,7 +31,6 @@ const organizationRoutes = route("/organization", [
     index("organization/SettingsPage/route.tsx"),
     route("/oauth/callback", "organization/SettingsPage/OauthCallbackPage/route.tsx")
   ]),
-  route("/sso", "organization/SsoPage/route.tsx"),
   route("/groups/$groupId", "organization/GroupDetailsByIDPage/route.tsx"),
   route("/members/$membershipId", "organization/UserDetailsByIDPage/route.tsx"),
   route("/roles/$roleId", "organization/RoleByIDPage/route.tsx"),