github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/repositories/repository/settings/layout.jsx (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  import {Link} from "../../../../lib/components/nav";
     9  import {useRefs} from "../../../../lib/hooks/repo";
    10  import {Loading} from "../../../../lib/components/controls";
    11  import {RepoError} from "../error";
    12  
    13  
    14  export const SettingsLayout = () => {
    15      const [activeTab, setActiveTab] = useState("general");
    16      const { repo, loading, error} = useRefs();
    17      const [setActivePage] = useOutletContext();
    18      useEffect(() => {
    19          setActivePage("settings");
    20      }, [setActivePage]);
    21      if (loading) return <Loading/>;
    22      if (error) return <RepoError error={error}/>;
    23      const repoId = repo.id
    24      return (
    25              <Container fluid="xl">
    26                  <Row className="mt-5">
    27                      <Col md={{span: 3}}>
    28                          <Card>
    29                              <Card.Header>
    30                                  <Card.Title>Settings</Card.Title>
    31                              </Card.Header>
    32                              <Card.Body>
    33                                  <Nav variant="pills" className="flex-column">
    34                                      <Link component={Nav.Link} href={{pathname: '/repositories/:repoId/settings/general', params: {repoId}}} active={activeTab === 'general'}>
    35                                          General
    36                                      </Link>
    37                                  </Nav>
    38                                  <Nav variant="pills" className="flex-column">
    39                                      <Link component={Nav.Link} href={{pathname: '/repositories/:repoId/settings/retention', params: {repoId }}} active={activeTab === 'retention'}>
    40                                          Garbage Collection
    41                                      </Link>
    42                                  </Nav>
    43                                  <Nav variant="pills" className="flex-column">
    44                                      <Link component={Nav.Link} href={{pathname: '/repositories/:repoId/settings/branches', params: {repoId }}} active={activeTab === 'branches'}>
    45                                          Branch Protection
    46                                      </Link>
    47                                  </Nav>
    48                              </Card.Body>
    49                          </Card>
    50                      </Col>
    51                      <Col md={{span: 9}}>
    52                          <Outlet context={[setActiveTab]} />
    53                      </Col>
    54                  </Row>
    55              </Container>
    56      );
    57  };