deployment-portal-fe/src/components/common/DeleteConfirmationPopup.tsx

import React, { useState } from 'react';
import {
  Button,
  Checkbox,
  CircularProgress,
  FormControlLabel,
  Grid,
  makeStyles,
  Typography,
} from '@material-ui/core';
import { useFormikContext } from 'formik';
import { httpDelete } from '@src/helper/api-client';
import { toast } from 'react-toastify';
import { Alert } from '@material-ui/lab';

const useStyles = makeStyles({
  card: {
    display: 'flex',
  },
  cardContent: {
    display: 'flex',
    margin: 10,
  },
  button: {
    width: 150,
    marginBottom: 20,
    marginLeft: 20,
  },
  buttonRow: {
    alignContent: 'center',
    padding: 10,
  },
  doneIcon: {
    color: 'green',
    alignContent: 'center',
    marginLeft: 200,
    marginBottom: 50,
    borderRadius: '50%',
    fontSize: 150,
    background: 'lightgreen',
    borderStyle: 'solid',
    borderWidth: '2px',
    borderColor: 'green',
  },
  loader: {
    color: 'primary',
    alignContent: 'center',
    borderRadius: '50%',
  },
});

interface ConfirmationPopupProps {
  onDelete: Function;
  k8sResourceName: string;
  showAlert?: boolean;
  loading: boolean;
  setLoading: Function;
  isResourceDeployed: boolean;
  deleteObjectEndpoint: string;
  manifestId: number;
  handleClose: Function;
  openPopup: boolean;
  setOpenPopup: Function;
}

interface NotifyDeleteProps {
  errorOccured: boolean;
  deleteMessage: string;
}

export const DeleteConfirmationPopup = (props: ConfirmationPopupProps) => {
  const classes = useStyles();
  const { handleClose, onDelete } = props;
  const [notifyDelete, setNotifyDelete] = useState(false);
  const [deleteMessage, setDeleteMessage] = useState<string>('');
  const [errorOccured, setErrorOccured] = useState<boolean>(false);
  const { submitForm }: { submitForm: any } = useFormikContext();
  const [deleteFromManifest, setDeleteFromManifest] = useState(true);

  const additionalConfirmationMessage = `Note: This will delete multiple resources. To delete single resource use Delete Icon`;

  const toggleDeleteFromManifest = () => {
    setDeleteFromManifest(!deleteFromManifest);
  };

  const deleteK8sResource = () => {
    props.setLoading(true);
    httpDelete({}, props.deleteObjectEndpoint)
      .then(async res => {
        props.setLoading(false);
        if (res.ok) {
          setDeleteMessage('Successfully deleted Kubernetes resource');
          setNotifyDelete(true);
        } else {
          const error = await res.text();
          setDeleteMessage('Error occurred while deleting resources: ' + error);
          setErrorOccured(true);
          setNotifyDelete(true);
        }
      })
      .catch(error => {
        props.setLoading(false);
        toast.error(error.message);
      });
  };

  const handleDelete = () => {
    if (deleteFromManifest) {
      onDelete();
      props.handleClose();
      submitForm();
    } else {
      deleteK8sResource();
    }
  };

  const NotifyDelete = (notifyProps: NotifyDeleteProps) => {
    const classes = useStyles();
    return (
      <Grid container direction="row" alignItems="center" spacing={4}>
        <Grid item xs={12}>
          {notifyProps.errorOccured ? (
            <Alert severity={'error'}>{notifyProps.deleteMessage}</Alert>
          ) : (
            <Typography variant="h6" className={classes.cardContent}>
              <Alert>{notifyProps.deleteMessage}</Alert>
            </Typography>
          )}
        </Grid>
        <Grid item xs={12} className={classes.buttonRow}>
          <Grid spacing={4}></Grid>
          <Button
            variant="outlined"
            color="secondary"
            className={classes.button}
            onClick={() => {
              props.handleClose();
            }}
          >
            Close
          </Button>
        </Grid>
      </Grid>
    );
  };

  const ConfirmDelete = () => {
    return notifyDelete ? (
      <NotifyDelete errorOccured={errorOccured} deleteMessage={deleteMessage} />
    ) : (
      <Grid container direction="row" alignItems="center" spacing={4}>
        <Grid item xs={12}>
          <Typography variant="h6" className={classes.cardContent}>
            {`Proceed with deletion of kubernetes resource ?`}
            <br />
          </Typography>
          {props.showAlert ? (
            <Alert severity="warning">{additionalConfirmationMessage}</Alert>
          ) : (
            <></>
          )}
        </Grid>
        <Grid item spacing={4}>
          {' '}
        </Grid>
        <Grid item spacing={4}>
          <FormControlLabel
            control={<Checkbox />}
            label="Delete from manifest also"
            onClick={toggleDeleteFromManifest}
            checked={deleteFromManifest}
          />
        </Grid>
        <Grid item xs={12} className={classes.buttonRow}>
          <Grid item xs={8} spacing={4}>
            <Button
              variant="contained"
              color="primary"
              className={classes.button}
              onClick={() => {
                handleDelete();
              }}
            >
              Yes
            </Button>
            <Button
              variant="contained"
              color="secondary"
              className={classes.button}
              onClick={() => {
                handleClose();
              }}
            >
              No
            </Button>
          </Grid>
        </Grid>
      </Grid>
    );
  };

  return props.loading ? (
    <CircularProgress className={classes.loader} />
  ) : props.isResourceDeployed ? (
    <ConfirmDelete />
  ) : (
    <></>
  );
};