INFRA-3897 | Abhishek | Add a condition to check when the status is to be checked from backend

src/components/common/DeleteResource.tsx

@@ -5,7 +5,11 @@ import { httpClient, httpDelete } from '@src/helper/api-client';
 import { toast } from 'react-toastify';
 import DialogContent from '@material-ui/core/DialogContent';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { API_DELETE_K8S_RESOURCE, API_GET_K8S_RESOURCE_STATUS } from '@src/constants/Endpoints';
+import {
+  API_DELETE_K8S_RESOURCE_ALL,
+  API_GET_K8S_RESOURCE_STATUS_ALL,
+  API_GET_STATUS_OR_DELETE_K8S_RESOURCE,
+} from '@src/constants/Endpoints';
 import { getFieldNameFromPath } from '@src/models/Manifest';
 import Alert from '@material-ui/lab/Alert';
 import ConfirmationPopup from './ConfirmationPopup';
@@ -14,7 +18,7 @@ import { DeleteConfirmationPopup } from './DeleteConfirmationPopup';
 interface DeleteResourceProps {
   name: string;
   fieldPath: string;
-  showAlert: boolean;
+  clickedRemoveButton?: boolean;
   additionalConfirmation?: boolean;
   onDelete: Function;
   disabled?: boolean;
@@ -30,7 +34,7 @@ const KubeObjectTypeMap = {
   },
   commonApiGateways: {
     name: 'commonApiGateways',
-    uniqueIdentifier: 'pathName',
+    uniqueIdentifier: 'id',
   },
   cronJobs: {
     name: 'cronHpa',
@@ -54,6 +58,7 @@ const DeleteResource = (props: DeleteResourceProps) => {
   const [openPopup, setOpenPopup] = useState(false);
   const deleteButtonTooltip = props.tooltip ? props.tooltip : 'Delete from Manifest or Kubernetes';
   const { values }: { values: any } = useFormikContext();
+  const objectAtFieldPath = getIn(values, props.fieldPath);
   const manifestId = values?.id;
 
   const [isResourceDeployed, setIsResourceDeployed] = useState(false);
@@ -72,50 +77,63 @@ const DeleteResource = (props: DeleteResourceProps) => {
   const { index, pathWithoutIndex }: { index: any; pathWithoutIndex: string } = getPathAndIndex(
     props.fieldPath,
   );
+
   const fieldName = getFieldNameFromPath(pathWithoutIndex);
   let resourceName = fieldName;
   if (KubeObjectTypeMap.hasOwnProperty(fieldName)) {
     resourceName = KubeObjectTypeMap[fieldName]['name'];
   }
 
-  let getObjectEndpoint = API_GET_K8S_RESOURCE_STATUS(
-    manifestId,
-    resourceName,
-    undefined,
-    undefined,
-  );
+  let getObjectEndpoint, deleteObjectEndpoint;
 
-  let deleteObjectEndpoint = API_DELETE_K8S_RESOURCE(
-    manifestId,
-    resourceName,
-    undefined,
-    undefined,
-  );
+  const isCheckFromBackendNeeded = () => {
+    if (props.clickedRemoveButton) {
+      // handle case when the user is trying to remove using the remove button (not the bucket icon)
+      if (Array.isArray(objectAtFieldPath)) {
+        getObjectEndpoint = API_GET_K8S_RESOURCE_STATUS_ALL(manifestId, resourceName);
+        deleteObjectEndpoint = API_DELETE_K8S_RESOURCE_ALL(manifestId, resourceName);
+      } else {
+        getObjectEndpoint = API_GET_STATUS_OR_DELETE_K8S_RESOURCE(manifestId, resourceName);
+        deleteObjectEndpoint = API_GET_STATUS_OR_DELETE_K8S_RESOURCE(manifestId, resourceName);
+      }
+    } else if (fieldName in KubeObjectTypeMap) {
+      //when the object in concern is an array and user is trying to delete a specific object from the array
+      resourceName = KubeObjectTypeMap[fieldName]['name'];
+      let uniqueIdentifierName =
+        KubeObjectTypeMap[fieldName]['uniqueIdentifier'] !== undefined
+          ? KubeObjectTypeMap[fieldName]['uniqueIdentifier']
+          : fieldName;
 
-  if (fieldName in KubeObjectTypeMap && index !== undefined) {
-    resourceName = KubeObjectTypeMap[fieldName]['name'];
-    let uniqueIdentifierName =
-      KubeObjectTypeMap[fieldName]['uniqueIdentifier'] !== undefined
-        ? KubeObjectTypeMap[fieldName]['uniqueIdentifier']
-        : fieldName;
+      let uniqueIdentifierValue = getIn(objectAtFieldPath, uniqueIdentifierName);
 
-    let uniqueIdentiferValue = getIn(getIn(values, props.fieldPath), uniqueIdentifierName);
-    getObjectEndpoint = API_GET_K8S_RESOURCE_STATUS(
-      manifestId,
-      resourceName,
-      uniqueIdentifierName,
-      uniqueIdentiferValue,
-    );
+      //handle a special case when the user has just added the object but it has not been saved yet to the backend
+      if (uniqueIdentifierName !== undefined && uniqueIdentifierValue === undefined) {
+        props.onDelete();
+        return false;
+      }
 
-    deleteObjectEndpoint = API_GET_K8S_RESOURCE_STATUS(
-      manifestId,
-      resourceName,
-      uniqueIdentifierName,
-      uniqueIdentiferValue,
-    );
-  }
+      getObjectEndpoint = API_GET_STATUS_OR_DELETE_K8S_RESOURCE(
+        manifestId,
+        resourceName,
+        uniqueIdentifierName,
+        uniqueIdentifierValue,
+      );
+
+      deleteObjectEndpoint = API_GET_STATUS_OR_DELETE_K8S_RESOURCE(
+        manifestId,
+        resourceName,
+        uniqueIdentifierName,
+        uniqueIdentifierValue,
+      );
+    }
+    return true;
+  };
 
   const checkIfDeployed = () => {
+    if (!isCheckFromBackendNeeded()) {
+      props.onDelete();
+      return;
+    }
     if (!DeleteImplementedMap.hasOwnProperty(resourceName)) {
       props.onDelete();
       return;
@@ -173,7 +191,7 @@ const DeleteResource = (props: DeleteResourceProps) => {
             loading={loading}
             setLoading={setLoading}
             manifestId={manifestId}
-            showAlert={props.showAlert}
+            showAlert={props.clickedRemoveButton}
             isResourceDeployed={isResourceDeployed}
             k8sResourceName={resourceName}
             deleteObjectEndpoint={deleteObjectEndpoint}

src/components/common/RemoveButton.tsx

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

src/constants/Endpoints.tsx

@@ -9,26 +9,22 @@ export const API_TO_EXPORT_MANIFEST = (manifestId: string, version): string =>
 export const API_TO_MANAGE_ARGO_ROLLOUT = (manifestId: number, operation: string): string =>
   `/api/kube/manifest/${manifestId}/rollout/${operation}`;
 
-export const API_GET_K8S_RESOURCE_STATUS = (
+export const API_GET_STATUS_OR_DELETE_K8S_RESOURCE = (
   manifestId: number,
   k8sResourceName: string,
-  uniqueIdentifierName: string | undefined,
-  uniqueIdentiferValue: any,
+  uniqueIdentifierName?: string | undefined,
+  uniqueIdentiferValue?: any,
 ) => {
-  if (uniqueIdentifierName !== undefined && uniqueIdentiferValue !== undefined) {
+  if (uniqueIdentifierName !== undefined) {
     return `/api/kube/manifest/${manifestId}/kubeObjectType/${k8sResourceName}?${uniqueIdentifierName}=${uniqueIdentiferValue}`;
   }
   return `/api/kube/manifest/${manifestId}/kubeObjectType/${k8sResourceName}`;
 };
 
-export const API_DELETE_K8S_RESOURCE = (
-  manifestId: number,
-  k8sResourceName: string,
-  uniqueIdentifierName: string | undefined,
-  uniqueIdentifierValue: any,
-) => {
-  if (uniqueIdentifierName !== undefined && uniqueIdentifierValue !== undefined) {
-    return `/api/kube/manifest/${manifestId}/kubeObjectType/${k8sResourceName}?${uniqueIdentifierName}=${uniqueIdentifierValue}`;
-  }
-  return `/api/kube/manifest/${manifestId}/kubeObjectType/${k8sResourceName}`;
+export const API_GET_K8S_RESOURCE_STATUS_ALL = (manifestId: number, k8sResourceName: string) => {
+  return `/api/kube/manifest/${manifestId}/kubeObjectType/${k8sResourceName}?all=true`;
+};
+
+export const API_DELETE_K8S_RESOURCE_ALL = (manifestId: number, k8sResourceName: string) => {
+  return `/api/kube/manifest/${manifestId}/kubeObjectType/${k8sResourceName}?deleteAll=true`;
 };

src/models/Manifest.ts

@@ -797,9 +797,9 @@ export const newCommonApiGateway = () => {
 
 export const newGatewayAttributes = () => {
   return {
-    pathName: 'pathname',
-    sourceGatewayPath: '/sourcepath',
-    targetGatewayPath: '/destinationpath',
+    pathName: undefined,
+    sourceGatewayPath: '/',
+    targetGatewayPath: '/',
     externalAuth: false,
     isDeployed: false,
   };