From caa0c91b1cfa111854ee4c48e05aa00c50e03ec0 Mon Sep 17 00:00:00 2001 From: Josh Hunt Date: Thu, 1 Sep 2022 13:23:41 +0100 Subject: [PATCH] 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 | 33 ++----------------- .../components/Input/AutoSizeInput.story.tsx | 20 ++++------- .../src/components/Input/Input.story.tsx | 21 ++++-------- .../src/components/Input/storyUtils.tsx | 14 ++++++++ .../src/components/Select/Select.story.tsx | 4 +-- .../components/Login/LoginServiceButtons.tsx | 6 ++-- .../app/core/components/NavBar/NavBarItem.tsx | 5 +-- .../app/core/components/NavBar/NavBarMenu.tsx | 12 ++++--- .../core/components/PageHeader/PageHeader.tsx | 8 +++-- .../app/core/components/PageNew/PageTabs.tsx | 5 +-- .../core/components/PageNew/SectionNav.tsx | 14 +++----- 11 files changed, 56 insertions(+), 86 deletions(-) create mode 100644 packages/grafana-ui/src/components/Input/storyUtils.tsx diff --git a/.betterer.results b/.betterer.results index 0df153c30e6..d61a8a05710 100644 --- a/.betterer.results +++ b/.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.", "1"], - [0, 0, 0, "Unexpected any. Specify a different type.", "2"] + [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/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"] diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx index b99a656b6c4..6585896cb52 100644 --- a/packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx +++ b/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 = ; const addonBefore =
AutoSizeInput
; - const prefix = args.prefixVisible; - const suffix = args.suffixVisible; - let prefixEl = prefix; - if (prefix && prefix.match(/icon-/g)) { - prefixEl = ; - } - let suffixEl = suffix; - if (suffix && suffix.match(/icon-/g)) { - suffixEl = ; - } + const prefix = parseAccessory(args.prefixVisible); + const suffix = parseAccessory(args.suffixVisible); return ( { const addonAfter = ; const addonBefore =
Input
; - const prefix = args.prefixVisible; - const suffix = args.suffixVisible; - let prefixEl = prefix; - if (prefix && prefix.match(/icon-/g)) { - prefixEl = ; - } - let suffixEl = suffix; - if (suffix && suffix.match(/icon-/g)) { - suffixEl = ; - } + const prefix = parseAccessory(args.prefixVisible); + const suffix = parseAccessory(args.suffixVisible); return ( ; + } + + return prefix; +} diff --git a/packages/grafana-ui/src/components/Select/Select.story.tsx b/packages/grafana-ui/src/components/Select/Select.story.tsx index 947fd9610e3..cbd024f3756 100644 --- a/packages/grafana-ui/src/components/Select/Select.story.tsx +++ b/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 = ; + const prefixEl = ; return prefixEl; }; diff --git a/public/app/core/components/Login/LoginServiceButtons.tsx b/public/app/core/components/Login/LoginServiceButtons.tsx index 69571d7241d..4cdbf6307db 100644 --- a/public/app/core/components/Login/LoginServiceButtons.tsx +++ b/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', }, }; diff --git a/public/app/core/components/NavBar/NavBarItem.tsx b/public/app/core/components/NavBar/NavBarItem.tsx index 495b4662518..bb9833252f2 100644 --- a/public/app/core/components/NavBar/NavBarItem.tsx +++ b/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 ( diff --git a/public/app/core/components/NavBar/NavBarMenu.tsx b/public/app/core/components/NavBar/NavBarMenu.tsx index 17c20df4b04..30bdbbeaaad 100644 --- a/public/app/core/components/NavBar/NavBarMenu.tsx +++ b/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 (
    - {link.children.map( - (childLink) => + {link.children.map((childLink) => { + const icon = childLink.icon ? toIconName(childLink.icon) : undefined; + return ( !childLink.divider && ( { childLink.onClick?.(); onClose(); @@ -254,7 +255,8 @@ export function NavItem({ isMobile={true} /> ) - )} + ); + })}
); diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index 45fe58f1474..7a6c73fa5d0 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/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[] }) => { {children} {children.map((child, index) => { + const icon = child.icon ? toIconName(child.icon) : undefined; return ( !child.hideFromTabs && ( @@ -96,11 +97,12 @@ export const PageHeader: FC = ({ navItem: model }) => { function renderHeaderTitle(main: NavModelItem) { const marginTop = main.icon === 'grafana' ? 12 : 14; + const icon = main.icon && toIconName(main.icon); return (
- {main.icon && } + {icon && } {main.img && {`logo} diff --git a/public/app/core/components/PageNew/PageTabs.tsx b/public/app/core/components/PageNew/PageTabs.tsx index d3fb3a73c9b..ba55375e8df 100644 --- a/public/app/core/components/PageNew/PageTabs.tsx +++ b/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) {
{navItem.children!.map((child, index) => { + const icon = child.icon ? toIconName(child.icon) : undefined; return ( !child.hideFromTabs && ( diff --git a/public/app/core/components/PageNew/SectionNav.tsx b/public/app/core/components/PageNew/SectionNav.tsx index b309a047817..0569846c38c 100644 --- a/public/app/core/components/PageNew/SectionNav.tsx +++ b/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 (