fix(ui): hide sync button when resource is not managed

Signed-off-by: linghaoSu <linghao.su@daocloud.io>
argoproj · Jan 22, 2025 · 1c991ef · 1c991ef
1 parent e3caeba
commit 1c991ef
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/ui/src/app/applications/components/resource-details/resource-details.tsx b/ui/src/app/applications/components/resource-details/resource-details.tsx
@@ -41,6 +41,8 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
     const tab = new URLSearchParams(appContext.history.location.search).get('tab');
     const selectedNodeInfo = NodeInfo(new URLSearchParams(appContext.history.location.search).get('node'));
     const selectedNodeKey = selectedNodeInfo.key;
+    const isManaged = selectedNode ? AppUtils.isTopLevelResource(selectedNode, application) : false;
+
     const [pageNumber, setPageNumber] = React.useState(0);
     const [collapsedSources, setCollapsedSources] = React.useState(new Array<boolean>()); // For Sources tab to save collapse states
     const handleCollapse = (i: number, isCollapsed: boolean) => {
@@ -303,29 +305,33 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                                     </React.Fragment>
                                 )}
                                 {(selectedNode as ResourceTreeNode).health && <AppUtils.HealthStatusIcon state={(selectedNode as ResourceTreeNode).health} />}
-                                <button
-                                    onClick={() => appContext.navigation.goto('.', {deploy: AppUtils.nodeKey(selectedNode)}, {replace: true})}
-                                    style={{marginLeft: 'auto', marginRight: '5px'}}
-                                    className='argo-button argo-button--base'>
-                                    <i className='fa fa-sync-alt' /> <span className='show-for-large'>SYNC</span>
-                                </button>
-                                <button
-                                    onClick={() => AppUtils.deletePopup(appContext, selectedNode, application, !!data.controlledState, data.childResources)}
-                                    style={{marginRight: '5px'}}
-                                    className='argo-button argo-button--base'>
-                                    <i className='fa fa-trash' /> <span className='show-for-large'>DELETE</span>
-                                </button>
-                                {data.resourceActionsMenuItems?.length > 0 && (
-                                    <DropDown
-                                        isMenu={true}
-                                        anchor={() => (
-                                            <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
-                                                <i className='fa fa-ellipsis-v' />
-                                            </button>
-                                        )}>
-                                        {() => AppUtils.renderResourceActionMenu(data.resourceActionsMenuItems)}
-                                    </DropDown>
-                                )}
+                                <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginLeft: 'auto'}}>
+                                    {isManaged && (
+                                        <button
+                                            onClick={() => appContext.navigation.goto('.', {deploy: AppUtils.nodeKey(selectedNode)}, {replace: true})}
+                                            style={{marginRight: '5px'}}
+                                            className='argo-button argo-button--base'>
+                                            <i className='fa fa-sync-alt' /> <span className='show-for-large'>SYNC</span>
+                                        </button>
+                                    )}
+                                    <button
+                                        onClick={() => AppUtils.deletePopup(appContext, selectedNode, application, !!data.controlledState, data.childResources)}
+                                        style={{marginRight: '5px'}}
+                                        className='argo-button argo-button--base'>
+                                        <i className='fa fa-trash' /> <span className='show-for-large'>DELETE</span>
+                                    </button>
+                                    {data.resourceActionsMenuItems?.length > 0 && (
+                                        <DropDown
+                                            isMenu={true}
+                                            anchor={() => (
+                                                <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
+                                                    <i className='fa fa-ellipsis-v' />
+                                                </button>
+                                            )}>
+                                            {() => AppUtils.renderResourceActionMenu(data.resourceActionsMenuItems)}
+                                        </DropDown>
+                                    )}
+                                </div>
                             </div>
                             <Tabs
                                 navTransparent={true}

diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -549,6 +549,11 @@ export function getResourceActionsMenuItems(resource: ResourceTreeNode, metadata
         .catch(() => [] as MenuItem[]);
 }
 
+export function isTopLevelResource(res: ResourceTreeNode, app: appModels.Application): boolean {
+    const uniqRes = `/${res.namespace}/${res.group}/${res.kind}/${res.name}`;
+    return app.status.resources.some(resStatus => `/${resStatus.namespace}/${resStatus.group}/${resStatus.kind}/${resStatus.name}` === uniqRes);
+}
+
 function getActionItems(
     resource: ResourceTreeNode,
     application: appModels.Application,
@@ -557,11 +562,6 @@ function getActionItems(
     appChanged: BehaviorSubject<appModels.Application>,
     isQuickStart: boolean
 ): Observable<ActionMenuItem[]> {
-    function isTopLevelResource(res: ResourceTreeNode, app: appModels.Application): boolean {
-        const uniqRes = `/${res.namespace}/${res.group}/${res.kind}/${res.name}`;
-        return app.status.resources.some(resStatus => `/${resStatus.namespace}/${resStatus.group}/${resStatus.kind}/${resStatus.name}` === uniqRes);
-    }
-
     const isPod = resource.kind === 'Pod';
     const isManaged = isTopLevelResource(resource, application);
     const childResources = findChildResources(resource, tree);