github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/repositories/repository/settings/general.jsx (about)

     1  import React, {useEffect, useRef, useState} from "react";
     2  import { useOutletContext } from "react-router-dom";
     3  import {useRefs} from "../../../../lib/hooks/repo";
     4  import Container from "react-bootstrap/Container";
     5  import Row from "react-bootstrap/Row";
     6  import Button from "react-bootstrap/Button";
     7  import Form from "react-bootstrap/Form";
     8  import {TrashIcon} from "@primer/octicons-react";
     9  import Col from "react-bootstrap/Col";
    10  import {AlertError, Loading} from "../../../../lib/components/controls";
    11  import Modal from "react-bootstrap/Modal";
    12  import {repositories} from "../../../../lib/api";
    13  import {useRouter} from "../../../../lib/hooks/router";
    14  import {ReadOnlyBadge} from "../../../../lib/components/badges";
    15  
    16  const DeleteRepositoryModal = ({repo, show, onSubmit, onCancel}) => {
    17      const [isDisabled, setIsDisabled] = useState(true);
    18      const repoNameField = useRef(null);
    19  
    20      const compareRepoName = () => {
    21          setIsDisabled(repoNameField.current.value !== repo.id);
    22      };
    23  
    24      return (
    25          <Modal show={show} onHide={() => {
    26              setIsDisabled(true);
    27              onCancel();
    28          }} size="lg">
    29              <Modal.Header closeButton>
    30                  <Modal.Title>Delete Repository</Modal.Title>
    31              </Modal.Header>
    32              <Modal.Body>
    33                  Are you sure you wish to delete repository <strong>{repo.id}</strong>? <br />
    34                  This action cannot be undone. This will delete the following: <br /> <br />
    35  
    36                  <ul>
    37                      <li>All commits</li>
    38                      <li>All branches</li>
    39                      <li>All tags</li>
    40                      <li>All repository configuration</li>
    41                  </ul>
    42  
    43                  Data in the underlying object store will not be deleted by this action. <br /> <br />
    44  
    45                  Please type <strong>{repo.id}</strong> to confirm: <br />
    46                  <Form.Control className="mt-2" placeholder="Enter repository name to confirm" type="text" autoFocus ref={repoNameField} onChange={compareRepoName}/>
    47              </Modal.Body>
    48              <Modal.Footer>
    49                  <Button disabled={isDisabled} variant="danger" onClick={onSubmit}>I understand the consequences, delete this repository</Button>
    50              </Modal.Footer>
    51          </Modal>
    52      );
    53  };
    54  
    55  const SettingsContainer = () => {
    56      const router = useRouter();
    57      const { repo, loading, error} = useRefs();
    58      const [showingDeleteModal, setShowDeleteModal] = useState(false);
    59      const [ deletionError, setDeletionError ] = useState(null);
    60  
    61      if (loading) return <Loading/>;
    62      if (error) return <AlertError error={error}/>;
    63      if (deletionError) return <AlertError error={deletionError}/>;
    64  
    65      return (
    66          <div className="mt-3 mb-5">
    67  
    68              <div className="section-title">
    69                  <h4>General</h4>
    70              </div>
    71  
    72              <Container>
    73                  <Row>
    74                      <Form.Label column md={{span:3}} className="mb-3">
    75                          &nbsp;
    76                      </Form.Label>
    77                      <Col md={{span:4}}>
    78                          <ReadOnlyBadge readOnly={repo?.read_only} style={{marginTop: 7}} />
    79                      </Col>
    80                  </Row>
    81                  <Row>
    82                      <Form.Label column md={{span:3}} className="mb-3">
    83                          Repository name
    84                      </Form.Label>
    85                      <Col md={{span:4}}>
    86                          <Form.Control readOnly value={repo.id} type="text"/>
    87                      </Col>
    88                  </Row>
    89                  <Row>
    90                      <Form.Label column md={{span:3}} className="mb-3">
    91                          Storage namespace
    92                      </Form.Label>
    93                      <Col md={{span:4}}>
    94                          <Form.Control readOnly value={repo.storage_namespace} type="text"/>
    95                      </Col>
    96                  </Row>
    97                  <Row>
    98                      <Form.Label column md={{span:3}} className="mb-3">
    99                          Default branch
   100                      </Form.Label>
   101                      <Col md={{span:4}}>
   102                          <Form.Control readOnly value={repo.default_branch} type="text"/>
   103                      </Col>
   104                  </Row>
   105              </Container>
   106  
   107              <Button variant="danger" className="mt-3" disabled={repo?.read_only} onClick={() => setShowDeleteModal(!showingDeleteModal)}>
   108                  <TrashIcon/> Delete Repository
   109              </Button>
   110  
   111              <DeleteRepositoryModal
   112                  repo={repo}
   113                  onCancel={() => { setShowDeleteModal(false) }}
   114                  onSubmit={() => {
   115                      repositories.delete(repo.id).then(() => {
   116                          return router.push('/repositories')
   117                      }).catch(err => {
   118                          setDeletionError(err)
   119                          setShowDeleteModal(true)
   120                      })
   121                  }}
   122                  show={showingDeleteModal}/>
   123          </div>
   124      );
   125  };
   126  
   127  
   128  const RepositoryGeneralSettingsPage = () => {
   129    const [setActiveTab] = useOutletContext();
   130    useEffect(() => setActiveTab("general"), [setActiveTab]);
   131    return <SettingsContainer />;
   132  }
   133  
   134  
   135  export default RepositoryGeneralSettingsPage;