Refactor auth routes with <Outlet />s (#6334)

* Refactor auth routes with <Outlet />s
* Eliminate all route components except the index routing tree

webui/src/lib/components/auth/layout.jsx

@@ -1,59 +1,61 @@
-import React from "react";
-
+import React, {useEffect, useState} from "react";
+import {Outlet, useOutletContext} from "react-router-dom";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import Nav from "react-bootstrap/Nav";
 import Card from "react-bootstrap/Card";
 
-import Layout from "../layout";
 import {Link} from "../nav";
 import {useLoginConfigContext} from "../../hooks/conf";
 
 
-export const AuthLayout = ({ children, activeTab }) => {
+export const AuthLayout = () => {
+    const [activeTab, setActiveTab] = useState("credentials");
     const {RBAC: rbac} = useLoginConfigContext();
+    const [setIsLogged] = useOutletContext();
+    useEffect(() => {
+        setIsLogged(true);
+    }, [setIsLogged]);
     return (
-        <Layout>
-            <Container fluid="xl">
-                <Row className="mt-5">
-                    <Col md={{span: 3}}>
-                        <Card>
-                            <Card.Header>
-                                <Card.Title>Access Control</Card.Title>
-                            </Card.Header>
-                            <Card.Body>
-                                <Nav variant="pills" className="flex-column">
-                                    <Link component={Nav.Link} href="/auth/credentials" active={activeTab === 'credentials'}>
-                                        My Credentials
-                                    </Link>
-                                </Nav>
-
-                                <hr/>
-
-                                <Nav variant="pills" className="flex-column">
-                                    <Link component={Nav.Link} href="/auth/users" active={activeTab === 'users'}>
-                                       Users
-                                    </Link>
-
-                                    <Link component={Nav.Link} href="/auth/groups" active={activeTab === 'groups'}>
-                                        Groups
-                                    </Link>
-        {rbac !== 'simplified' &&
-         <Link component={Nav.Link} href="/auth/policies" active={activeTab === 'policies'}>
-         Policies
-         </Link>}
-                                </Nav>
-                            </Card.Body>
-                        </Card>
-
-                    </Col>
-                    <Col md={{span: 9}}>
-                        {children}
-                    </Col>
-                </Row>
-            </Container>
-        </Layout>
+        <Container fluid="xl">
+            <Row className="mt-5">
+                <Col md={{span: 3}}>
+                    <Card>
+                        <Card.Header>
+                            <Card.Title>Access Control</Card.Title>
+                        </Card.Header>
+                        <Card.Body>
+                            <Nav variant="pills" className="flex-column">
+                                <Link component={Nav.Link} href="/auth/credentials" active={activeTab === 'credentials'}>
+                                    My Credentials
+                                </Link>
+                            </Nav>
+
+                            <hr/>
+
+                            <Nav variant="pills" className="flex-column">
+                                <Link component={Nav.Link} href="/auth/users" active={activeTab === 'users'}>
+                                    Users
+                                </Link>
+
+                                <Link component={Nav.Link} href="/auth/groups" active={activeTab === 'groups'}>
+                                    Groups
+                                </Link>
+    {rbac !== 'simplified' &&
+        <Link component={Nav.Link} href="/auth/policies" active={activeTab === 'policies'}>
+        Policies
+        </Link>}
+                            </Nav>
+                        </Card.Body>
+                    </Card>
+
+                </Col>
+                <Col md={{span: 9}}>
+                    <Outlet context={[setActiveTab]} />
+                </Col>
+            </Row>
+        </Container>
     );
 };
 

webui/src/lib/components/layout.jsx

@@ -1,16 +1,21 @@
-import React from "react";
+import React, {useState} from "react";
+import { Outlet } from "react-router-dom";
+import { StorageConfigProvider } from "../hooks/storageConfig";
 
 import TopNav from './navbar';
 
-const Layout = ({ logged = true, children }) => {
+const Layout = ({ logged }) => {
+    const [isLogged, setIsLogged] = useState(logged ?? true);
     return (
         <>
-            <TopNav logged={logged}/>
+            <TopNav logged={isLogged}/>
             <div className="main-app">
-                {children}
+                <StorageConfigProvider>
+                    <Outlet context={[setIsLogged]} />
+                </StorageConfigProvider>
             </div>
         </>
     );
 };
 
-export default Layout;
+export default Layout;

webui/src/lib/components/repository/layout.jsx

@@ -5,17 +5,23 @@ import Container from "react-bootstrap/Container";
 import Breadcrumb from "react-bootstrap/Breadcrumb";
 
 import {useRefs} from "../../hooks/repo";
-import Layout from "../layout";
+import { Outlet } from "react-router-dom";
 import {RepositoryNavTabs} from "./tabs";
 import {Link} from "../nav";
 import { config } from "../../api";
 import { useAPI } from "../../hooks/api";
 import RepoOnboardingChecklistSlider from "./repoOnboardingChecklistSlider";
+import { RefContextProvider } from "../../hooks/repo";
 
 const RepoNav = () => {
     const { repo } = useRefs();
-    const repoId = (repo) ? repo.id : '#';
-
+    const [repoId, setRepoId] = useState("");
+    useEffect(() => {
+        if (repo) {
+        setRepoId(repo.id);
+        }
+    }, [repo]);
+
     return (
         <Breadcrumb>
             <Link href={{pathname: '/repositories'}} component={Breadcrumb.Item}>
@@ -25,11 +31,11 @@ const RepoNav = () => {
                 {repoId}
             </Link>
         </Breadcrumb>
-
-    )
+    );
 };
 
-export const RepositoryPageLayout = ({ activePage, children, fluid = "sm" }) => {
+export const RepositoryPageLayout = ({ fluid = "sm" }) => {
+  const [activePage, setActivePage] = useState("objects");
     const [showChecklist, setShowChecklist] = useLocalStorage(
         "showChecklist",
         false
@@ -53,7 +59,7 @@ export const RepositoryPageLayout = ({ activePage, children, fluid = "sm" }) =>
     }, [response, setConfigRes]);
 
     return (
-        <Layout>
+        <RefContextProvider>
             <div>
                 {configRes && !dismissedChecklistForRepo && (
                     <RepoOnboardingChecklistSlider
@@ -68,9 +74,11 @@ export const RepositoryPageLayout = ({ activePage, children, fluid = "sm" }) =>
                 <RepositoryNavTabs active={activePage}/>
 
                 <Container fluid={fluid}>
-                    <div className="mt-4">{children}</div>
+                    <div className="mt-4">
+                      <Outlet context={[setActivePage]} />
+                    </div>
                 </Container>
             </div>
-        </Layout>
+        </RefContextProvider>
     );
 };

webui/src/pages/auth/credentials.jsx

@@ -1,6 +1,5 @@
-import React from "react";
-
-import {AuthLayout} from "../../lib/components/auth/layout";
+import React, {useEffect} from "react";
+import { useOutletContext } from "react-router-dom";
 import {
     ActionGroup,
     ActionsBar,
@@ -81,11 +80,9 @@ const CredentialsContainer = () => {
 };
 
 const CredentialsPage = () => {
-    return (
-        <AuthLayout activeTab="credentials">
-            <CredentialsContainer/>
-        </AuthLayout>
-    );
+    const [setActiveTab] = useOutletContext();
+    useEffect(() => setActiveTab("credentials"), [setActiveTab]);
+    return <CredentialsContainer/>;
 };
 
 

webui/src/pages/auth/groups/group/members.jsx

@@ -1,9 +1,8 @@
 import React, {useEffect, useState} from "react";
-
+import { useOutletContext } from "react-router-dom";
 import Button from "react-bootstrap/Button";
 
 import {GroupHeader} from "../../../../lib/components/auth/nav";
-import {AuthLayout} from "../../../../lib/components/auth/layout";
 import {useAPIWithPagination} from "../../../../lib/hooks/api";
 import {auth} from "../../../../lib/api";
 import {Paginator} from "../../../../lib/components/pagination";
@@ -120,11 +119,9 @@ const GroupMembersContainer = () => {
 };
 
 const GroupMembersPage = () => {
-    return (
-        <AuthLayout activeTab="groups">
-            <GroupMembersContainer/>
-        </AuthLayout>
-    );
+    const [setActiveTab] = useOutletContext();
+    useEffect(() => setActiveTab('groups'), [setActiveTab]);
+    return <GroupMembersContainer/>;
 };
 
 export default GroupMembersPage;

webui/src/pages/auth/groups/group/policies.jsx

@@ -1,8 +1,7 @@
 import React, {useEffect, useState} from "react";
-
+import { useOutletContext } from "react-router-dom";
 import Button from "react-bootstrap/Button";
 
-import {AuthLayout} from "../../../../lib/components/auth/layout";
 import {GroupHeader} from "../../../../lib/components/auth/nav";
 import {useAPIWithPagination} from "../../../../lib/hooks/api";
 import {auth} from "../../../../lib/api";
@@ -120,11 +119,9 @@ const GroupPoliciesContainer = () => {
 };
 
 const GroupPoliciesPage = () => {
-    return (
-        <AuthLayout activeTab="groups">
-            <GroupPoliciesContainer/>
-        </AuthLayout>
-    );
+    const [setActiveTab] = useOutletContext();
+    useEffect(() => setActiveTab('groups'), [setActiveTab]);
+    return <GroupPoliciesContainer/>;
 };
 
 export default GroupPoliciesPage;

webui/src/pages/auth/groups/index.tsx

@@ -1,9 +1,8 @@
 import React, {useEffect, useState} from "react";
-
+import { useOutletContext } from "react-router-dom";
 import Button from "react-bootstrap/Button";
 import Dropdown from "react-bootstrap/Dropdown";
 
-import {AuthLayout} from "../../../lib/components/auth/layout";
 import {useAPIWithPagination} from "../../../lib/hooks/api";
 import {auth} from "../../../lib/api";
 import {ConfirmationButton} from "../../../lib/components/modals";
@@ -18,10 +17,8 @@ import {
     Loading,
     RefreshButton
 } from "../../../lib/components/controls";
-import {Route, Routes} from "react-router-dom";
 import {useRouter} from "../../../lib/hooks/router";
 import {Link} from "../../../lib/components/nav";
-import GroupPage from "./group";
 import {EntityActionModal} from "../../../lib/components/auth/forms";
 import { disallowPercentSign, INVALID_GROUP_NAME_ERROR_MESSAGE } from "../validation";
 import {useLoginConfigContext} from "../../../lib/hooks/conf";
@@ -184,21 +181,10 @@ const GroupsContainer = () => {
     );
 };
 
-const GroupsPage = () => {
-    return (
-        <AuthLayout activeTab="groups">
-            <GroupsContainer/>
-        </AuthLayout>
-    );
+export const GroupsPage = () => {
+    const [setActiveTab] = useOutletContext();
+    useEffect(() => setActiveTab('groups'), [setActiveTab]);
+    return <GroupsContainer/>;
 };
 
-const GroupsIndexPage = () => {
-    return (
-        <Routes>
-            <Route path=":groupId/*" element={<GroupPage/>} />
-            <Route path="" element={<GroupsPage/>} />
-        </Routes>
-    )
-}
-
-export default GroupsIndexPage;
+export default GroupsPage;

webui/src/pages/auth/login.tsx

@@ -1,5 +1,4 @@
 import React, {useState} from "react";
-import Layout from "../../lib/components/layout";
 import Row from "react-bootstrap/Row";
 import Card from "react-bootstrap/Card";
 import Form from "react-bootstrap/Form";
@@ -100,9 +99,7 @@ const LoginPage = () => {
         router.push({pathname: '/auth/login', query: router.query})
     }
     return (
-        <Layout logged={false}>
-            <LoginForm loginConfig={loginConfig}/>
-        </Layout>
+        <LoginForm loginConfig={loginConfig}/>
     );
 };