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

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