github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/auth/policies/policy.jsx (about)

     1  import React, {useEffect, useState} from "react";
     2  import { useOutletContext } from "react-router-dom";
     3  import Button from "react-bootstrap/Button";
     4  import Form from "react-bootstrap/Form";
     5  import {PencilIcon} from "@primer/octicons-react";
     6  
     7  import {PolicyHeader} from "../../../lib/components/auth/nav";
     8  import {useAPI} from "../../../lib/hooks/api";
     9  import {auth} from "../../../lib/api";
    10  import {PolicyDisplay, PolicyEditor} from "../../../lib/components/policy";
    11  import {
    12      ActionGroup,
    13      ActionsBar,
    14      Loading,
    15      AlertError,
    16  } from "../../../lib/components/controls";
    17  import {useRouter} from "../../../lib/hooks/router";
    18  
    19  
    20  const PolicyView = ({ policyId }) => {
    21      const [jsonView, setJsonView] = useState(false);
    22      const [showEditor, setShowEditor] = useState(false);
    23      const [refresh, setRefresh] = useState(false);
    24  
    25      const {response, loading, error} = useAPI(() => {
    26          return auth.getPolicy(policyId);
    27      }, [policyId, refresh]);
    28  
    29      const policy = response;
    30  
    31      let content;
    32      if (loading) content = <Loading/>;
    33      else if (error) content=  <AlertError error={error}/>;
    34      else content = (
    35          <PolicyDisplay policy={policy} asJSON={jsonView}/>
    36      );
    37  
    38      return (
    39          <>
    40              <PolicyHeader policyId={policyId}/>
    41  
    42              <ActionsBar>
    43                  <ActionGroup orientation="left">
    44                      <Button variant="primary" onClick={() => setShowEditor(true)}>
    45                          <PencilIcon/> Edit
    46                      </Button>
    47                  </ActionGroup>
    48                  <ActionGroup orientation="right">
    49                      <Form>
    50                      <Form.Switch
    51                          label="JSON View"
    52                          id="policy-json-switch"
    53                          onChange={e => setJsonView(e.target.checked)}
    54                      />
    55                      </Form>
    56                  </ActionGroup>
    57              </ActionsBar>
    58  
    59              <div className="mt-2">
    60                  {content}
    61              </div>
    62  
    63              <PolicyEditor
    64                  policy={policy}
    65                  show={showEditor}
    66                  onSubmit={(policyBody) => {
    67                      return auth.editPolicy(policyId, policyBody).then(() => {
    68                          setShowEditor(false);
    69                          setRefresh(!refresh);
    70                      });
    71                  }}
    72                  onHide={() => { setShowEditor(false) }}
    73              />
    74          </>
    75      );
    76  }
    77  
    78  
    79  const PolicyContainer = () => {
    80      const router = useRouter();
    81      const { policyId } = router.params;
    82      return (!policyId) ? <></> : <PolicyView policyId={policyId}/>;
    83  }
    84  
    85  const PolicyPage = () => {
    86      const [setActiveTab] = useOutletContext();
    87      useEffect(() => setActiveTab("policies"), [setActiveTab]);
    88      return <PolicyContainer/>;
    89  }
    90  
    91  export default PolicyPage;