fix(actions): Better type checks for icons

examples/ui_actions_explorer/public/context_menu_examples/util.ts

@@ -28,13 +28,14 @@
  * under the License.
  */
 
+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

@@ -32,6 +32,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';
@@ -190,7 +191,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

@@ -28,6 +28,7 @@
  * under the License.
  */
 
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { pick } from '@osd/std';
 import { AppCategory } from '../../';
 
@@ -75,7 +76,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/nav_links_service.test.ts

@@ -32,6 +32,7 @@ import { NavLinksService } from './nav_links_service';
 import { take, map, takeLast } from 'rxjs/operators';
 import { App } from '../../application';
 import { BehaviorSubject } from 'rxjs';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 
 const availableApps = new Map([
   ['app1', { id: 'app1', order: 0, title: 'App 1', icon: 'app1' }],
@@ -41,7 +42,7 @@ const availableApps = new Map([
       id: 'app2',
       order: -10,
       title: 'App 2',
-      euiIconType: 'canvasApp',
+      euiIconType: 'canvasApp' as EuiIconType,
     },
   ],
   ['chromelessApp', { id: 'chromelessApp', order: 20, title: 'Chromless App', chromeless: true }],
@@ -200,7 +201,7 @@ describe('NavLinksService', () => {
           id: 'app2',
           order: -10,
           title: 'App 2',
-          euiIconType: 'canvasApp',
+          euiIconType: 'canvasApp' as EuiIconType,
         })
       );
       const hiddenLinkIds = await start

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

@@ -32,6 +32,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',
@@ -52,7 +53,7 @@ describe('toNavLink', () => {
         title: 'title',
         order: 12,
         tooltip: 'tooltip',
-        euiIconType: 'my-icon',
+        euiIconType: 'my-icon' as EuiIconType,
       }),
       basePath
     );
@@ -62,7 +63,7 @@ describe('toNavLink', () => {
         title: 'title',
         order: 12,
         tooltip: 'tooltip',
-        euiIconType: 'my-icon',
+        euiIconType: 'my-icon' as EuiIconType,
       })
     );
   });

src/core/types/app_category.ts

@@ -9,6 +9,8 @@
  * GitHub history for details.
  */
 
+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
@@ -64,5 +66,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/advanced_settings/public/management_app/mount_management_section.tsx

@@ -36,6 +36,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 { AdvancedSettings } from './advanced_settings';
 import { ManagementAppMountParams } from '../../../management/public';
 import { ComponentRegistry } from '../types';
@@ -54,7 +55,7 @@ const readOnlyBadge = {
   tooltip: i18n.translate('advancedSettings.badge.readOnly.tooltip', {
     defaultMessage: 'Unable to save advanced settings',
   }),
-  iconType: 'glasses',
+  iconType: 'glasses' as EuiIconType,
 };
 
 export async function mountManagementSection(

src/plugins/apm_oss/server/tutorial/envs/on_prem.ts

@@ -29,6 +29,7 @@
  */
 
 import { i18n } from '@osd/i18n';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { INSTRUCTION_VARIANT } from '../../../../../../src/plugins/home/server';
 import {
   createWindowsServerInstructions,
@@ -82,7 +83,7 @@ export function onPremInstructions({
             defaultMessage: `Please make sure your APM Server is updated to 7.0 or higher. \
             You can also migrate your 6.x data with the migration assistant found in OpenSearch Dashboards's management section.`,
           }),
-          iconType: 'alert',
+          iconType: 'alert' as EuiIconType,
         },
         instructionVariants: [
           {

src/plugins/apm_oss/server/tutorial/index.ts

@@ -29,6 +29,7 @@
  */
 
 import { i18n } from '@osd/i18n';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { onPremInstructions } from './envs/on_prem';
 import apmIndexPattern from './index_pattern.json';
 import { ArtifactsSchema, TutorialsCategory } from '../../../../../src/plugins/home/server';
@@ -94,7 +95,7 @@ It allows you to monitor the performance of thousands of applications in real ti
           '{config.docs.base_url}guide/en/apm/get-started/{config.docs.version}/index.html',
       },
     }),
-    euiIconType: 'apmApp',
+    euiIconType: 'apmApp' as EuiIconType,
     artifacts,
     onPrem: onPremInstructions(indices),
     previewImagePath: '/plugins/apmOss/assets/apm.png',

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

@@ -31,6 +31,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 {
@@ -63,7 +64,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

@@ -32,6 +32,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';
@@ -69,7 +70,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

@@ -28,6 +28,7 @@
  * under the License.
  */
 
+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';
@@ -72,7 +73,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

@@ -31,6 +31,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,
@@ -55,7 +56,7 @@ export class LibraryNotificationAction implements ActionByType<typeof ACTION_LIB
     defaultMessage: 'Library',
   });
 
-  private icon = 'folderCheck';
+  private icon = 'folderCheck' as EuiIconType;
 
   public readonly MenuItem = reactToUiComponent(() => (
     <EuiBadge
@@ -76,7 +77,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

@@ -30,6 +30,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';
@@ -66,11 +67,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

@@ -31,6 +31,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 {
@@ -63,7 +64,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/dashboard/public/application/top_nav/get_top_nav_config.ts

@@ -30,6 +30,7 @@
 
 import { i18n } from '@osd/i18n';
 import { AppMountParameters } from 'opensearch-dashboards/public';
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
 import { ViewMode } from '../../embeddable_plugin';
 import { TopNavIds } from './top_nav_ids';
 import { NavAction } from '../../types';
@@ -94,7 +95,7 @@ function getEditConfig(action: NavAction) {
   return {
     emphasize: true,
     id: 'edit',
-    iconType: 'pencil',
+    iconType: 'pencil' as EuiIconType,
     label: i18n.translate('dashboard.topNave.editButtonAriaLabel', {
       defaultMessage: 'edit',
     }),
@@ -183,7 +184,7 @@ function getAddConfig(action: NavAction) {
 function getCreateNewConfig(action: NavAction) {
   return {
     emphasize: true,
-    iconType: 'plusInCircleFilled',
+    iconType: 'plusInCircleFilled' as EuiIconType,
     id: 'addNew',
     label: i18n.translate('dashboard.topNave.addNewButtonAriaLabel', {
       defaultMessage: 'Create new',

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

@@ -32,6 +32,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';
@@ -87,7 +88,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

@@ -32,6 +32,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';
@@ -60,7 +61,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

@@ -30,6 +30,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';
 
@@ -56,7 +57,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

@@ -31,6 +31,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';
@@ -52,7 +53,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

@@ -29,6 +29,7 @@
  */
 
 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';
@@ -63,7 +64,7 @@ export class RemovePanelAction implements Action<ActionContext> {
     });
   }
 
-  public getIconType() {
+  public getIconType(): EuiIconType {
     return 'trash';
   }