GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 05:38:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: menu antd deprecation warning (#2416)

Browse Source 
* fix: menu antd deprecation warning

* chore: some of the refactoring is updated

---------

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: palashgdev <palashgdev@gmail.com>
This commit is contained in:
GitStart 2023-03-03 12:09:24 +01:00 committed by GitHub
parent 2a5cb78964
commit 080a53a9b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 143 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/TimePreferenceDropDown/config.tsx Normal file
View File

@ -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: <Typography>{item.name}</Typography>,
}));

13
frontend/src/components/TimePreferenceDropDown/index.tsx
View File

@ -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 (
<TextContainer noButtonMargin>
<Dropdown
overlay={
<Menu>
{TimeItems.map((item) => (
<Menu.Item onClick={timeMenuItemOnChangeHandler} key={item.enum}>
<Typography>{item.name}</Typography>
</Menu.Item>
))}
</Menu>
}
overlay={<Menu onClick={timeMenuItemOnChangeHandler} items={menuItems} />}
>
<Button>{selectedTime.name}</Button>
</Dropdown>

47
frontend/src/container/ConfigDropdown/Config/index.tsx
View File

@ -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 (
<Menu>
{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: (
<ErrorLink key={item.text + item.href}>
<Suspense fallback={<Spinner height="5vh" />}>
<LinkContainer href={item.href}>
<Space size="small" align="start">
<Component />
{item.text}
</Space>
</LinkContainer>
</Suspense>
</ErrorLink>
),
};
});
const Component = React.lazy(
() => import(`@ant-design/icons/es/icons/${iconName}.js`),
);
return (
<ErrorLink key={item.text + item.href}>
<Suspense fallback={<Spinner height="5vh" />}>
<MenuItem>
<LinkContainer href={item.href}>
<Space size="small" align="start">
<Component />
{item.text}
</Space>
</LinkContainer>
</MenuItem>
</Suspense>
</ErrorLink>
);
})}
</Menu>
);
return <Menu items={items} />;
}
interface HelpToolTipProps {

15
frontend/src/container/ConfigDropdown/Config/styles.ts
View File

@ -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;
}
}
`;

20
frontend/src/container/ConfigDropdown/index.tsx
View File

@ -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: <HelpToolTip config={config as ConfigProps} />,
},
],
[config],
);
if (!config) {
return <div />;
}
@ -43,11 +55,7 @@ function DynamicConfigDropdown({
<Dropdown
onVisibleChange={onToggleHandler}
trigger={['click']}
overlay={
<Menu>
<HelpToolTip config={config} />
</Menu>
}
overlay={<MenuDropdown items={menuItems} />}
visible={isHelpDropDownOpen}
>
<Space align="center">

60
frontend/src/container/ListOfDashboard/index.tsx
View File

@ -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(
() => (
<Menu>
{createNewDashboard && (
<Menu.Item
onClick={onNewDashboardHandler}
disabled={loading}
key={t('create_dashboard').toString()}
>
{t('create_dashboard')}
</Menu.Item>
)}
<Menu.Item
onClick={(): void => onModalHandler(false)}
key={t('import_json').toString()}
>
{t('import_json')}
</Menu.Item>
<Menu.Item
onClick={(): void => onModalHandler(true)}
key={t('import_grafana_json').toString()}
>
{t('import_grafana_json')}
</Menu.Item>
</Menu>
),
[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 && (
<Dropdown trigger={['click']} overlay={menu}>
<Dropdown trigger={['click']} overlay={<Menu items={menuItems} />}>
<NewDashboardButton
icon={<PlusOutlined />}
type="primary"
@ -246,10 +246,10 @@ function ListOfAllDashboard(): JSX.Element {
),
[
getText,
menu,
newDashboard,
newDashboardState.error,
newDashboardState.loading,
menuItems,
],
);

90
frontend/src/container/SideNav/index.tsx
View File

@ -64,14 +64,16 @@ function SideNav(): JSX.Element {
const isNotCurrentVersion = currentVersion !== latestVersion;
const sidebar = [
const sidebar: SidebarItem[] = [
{
onClick: onClickSlackHandler,
icon: <Slack />,
text: <SlackButton>Support</SlackButton>,
key: 'slack',
},
{
onClick: onClickVersionHandler,
key: 'version',
icon: isNotCurrentVersion ? (
<WarningOutlined style={{ color: '#E87040' }} />
) : (
@ -95,6 +97,32 @@ function SideNav(): JSX.Element {
[pathname],
);
const items = [
...menus.map(({ to, Icon, name, tags }) => ({
key: to,
icon: <Icon />,
onClick: (): void => onClickHandler(to),
label: (
<Space>
<div>{name}</div>
{tags &&
tags.map((e) => (
<Tags key={e}>
<Typography.Text>{e}</Typography.Text>
</Tags>
))}
</Space>
),
})),
];
const sidebarItems = (props: SidebarItem, index: number): SidebarItem => ({
key: `${index}`,
icon: props.icon,
onClick: props.onClick,
label: props.text,
});
return (
<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}>
<Menu
@ -103,42 +131,34 @@ function SideNav(): JSX.Element {
selectedKeys={currentMenu ? [currentMenu?.to] : []}
mode="inline"
style={styles}
>
{menus.map(({ to, Icon, name, tags }) => (
<Menu.Item
key={to}
icon={<Icon />}
onClick={(): void => onClickHandler(to)}
>
<Space>
<div>{name}</div>
{tags &&
tags.map((e) => (
<Tags style={{ lineHeight: '1rem' }} color="#177DDC" key={e}>
<Typography.Text style={{ fontWeight: '300' }}>{e}</Typography.Text>
</Tags>
))}
</Space>
</Menu.Item>
))}
{sidebar.map((props, index) => (
<SlackMenuItemContainer
index={index + 1}
key={`${index + 1}`}
collapsed={collapsed}
>
<Menu.Item
eventKey={index.toString()}
onClick={props.onClick}
icon={props.icon}
>
{props.text}
</Menu.Item>
</SlackMenuItemContainer>
))}
</Menu>
items={items}
/>
{sidebar.map((props, index) => (
<SlackMenuItemContainer
index={index + 1}
key={`${index + 1}`}
collapsed={collapsed}
>
<Menu
theme="dark"
defaultSelectedKeys={[ROUTES.APPLICATION]}
selectedKeys={currentMenu ? [currentMenu?.to] : []}
mode="inline"
style={styles}
items={[sidebarItems(props, index)]}
/>
</SlackMenuItemContainer>
))}
</Sider>
);
}
interface SidebarItem {
onClick: VoidFunction;
icon?: React.ReactNode;
text?: React.ReactNode;
key: string;
label?: React.ReactNode;
}
export default SideNav;