feat: support application level extensions (#9923)

Signed-off-by: Alexander Matyushentsev <[email protected]>
argoproj · Jul 28, 2022 · ac34ff2 · ac34ff2
1 parent a85d88d
commit ac34ff2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/docs/developer-guide/ui-extensions.md b/docs/developer-guide/ui-extensions.md
@@ -33,8 +33,6 @@ The resource tab extension should be registered using the `extensionsAPI.registe
 registerResourceExtension(component: ExtensionComponent, group: string, kind: string, tabTitle: string)
 ```
 
-
-
 * `component: ExtensionComponent` is a React component that receives the following properties:
 
     * resource: State - the kubernetes resource object;
@@ -57,3 +55,7 @@ Below is an example of a resource tab extension:
 })(window)
 ```
 
+## Application Tab Extensions
+
+Since the Argo CD Application is a Kubernetes resource, application tabs can be the same as any other resource tab.
+Make sure to use 'argoproj.io'/'Application' as group/kind and an extension will be used to render the application-level tab.
diff --git a/ui/src/app/applications/components/resource-details/resource-details.tsx b/ui/src/app/applications/components/resource-details/resource-details.tsx
@@ -202,7 +202,13 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
             content: <ApplicationResourceEvents applicationName={application.metadata.name} />
         });
 
-        return tabs;
+        const extensionTabs = services.extensions.getResourceTabs('argoproj.io', 'Application').map((ext, i) => ({
+            title: ext.title,
+            key: `extension-${i}`,
+            content: <ext.component resource={application} tree={tree} />
+        }));
+
+        return tabs.concat(extensionTabs);
     };
 
     const extensions = selectedNode?.kind && selectedNode?.group ? services.extensions.getResourceTabs(selectedNode?.group, selectedNode?.kind) : [];