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

     1  import React, { useEffect, useState } from "react";
     2  
     3  import Container from "react-bootstrap/Container";
     4  import Breadcrumb from "react-bootstrap/Breadcrumb";
     5  import Stack from "react-bootstrap/Stack";
     6  
     7  import {useRefs} from "../../hooks/repo";
     8  import { Outlet } from "react-router-dom";
     9  import {RepositoryNavTabs} from "./tabs";
    10  import {Link} from "../nav";
    11  import { RefContextProvider } from "../../hooks/repo";
    12  import { ReadOnlyBadge } from "../badges";
    13  
    14  const RepoNav = () => {
    15      const { repo } = useRefs();
    16      const [repoId, setRepoId] = useState("");
    17      useEffect(() => {
    18          if (repo) {
    19          setRepoId(repo.id);
    20          }
    21      }, [repo]);
    22  
    23      return (
    24          <Stack direction="horizontal" gap={2}>
    25              <Breadcrumb>
    26                  <Link href={{pathname: '/repositories'}} component={Breadcrumb.Item}>
    27                      Repositories
    28                  </Link>
    29                  <Link href={{pathname: '/repositories/:repoId/objects', params: {repoId}}} component={Breadcrumb.Item}>
    30                      {repoId}
    31                  </Link>
    32              </Breadcrumb>
    33              <ReadOnlyBadge readOnly={repo?.read_only} style={{ marginBottom: 16 }} />
    34          </Stack>
    35      );
    36  };
    37  
    38  export const RepositoryPageLayout = ({ fluid = "sm" }) => {
    39    const [activePage, setActivePage] = useState("objects");
    40      return (
    41          <RefContextProvider>
    42              <div>
    43                  <RepoNav/>
    44  
    45                  <RepositoryNavTabs active={activePage}/>
    46  
    47                  <Container fluid={fluid}>
    48                      <div className="mt-4">
    49                        <Outlet context={[setActivePage]} />
    50                      </div>
    51                  </Container>
    52              </div>
    53          </RefContextProvider>
    54      );
    55  };