Chore: Remove Dashboard IconName type assertions (#54573)

* Chore: Remove Dashboard IconName type assertions

* fix lint

.betterer.results

@@ -3869,11 +3869,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Do not use any type assertions.", "3"]
     ],
-    "public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
-    ],
     "public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -3986,9 +3981,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
-    "public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -4076,8 +4068,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/features/dashboard/dashgrid/SeriesVisibilityConfigFactory.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]

public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { CollapsableSection, TagsInput, Select, Field, Input, Checkbox, Button } from '@grafana/ui';
+import { CollapsableSection, TagsInput, Select, Field, Input, Checkbox, Button, IconName } from '@grafana/ui';
 
 import { DashboardLink, DashboardModel } from '../../state/DashboardModel';
 
@@ -23,7 +23,7 @@ const linkTypeOptions = [
   { value: 'link', label: 'Link' },
 ];
 
-export const linkIconMap: { [key: string]: string } = {
+export const linkIconMap: Record<string, IconName | undefined> = {
   'external link': 'external-link-alt',
   dashboard: 'apps',
   question: 'question-circle',

public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx

@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { IconName, Tab, TabContent, TabsBar, useForceUpdate, useStyles2 } from '@grafana/ui';
+import { Tab, TabContent, TabsBar, toIconName, useForceUpdate, useStyles2 } from '@grafana/ui';
 import AlertTabIndex from 'app/features/alerting/AlertTabIndex';
 import { PanelAlertTab } from 'app/features/alerting/unified/PanelAlertTab';
 import { PanelQueriesChangedEvent, PanelTransformationsChangedEvent } from 'app/types/events';
@@ -52,7 +52,7 @@ export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, da
               label={tab.text}
               active={tab.active}
               onChangeTab={() => onChangeTab(tab)}
-              icon={tab.icon as IconName}
+              icon={toIconName(tab.icon)}
               counter={getCounter(panel, tab)}
             />
           );
@@ -102,7 +102,7 @@ function renderAlertTab(
         label={tab.text}
         active={tab.active}
         onChangeTab={() => onChangeTab(tab)}
-        icon={tab.icon as IconName}
+        icon={toIconName(tab.icon)}
         panel={panel}
         dashboard={dashboard}
       />
@@ -116,7 +116,7 @@ function renderAlertTab(
         label={tab.text}
         active={tab.active}
         onChangeTab={() => onChangeTab(tab)}
-        icon={tab.icon as IconName}
+        icon={toIconName(tab.icon)}
         counter={getCounter(panel, tab)}
       />
     );

public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx

@@ -4,7 +4,7 @@ import { useEffectOnce } from 'react-use';
 import { sanitizeUrl } from '@grafana/data/src/text/sanitize';
 import { selectors } from '@grafana/e2e-selectors';
 import { TimeRangeUpdatedEvent } from '@grafana/runtime';
-import { Icon, IconName, Tooltip, useForceUpdate } from '@grafana/ui';
+import { Icon, Tooltip, useForceUpdate } from '@grafana/ui';
 
 import { getLinkSrv } from '../../../panel/panellinks/link_srv';
 import { DashboardModel } from '../../state';
@@ -40,6 +40,8 @@ export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
           return <DashboardLinksDashboard key={key} link={link} linkInfo={linkInfo} dashboardUID={dashboard.uid} />;
         }
 
+        const icon = linkIconMap[link.icon];
+
         const linkElement = (
           <a
             className="gf-form-label gf-form-label--dashlink"
@@ -48,7 +50,7 @@ export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
             rel="noreferrer"
             data-testid={selectors.components.DashboardLinks.link}
           >
-            <Icon aria-hidden name={linkIconMap[link.icon] as IconName} style={{ marginRight: '4px' }} />
+            {icon && <Icon aria-hidden name={icon} style={{ marginRight: '4px' }} />}
             <span>{linkInfo.title}</span>
           </a>
         );

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx

@@ -3,7 +3,7 @@ import React, { FC, useState } from 'react';
 
 import { PanelMenuItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Icon, IconName, useTheme } from '@grafana/ui';
+import { Icon, toIconName, useTheme } from '@grafana/ui';
 
 interface Props {
   children?: any;
@@ -27,16 +27,20 @@ export const PanelHeaderMenuItem: FC<Props & PanelMenuItem> = (props) => {
     color: ${theme.colors.textWeak};
   `;
 
+  const icon = props.iconClassName ? toIconName(props.iconClassName) : undefined;
+
   return isDivider ? (
     <li className="divider" />
   ) : (
     <li className={isSubMenu ? `dropdown-submenu ${getDropdownLocationCssClass(ref)}` : undefined} ref={setRef}>
       <a onClick={props.onClick} href={props.href}>
-        {props.iconClassName && <Icon name={props.iconClassName as IconName} className={menuIconClassName} />}
+        {icon && <Icon name={icon} className={menuIconClassName} />}
+
         <span className="dropdown-item-text" aria-label={selectors.components.Panels.Panel.headerItems(props.text)}>
           {props.text}
           {isSubMenu && <Icon name="angle-right" className={shortcutIconClassName} />}
         </span>
+
         {props.shortcut && (
           <span className="dropdown-menu-item-shortcut">
             <Icon name="keyboard" className={menuIconClassName} /> {props.shortcut}