From 8ea58fb34ff0a059bc7e00cd1716c5b60ff6adda Mon Sep 17 00:00:00 2001
From: ashutosh16 <ashutosh_singh@intuit.com>
Date: Thu, 22 Aug 2024 10:00:44 -0700
Subject: [PATCH] add actionmenut ext

---
 .../extensions/ui-extensions.md               | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/docs/developer-guide/extensions/ui-extensions.md b/docs/developer-guide/extensions/ui-extensions.md
index 8d3d9dc4a3882..563584d3cf4ec 100644
--- a/docs/developer-guide/extensions/ui-extensions.md
+++ b/docs/developer-guide/extensions/ui-extensions.md
@@ -158,3 +158,67 @@ Below is an example of an extension using the flyout widget:
   );
 })(window);
 ```
+
+## TopBar Extensions
+
+The top bar panel is the action menu at the top of the application view where the action buttons are displayed like Details, Sync, Refresh. Argo CD allows you to add new react component, preferably button type.
+to the end of the ActionMenu buttons. The extension should be registered using the `extensionsAPI.registerTopBarExtension` method:
+
+```typescript
+registerTopBarExtension(component: StatusPanelExtensionComponent, title: string, id: string, flyout?: ExtensionComponent, isMiddle: boolean, isNarrow: boolean)
+```
+
+Below is an example of a simple extension:
+
+```typescript
+((window) => {
+  const component = () => {
+    return React.createElement(
+      "div",
+      { style: { padding: "10px" } },
+      "Hello World"
+    );
+  };
+  window.extensionsAPI.registerTopBarExtension(
+    component,
+    "My Extension",
+    "my_extension"
+  );
+})(window);
+```
+
+### Flyout widget
+
+It is also possible to add an optional flyout widget to your extension. It can be opened by calling `openFlyout()` from your extension's component. Your flyout component will then be rendered in a sliding panel, similar to the panel that opens when clicking on `History and rollback`.
+
+Below is an example of an extension using the flyout widget:
+
+```typescript
+((window) => {
+  const component = (props: {
+      openFlyout: () => any
+    }) => {
+    return React.createElement(
+      "div",
+      { 
+        style: { padding: "10px" },
+        onClick: () => props.openFlyout()
+      },
+      "Hello World"
+    );
+  };
+  const flyout = () => {
+    return React.createElement(
+      "div",
+      { style: { padding: "10px" } },
+      "This is a flyout"
+    );
+  };
+  window.extensionsAPI.registerTopBarExtension(
+    component,
+    "My Extension",
+    "my_extension",
+    flyout
+  );
+})(window);
+```