From ab6123eca8db2ea279ed507d203c89e1c069d554 Mon Sep 17 00:00:00 2001
From: linghaoSu <linghao.su@daocloud.io>
Date: Mon, 25 Nov 2024 16:56:51 +0800
Subject: [PATCH] fix(ui): simplify detail action menu item

Signed-off-by: linghaoSu <linghao.su@daocloud.io>
---
 .../application-details.tsx                   | 83 +++++++++----------
 1 file changed, 37 insertions(+), 46 deletions(-)

diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx
index 26f5d0939b151..078b11db2c692 100644
--- a/ui/src/app/applications/components/application-details/application-details.tsx
+++ b/ui/src/app/applications/components/application-details/application-details.tsx
@@ -934,85 +934,78 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
         const fullName = AppUtils.nodeKey({group: 'argoproj.io', kind: app.kind, name: app.metadata.name, namespace: app.metadata.namespace});
         const ActionMenuItem = (prop: {actionLabel: string}) => <span className={needOverlapLabelOnNarrowScreen ? 'show-for-large' : ''}>{prop.actionLabel}</span>;
 
-        const actionMenus = [
+        return [
             {
                 iconClassName: 'fa fa-info-circle',
-                title: <ActionMenuItem actionLabel='Details' />,
+                title: <ActionMenuItem actionLabel='Details' key='details' />,
                 action: () => this.selectNode(fullName),
                 disabled: !app.spec.source && (!app.spec.sources || app.spec.sources.length === 0)
             },
             {
                 iconClassName: 'fa fa-file-medical',
-                title: <ActionMenuItem actionLabel='Diff' />,
+                title: <ActionMenuItem actionLabel='Diff' key='diff' />,
                 action: () => this.selectNode(fullName, 0, 'diff'),
                 disabled: app.status.sync.status === appModels.SyncStatuses.Synced || (!app.spec.source && (!app.spec.sources || app.spec.sources.length === 0))
-            }
-        ];
-
-        if (!app.status.operationState?.finishedAt || app.status.operationState?.phase === 'Running') {
-            actionMenus.push({
-                iconClassName: 'fa fa-stop',
-                title: <ActionMenuItem actionLabel='Terminate Sync' />,
-                action: async () => {
-                    const confirmed = await this.context.apis.popup.confirm('Terminate Sync', 'Are you sure you want to terminate sync?');
-                    if (confirmed) {
-                        try {
-                            await services.applications.terminateOperation(app.metadata.name, app.metadata.namespace);
-                        } catch (e) {
-                            this.context.apis.notifications.show({
-                                content: <ErrorNotification title='Unable to Terminate Sync operation' e={e} />,
-                                type: NotificationType.Error
-                            });
-                        }
-                    }
-                },
-                disabled: false
-            });
-        } else {
-            actionMenus.push({
-                iconClassName: 'fa fa-sync',
-                title: <ActionMenuItem actionLabel='Sync' />,
-                action: () => AppUtils.showDeploy('all', null, this.appContext.apis),
-                disabled: !app.spec.source && (!app.spec.sources || app.spec.sources.length === 0)
-            });
-        }
+            },
 
-        // Add refresh action
-        actionMenus.push(
+            !app.status.operationState?.finishedAt || app.status.operationState?.phase === 'Running'
+                ? {
+                      iconClassName: 'fa fa-stop',
+                      title: <ActionMenuItem actionLabel='Terminate Sync' key='terminate-sync' />,
+                      action: async () => {
+                          const confirmed = await this.context.apis.popup.confirm('Terminate Sync', 'Are you sure you want to terminate sync?');
+                          if (confirmed) {
+                              try {
+                                  await services.applications.terminateOperation(app.metadata.name, app.metadata.namespace);
+                              } catch (e) {
+                                  this.context.apis.notifications.show({
+                                      content: <ErrorNotification title='Unable to Terminate Sync operation' e={e} />,
+                                      type: NotificationType.Error
+                                  });
+                              }
+                          }
+                      }
+                  }
+                : {
+                      iconClassName: 'fa fa-sync',
+                      title: <ActionMenuItem actionLabel='Sync' key='sync' />,
+                      action: () => AppUtils.showDeploy('all', null, this.appContext.apis),
+                      disabled: !app.spec.source && (!app.spec.sources || app.spec.sources.length === 0)
+                  },
             ...(app.status?.operationState?.phase === 'Running' && app.status.resources.find(r => r.requiresDeletionConfirmation)
                 ? [
                       {
                           iconClassName: 'fa fa-check',
-                          title: <ActionMenuItem actionLabel='Confirm Pruning' />,
+                          title: <ActionMenuItem actionLabel='Confirm Pruning' key='confirm-pruning' />,
                           action: () => this.confirmDeletion(app, 'Confirm Prunning', 'Are you sure you want to confirm resources pruning?')
                       }
                   ]
                 : []),
             {
                 iconClassName: 'fa fa-info-circle',
-                title: <ActionMenuItem actionLabel='Sync Status' />,
+                title: <ActionMenuItem actionLabel='Sync Status' key='sync-status' />,
                 action: () => this.setOperationStatusVisible(true),
                 disabled: !app.status.operationState
             },
             {
                 iconClassName: 'fa fa-history',
-                title: <ActionMenuItem actionLabel='History and rollback' />,
+                title: <ActionMenuItem actionLabel='History and rollback' key='history-rollback' />,
                 action: () => {
                     this.setRollbackPanelVisible(0);
                 },
                 disabled: !app.status.operationState
             },
             app.metadata.deletionTimestamp &&
-                app.status.resources.find(r => r.requiresDeletionConfirmation) &&
-                !((app.metadata.annotations || {})[appModels.AppDeletionConfirmedAnnotation] == 'true')
+            app.status.resources.find(r => r.requiresDeletionConfirmation) &&
+            !((app.metadata.annotations || {})[appModels.AppDeletionConfirmedAnnotation] == 'true')
                 ? {
                       iconClassName: 'fa fa-check',
-                      title: <ActionMenuItem actionLabel='Confirm Deletion' />,
+                      title: <ActionMenuItem actionLabel='Confirm Deletion' key='confirm-deletion' />,
                       action: () => this.confirmDeletion(app, 'Confirm Deletion', 'Are you sure you want to delete this application?')
                   }
                 : {
                       iconClassName: 'fa fa-times-circle',
-                      title: <ActionMenuItem actionLabel='Delete' />,
+                      title: <ActionMenuItem actionLabel='Delete' key='delete' />,
                       action: () => this.deleteApplication(),
                       disabled: !!app.metadata.deletionTimestamp
                   },
@@ -1020,7 +1013,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                 iconClassName: classNames('fa fa-redo', {'status-icon--spin': !!refreshing}),
                 title: (
                     <React.Fragment>
-                        <ActionMenuItem actionLabel='Refresh' />{' '}
+                        <ActionMenuItem actionLabel='Refresh' key='refresh' />{' '}
                         <DropDownMenu
                             items={[
                                 {
@@ -1041,9 +1034,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                     }
                 }
             }
-        );
-
-        return actionMenus;
+        ];
     }
 
     private filterTreeNode(node: ResourceTreeNode, filterInput: FilterInput): boolean {