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

     1  import React, {useEffect, useState} from "react";
     2  import { useOutletContext } from "react-router-dom";
     3  import {UserHeaderWithContext} from "./userHeaderWithContext";
     4  import {auth} from "../../../../lib/api";
     5  import {CredentialsShowModal, CredentialsTable} from "../../../../lib/components/auth/credentials";
     6  import useUser from "../../../../lib/hooks/user";
     7  import {ConfirmationButtonWithContext} from "../../../../lib/components/modals";
     8  import {
     9      ActionGroup,
    10      ActionsBar,
    11      AlertError,
    12      RefreshButton
    13  } from "../../../../lib/components/controls";
    14  import {useRouter} from "../../../../lib/hooks/router";
    15  
    16  
    17  const UserCredentialsList = ({ userId, after, onPaginate }) => {
    18      const {user} = useUser();
    19      const [refresh, setRefresh] = useState(false);
    20      const [createError, setCreateError] = useState(null);
    21      const [createdKey, setCreatedKey] = useState(null);
    22  
    23      const createKey = () => {
    24          return auth.createCredentials(userId)
    25              .catch(err => {
    26                  setCreateError(err);
    27              }).then(key => {
    28                  setCreateError(null);
    29                  setRefresh(!refresh);
    30                  return key;
    31              });
    32      };
    33      const content = (
    34              <>
    35                  {createError && <AlertError error={createError}/>}
    36                  <CredentialsTable
    37                      userId={userId}
    38                      currentAccessKey={(user) ? user.accessKeyId : ""}
    39                      refresh={refresh}
    40                      after={after}
    41                      onPaginate={onPaginate}
    42                  />
    43              </>
    44          );
    45  
    46          const getMsg = (email) => <span>Create new credentials for user <strong>{email}</strong>?</span>;
    47      return (
    48          <>
    49              <UserHeaderWithContext userId={userId} page={'credentials'}/>
    50  
    51              <ActionsBar>
    52                  <ActionGroup orientation="left">
    53                      <ConfirmationButtonWithContext
    54                          userId={userId}
    55                          variant="success"
    56                          modalVariant="success"
    57                          msg={getMsg}
    58                          onConfirm={hide => {
    59                              createKey()
    60                                  .then(key => { setCreatedKey(key) })
    61                                  .finally(hide)
    62                          }}>
    63                          Create Access Key
    64                      </ConfirmationButtonWithContext>
    65                  </ActionGroup>
    66  
    67                  <ActionGroup orientation="right">
    68                      <RefreshButton onClick={() => setRefresh(!refresh)}/>
    69                  </ActionGroup>
    70              </ActionsBar>
    71  
    72              <div className="mt-2">
    73  
    74                  <CredentialsShowModal
    75                      credentials={createdKey}
    76                      show={(!!createdKey)}
    77                      onHide={() => { setCreatedKey(null) }}/>
    78  
    79                  {content}
    80              </div>
    81          </>
    82      );
    83  }
    84  
    85  const UserCredentialsContainer = () => {
    86      const router = useRouter();
    87      const { after } = router.query;
    88      const { userId } = router.params;
    89      return (!userId) ? <></> : <UserCredentialsList
    90          userId={userId}
    91          after={(after) ? after : ""}
    92          onPaginate={after => router.push({pathname: '/auth/users/:userId/credentials', query: {after}, params: {userId}})}
    93      />;
    94  };
    95  
    96  const UserCredentialsPage = () => {
    97      const {setActiveTab} = useOutletContext();
    98      useEffect(() => setActiveTab("users"), [setActiveTab]);
    99      return <UserCredentialsContainer/>;
   100  };
   101  
   102  export default UserCredentialsPage;