Add tooltip and disabled to panel item (opensearch-project#9696)

* add action id

Signed-off-by: yyfamazon <yyf@amazon.com>

* add change log

Signed-off-by: yyfamazon <yyf@amazon.com>

* add tooltip and disable to context

Signed-off-by: yyfamazon <yyf@amazon.com>

* fix test

Signed-off-by: yyfamazon <yyf@amazon.com>

* fix test

Signed-off-by: yyfamazon <yyf@amazon.com>

* resolve comment

Signed-off-by: yyfamazon <yyf@amazon.com>

* resolve comments

Signed-off-by: yyfamazon <yyf@amazon.com>

* Changeset file for PR opensearch-project#9696 created/updated

---------

Signed-off-by: yyfamazon <yyf@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: 2 people

CHANGELOG.md

@@ -89,6 +89,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
  - Move HITs counter to be closer to table & show results count ([#9498](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9498))
  - Add the ability to export to CSV from the discover page ([#9530](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9530))
  - Append prompt for query assistant in request payload ([#9532](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9532))
+ - Add tooltip and disabled to panel item ([#9696](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9696))
 
 ### 🐛 Bug Fixes
 

changelogs/fragments/9696.yml

@@ -0,0 +1,2 @@
+feat:
+- Ui action supports `isDisabled` and `getTooltip` ([#9696](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9696))

src/plugins/ui_actions/public/actions/action.ts

@@ -83,6 +83,10 @@ export interface Action<Context extends BaseContext = {}, T = ActionType>
    */
   readonly type: T;
 
+  isDisabled?(context: ActionExecutionContext<Context>): boolean;
+
+  getTooltip?(context: ActionExecutionContext<Context>): string;
+
   /**
    * Optional EUI icon type that can be displayed along with the title.
    */
@@ -157,6 +161,9 @@ export interface ActionDefinition<Context extends BaseContext = {}>
    * without first showing up in context menu.
    * false by default.
    */
+  isDisabled?(context: ActionExecutionContext<Context>): boolean;
+
+  getTooltip?(context: ActionExecutionContext<Context>): string;
   shouldAutoExecute?(context: ActionDefinitionContext<Context>): Promise<boolean>;
 
   /**

src/plugins/ui_actions/public/actions/action_internal.ts

@@ -74,6 +74,16 @@ export class ActionInternal<A extends ActionDefinition = ActionDefinition>
     return await this.definition.isCompatible(context);
   }
 
+  public isDisabled(context: Context<A>): boolean {
+    if (!this.definition.isDisabled) return false;
+    return this.definition.isDisabled(context);
+  }
+
+  public getTooltip(context: Context<A>): string {
+    if (!this.definition.getTooltip) return '';
+    return this.definition.getTooltip(context);
+  }
+
   public async getHref(context: Context<A>): Promise<string | undefined> {
     if (!this.definition.getHref) return undefined;
     return await this.definition.getHref(context);

src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.tsx

@@ -206,7 +206,7 @@ export async function buildContextMenuForActions({
 
     // Add a context menu item for this action so it shows up on a context menu panel.
     // We add this within the parent group or default to the mainMenu panel.
-    panels[parentGroupId || 'mainMenu'].items!.push({
+    const contextItem = {
       name: action.MenuItem
         ? React.createElement(uiToReactComponent(action.MenuItem), { context })
         : action.getDisplayName(context),
@@ -216,9 +216,15 @@ export async function buildContextMenuForActions({
       href: action.getHref ? await action.getHref(context) : undefined,
       _order: action.order || 0,
       _title: action.getDisplayName(context),
-    });
+    };
+    if (typeof action?.getTooltip === 'function') {
+      contextItem.toolTipContent = action.getTooltip(context);
+    }
+    if (typeof action?.isDisabled === 'function') {
+      contextItem.disabled = action?.isDisabled(context);
+    }
+    panels[parentGroupId || 'mainMenu'].items!.push(contextItem);
   });
-
   await Promise.all(promises);
 
   // For each panel, sort items by order and title