INFRA-3897 | Abhishek | Add alert when multiple resources could be deleted

src/components/common/DeleteResource.tsx

@@ -13,23 +13,19 @@ import {
   Typography,
 } from '@material-ui/core';
 import { getIn, useFormikContext } from 'formik';
-import { httpClient, httpDelete, post } from '@src/helper/api-client';
+import { httpClient, httpDelete } from '@src/helper/api-client';
 import { toast } from 'react-toastify';
-import { CheckBox, Done } from '@material-ui/icons';
 import DialogContent from '@material-ui/core/DialogContent';
-import {
-  API_CREATE_REQUEST,
-  API_DELETE_K8S_RESOURCE,
-  API_GET_K8S_RESOURCE_STATUS,
-  API_TO_POST_MANIFEST,
-} from '@src/constants/Endpoints';
-import { forEach } from 'lodash';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { API_DELETE_K8S_RESOURCE, API_GET_K8S_RESOURCE_STATUS } from '@src/constants/Endpoints';
 import { getFieldNameFromPath } from '@src/models/Manifest';
-import { validate } from 'webpack';
+import Alert from '@material-ui/lab/Alert';
 
 interface DeleteResourceProps {
   name: string;
   fieldPath: string;
+  showAlert: boolean;
+  additionalConfirmation?: boolean;
   onDelete: Function;
   disabled?: boolean;
   children?: React.ReactNode;
@@ -40,6 +36,7 @@ interface DeleteResourceProps {
 interface ConfirmationPopupProps {
   onDelete: Function;
   k8sResourceName: string;
+  showAlert?: boolean;
   loading: boolean;
   setLoading: Function;
   isResourceDeployed: boolean;
@@ -50,10 +47,6 @@ interface ConfirmationPopupProps {
   setOpenPopup: Function;
 }
 
-interface NotifyDeleteProps {
-  fieldPath: string;
-}
-
 const useStyles = makeStyles({
   card: {
     display: 'flex',
@@ -98,6 +91,8 @@ const ConfirmationPopup = (props: ConfirmationPopupProps) => {
   let [deleteFromManifest, setDeleteFromManifest] = useState(true);
   const { submitForm }: { submitForm: any } = useFormikContext();
 
+  const additionalConfirmationMessage = `Note: This will delete multiple resources. To delete single resource use Delete Icon`;
+
   const toggleDeleteFromManifest = () => {
     setDeleteFromManifest(!deleteFromManifest);
   };
@@ -158,8 +153,14 @@ const ConfirmationPopup = (props: ConfirmationPopupProps) => {
       <Grid container direction="row" alignItems="center" spacing={4}>
         <Grid item xs={12}>
           <Typography variant="h6" className={classes.cardContent}>
-            {`Proceed with deletion of kubernetes resource ?`}{' '}
+            {`Proceed with deletion of kubernetes resource ?`}
+            <br />
           </Typography>
+          {props.showAlert ? (
+            <Alert severity="warning">{additionalConfirmationMessage}</Alert>
+          ) : (
+            <></>
+          )}
         </Grid>
         <Grid item spacing={4}>
           {' '}
@@ -263,12 +264,14 @@ const DeleteResource = (props: DeleteResourceProps) => {
   if (KubeObjectTypeMap.hasOwnProperty(fieldName)) {
     resourceName = KubeObjectTypeMap[fieldName]['name'];
   }
+
   let getObjectEndpoint = API_GET_K8S_RESOURCE_STATUS(
     manifestId,
     resourceName,
     undefined,
     undefined,
   );
+
   let deleteObjectEndpoint = API_DELETE_K8S_RESOURCE(
     manifestId,
     resourceName,
@@ -290,6 +293,7 @@ const DeleteResource = (props: DeleteResourceProps) => {
       uniqueIdentifierName,
       uniqueIdentiferValue,
     );
+
     deleteObjectEndpoint = API_GET_K8S_RESOURCE_STATUS(
       manifestId,
       resourceName,
@@ -356,6 +360,7 @@ const DeleteResource = (props: DeleteResourceProps) => {
             loading={loading}
             setLoading={setLoading}
             manifestId={manifestId}
+            showAlert={props.showAlert}
             isResourceDeployed={isResourceDeployed}
             k8sResourceName={resourceName}
             deleteObjectEndpoint={deleteObjectEndpoint}

src/components/common/RemoveButton.tsx

@@ -17,6 +17,7 @@ const RemoveButton = (props: RemoveButtonProps) => {
 
   return (
     <DeleteResource
+      showAlert={true}
       name={props.name}
       onDelete={removeAction}
       fieldPath={props.fieldPath}