feat: add loading state to deletion dialogs and set global API timeout

Author: AbhishekA1509

src/App.tsx

@@ -23,6 +23,7 @@ import {
     BreadcrumbStore,
     DevtronProgressing,
     ErrorScreenManager,
+    setGlobalAPITimeout,
     showError,
     URLS as CommonURLS,
     useUserEmail,
@@ -147,6 +148,8 @@ const App = () => {
             setValidating(false)
             defaultRedirection()
         }
+
+        setGlobalAPITimeout(window._env_.GLOBAL_API_TIMEOUT)
     }, [])
 
     const renderRoutesWithErrorBoundary = () =>

src/components/common/ClusterNotReachableDialog/ClusterNotReachableDialog.tsx

@@ -19,7 +19,12 @@ import { ForceDeleteConfirmationModal } from '@devtron-labs/devtron-fe-common-li
 import { NON_CASCADE_DELETE_DIALOG_INTERNAL_MESSAGE } from '../../../config/constantMessaging'
 import { ClusterNotReachableDialogType } from './ClusterNotReachableDialog.type'
 
-const ClusterNotReachableDialog = ({ clusterName, onClickCancel, onClickDelete }: ClusterNotReachableDialogType) => {
+const ClusterNotReachableDialog = ({
+    clusterName,
+    onClickCancel,
+    onClickDelete,
+    isDeleting,
+}: ClusterNotReachableDialogType) => {
     if (!clusterName) {
         return null
     }
@@ -34,6 +39,7 @@ const ClusterNotReachableDialog = ({ clusterName, onClickCancel, onClickDelete }
                 </p>
             }
             onDelete={onClickDelete}
+            isDeleting={isDeleting}
             closeConfirmationModal={onClickCancel}
         />
     )

src/components/common/ClusterNotReachableDialog/ClusterNotReachableDialog.type.ts

@@ -18,4 +18,5 @@ export interface ClusterNotReachableDialogType {
     clusterName: string
     onClickCancel: () => void
     onClickDelete: () => void
+    isDeleting?: boolean
 }

src/components/v2/appDetails/sourceInfo/EnvironmentSelector.component.tsx

@@ -76,6 +76,8 @@ const EnvironmentSelectorComponent = ({
     const [forceDeleteDialogMessage, setForceDeleteDialogMessage] = useState<string>('')
     const [nonCascadeDeleteDialog, showNonCascadeDeleteDialog] = useState<boolean>(false)
     const [clusterName, setClusterName] = useState<string>('')
+    const [isDeleteLoading, setIsDeleteLoading] = useState<boolean>(false)
+
     const isGitops = appDetails?.deploymentAppType === DeploymentAppTypes.ARGO
     const isExternalArgo = appDetails.appType === AppType.EXTERNAL_ARGO_APP
     const isExternalFlux = appDetails.appType === AppType.EXTERNAL_FLUX_APP
@@ -150,6 +152,7 @@ const EnvironmentSelectorComponent = ({
 
     async function deleteResourceAction(deleteAction: DELETE_ACTION) {
         try {
+            setIsDeleteLoading(true)
             const response = await getDeleteApplicationApi(deleteAction)
             if (response.result.deleteResponse?.deleteInitiated || (isExternalApp && response.result?.success)) {
                 setShowDeleteConfirmation(false)
@@ -179,6 +182,8 @@ const EnvironmentSelectorComponent = ({
                 showForceDeleteDialog(true)
             }
             showError(error)
+        } finally {
+            setIsDeleteLoading(false)
         }
     }
 
@@ -376,6 +381,7 @@ const EnvironmentSelectorComponent = ({
                                     handleDelete={handleDelete}
                                     toggleConfirmation={setShowDeleteConfirmation}
                                     isCreateValueView={false}
+                                    disableButton={isDeleteLoading}
                                 />
                             )}
                         </div>
@@ -387,6 +393,7 @@ const EnvironmentSelectorComponent = ({
                             subtitle={forceDeleteDialogMessage}
                             onDelete={handleForceDelete}
                             closeConfirmationModal={closeForceConfirmationModal}
+                            isDeleting={isDeleteLoading}
                         />
                     )}
 
@@ -395,6 +402,7 @@ const EnvironmentSelectorComponent = ({
                             clusterName={clusterName}
                             onClickCancel={onClickHideNonCascadeDeletePopup}
                             onClickDelete={onClickNonCascadeDelete}
+                            isDeleting={isDeleteLoading}
                         />
                     )}
                 </div>