fix(ui): Improve Delete Dialog Behaviour when deleting child apps in the app-of-app pattern (#24802)

Signed-off-by: Atif Ali <[email protected]>

Author: aali309

ui/src/app/applications/components/utils.scss

@@ -60,3 +60,13 @@ i.utils-health-status-icon {
         transform: rotate(360deg);
     }
 }
+
+.delete-dialog-icon {
+    &.warning {
+        color: #f4c030;
+    }
+    
+    &.info {
+        color: #0DADEA;
+    }
+}

ui/src/app/applications/components/utils.tsx

@@ -82,8 +82,18 @@ export const SpinningIcon = ({color, qeId}: {color: string; qeId: string}) => {
     );
 };
 
-export async function deleteApplication(appName: string, appNamespace: string, apis: ContextApis): Promise<boolean> {
+export async function deleteApplication(appName: string, appNamespace: string, apis: ContextApis, application?: appModels.Application): Promise<boolean> {
     let confirmed = false;
+
+    // Use common child application detection logic if application object is provided
+    const isChildApp = application ? isChildApplication(application) : false;
+    const dialogTitle = isChildApp ? 'Delete child application' : 'Delete application';
+    const appType = isChildApp ? 'child Application' : 'Application';
+    const confirmLabel = isChildApp ? 'child application' : 'application';
+
+    // Check if this is being called from resource tree context
+    const isFromResourceTree = application !== undefined;
+
     const propagationPolicies: {name: string; message: string}[] = [
         {
             name: 'Foreground',
@@ -99,18 +109,27 @@ export async function deleteApplication(appName: string, appNamespace: string, a
         }
     ];
     await apis.popup.prompt(
-        'Delete application',
+        dialogTitle,
         api => (
             <div>
                 <p>
-                    Are you sure you want to delete the <strong>Application</strong> <kbd>{appName}</kbd>?
-                    <span style={{display: 'block', marginBottom: '10px'}} />
+                    Are you sure you want to delete the <strong>{appType}</strong> <kbd>{appName}</kbd>?
+                </p>
+                {isFromResourceTree && (
+                    <p>
+                        <strong>
+                            <i className='fa fa-warning delete-dialog-icon warning' /> Note:
+                        </strong>{' '}
+                        You are about to delete an Application from the resource tree. This uses the same deletion behavior as the Applications list page.
+                    </p>
+                )}
+                <p>
                     Deleting the application in <kbd>foreground</kbd> or <kbd>background</kbd> mode will delete all the application's managed resources, which can be{' '}
                     <strong>dangerous</strong>. Be sure you understand the effects of deleting this resource before continuing. Consider asking someone to review the change first.
                 </p>
                 <div className='argo-form-row'>
                     <FormField
-                        label={`Please type '${appName}' to confirm the deletion of the resource`}
+                        label={`Please type '${appName}' to confirm the deletion of the ${confirmLabel}`}
                         formApi={api}
                         field='applicationName'
                         qeId='name-field-delete-confirmation'
@@ -452,6 +471,17 @@ export const deleteSourceAction = (app: appModels.Application, source: appModels
     );
 };
 
+// Detect if a resource is an Application
+const isApplicationResource = (resource: ResourceTreeNode): boolean => {
+    return resource.kind === 'Application' && resource.group === 'argoproj.io';
+};
+
+// Detect if an application is a child application
+const isChildApplication = (application: appModels.Application): boolean => {
+    const partOfLabel = application.metadata.labels?.['app.kubernetes.io/part-of'];
+    return partOfLabel && partOfLabel.trim() !== '';
+};
+
 export const deletePopup = async (
     ctx: ContextApis,
     resource: ResourceTreeNode,
@@ -460,6 +490,17 @@ export const deletePopup = async (
     childResources: appModels.ResourceNode[],
     appChanged?: BehaviorSubject<appModels.Application>
 ) => {
+    // Detect if this is an Application resource
+    const isApplication = isApplicationResource(resource);
+
+    // Check if we're in a parent-child context (used for both Application and non-Application resources)
+    const isInParentContext = isChildApplication(application);
+
+    // For Application resources, use the deleteApplication function with resource tree context
+    if (isApplication) {
+        return deleteApplication(resource.name, resource.namespace || '', ctx, application);
+    }
+
     const deleteOptions = {
         option: 'foreground'
     };
@@ -471,13 +512,31 @@ export const deletePopup = async (
         return deletePodAction(ctx, resource, application);
     }
 
+    // Determine dialog title and add custom messaging
+    const dialogTitle = 'Delete resource';
+    let customMessage: React.ReactNode = null;
+
+    if (isInParentContext) {
+        customMessage = (
+            <div>
+                <p>
+                    <strong>
+                        <i className='fa fa-exclamation-triangle delete-dialog-icon info' /> Note:
+                    </strong>{' '}
+                    You are about to delete a resource from a parent application's resource tree.
+                </p>
+            </div>
+        );
+    }
+
     return ctx.popup.prompt(
-        'Delete resource',
+        dialogTitle,
         api => (
             <div>
                 <p>
                     Are you sure you want to delete <strong>{resource.kind}</strong> <kbd>{resource.name}</kbd>?
                 </p>
+                {customMessage}
                 <p>
                     Deleting resources can be <strong>dangerous</strong>. Be sure you understand the effects of deleting this resource before continuing. Consider asking someone to
                     review the change first.