improvements: refactor org security settings tab to sso page and update doc images

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/index.tsx

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

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

@@ -0,0 +1,35 @@
+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";
+
+import { OrgGenericAuthSection } from "./OrgGenericAuthSection";
+import { OrgUserAccessTokenLimitSection } from "./OrgUserAccessTokenLimitSection";
+
+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 />
+      </>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Sso }
+);

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

@@ -86,13 +86,12 @@ export const OrgUserAccessTokenLimitSection = () => {
   ];
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex w-full items-center justify-between">
-        <p className="text-xl font-semibold">User Token Expiration</p>
+        <p className="text-xl font-semibold">Session Length</p>
       </div>
       <p className="mb-4 mt-2 text-sm text-gray-400">
-        This defines the maximum time a user token will be valid. After this time, the user will
-        need to re-authenticate.
+        Specify the duration of each login session for users in this organization.
       </p>
       <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
         {(isAllowed) => (

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

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

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

@@ -10,9 +10,9 @@ import { ProjectType } from "@app/hooks/api/workspace/types";
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { ImportTab } from "../ImportTab";
 import { KmipTab } from "../KmipTab/OrgKmipTab";
-import { OrgAuthTab } from "../OrgAuthTab";
 import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
+import { OrgSecurityTab } from "../OrgSecurityTab";
 import { OrgWorkflowIntegrationTab } from "../OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab";
 
 export const OrgTabGroup = () => {
@@ -21,7 +21,7 @@ export const OrgTabGroup = () => {
   });
   const tabs = [
     { name: "General", key: "tab-org-general", component: OrgGeneralTab },
-    { name: "Security", key: "tab-org-security", component: OrgAuthTab },
+    { name: "Security", key: "tab-org-security", component: OrgSecurityTab },
     { name: "Encryption", key: "tab-org-encryption", component: OrgEncryptionTab },
     {
       name: "Workflow Integrations",

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

@@ -0,0 +1,21 @@
+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/OrgProvisioningTab/OrgProvisioningTab.tsx

@@ -0,0 +1,17 @@
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { withPermission } from "@app/hoc";
+
+import { OrgGithubSyncSection } from "./OrgGithubSyncSection";
+import { OrgScimSection } from "./OrgSCIMSection";
+
+export const OrgProvisioningTab = withPermission(
+  () => {
+    return (
+      <>
+        <OrgScimSection />
+        <OrgGithubSyncSection />
+      </>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Sso }
+);

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

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

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

@@ -17,16 +17,12 @@ import { LoginMethod } from "@app/hooks/api/admin/types";
 import { LDAPModal } from "./LDAPModal";
 import { OIDCModal } from "./OIDCModal";
 import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
-import { OrgGenericAuthSection } from "./OrgGenericAuthSection";
-import { OrgGithubSyncSection } from "./OrgGithubSyncSection";
 import { OrgLDAPSection } from "./OrgLDAPSection";
 import { OrgOIDCSection } from "./OrgOIDCSection";
-import { OrgScimSection } from "./OrgSCIMSection";
 import { OrgSSOSection } from "./OrgSSOSection";
-import { OrgUserAccessTokenLimitSection } from "./OrgUserAccessTokenLimitSection";
 import { SSOModal } from "./SSOModal";
 
-export const OrgAuthTab = withPermission(
+export const OrgSsoTab = withPermission(
   () => {
     const {
       config: { enabledLoginMethods }
@@ -167,8 +163,6 @@ export const OrgAuthTab = withPermission(
 
     return (
       <>
-        <OrgGenericAuthSection />
-        <OrgUserAccessTokenLimitSection />
         {shouldShowCreateIdentityProviderView ? (
           createIdentityProviderView
         ) : (
@@ -183,8 +177,6 @@ export const OrgAuthTab = withPermission(
             {isLdapConfigured && shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
           </>
         )}
-        <OrgScimSection />
-        <OrgGithubSyncSection />
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

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

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

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

@@ -0,0 +1,37 @@
+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

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

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

@@ -0,0 +1,33 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions, 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: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/" })
+      },
+      {
+        label: "Single Sign-On (SSO)"
+      }
+    ]
+  })
+});