Chore: Remove Nav + story IconName type assertions (#54572)

* Chore: Remove some IconName type assertions

* fix actually importing the function

* fix lint

* fix lint

.betterer.results

@@ -1452,14 +1452,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/InfoBox/InfoBox.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"]
-    ],
-    "packages/grafana-ui/src/components/Input/Input.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"]
-    ],
     "packages/grafana-ui/src/components/JSONFormatter/JSONFormatter.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -1589,9 +1581,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-ui/src/components/Select/Select.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "packages/grafana-ui/src/components/Select/SelectBase.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -2727,24 +2718,14 @@ exports[`better eslint`] = {
     "public/app/core/components/Login/LoginPage.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/core/components/Login/LoginServiceButtons.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"]
-    ],
     "public/app/core/components/NavBar/NavBarItem.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/core/components/NavBar/NavBarItem.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/core/components/NavBar/NavBarItemMenuTrigger.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/core/components/NavBar/NavBarMenu.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/core/components/OptionsUI/DashboardPicker.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -2850,16 +2831,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/core/components/PageHeader/PageHeader.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"]
-    ],
-    "public/app/core/components/PageNew/PageTabs.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "public/app/core/components/PageNew/SectionNav.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]

packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx

@@ -1,13 +1,13 @@
 import { Story, Meta } from '@storybook/react';
 import React from 'react';
 
-import { Icon, Button, AutoSizeInput } from '@grafana/ui';
+import { Button, AutoSizeInput } from '@grafana/ui';
 
-import { IconName } from '../../types';
 import { iconOptions } from '../../utils/storybook/knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './AutoSizeInput.mdx';
+import { parseAccessory } from './storyUtils';
 
 const icons: { [key: string]: string | undefined } = { ...iconOptions };
 Object.keys(icons).forEach((key) => {
@@ -65,24 +65,16 @@ const meta: Meta = {
 export const Simple: Story = (args) => {
   const addonAfter = <Button variant="secondary">Load</Button>;
   const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>AutoSizeInput</div>;
-  const prefix = args.prefixVisible;
+  const prefix = parseAccessory(args.prefixVisible);
-  const suffix = args.suffixVisible;
+  const suffix = parseAccessory(args.suffixVisible);
-  let prefixEl = prefix;
-  if (prefix && prefix.match(/icon-/g)) {
-    prefixEl = <Icon name={prefix.replace(/icon-/g, '') as IconName} />;
-  }
-  let suffixEl = suffix;
-  if (suffix && suffix.match(/icon-/g)) {
-    suffixEl = <Icon name={suffix.replace(/icon-/g, '') as IconName} />;
-  }
 
   return (
     <AutoSizeInput
       disabled={args.disabled}
-      prefix={prefixEl}
+      prefix={prefix}
       invalid={args.invalid}
       width={args.width}
-      suffix={suffixEl}
+      suffix={suffix}
       loading={args.loading}
       addonBefore={args.before && addonBefore}
       addonAfter={args.after && addonAfter}

packages/grafana-ui/src/components/Input/Input.story.tsx

@@ -2,12 +2,13 @@ import { Story, Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { KeyValue } from '@grafana/data';
-import { Field, Icon, Button, Input } from '@grafana/ui';
+import { Field, Button, Input } from '@grafana/ui';
 
-import { getAvailableIcons, IconName } from '../../types';
+import { getAvailableIcons } from '../../types';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Input.mdx';
+import { parseAccessory } from './storyUtils';
 
 const prefixSuffixOpts = {
   None: null,
@@ -67,24 +68,16 @@ const meta: Meta = {
 export const Simple: Story = (args) => {
   const addonAfter = <Button variant="secondary">Load</Button>;
   const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>Input</div>;
-  const prefix = args.prefixVisible;
+  const prefix = parseAccessory(args.prefixVisible);
-  const suffix = args.suffixVisible;
+  const suffix = parseAccessory(args.suffixVisible);
-  let prefixEl = prefix;
-  if (prefix && prefix.match(/icon-/g)) {
-    prefixEl = <Icon name={prefix.replace(/icon-/g, '') as IconName} />;
-  }
-  let suffixEl = suffix;
-  if (suffix && suffix.match(/icon-/g)) {
-    suffixEl = <Icon name={suffix.replace(/icon-/g, '') as IconName} />;
-  }
 
   return (
     <Input
       disabled={args.disabled}
       width={args.width}
-      prefix={prefixEl}
+      prefix={prefix}
       invalid={args.invalid}
-      suffix={suffixEl}
+      suffix={suffix}
       loading={args.loading}
       addonBefore={args.before && addonBefore}
       addonAfter={args.after && addonAfter}

packages/grafana-ui/src/components/Input/storyUtils.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Icon, toIconName } from '../Icon/Icon';
+
+export function parseAccessory(prefix: string | undefined) {
+  const icon = prefix && prefix.match(/icon-/g) && toIconName(prefix.replace(/icon-/g, ''));
+
+  if (icon) {
+    const icon = toIconName(prefix.replace(/icon-/g, '')) ?? 'question-circle';
+    return <Icon name={icon} />;
+  }
+
+  return prefix;
+}

packages/grafana-ui/src/components/Select/Select.story.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Icon, Select, AsyncSelect, MultiSelect, AsyncMultiSelect } from '@grafana/ui';
 
-import { getAvailableIcons, IconName } from '../../types';
+import { getAvailableIcons, toIconName } from '../../types';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Select.mdx';
@@ -80,7 +80,7 @@ const loadAsyncOptions = () => {
 };
 
 const getPrefix = (prefix: string) => {
-  const prefixEl = <Icon name={prefix as IconName} />;
+  const prefixEl = <Icon name={toIconName(prefix) ?? 'question-circle'} />;
   return prefixEl;
 };
 

public/app/core/components/Login/LoginServiceButtons.tsx

@@ -3,7 +3,7 @@ import { pickBy } from 'lodash';
 import React from 'react';
 
 import { GrafanaTheme, GrafanaTheme2, DEFAULT_SAML_NAME } from '@grafana/data';
-import { Icon, IconName, LinkButton, useStyles, useTheme2, VerticalGroup } from '@grafana/ui';
+import { Icon, IconName, LinkButton, toIconName, useStyles, useTheme2, VerticalGroup } from '@grafana/ui';
 import config from 'app/core/config';
 
 export interface LoginService {
@@ -63,13 +63,13 @@ const loginServices: () => LoginServices = () => {
       bgColor: '#2f2f2f',
       enabled: oauthEnabled && Boolean(config.oauth.okta),
       name: config.oauth?.okta?.name || 'Okta',
-      icon: (config.oauth?.okta?.icon as IconName) || 'okta',
+      icon: (config.oauth?.okta?.icon && toIconName(config.oauth.okta.icon)) || 'okta',
     },
     oauth: {
       bgColor: '#262628',
       enabled: oauthEnabled && Boolean(config.oauth.generic_oauth),
       name: config.oauth?.generic_oauth?.name || 'OAuth',
-      icon: (config.oauth?.generic_oauth?.icon as IconName) || 'signin',
+      icon: (config.oauth?.generic_oauth?.icon && toIconName(config.oauth?.generic_oauth?.icon)) || 'signin',
       hrefName: 'generic_oauth',
     },
   };

public/app/core/components/NavBar/NavBarItem.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { GrafanaTheme2, locationUtil, NavMenuItemType, NavModelItem } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { IconName, useTheme2 } from '@grafana/ui';
+import { toIconName, useTheme2 } from '@grafana/ui';
 
 import { NavBarItemMenu } from './NavBarItemMenu';
 import { NavBarItemMenuTrigger } from './NavBarItemMenuTrigger';
@@ -78,7 +78,8 @@ const NavBarItem = ({ isActive = false, className, reverseMenuDirection = false,
             const translationKey = item.id && menuItemTranslations[item.id];
             const itemText = translationKey ? i18n._(translationKey) : item.text;
             const isSection = item.menuItemType === NavMenuItemType.Section;
-            const icon = item.showIconInNavbar && !isSection ? (item.icon as IconName) : undefined;
+            const iconName = item.icon ? toIconName(item.icon) : undefined;
+            const icon = item.showIconInNavbar && !isSection ? iconName : undefined;
 
             return (
               <Item key={getNavModelItemKey(item)} textValue={item.text}>

public/app/core/components/NavBar/NavBarMenu.tsx

@@ -9,7 +9,7 @@ import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { CollapsableSection, CustomScrollbar, Icon, IconButton, IconName, useStyles2, useTheme2 } from '@grafana/ui';
+import { CollapsableSection, CustomScrollbar, Icon, IconButton, toIconName, useStyles2, useTheme2 } from '@grafana/ui';
 
 import { NavBarItemIcon } from './NavBarItemIcon';
 import { NavBarItemWithoutMenu } from './NavBarItemWithoutMenu';
@@ -235,14 +235,15 @@ export function NavItem({
     return (
       <CollapsibleNavItem onClose={onClose} link={link} isActive={isMatchOrChildMatch(link, activeItem)}>
         <ul className={styles.children}>
-          {link.children.map(
+          {link.children.map((childLink) => {
-            (childLink) =>
+            const icon = childLink.icon ? toIconName(childLink.icon) : undefined;
+            return (
               !childLink.divider && (
                 <NavBarMenuItem
                   key={`${link.text}-${childLink.text}`}
                   isActive={activeItem === childLink}
                   isDivider={childLink.divider}
-                  icon={childLink.showIconInNavbar ? (childLink.icon as IconName) : undefined}
+                  icon={childLink.showIconInNavbar ? icon : undefined}
                   onClick={() => {
                     childLink.onClick?.();
                     onClose();
@@ -254,7 +255,8 @@ export function NavItem({
                   isMobile={true}
                 />
               )
-          )}
+            );
+          })}
         </ul>
       </CollapsibleNavItem>
     );

public/app/core/components/PageHeader/PageHeader.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { FC } from 'react';
 
 import { NavModelItem, NavModelBreadcrumb, GrafanaTheme2 } from '@grafana/data';
-import { Tab, TabsBar, Icon, IconName, useStyles2 } from '@grafana/ui';
+import { Tab, TabsBar, Icon, useStyles2, toIconName } from '@grafana/ui';
 import { PanelHeaderMenuItem } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
 
 import { ProBadge } from '../Upgrade/ProBadge';
@@ -57,13 +57,14 @@ const Navigation = ({ children }: { children: NavModelItem[] }) => {
       <SelectNav customCss="page-header__select-nav">{children}</SelectNav>
       <TabsBar className="page-header__tabs" hideBorder={true}>
         {children.map((child, index) => {
+          const icon = child.icon ? toIconName(child.icon) : undefined;
           return (
             !child.hideFromTabs && (
               <Tab
                 label={child.text}
                 active={child.active}
                 key={`${child.url}-${index}`}
-                icon={child.icon as IconName}
+                icon={icon}
                 href={child.url}
                 suffix={child.tabSuffix}
               />
@@ -96,11 +97,12 @@ export const PageHeader: FC<Props> = ({ navItem: model }) => {
 
 function renderHeaderTitle(main: NavModelItem) {
   const marginTop = main.icon === 'grafana' ? 12 : 14;
+  const icon = main.icon && toIconName(main.icon);
 
   return (
     <div className="page-header__inner">
       <span className="page-header__logo">
-        {main.icon && <Icon name={main.icon as IconName} size="xxxl" style={{ marginTop }} />}
+        {icon && <Icon name={icon} size="xxxl" style={{ marginTop }} />}
         {main.img && <img className="page-header__img" src={main.img} alt={`logo of ${main.text}`} />}
       </span>
 

public/app/core/components/PageNew/PageTabs.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { NavModelItem, GrafanaTheme2 } from '@grafana/data';
-import { IconName, useStyles2, TabsBar, Tab } from '@grafana/ui';
+import { useStyles2, TabsBar, Tab, toIconName } from '@grafana/ui';
 
 export interface Props {
   navItem: NavModelItem;
@@ -15,13 +15,14 @@ export function PageTabs({ navItem }: Props) {
     <div className={styles.tabsWrapper}>
       <TabsBar>
         {navItem.children!.map((child, index) => {
+          const icon = child.icon ? toIconName(child.icon) : undefined;
           return (
             !child.hideFromTabs && (
               <Tab
                 label={child.text}
                 active={child.active}
                 key={`${child.url}-${index}`}
-                icon={child.icon as IconName}
+                icon={icon}
                 href={child.url}
                 suffix={child.tabSuffix}
               />

public/app/core/components/PageNew/SectionNav.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { NavModel, GrafanaTheme2 } from '@grafana/data';
-import { IconName, useStyles2, Icon, VerticalTab } from '@grafana/ui';
+import { useStyles2, Icon, VerticalTab, toIconName } from '@grafana/ui';
 
 export interface Props {
   model: NavModel;
@@ -14,11 +14,12 @@ export function SectionNav(props: Props) {
   const main = props.model.main;
   const directChildren = props.model.main.children!.filter((x) => !x.hideFromTabs && !x.children);
   const nestedItems = props.model.main.children!.filter((x) => x.children && x.children.length);
+  const icon = main.icon ? toIconName(main.icon) : undefined;
 
   return (
     <nav className={styles.nav}>
       <h2 className={styles.sectionName}>
-        {main.icon && <Icon name={main.icon as IconName} size="lg" />}
+        {icon && <Icon name={icon} size="lg" />}
         {main.img && <img className={styles.sectionImg} src={main.img} alt={`logo of ${main.text}`} />}
         {props.model.main.text}
       </h2>
@@ -27,13 +28,7 @@ export function SectionNav(props: Props) {
           return (
             !child.hideFromTabs &&
             !child.children && (
-              <VerticalTab
+              <VerticalTab label={child.text} active={child.active} key={`${child.url}-${index}`} href={child.url} />
-                label={child.text}
-                active={child.active}
-                key={`${child.url}-${index}`}
-                // icon={child.icon as IconName}
-                href={child.url}
-              />
             )
           );
         })}
@@ -48,7 +43,6 @@ export function SectionNav(props: Props) {
                     label={child.text}
                     active={child.active}
                     key={`${child.url}-${index}`}
-                    // icon={child.icon as IconName}
                     href={child.url}
                   />
                 )