Chore: Remove grafana-ui IconName type assertions (#54623)

.betterer.results

@@ -1294,9 +1294,6 @@ exports[`better eslint`] = {
       [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/Alert/Alert.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -1396,9 +1393,6 @@ exports[`better eslint`] = {
       [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/Forms/RadioButtonGroup/RadioButtonGroup.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "packages/grafana-ui/src/components/Graph/Graph.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -1600,8 +1594,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "12"]
     ],
     "packages/grafana-ui/src/components/Select/SelectMenu.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -1798,9 +1791,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
-    "packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "packages/grafana-ui/src/components/Tooltip/Tooltip.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -25,7 +25,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
   topSpacing?: number;
 }
 
-export function getIconFromSeverity(severity: AlertVariant): string {
+export function getIconFromSeverity(severity: AlertVariant): IconName {
   switch (severity) {
     case 'error':
     case 'warning':
@@ -34,8 +34,6 @@ export function getIconFromSeverity(severity: AlertVariant): string {
       return 'info-circle';
     case 'success':
       return 'check';
-    default:
-      return '';
   }
 }
 
@@ -69,20 +67,23 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
         {...restProps}
       >
         <div className={styles.icon}>
-          <Icon size="xl" name={getIconFromSeverity(severity) as IconName} />
+          <Icon size="xl" name={getIconFromSeverity(severity)} />
         </div>
+
         <div className={styles.body}>
           <div id={titleId} className={styles.title}>
             {title}
           </div>
           {children && <div className={styles.content}>{children}</div>}
         </div>
+
         {/* If onRemove is specified, giving preference to onRemove */}
         {onRemove && !buttonContent && (
           <div className={styles.close}>
             <IconButton aria-label="Close alert" name="times" onClick={onRemove} size="lg" type="button" />
           </div>
         )}
+
         {onRemove && buttonContent && (
           <div className={styles.buttonWrapper}>
             <Button aria-label="Close alert" variant="secondary" onClick={onRemove} type="button">

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

@@ -5,7 +5,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 
 import { useStyles2 } from '../../../themes';
-import { IconName } from '../../../types/icon';
+import { toIconName } from '../../../types/icon';
 import { Icon } from '../../Icon/Icon';
 
 import { RadioButtonSize, RadioButton } from './RadioButton';
@@ -71,26 +71,27 @@ export function RadioButtonGroup<T>({
 
   return (
     <div className={cx(styles.radioGroup, fullWidth && styles.fullWidth, className)}>
-      {options.map((o, i) => {
-        const isItemDisabled = disabledOptions && o.value && disabledOptions.includes(o.value);
+      {options.map((opt, i) => {
+        const isItemDisabled = disabledOptions && opt.value && disabledOptions.includes(opt.value);
+        const icon = opt.icon ? toIconName(opt.icon) : undefined;
         return (
           <RadioButton
             size={size}
             disabled={isItemDisabled || disabled}
-            active={value === o.value}
+            active={value === opt.value}
             key={`o.label-${i}`}
-            aria-label={o.ariaLabel}
-            onChange={handleOnChange(o)}
-            onClick={handleOnClick(o)}
-            id={`option-${o.value}-${internalId}`}
+            aria-label={opt.ariaLabel}
+            onChange={handleOnChange(opt)}
+            onClick={handleOnClick(opt)}
+            id={`option-${opt.value}-${internalId}`}
             name={groupName.current}
-            description={o.description}
+            description={opt.description}
             fullWidth={fullWidth}
-            ref={value === o.value ? activeButtonRef : undefined}
+            ref={value === opt.value ? activeButtonRef : undefined}
           >
-            {o.icon && <Icon name={o.icon as IconName} className={styles.icon} />}
-            {o.imgUrl && <img src={o.imgUrl} alt={o.label} className={styles.img} />}
-            {o.label} {o.component ? <o.component /> : null}
+            {icon && <Icon name={icon} className={styles.icon} />}
+            {opt.imgUrl && <img src={opt.imgUrl} alt={opt.label} className={styles.img} />}
+            {opt.label} {opt.component ? <opt.component /> : null}
           </RadioButton>
         );
       })}

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

@@ -4,9 +4,8 @@ import React, { FC, RefCallback } from 'react';
 import { SelectableValue } from '@grafana/data';
 
 import { useTheme2 } from '../../themes/ThemeContext';
-import { IconName } from '../../types';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
-import { Icon } from '../Icon/Icon';
+import { Icon, toIconName } from '../Icon/Icon';
 
 import { getSelectStyles } from './getSelectStyles';
 
@@ -52,6 +51,7 @@ export const SelectMenuOptions: FC<SelectMenuOptionProps<any>> = ({
 }) => {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
+  const icon = data.icon ? toIconName(data.icon) : undefined;
 
   return (
     <div
@@ -66,7 +66,7 @@ export const SelectMenuOptions: FC<SelectMenuOptionProps<any>> = ({
       aria-label="Select option"
       title={data.title}
     >
-      {data.icon && <Icon name={data.icon as IconName} className={styles.optionIcon} />}
+      {icon && <Icon name={icon} className={styles.optionIcon} />}
       {data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} alt={data.label || data.value} />}
       <div className={styles.optionBody}>
         <span>{renderOptionLabel ? renderOptionLabel(data) : children}</span>

packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -7,7 +7,7 @@ import { selectors } from '@grafana/e2e-selectors';
 
 import { styleMixins, useStyles2 } from '../../themes';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
-import { IconName } from '../../types/icon';
+import { IconName, toIconName } from '../../types/icon';
 import { getPropertiesForVariant } from '../Button';
 import { Icon } from '../Icon/Icon';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -115,8 +115,10 @@ function renderIcon(icon: IconName | React.ReactNode) {
     return null;
   }
 
-  if (isString(icon)) {
-    return <Icon name={icon as IconName} size={'lg'} />;
+  const iconName = isString(icon) && toIconName(icon);
+
+  if (iconName) {
+    return <Icon name={iconName} size="lg" />;
   }
 
   return icon;