github.com/minio/console@v1.4.1/web-app/src/screens/Console/Common/ComponentsScreen.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, { Fragment, useEffect, useState } from "react";
    18  import { Button, ConfirmDeleteIcon, PageLayout, SectionTitle, Grid } from "mds";
    19  import ConfirmDialog from "./ModalWrapper/ConfirmDialog";
    20  import PageHeaderWrapper from "./PageHeaderWrapper/PageHeaderWrapper";
    21  import HelpMenu from "../HelpMenu";
    22  import { setHelpName } from "../../../systemSlice";
    23  import { useAppDispatch } from "../../../store";
    24  
    25  const ComponentsScreen = () => {
    26    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
    27    const dispatch = useAppDispatch();
    28  
    29    useEffect(() => {
    30      dispatch(setHelpName("components"));
    31      // eslint-disable-next-line react-hooks/exhaustive-deps
    32    }, []);
    33  
    34    return (
    35      <Fragment>
    36        <PageHeaderWrapper label={"Components"} actions={<HelpMenu />} />
    37  
    38        <PageLayout>
    39          <Grid container>
    40            <Grid item xs={12}>
    41              <SectionTitle>Confirm Dialogs</SectionTitle>
    42            </Grid>
    43            <Grid item xs={12}>
    44              <p>Used to confirm a non-idempotent action.</p>
    45            </Grid>
    46            <Grid item xs={12}>
    47              <Button
    48                id={"open-dialog-test"}
    49                type="button"
    50                variant={"regular"}
    51                onClick={() => {
    52                  setDialogOpen(true);
    53                }}
    54                label={"Open Dialog"}
    55              />
    56              <ConfirmDialog
    57                title={`Delete Bucket`}
    58                confirmText={"Delete"}
    59                isOpen={dialogOpen}
    60                titleIcon={<ConfirmDeleteIcon />}
    61                isLoading={false}
    62                onConfirm={() => {
    63                  setDialogOpen(false);
    64                }}
    65                onClose={() => {
    66                  setDialogOpen(false);
    67                }}
    68                confirmationContent={
    69                  <Fragment>
    70                    Are you sure you want to delete bucket <b>bucket</b>
    71                    ? <br />A bucket can only be deleted if it's empty.
    72                  </Fragment>
    73                }
    74              />
    75            </Grid>
    76          </Grid>
    77        </PageLayout>
    78      </Fragment>
    79    );
    80  };
    81  
    82  export default ComponentsScreen;