fix(actions): Better type checks for icons (opensearch-project#1496)

- fix typo in iconType for `replace_panel` action
- change iconType types from `string` to `EuiIconType`
- use `icon` instead of `iconType` for svg pathseslin
- remove unnecessary icon assertions

Signed-off-by: Josh Romero <rmerqg@amazon.com>

Co-authored-by: Tommy Markley <markleyt@amazon.com>

examples/ui_actions_explorer/public/context_menu_examples/util.ts

@@ -30,13 +30,14 @@
  * GitHub history for details.
  */
 
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { Action } from '../../../../src/plugins/ui_actions/public';
 
 export const sampleAction = (
   id: string,
   order: number,
   name: string,
-  icon: string,
+  icon: EuiIconType,
   grouping?: Action['grouping']
 ): Action => {
   return {

src/core/public/application/types.ts

@@ -34,6 +34,7 @@ import { Observable } from 'rxjs';
 import { History } from 'history';
 import { RecursiveReadonly } from '@osd/utility-types';
 
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { MountPoint } from '../types';
 import { Capabilities } from './capabilities';
 import { ChromeStart } from '../chrome';
@@ -192,7 +193,7 @@ export interface App<HistoryLocationState = unknown> {
    * A EUI iconType that will be used for the app's icon. This icon
    * takes precendence over the `icon` property.
    */
-  euiIconType?: string;
+  euiIconType?: EuiIconType;
 
   /**
    * A URL to an image file used as an icon. Used as a fallback

src/core/public/chrome/nav_links/nav_link.ts

@@ -30,6 +30,7 @@
  * GitHub history for details.
  */
 
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { pick } from '@osd/std';
 import { AppCategory } from '../../';
 
@@ -77,7 +78,7 @@ export interface ChromeNavLink {
    * A EUI iconType that will be used for the app's icon. This icon
    * takes precedence over the `icon` property.
    */
-  readonly euiIconType?: string;
+  readonly euiIconType?: EuiIconType;
 
   /**
    * A URL to an image file used as an icon. Used as a fallback

src/core/public/chrome/nav_links/to_nav_link.test.ts

@@ -34,6 +34,7 @@ import { PublicAppInfo, AppNavLinkStatus, AppStatus } from '../../application';
 import { toNavLink } from './to_nav_link';
 
 import { httpServiceMock } from '../../mocks';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 
 const app = (props: Partial<PublicAppInfo> = {}): PublicAppInfo => ({
   id: 'some-id',
@@ -54,7 +55,7 @@ describe('toNavLink', () => {
         title: 'title',
         order: 12,
         tooltip: 'tooltip',
-        euiIconType: 'my-icon',
+        euiIconType: 'my-icon' as EuiIconType,
       }),
       basePath
     );

src/core/types/app_category.ts

@@ -6,6 +6,8 @@
  * compatible open source license.
  */
 
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+
 /*
  * Licensed to Elasticsearch B.V. under one or more contributor
  * license agreements. See the NOTICE file distributed with
@@ -66,5 +68,5 @@ export interface AppCategory {
    * If the category is only 1 item, and no icon is defined, will default to the product icon
    * Defaults to initials if no icon is defined
    */
-  euiIconType?: string;
+  euiIconType?: EuiIconType;
 }

src/plugins/dashboard/public/application/actions/add_to_library_action.tsx

@@ -33,6 +33,7 @@
 import { i18n } from '@osd/i18n';
 import _ from 'lodash';
 import uuid from 'uuid';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
 import { ViewMode, PanelState, IEmbeddable } from '../../embeddable_plugin';
 import {
@@ -65,7 +66,7 @@ export class AddToLibraryAction implements ActionByType<typeof ACTION_ADD_TO_LIB
     });
   }
 
-  public getIconType({ embeddable }: AddToLibraryActionContext) {
+  public getIconType({ embeddable }: AddToLibraryActionContext): EuiIconType {
     if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
       throw new IncompatibleActionError();
     }

src/plugins/dashboard/public/application/actions/clone_panel_action.tsx

@@ -34,6 +34,7 @@ import { i18n } from '@osd/i18n';
 import { CoreStart } from 'src/core/public';
 import uuid from 'uuid';
 import _ from 'lodash';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
 import { ViewMode, PanelState, IEmbeddable } from '../../embeddable_plugin';
 import { SavedObject } from '../../../../saved_objects/public';
@@ -71,7 +72,7 @@ export class ClonePanelAction implements ActionByType<typeof ACTION_CLONE_PANEL>
     });
   }
 
-  public getIconType({ embeddable }: ClonePanelActionContext) {
+  public getIconType({ embeddable }: ClonePanelActionContext): EuiIconType {
     if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
       throw new IncompatibleActionError();
     }

src/plugins/dashboard/public/application/actions/expand_panel_action.tsx

@@ -30,6 +30,7 @@
  * GitHub history for details.
  */
 
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { i18n } from '@osd/i18n';
 import { IEmbeddable } from '../../embeddable_plugin';
 import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
@@ -74,7 +75,7 @@ export class ExpandPanelAction implements ActionByType<typeof ACTION_EXPAND_PANE
         });
   }
 
-  public getIconType({ embeddable }: ExpandPanelActionContext) {
+  public getIconType({ embeddable }: ExpandPanelActionContext): EuiIconType {
     if (!embeddable.parent || !isDashboard(embeddable.parent)) {
       throw new IncompatibleActionError();
     }

src/plugins/dashboard/public/application/actions/library_notification_action.tsx

@@ -33,6 +33,7 @@
 import React from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiBadge } from '@elastic/eui';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import {
   IEmbeddable,
   ViewMode,
@@ -57,7 +58,7 @@ export class LibraryNotificationAction implements ActionByType<typeof ACTION_LIB
     defaultMessage: 'Library',
   });
 
-  private icon = 'folderCheck';
+  private icon = 'folderCheck' as const;
 
   public readonly MenuItem = reactToUiComponent(() => (
     <EuiBadge
@@ -78,7 +79,7 @@ export class LibraryNotificationAction implements ActionByType<typeof ACTION_LIB
     return this.displayName;
   }
 
-  public getIconType({ embeddable }: LibraryNotificationActionContext) {
+  public getIconType({ embeddable }: LibraryNotificationActionContext): EuiIconType {
     if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
       throw new IncompatibleActionError();
     }

src/plugins/dashboard/public/application/actions/replace_panel_action.tsx

@@ -32,6 +32,7 @@
 
 import { i18n } from '@osd/i18n';
 import { CoreStart } from 'src/core/public';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { IEmbeddable, ViewMode, EmbeddableStart } from '../../embeddable_plugin';
 import { DASHBOARD_CONTAINER_TYPE, DashboardContainer } from '../embeddable';
 import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
@@ -68,11 +69,11 @@ export class ReplacePanelAction implements ActionByType<typeof ACTION_REPLACE_PA
     });
   }
 
-  public getIconType({ embeddable }: ReplacePanelActionContext) {
+  public getIconType({ embeddable }: ReplacePanelActionContext): EuiIconType {
     if (!embeddable.parent || !isDashboard(embeddable.parent)) {
       throw new IncompatibleActionError();
     }
-    return 'dqlOperand';
+    return 'kqlOperand';
   }
 
   public async isCompatible({ embeddable }: ReplacePanelActionContext) {

src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx

@@ -33,6 +33,7 @@
 import { i18n } from '@osd/i18n';
 import _ from 'lodash';
 import uuid from 'uuid';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
 import { ViewMode, PanelState, IEmbeddable } from '../../embeddable_plugin';
 import {
@@ -65,7 +66,7 @@ export class UnlinkFromLibraryAction implements ActionByType<typeof ACTION_UNLIN
     });
   }
 
-  public getIconType({ embeddable }: UnlinkFromLibraryActionContext) {
+  public getIconType({ embeddable }: UnlinkFromLibraryActionContext): EuiIconType {
     if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
       throw new IncompatibleActionError();
     }

src/plugins/embeddable/public/lib/actions/edit_panel_action.ts

@@ -34,6 +34,7 @@ import { i18n } from '@osd/i18n';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 import { Action } from 'src/plugins/ui_actions/public';
 import { take } from 'rxjs/operators';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ViewMode } from '../types';
 import { EmbeddableFactoryNotFoundError } from '../errors';
 import { EmbeddableStart } from '../../plugin';
@@ -89,7 +90,7 @@ export class EditPanelAction implements Action<ActionContext> {
     });
   }
 
-  getIconType() {
+  getIconType(): EuiIconType {
     return 'pencil';
   }
 

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts

@@ -33,6 +33,7 @@ import { i18n } from '@osd/i18n';
 import { Action, ActionExecutionContext } from 'src/plugins/ui_actions/public';
 import { NotificationsStart, OverlayStart } from 'src/core/public';
 import { EmbeddableStart } from 'src/plugins/embeddable/public/plugin';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ViewMode } from '../../../../types';
 import { openAddPanelFlyout } from './open_add_panel_flyout';
 import { IContainer } from '../../../../containers';
@@ -61,7 +62,7 @@ export class AddPanelAction implements Action<ActionContext> {
     });
   }
 
-  public getIconType() {
+  public getIconType(): EuiIconType {
     return 'plusInCircleFilled';
   }
 

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts

@@ -32,6 +32,7 @@
 
 import { i18n } from '@osd/i18n';
 import { Action } from 'src/plugins/ui_actions/public';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ViewMode } from '../../../../types';
 import { IEmbeddable } from '../../../../embeddables';
 
@@ -58,7 +59,7 @@ export class CustomizePanelTitleAction implements Action<ActionContext> {
     });
   }
 
-  public getIconType() {
+  public getIconType(): EuiIconType {
     return 'pencil';
   }
 

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts

@@ -33,6 +33,7 @@
 import { i18n } from '@osd/i18n';
 import { Action } from 'src/plugins/ui_actions/public';
 import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { IEmbeddable } from '../../../embeddables';
 
 export const ACTION_INSPECT_PANEL = 'openInspector';
@@ -54,7 +55,7 @@ export class InspectPanelAction implements Action<ActionContext> {
     });
   }
 
-  public getIconType() {
+  public getIconType(): EuiIconType {
     return 'inspect';
   }
 

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts

@@ -30,6 +30,7 @@
  * GitHub history for details.
  */
 import { i18n } from '@osd/i18n';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { Action, IncompatibleActionError } from '../../../ui_actions';
 import { ContainerInput, IContainer } from '../../../containers';
 import { ViewMode } from '../../../types';
@@ -64,7 +65,7 @@ export class RemovePanelAction implements Action<ActionContext> {
     });
   }
 
-  public getIconType() {
+  public getIconType(): EuiIconType {
     return 'trash';
   }
 

src/plugins/index_pattern_management/public/management_app/mount_management_section.tsx

@@ -38,6 +38,7 @@ import { i18n } from '@osd/i18n';
 import { I18nProvider } from '@osd/i18n/react';
 import { StartServicesAccessor } from 'src/core/public';
 
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
 import { ManagementAppMountParams } from '../../../management/public';
 import {

src/plugins/management/public/plugin.ts

@@ -91,7 +91,7 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
         defaultMessage: 'Stack Management',
       }),
       order: 9040,
-      euiIconType: '/plugins/home/assets/logos/opensearch_mark_default.svg',
+      icon: '/plugins/home/assets/logos/opensearch_mark_default.svg',
       category: DEFAULT_APP_CATEGORIES.management,
       updater$: this.appUpdater,
       async mount(params: AppMountParameters) {

src/plugins/management/public/types.ts

@@ -31,6 +31,7 @@
  */
 
 import { ScopedHistory, Capabilities } from 'opensearch-dashboards/public';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ManagementSection, RegisterManagementSectionArgs } from './utils';
 import { ChromeBreadcrumb } from '../../../core/public/';
 
@@ -91,6 +92,6 @@ export interface CreateManagementItemArgs {
   title: string;
   tip?: string;
   order?: number;
-  euiIconType?: string; // takes precedence over `icon` property.
+  euiIconType?: EuiIconType; // takes precedence over `icon` property.
   icon?: string; // URL to image file; fallback if no `euiIconType`
 }

src/plugins/management/public/utils/management_item.ts

@@ -29,14 +29,16 @@
  * Modifications Copyright OpenSearch Contributors. See
  * GitHub history for details.
  */
+
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { CreateManagementItemArgs } from '../types';
 
 export class ManagementItem {
   public readonly id: string = '';
   public readonly title: string;
   public readonly tip?: string;
   public readonly order: number;
-  public readonly euiIconType?: string;
+  public readonly euiIconType?: EuiIconType;
   public readonly icon?: string;
 
   public enabled: boolean = true;

src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx

@@ -31,6 +31,7 @@
  */
 
 import { EuiButtonProps } from '@elastic/eui';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 
 export type TopNavMenuAction = (anchorElement: HTMLElement) => void;
 
@@ -44,7 +45,7 @@ export interface TopNavMenuData {
   disableButton?: boolean | (() => boolean);
   tooltip?: string | (() => string | undefined);
   emphasize?: boolean;
-  iconType?: string;
+  iconType?: EuiIconType;
   iconSide?: EuiButtonProps['iconSide'];
 }
 

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

@@ -31,6 +31,7 @@
  */
 
 import { UiComponent } from 'src/plugins/opensearch_dashboards_utils/public';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ActionType, ActionContextMapping, BaseContext } from '../types';
 import { Presentable } from '../util/presentable';
 import { Trigger } from '../triggers';
@@ -87,7 +88,7 @@ export interface Action<Context extends BaseContext = {}, T = ActionType>
   /**
    * Optional EUI icon type that can be displayed along with the title.
    */
-  getIconType(context: ActionExecutionContext<Context>): string | undefined;
+  getIconType(context: ActionExecutionContext<Context>): EuiIconType | undefined;
 
   /**
    * Returns a title to be displayed to the user.

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

@@ -32,6 +32,7 @@
 
 // @ts-ignore
 import React from 'react';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { Action, ActionContext as Context, ActionDefinition } from './action';
 import { Presentable, PresentableGrouping } from '../util/presentable';
 import { uiToReactComponent } from '../../../opensearch_dashboards_react/public';
@@ -55,7 +56,7 @@ export class ActionInternal<A extends ActionDefinition = ActionDefinition>
     return this.definition.execute(context);
   }
 
-  public getIconType(context: Context<A>): string | undefined {
+  public getIconType(context: Context<A>): EuiIconType | undefined {
     if (!this.definition.getIconType) return undefined;
     return this.definition.getIconType(context);
   }