vitess.io/vitess@v0.16.2/web/vtadmin/src/components/routes/keyspaces/KeyspaceAction.tsx (about)

     1  import React from 'react';
     2  import { Icon, Icons } from '../../Icon';
     3  import Dialog from '../../dialog/Dialog';
     4  import { UseMutationResult } from 'react-query';
     5  
     6  interface KeyspaceActionProps {
     7      isOpen: boolean;
     8      mutation: UseMutationResult<any, any, any>;
     9      title: string;
    10      confirmText: string;
    11      successText: string;
    12      errorText: string;
    13      loadingText: string;
    14      description?: string;
    15      body?: JSX.Element;
    16      successBody?: JSX.Element;
    17      closeDialog: () => void;
    18  }
    19  
    20  const KeyspaceAction: React.FC<KeyspaceActionProps> = ({
    21      isOpen,
    22      closeDialog,
    23      mutation,
    24      title,
    25      confirmText,
    26      description,
    27      successText,
    28      successBody,
    29      loadingText,
    30      errorText,
    31      body,
    32  }) => {
    33      const onCloseDialog = () => {
    34          setTimeout(mutation.reset, 500);
    35          closeDialog();
    36      };
    37  
    38      const hasRun = mutation.data || mutation.error;
    39      return (
    40          <div>
    41              <Dialog
    42                  isOpen={isOpen}
    43                  confirmText={hasRun ? 'Close' : confirmText}
    44                  cancelText="Cancel"
    45                  onConfirm={hasRun ? onCloseDialog : mutation.mutate}
    46                  loadingText={loadingText}
    47                  loading={mutation.isLoading}
    48                  onCancel={onCloseDialog}
    49                  onClose={onCloseDialog}
    50                  hideCancel={hasRun}
    51                  title={hasRun ? undefined : title}
    52                  description={hasRun ? undefined : description}
    53              >
    54                  <div className="w-full">
    55                      {!hasRun && body}
    56                      {mutation.data && !mutation.error && (
    57                          <div className="w-full flex flex-col justify-center items-center">
    58                              <span className="flex h-12 w-12 relative items-center justify-center">
    59                                  <Icon className="fill-current text-green-500" icon={Icons.checkSuccess} />
    60                              </span>
    61                              <div className="text-lg mt-3 font-bold text-center">{successText}</div>
    62                              {successBody}
    63                          </div>
    64                      )}
    65                      {mutation.error && (
    66                          <div className="w-full flex flex-col justify-center items-center">
    67                              <span className="flex h-12 w-12 relative items-center justify-center">
    68                                  <Icon className="fill-current text-red-500" icon={Icons.alertFail} />
    69                              </span>
    70                              <div className="text-lg mt-3 font-bold text-center">{errorText}</div>
    71                          </div>
    72                      )}
    73                  </div>
    74              </Dialog>
    75          </div>
    76      );
    77  };
    78  
    79  export default KeyspaceAction;