github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/lib/components/auth/layout.tsx (about)

     1  import React, {useEffect, useState} from "react";
     2  import {Outlet, useOutletContext} from "react-router-dom";
     3  import Container from "react-bootstrap/Container";
     4  import Row from "react-bootstrap/Row";
     5  import Col from "react-bootstrap/Col";
     6  import Nav from "react-bootstrap/Nav";
     7  import Card from "react-bootstrap/Card";
     8  
     9  import {Link} from "../nav";
    10  import {useLoginConfigContext} from "../../hooks/conf";
    11  import {useLayoutOutletContext} from "../layout";
    12  
    13  type AuthOutletContext = [(tab: string) => void];
    14  
    15  
    16  export const AuthLayout = () => {
    17      const [activeTab, setActiveTab] = useState("credentials");
    18      const {RBAC: rbac} = useLoginConfigContext();
    19      const [setIsLogged] = useLayoutOutletContext();
    20      useEffect(() => {
    21          setIsLogged(true);
    22      }, [setIsLogged]);
    23      return (
    24          <Container fluid="xl">
    25              <Row className="mt-5">
    26                  <Col md={{span: 3}}>
    27                      <Card>
    28                          <Card.Header>
    29                              <Card.Title>Access Control</Card.Title>
    30                          </Card.Header>
    31                          <Card.Body>
    32                              <Nav variant="pills" className="flex-column">
    33                                  <Link component={Nav.Link} href="/auth/credentials" active={activeTab === 'credentials'}>
    34                                      My Credentials
    35                                  </Link>
    36                              </Nav>
    37  
    38                              <hr/>
    39  
    40                              <Nav variant="pills" className="flex-column">
    41                                  <Link component={Nav.Link} href="/auth/users" active={activeTab === 'users'}>
    42                                      Users
    43                                  </Link>
    44  
    45                                  <Link component={Nav.Link} href="/auth/groups" active={activeTab === 'groups'}>
    46                                      Groups
    47                                  </Link>
    48      {rbac !== 'simplified' &&
    49          <Link component={Nav.Link} href="/auth/policies" active={activeTab === 'policies'}>
    50          Policies
    51          </Link>}
    52                              </Nav>
    53                          </Card.Body>
    54                      </Card>
    55  
    56                  </Col>
    57                  <Col md={{span: 9}}>
    58                      <Outlet context={[setActiveTab] satisfies AuthOutletContext} />
    59                  </Col>
    60              </Row>
    61          </Container>
    62      );
    63  };
    64  
    65  export function useAuthOutletContext() {
    66      return useOutletContext<AuthOutletContext>();
    67  }