github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/setup/setupComplete.tsx (about)

     1  import React, {FC, useCallback} from "react";
     2  import Alert from "react-bootstrap/Alert";
     3  import Button from "react-bootstrap/Button";
     4  import Card from "react-bootstrap/Card";
     5  import Col from "react-bootstrap/Col";
     6  import Row from "react-bootstrap/Row";
     7  import {DownloadIcon} from "@primer/octicons-react";
     8  import {ClipboardButton} from "../../lib/components/controls";
     9  import { useRouter } from "../../lib/hooks/router";
    10  import noop from "lodash/noop";
    11  
    12  interface SetupCompleteProps {
    13      accessKeyId: string;
    14      secretAccessKey: string;
    15      apiEndpoint: string;
    16  }
    17  
    18  export const SetupComplete: FC<SetupCompleteProps> = ({
    19      accessKeyId,
    20      secretAccessKey,
    21      apiEndpoint,
    22  }) => {
    23      const router = useRouter();
    24      const downloadContent = 'data:application/octet-stream,' + encodeURIComponent(`# lakectl command line configuration - save under the filename $HOME/.lakectl.yaml
    25  credentials:
    26      access_key_id: ${accessKeyId}
    27      secret_access_key: ${secretAccessKey}
    28  server:
    29      endpoint_url: ${window.location.protocol}//${window.location.host}${apiEndpoint}
    30  `);
    31      
    32      const goToLoginHandler = useCallback(() => {
    33          let nextUrl = "/auth/login";
    34          // Need to refactor and convert the useRouter and useQuery hooks to TS in order to get rid of this any
    35          // If we weren't planning a TS conversion anyway, we could use Map in place of {}
    36          // or use the native URLSearchParams directly (which is more or less the same refactor from the call site perspective)
    37          // eslint-disable-next-line @typescript-eslint/no-explicit-any
    38          if (router.query && (router.query as any).next) {
    39              // eslint-disable-next-line @typescript-eslint/no-explicit-any
    40              nextUrl = `/auth/login?next=${(router.query as any).next}`;
    41          }
    42          window.open(nextUrl, "_blank")
    43      }, [router.query]);
    44  
    45      return (
    46          <>
    47          <Row>
    48              <Col md={{offset: 3, span: 6}}>
    49                  <Card className="setup-widget">
    50                      <Card.Body className="after-setup-card">
    51                          <h2>You&apos;re all set!</h2>
    52                          <Card.Text>
    53                              Here are your credentials:<br/>
    54                          </Card.Text>
    55                          <div className="ms-2 row mt-4">
    56                              <div className="col-4">Access Key ID:</div>
    57                              <div className="col-8"><code>{accessKeyId}</code> &#160;&#160;<ClipboardButton onSuccess={noop} onError={noop} className={"copy-button"} variant="outline-dark" text={accessKeyId} tooltip="Copy"/></div>
    58                          </div>
    59                          <div className="ms-2 row mt-2">
    60                              <div className="col-4">Secret Access Key:</div>
    61                              <div className="col-8"><code>{secretAccessKey}</code> &#160;&#160;<ClipboardButton onSuccess={noop} onError={noop} className={"copy-button"} variant="outline-dark" text={secretAccessKey} tooltip="Copy"/></div>
    62                          </div>
    63                          <Alert className="mt-4" variant="warning">
    64                              This is the <strong>only</strong> time that the secret access keys can be viewed or downloaded. You cannot recover them later.
    65                              <div className="mt-3 text-md-center">
    66                                  <a className="btn p-2 pl-3 pr-3 after-setup-btn"
    67                                     style={{backgroundColor: '#808080'}}
    68                                     href={downloadContent}
    69                                     target="_blank" rel="noreferrer" download="lakectl.yaml"><DownloadIcon/> Download credentials
    70                                  </a>
    71                              </div>
    72                          </Alert>
    73                          <h5>lakectl</h5>
    74                          <div className="ms-2 mt-2">
    75                              <a target="_blank" rel="noreferrer" 
    76                                 href="https://docs.lakefs.io/reference/cli.html">lakectl</a> is a CLI tool for working with lakeFS.
    77                              <p className="mt-2">
    78                              Download lakectl as part of the <a target="_blank" rel="noreferrer" href="https://github.com/treeverse/lakeFS/releases">lakeFS release package</a> and save the above credentials file as <code>~/.lakectl.yaml</code>.
    79                              </p>
    80                          </div>
    81                          <div className="mt-3 text-md-center">
    82                              <Button className="p-2 pl-3 pr-3 after-setup-btn" onClick={goToLoginHandler}>Go To Login</Button>
    83                          </div>
    84                      </Card.Body>
    85                  </Card>
    86              </Col>
    87          </Row></>
    88      );
    89  }