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

frontend/src/const/routes.ts

@@ -23,6 +23,10 @@ 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"
+    ),
     SecretScanning: setRoute(
       "/organization/secret-scanning",
       "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning"

frontend/src/layouts/OrganizationLayout/ProductsSideBar/DefaultSideBar.tsx

@@ -5,22 +5,6 @@ import { Menu, MenuGroup, MenuItem } from "@app/components/v2";
 export const DefaultSideBar = () => (
   <Menu>
     <MenuGroup title="Organization Control">
-      <Link to="/organization/audit-logs">
-        {({ isActive }) => (
-          <MenuItem isSelected={isActive} icon="moving-block">
-            Audit Logs
-          </MenuItem>
-        )}
-      </Link>
-      <Link to="/organization/billing">
-        {({ isActive }) => (
-          <MenuItem isSelected={isActive} icon="spinning-coin">
-            Usage & Billing
-          </MenuItem>
-        )}
-      </Link>
-    </MenuGroup>
-    <MenuGroup title="Other">
       <Link to="/organization/access-management">
         {({ isActive }) => (
           <MenuItem isSelected={isActive} icon="groups">
@@ -42,6 +26,29 @@ export const DefaultSideBar = () => (
           </MenuItem>
         )}
       </Link>
+      <Link to="/organization/sso">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="check">
+            Single Sign-On (SSO)
+          </MenuItem>
+        )}
+      </Link>
+    </MenuGroup>
+    <MenuGroup title="Other">
+      <Link to="/organization/audit-logs">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="moving-block">
+            Audit Logs
+          </MenuItem>
+        )}
+      </Link>
+      <Link to="/organization/billing">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="spinning-coin">
+            Usage & Billing
+          </MenuItem>
+        )}
+      </Link>
       <Link to="/organization/settings">
         {({ isActive }) => (
           <MenuItem isSelected={isActive} icon="toggle-settings">

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

@@ -4,6 +4,7 @@ import {
   faArrowUpRightFromSquare,
   faBook,
   faCheck,
+  faCheckCircle,
   faCog,
   faDoorClosed,
   faEnvelope,
@@ -118,6 +119,9 @@ export const MinimizedOrgSidebar = () => {
     [
       linkOptions({ to: "/organization/access-management" }).to,
       linkOptions({ to: "/organization/app-connections" }).to,
+      linkOptions({ to: "/organization/billing" }).to,
+      linkOptions({ to: "/organization/sso" }).to,
+      linkOptions({ to: "/organization/gateways" }).to,
       linkOptions({ to: "/organization/settings" }).to,
       linkOptions({ to: "/organization/audit-logs" }).to
     ] as string[]
@@ -387,6 +391,13 @@ export const MinimizedOrgSidebar = () => {
                       Audit Logs
                     </DropdownMenuItem>
                   </Link>
+                  <Link to="/organization/sso">
+                    <DropdownMenuItem
+                      icon={<FontAwesomeIcon className="w-3" icon={faCheckCircle} />}
+                    >
+                      SSO Settings
+                    </DropdownMenuItem>
+                  </Link>
                   <Link to="/organization/settings">
                     <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faCog} />}>
                       Organization Settings

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)"
+      }
+    ]
+  })
+});

frontend/src/routeTree.gen.ts

@@ -42,6 +42,7 @@ import { Route as adminLayoutImport } from './pages/admin/layout'
 import { Route as authProviderSuccessPageRouteImport } from './pages/auth/ProviderSuccessPage/route'
 import { Route as authProviderErrorPageRouteImport } from './pages/auth/ProviderErrorPage/route'
 import { Route as userPersonalSettingsPageRouteImport } from './pages/user/PersonalSettingsPage/route'
+import { Route as organizationSsoPageRouteImport } from './pages/organization/SsoPage/route'
 import { Route as organizationSecretScanningPageRouteImport } from './pages/organization/SecretScanningPage/route'
 import { Route as organizationBillingPageRouteImport } from './pages/organization/BillingPage/route'
 import { Route as organizationAuditLogsPageRouteImport } from './pages/organization/AuditLogsPage/route'
@@ -539,6 +540,12 @@ const AuthenticateInjectOrgDetailsOrgLayoutCertManagerProjectIdRoute =
     getParentRoute: () => organizationLayoutRoute,
   } as any)
 
+const organizationSsoPageRouteRoute = organizationSsoPageRouteImport.update({
+  id: '/sso',
+  path: '/sso',
+  getParentRoute: () => AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute,
+} as any)
+
 const organizationSecretScanningPageRouteRoute =
   organizationSecretScanningPageRouteImport.update({
     id: '/secret-scanning',
@@ -2017,6 +2024,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof organizationSecretScanningPageRouteImport
       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/_org-layout/cert-manager/$projectId': {
       id: '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId'
       path: '/cert-manager/$projectId'
@@ -3227,6 +3241,7 @@ interface AuthenticateInjectOrgDetailsOrgLayoutOrganizationRouteChildren {
   organizationAuditLogsPageRouteRoute: typeof organizationAuditLogsPageRouteRoute
   organizationBillingPageRouteRoute: typeof organizationBillingPageRouteRoute
   organizationSecretScanningPageRouteRoute: typeof organizationSecretScanningPageRouteRoute
+  organizationSsoPageRouteRoute: typeof organizationSsoPageRouteRoute
   AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren
   AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren
   AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren
@@ -3254,6 +3269,7 @@ const AuthenticateInjectOrgDetailsOrgLayoutOrganizationRouteChildren: Authentica
     organizationBillingPageRouteRoute: organizationBillingPageRouteRoute,
     organizationSecretScanningPageRouteRoute:
       organizationSecretScanningPageRouteRoute,
+    organizationSsoPageRouteRoute: organizationSsoPageRouteRoute,
     AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRoute:
       AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren,
     AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute:
@@ -3956,6 +3972,7 @@ export interface FileRoutesByFullPath {
   '/organization/audit-logs': typeof organizationAuditLogsPageRouteRoute
   '/organization/billing': typeof organizationBillingPageRouteRoute
   '/organization/secret-scanning': typeof organizationSecretScanningPageRouteRoute
+  '/organization/sso': typeof organizationSsoPageRouteRoute
   '/cert-manager/$projectId': typeof certManagerLayoutRouteWithChildren
   '/kms/$projectId': typeof kmsLayoutRouteWithChildren
   '/organization/app-connections': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren
@@ -4143,6 +4160,7 @@ export interface FileRoutesByTo {
   '/organization/audit-logs': typeof organizationAuditLogsPageRouteRoute
   '/organization/billing': typeof organizationBillingPageRouteRoute
   '/organization/secret-scanning': typeof organizationSecretScanningPageRouteRoute
+  '/organization/sso': typeof organizationSsoPageRouteRoute
   '/cert-manager/$projectId': typeof certManagerLayoutRouteWithChildren
   '/kms/$projectId': typeof kmsLayoutRouteWithChildren
   '/secret-manager/$projectId': typeof secretManagerLayoutRouteWithChildren
@@ -4335,6 +4353,7 @@ 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/secret-scanning': typeof organizationSecretScanningPageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/organization/sso': typeof organizationSsoPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId': typeof AuthenticateInjectOrgDetailsOrgLayoutCertManagerProjectIdRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/kms/$projectId': typeof AuthenticateInjectOrgDetailsOrgLayoutKmsProjectIdRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/organization/app-connections': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren
@@ -4532,6 +4551,7 @@ export interface FileRouteTypes {
     | '/organization/audit-logs'
     | '/organization/billing'
     | '/organization/secret-scanning'
+    | '/organization/sso'
     | '/cert-manager/$projectId'
     | '/kms/$projectId'
     | '/organization/app-connections'
@@ -4718,6 +4738,7 @@ export interface FileRouteTypes {
     | '/organization/audit-logs'
     | '/organization/billing'
     | '/organization/secret-scanning'
+    | '/organization/sso'
     | '/cert-manager/$projectId'
     | '/kms/$projectId'
     | '/secret-manager/$projectId'
@@ -4908,6 +4929,7 @@ 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/secret-scanning'
+    | '/_authenticate/_inject-org-details/_org-layout/organization/sso'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId'
     | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId'
     | '/_authenticate/_inject-org-details/_org-layout/organization/app-connections'
@@ -5304,6 +5326,7 @@ 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/secret-scanning",
+        "/_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",
@@ -5353,6 +5376,10 @@ export const routeTree = rootRoute
       "filePath": "organization/SecretScanningPage/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/_org-layout/cert-manager/$projectId": {
       "filePath": "",
       "parent": "/_authenticate/_inject-org-details/_org-layout",

frontend/src/routes.ts

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