From 080a53a9b4000192aa424547eb1b7106dbccd569 Mon Sep 17 00:00:00 2001 From: GitStart <1501599+gitstart@users.noreply.github.com> Date: Fri, 3 Mar 2023 12:09:24 +0100 Subject: [PATCH] fix: menu antd deprecation warning (#2416) * fix: menu antd deprecation warning * chore: some of the refactoring is updated --------- Co-authored-by: gitstart Co-authored-by: palashgdev --- .../TimePreferenceDropDown/config.tsx | 8 ++ .../TimePreferenceDropDown/index.tsx | 13 +-- .../container/ConfigDropdown/Config/index.tsx | 47 +++++----- .../container/ConfigDropdown/Config/styles.ts | 15 +++- .../src/container/ConfigDropdown/index.tsx | 20 +++-- .../src/container/ListOfDashboard/index.tsx | 60 ++++++------- frontend/src/container/SideNav/index.tsx | 90 +++++++++++-------- 7 files changed, 143 insertions(+), 110 deletions(-) create mode 100644 frontend/src/components/TimePreferenceDropDown/config.tsx diff --git a/frontend/src/components/TimePreferenceDropDown/config.tsx b/frontend/src/components/TimePreferenceDropDown/config.tsx new file mode 100644 index 0000000000..bf09498ec7 --- /dev/null +++ b/frontend/src/components/TimePreferenceDropDown/config.tsx @@ -0,0 +1,8 @@ +import { Typography } from 'antd'; +import { timeItems } from 'container/NewWidget/RightContainer/timeItems'; +import React from 'react'; + +export const menuItems = timeItems.map((item) => ({ + key: item.enum, + label: {item.name}, +})); diff --git a/frontend/src/components/TimePreferenceDropDown/index.tsx b/frontend/src/components/TimePreferenceDropDown/index.tsx index 0f9a06bc10..8774edbdc9 100644 --- a/frontend/src/components/TimePreferenceDropDown/index.tsx +++ b/frontend/src/components/TimePreferenceDropDown/index.tsx @@ -1,10 +1,11 @@ -import { Button, Dropdown, Menu, Typography } from 'antd'; +import { Button, Dropdown, Menu } from 'antd'; import TimeItems, { timePreferance, timePreferenceType, } from 'container/NewWidget/RightContainer/timeItems'; import React, { useCallback } from 'react'; +import { menuItems } from './config'; import { TextContainer } from './styles'; function TimePreference({ @@ -24,15 +25,7 @@ function TimePreference({ return ( - {TimeItems.map((item) => ( - - {item.name} - - ))} - - } + overlay={} > diff --git a/frontend/src/container/ConfigDropdown/Config/index.tsx b/frontend/src/container/ConfigDropdown/Config/index.tsx index bb9bee69a8..3d356a0af4 100644 --- a/frontend/src/container/ConfigDropdown/Config/index.tsx +++ b/frontend/src/container/ConfigDropdown/Config/index.tsx @@ -6,7 +6,6 @@ import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs'; import ErrorLink from './ErrorLink'; import LinkContainer from './Link'; -import { MenuItem } from './styles'; function HelpToolTip({ config }: HelpToolTipProps): JSX.Element { const sortedConfig = useMemo( @@ -16,31 +15,29 @@ function HelpToolTip({ config }: HelpToolTipProps): JSX.Element { const isDarkMode = useIsDarkMode(); - return ( - - {sortedConfig.map((item) => { - const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`; + const items = sortedConfig.map((item) => { + const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`; + const Component = React.lazy( + () => import(`@ant-design/icons/es/icons/${iconName}.js`), + ); + return { + key: item.text + item.href, + label: ( + + }> + + + + {item.text} + + + + + ), + }; + }); - const Component = React.lazy( - () => import(`@ant-design/icons/es/icons/${iconName}.js`), - ); - return ( - - }> - - - - - {item.text} - - - - - - ); - })} - - ); + return ; } interface HelpToolTipProps { diff --git a/frontend/src/container/ConfigDropdown/Config/styles.ts b/frontend/src/container/ConfigDropdown/Config/styles.ts index dac63b21a6..4807ea77c2 100644 --- a/frontend/src/container/ConfigDropdown/Config/styles.ts +++ b/frontend/src/container/ConfigDropdown/Config/styles.ts @@ -1,10 +1,17 @@ import { Menu } from 'antd'; import styled from 'styled-components'; -export const MenuItem = styled(Menu.Item)` +export const MenuDropdown = styled(Menu)` &&& { - height: 1.75rem; - display: flex; - align-items: center; + .ant-dropdown, + .ant-dropdown-menu, + .ant-dropdown-menu-item { + padding: 0px; + } + .ant-menu-item { + height: 1.75rem; + display: flex; + align-items: center; + } } `; diff --git a/frontend/src/container/ConfigDropdown/index.tsx b/frontend/src/container/ConfigDropdown/index.tsx index 123b8a26b8..8390e09167 100644 --- a/frontend/src/container/ConfigDropdown/index.tsx +++ b/frontend/src/container/ConfigDropdown/index.tsx @@ -4,14 +4,16 @@ import { QuestionCircleFilled, QuestionCircleOutlined, } from '@ant-design/icons'; -import { Dropdown, Menu, Space } from 'antd'; +import { Dropdown, Space } from 'antd'; import { useIsDarkMode } from 'hooks/useDarkMode'; import React, { useMemo, useState } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; +import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs'; import AppReducer from 'types/reducer/app'; import HelpToolTip from './Config'; +import { MenuDropdown } from './Config/styles'; function DynamicConfigDropdown({ frontendId, @@ -32,6 +34,16 @@ function DynamicConfigDropdown({ setIsHelpDropDownOpen(!isHelpDropDownOpen); }; + const menuItems = useMemo( + () => [ + { + key: '1', + label: , + }, + ], + [config], + ); + if (!config) { return
; } @@ -43,11 +55,7 @@ function DynamicConfigDropdown({ - -
- } + overlay={} visible={isHelpDropDownOpen} > diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx index d3feaa0bc9..b513df0c6a 100644 --- a/frontend/src/container/ListOfDashboard/index.tsx +++ b/frontend/src/container/ListOfDashboard/index.tsx @@ -1,5 +1,6 @@ import { PlusOutlined } from '@ant-design/icons'; import { Card, Dropdown, Menu, Row, TableColumnProps, Typography } from 'antd'; +import { ItemType } from 'antd/es/menu/hooks/useItems'; import createDashboard from 'api/dashboard/create'; import { AxiosError } from 'axios'; import { ResizeTable } from 'components/ResizeTable'; @@ -188,34 +189,33 @@ function ListOfAllDashboard(): JSX.Element { setUploadedGrafana(uploadedGrafana); }; - const menu = useMemo( - () => ( - - {createNewDashboard && ( - - {t('create_dashboard')} - - )} - onModalHandler(false)} - key={t('import_json').toString()} - > - {t('import_json')} - - onModalHandler(true)} - key={t('import_grafana_json').toString()} - > - {t('import_grafana_json')} - - - ), - [createNewDashboard, loading, onNewDashboardHandler, t], - ); + const getMenuItems = useCallback(() => { + const menuItems: ItemType[] = []; + if (createNewDashboard) { + menuItems.push({ + key: t('create_dashboard').toString(), + label: t('create_dashboard'), + disabled: loading, + onClick: onNewDashboardHandler, + }); + } + + menuItems.push({ + key: t('import_json').toString(), + label: t('import_json'), + onClick: (): void => onModalHandler(false), + }); + + menuItems.push({ + key: t('import_grafana_json').toString(), + label: t('import_grafana_json'), + onClick: (): void => onModalHandler(true), + }); + + return menuItems; + }, [createNewDashboard, loading, onNewDashboardHandler, t]); + + const menuItems = getMenuItems(); const GetHeader = useMemo( () => ( @@ -230,7 +230,7 @@ function ListOfAllDashboard(): JSX.Element { }} /> {newDashboard && ( - + }> } type="primary" @@ -246,10 +246,10 @@ function ListOfAllDashboard(): JSX.Element { ), [ getText, - menu, newDashboard, newDashboardState.error, newDashboardState.loading, + menuItems, ], ); diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx index d8da0d6f65..a033854e86 100644 --- a/frontend/src/container/SideNav/index.tsx +++ b/frontend/src/container/SideNav/index.tsx @@ -64,14 +64,16 @@ function SideNav(): JSX.Element { const isNotCurrentVersion = currentVersion !== latestVersion; - const sidebar = [ + const sidebar: SidebarItem[] = [ { onClick: onClickSlackHandler, icon: , text: Support, + key: 'slack', }, { onClick: onClickVersionHandler, + key: 'version', icon: isNotCurrentVersion ? ( ) : ( @@ -95,6 +97,32 @@ function SideNav(): JSX.Element { [pathname], ); + const items = [ + ...menus.map(({ to, Icon, name, tags }) => ({ + key: to, + icon: , + onClick: (): void => onClickHandler(to), + label: ( + +
{name}
+ {tags && + tags.map((e) => ( + + {e} + + ))} + + ), + })), + ]; + + const sidebarItems = (props: SidebarItem, index: number): SidebarItem => ({ + key: `${index}`, + icon: props.icon, + onClick: props.onClick, + label: props.text, + }); + return ( - {menus.map(({ to, Icon, name, tags }) => ( - } - onClick={(): void => onClickHandler(to)} - > - -
{name}
- {tags && - tags.map((e) => ( - - {e} - - ))} - - - ))} - {sidebar.map((props, index) => ( - - - {props.text} - - - ))} - + items={items} + /> + {sidebar.map((props, index) => ( + + + + ))} ); } +interface SidebarItem { + onClick: VoidFunction; + icon?: React.ReactNode; + text?: React.ReactNode; + key: string; + label?: React.ReactNode; +} + export default SideNav;