Remove ts-ignore from icons and move toolbar button to shared components

x-pack/plugins/lens/public/assets/axis_bottom.js → x-pack/plugins/lens/public/assets/axis_bottom.tsx

@@ -6,7 +6,14 @@
 
 import * as React from 'react';
 
-export const EuiIconAxisBottom = ({ title, titleId, ...props }) => (
+export const EuiIconAxisBottom = ({
+  title,
+  titleId,
+  ...props
+}: {
+  title: string;
+  titleId: string;
+}) => (
   <svg
     width={16}
     height={16}

x-pack/plugins/lens/public/assets/axis_left.js → x-pack/plugins/lens/public/assets/axis_left.tsx

@@ -6,7 +6,14 @@
 
 import * as React from 'react';
 
-export const EuiIconAxisLeft = ({ title, titleId, ...props }) => (
+export const EuiIconAxisLeft = ({
+  title,
+  titleId,
+  ...props
+}: {
+  title: string;
+  titleId: string;
+}) => (
   <svg
     width={16}
     height={16}

x-pack/plugins/lens/public/assets/axis_right.js → x-pack/plugins/lens/public/assets/axis_right.tsx

@@ -6,7 +6,14 @@
 
 import * as React from 'react';
 
-export const EuiIconAxisRight = ({ title, titleId, ...props }) => (
+export const EuiIconAxisRight = ({
+  title,
+  titleId,
+  ...props
+}: {
+  title: string;
+  titleId: string;
+}) => (
   <svg
     width={16}
     height={16}

x-pack/plugins/lens/public/assets/axis_top.js → x-pack/plugins/lens/public/assets/axis_top.tsx

@@ -6,7 +6,14 @@
 
 import * as React from 'react';
 
-export const EuiIconAxisTop = ({ title, titleId, ...props }) => (
+export const EuiIconAxisTop = ({
+  title,
+  titleId,
+  ...props
+}: {
+  title: string;
+  titleId: string;
+}) => (
   <svg
     width={16}
     height={16}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx

@@ -9,7 +9,7 @@ import { EuiPopover, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { NativeRenderer } from '../../../native_renderer';
 import { Visualization, VisualizationLayerWidgetProps } from '../../../types';
-import { ToolbarButton } from '../../../toolbar_button';
+import { ToolbarButton } from '../../../shared_components';
 
 export function LayerSettings({
   layerId,

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx

@@ -19,7 +19,7 @@ import { Visualization, FramePublicAPI, Datasource } from '../../../types';
 import { Action } from '../state_management';
 import { getSuggestions, switchToSuggestion, Suggestion } from '../suggestion_helpers';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
-import { ToolbarButton } from '../../../toolbar_button';
+import { ToolbarButton } from '../../../shared_components';
 
 interface VisualizationSelection {
   visualizationId: string;

x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx

@@ -10,7 +10,7 @@ import { EuiPopover, EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
 import { EuiSelectableProps } from '@elastic/eui/src/components/selectable/selectable';
 import { IndexPatternRef } from './types';
 import { trackUiEvent } from '../lens_ui_telemetry';
-import { ToolbarButtonProps, ToolbarButton } from '../toolbar_button';
+import { ToolbarButtonProps, ToolbarButton } from '../shared_components';
 
 export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & {
   label: string;

x-pack/plugins/lens/public/shared_components/index.ts

@@ -6,4 +6,5 @@
 
 export * from './empty_placeholder';
 export { ToolbarPopoverProps, ToolbarPopover } from './toolbar_popover';
+export { ToolbarButtonProps, ToolbarButton } from './toolbar_button';
 export { LegendSettingsPopover } from './legend_settings_popover';

x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx

@@ -6,7 +6,7 @@
 
 import React, { useState } from 'react';
 import { EuiFlexItem, EuiPopover, EuiIcon, EuiPopoverTitle, IconType } from '@elastic/eui';
-import { ToolbarButton, ToolbarButtonProps } from '../toolbar_button';
+import { ToolbarButton, ToolbarButtonProps } from './toolbar_button';
 import { EuiIconLegend } from '../assets/legend';
 
 const typeToIconMap: { [type: string]: string | IconType } = {

x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx

@@ -16,16 +16,11 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { LayerConfig, AxesSettingsConfig } from './types';
-import { ToolbarPopover } from '../shared_components';
-import { ToolbarButtonProps } from '../toolbar_button';
+import { ToolbarPopover, ToolbarButtonProps } from '../shared_components';
 import { isHorizontalChart } from './state_helpers';
-// @ts-ignore
 import { EuiIconAxisBottom } from '../assets/axis_bottom';
-// @ts-ignore
 import { EuiIconAxisLeft } from '../assets/axis_left';
-// @ts-ignore
 import { EuiIconAxisRight } from '../assets/axis_right';
-// @ts-ignore
 import { EuiIconAxisTop } from '../assets/axis_top';
 
 type AxesSettingsConfigKeys = keyof AxesSettingsConfig;
@@ -82,7 +77,7 @@ const popoverConfig = (
   switch (axis) {
     case 'yLeft':
       return {
-        icon: isHorizontal ? EuiIconAxisBottom : EuiIconAxisLeft,
+        icon: (isHorizontal ? EuiIconAxisBottom : EuiIconAxisLeft) as IconType,
         groupPosition: 'left',
         popoverTitle: isHorizontal
           ? i18n.translate('xpack.lens.xyChart.bottomAxisLabel', {
@@ -94,7 +89,7 @@ const popoverConfig = (
       };
     case 'yRight':
       return {
-        icon: isHorizontal ? EuiIconAxisTop : EuiIconAxisRight,
+        icon: (isHorizontal ? EuiIconAxisTop : EuiIconAxisRight) as IconType,
         groupPosition: 'right',
         popoverTitle: isHorizontal
           ? i18n.translate('xpack.lens.xyChart.topAxisLabel', {
@@ -107,7 +102,7 @@ const popoverConfig = (
     case 'x':
     default:
       return {
-        icon: isHorizontal ? EuiIconAxisLeft : EuiIconAxisBottom,
+        icon: (isHorizontal ? EuiIconAxisLeft : EuiIconAxisBottom) as IconType,
         groupPosition: 'center',
         popoverTitle: isHorizontal
           ? i18n.translate('xpack.lens.xyChart.leftAxisLabel', {