marcel/argo-cd
1
0
Fork 0
mirror of https://github.com/argoproj/argo-cd.git synced 2026-02-20 01:28:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): conditionally render app view extensions (#25132)

Browse Source 
Signed-off-by: Jonathan Winters <wintersjonathan0@gmail.com>
This commit is contained in:
jwinters01
2025-11-05 06:34:29 -08:00
committed by GitHub
parent 8d0e5b9408
commit 1ae13b2896
3 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/developer-guide/extensions/ui-extensions.md
View File

@@ -232,6 +232,7 @@ registerAppViewExtension(
component: ExtensionComponent, // the component to be rendered
title: string, // the title of the page once the component is rendered
icon: string, // the favicon classname for the icon tab
shouldDisplay?: (app: Application): boolean // returns true if the view should be available
)
```
@@ -249,7 +250,10 @@ Below is an example of a simple extension:
window.extensionsAPI.registerAppViewExtension(
component,
"My Extension",
"fa-question-circle"
"fa-question-circle",
(app) =>
application.metadata?.labels?.["application.environmentLabelKey"] ===
"prd"
);
})(window);
```

24
ui/src/app/applications/components/application-details/application-details.tsx
View File

@@ -838,17 +838,19 @@ Are you sure you want to disable auto-sync and rollback application '${props.mat
}}
/>
{state.extensions &&
(state.extensions || []).map(ext => (
<i
key={ext.title}
className={classNames(`fa ${ext.icon}`, {selected: pref.view === ext.title})}
title={ext.title}
onClick={() => {
appContext.navigation.goto('.', {view: ext.title});
services.viewPreferences.updatePreferences({appDetails: {...pref, view: ext.title}});
}}
/>
))}
(state.extensions || [])
.filter(ext => ext.shouldDisplay(application))
.map(ext => (
<i
key={ext.title}
className={classNames(`fa ${ext.icon}`, {selected: pref.view === ext.title})}
title={ext.title}
onClick={() => {
appContext.navigation.goto('.', {view: ext.title});
services.viewPreferences.updatePreferences({appDetails: {...pref, view: ext.title}});
}}
/>
))}
</div>
</React.Fragment>
)

5
ui/src/app/shared/services/extensions-service.ts
View File

@@ -50,8 +50,8 @@ function registerSystemLevelExtension(component: ExtensionComponent, title: stri
extensions.eventTarget.emit('systemLevel', ext);
}
function registerAppViewExtension(component: ExtensionComponent, title: string, icon: string) {
const ext = {component, title, icon};
function registerAppViewExtension(component: AppViewExtensionComponent, title: string, icon: string, shouldDisplay?: (app: Application) => boolean) {
const ext = {component, title, icon, shouldDisplay: shouldDisplay || (() => true)};
extensions.appViewExtensions.push(ext);
extensions.eventTarget.emit('appView', ext);
}
@@ -109,6 +109,7 @@ export interface AppViewExtension {
component: AppViewExtensionComponent;
title: string;
icon?: string;
shouldDisplay: (app: Application) => boolean;
}
export interface StatusPanelExtension {