diff --git a/frontend/.babelrc b/frontend/.babelrc index aa9ef302a0..9efe6ca907 100644 --- a/frontend/.babelrc +++ b/frontend/.babelrc @@ -1,7 +1,7 @@ { "presets": [ "@babel/preset-env", - "@babel/preset-react", + ["@babel/preset-react", { "runtime": "automatic" }], "@babel/preset-typescript" ], "plugins": [ diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 37c7b17c45..540b1ded70 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -16,6 +16,7 @@ module.exports = { 'plugin:sonarjs/recommended', 'plugin:import/errors', 'plugin:import/warnings', + 'plugin:react/jsx-runtime', ], parser: '@typescript-eslint/parser', parserOptions: { diff --git a/frontend/src/AppRoutes/Private.tsx b/frontend/src/AppRoutes/Private.tsx index 82d6be2620..ddfb072d02 100644 --- a/frontend/src/AppRoutes/Private.tsx +++ b/frontend/src/AppRoutes/Private.tsx @@ -7,7 +7,7 @@ import { LOCALSTORAGE } from 'constants/localStorage'; import ROUTES from 'constants/routes'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useEffect, useMemo } from 'react'; +import { ReactChild, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { matchPath, Redirect, useLocation } from 'react-router-dom'; @@ -161,7 +161,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element { } interface PrivateRouteProps { - children: React.ReactChild; + children: ReactChild; } export default PrivateRoute; diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx index edfe843882..a4ccb0d0f0 100644 --- a/frontend/src/AppRoutes/index.tsx +++ b/frontend/src/AppRoutes/index.tsx @@ -7,7 +7,7 @@ import { NotificationProvider } from 'hooks/useNotifications'; import { ResourceProvider } from 'hooks/useResourceAttribute'; import history from 'lib/history'; import { QueryBuilderProvider } from 'providers/QueryBuilder'; -import React, { Suspense } from 'react'; +import { Suspense } from 'react'; import { Route, Router, Switch } from 'react-router-dom'; import PrivateRoute from './Private'; diff --git a/frontend/src/assets/Dashboard/TimeSeries.tsx b/frontend/src/assets/Dashboard/TimeSeries.tsx index 46e30e29fc..54d8100a63 100644 --- a/frontend/src/assets/Dashboard/TimeSeries.tsx +++ b/frontend/src/assets/Dashboard/TimeSeries.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - function TimeSeries(): JSX.Element { return ( } + ref={ref as Ref} size={size} addonBefore={addonBefore} onBlur={onBlurHandler} @@ -37,15 +44,15 @@ function InputComponent({ interface InputComponentProps extends InputProps { value: InputProps['value']; type?: InputProps['type']; - onChangeHandler?: React.ChangeEventHandler; + onChangeHandler?: ChangeEventHandler; placeholder?: InputProps['placeholder']; - ref?: React.LegacyRef; + ref?: LegacyRef; size?: InputProps['size']; - onBlurHandler?: React.FocusEventHandler; - onPressEnterHandler?: React.KeyboardEventHandler; + onBlurHandler?: FocusEventHandler; + onPressEnterHandler?: KeyboardEventHandler; label?: string; labelOnTop?: boolean; - addonBefore?: React.ReactNode; + addonBefore?: ReactNode; } InputComponent.defaultProps = { diff --git a/frontend/src/components/Loadable/Loadable.test.tsx b/frontend/src/components/Loadable/Loadable.test.tsx index cb1239334f..2d2a2173e5 100644 --- a/frontend/src/components/Loadable/Loadable.test.tsx +++ b/frontend/src/components/Loadable/Loadable.test.tsx @@ -3,7 +3,7 @@ import { screen, waitForElementToBeRemoved, } from '@testing-library/react'; -import React from 'react'; +import React, { ComponentType, Suspense } from 'react'; import Loadable from './index'; @@ -13,9 +13,9 @@ function SampleComponent(): JSX.Element { } const loadSampleComponent = (): Promise<{ - default: React.ComponentType; + default: ComponentType; }> => - new Promise<{ default: React.ComponentType }>((resolve) => { + new Promise<{ default: ComponentType }>((resolve) => { setTimeout(() => { resolve({ default: SampleComponent }); }, 500); @@ -26,9 +26,9 @@ describe('Loadable', () => { const LoadableSampleComponent = Loadable(loadSampleComponent); const { container } = render( - Loading...}> + Loading...}> - , + , ); expect(screen.getByText('Loading...')).toBeInTheDocument(); @@ -37,7 +37,7 @@ describe('Loadable', () => { expect(container.querySelector('div')).toHaveTextContent('Sample Component'); }); - it('should call React.lazy with the provided import path', () => { + it('should call lazy with the provided import path', () => { const reactLazySpy = jest.spyOn(React, 'lazy'); Loadable(loadSampleComponent); diff --git a/frontend/src/components/Loadable/index.tsx b/frontend/src/components/Loadable/index.tsx index 60c794f542..5cffc5793e 100644 --- a/frontend/src/components/Loadable/index.tsx +++ b/frontend/src/components/Loadable/index.tsx @@ -1,8 +1,8 @@ -import { ComponentType, lazy } from 'react'; +import { ComponentType, lazy, LazyExoticComponent } from 'react'; function Loadable(importPath: { (): LoadableProps; -}): React.LazyExoticComponent { +}): LazyExoticComponent { return lazy(() => importPath()); } diff --git a/frontend/src/components/Logs/AddToQueryHOC.tsx b/frontend/src/components/Logs/AddToQueryHOC.tsx index e0810250a8..874a9a0ec7 100644 --- a/frontend/src/components/Logs/AddToQueryHOC.tsx +++ b/frontend/src/components/Logs/AddToQueryHOC.tsx @@ -2,7 +2,7 @@ import { Popover } from 'antd'; import ROUTES from 'constants/routes'; import history from 'lib/history'; import { generateFilterQuery } from 'lib/logs/generateFilterQuery'; -import React, { memo, useCallback, useMemo } from 'react'; +import { memo, ReactNode, useCallback, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { ILogsReducer } from 'types/reducer/logs'; @@ -51,7 +51,7 @@ function AddToQueryHOC({ interface AddToQueryHOCProps { fieldKey: string; fieldValue: string; - children: React.ReactNode; + children: ReactNode; } export default memo(AddToQueryHOC); diff --git a/frontend/src/components/Logs/CategoryHeading/index.tsx b/frontend/src/components/Logs/CategoryHeading/index.tsx index f48160593a..b7d8ae7b50 100644 --- a/frontend/src/components/Logs/CategoryHeading/index.tsx +++ b/frontend/src/components/Logs/CategoryHeading/index.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import { ReactNode } from 'react'; import { CategoryHeadingText } from './styles'; interface ICategoryHeadingProps { - children: React.ReactNode; + children: ReactNode; } function CategoryHeading({ children }: ICategoryHeadingProps): JSX.Element { return {children}; diff --git a/frontend/src/components/Logs/CopyClipboardHOC.tsx b/frontend/src/components/Logs/CopyClipboardHOC.tsx index d95bf61cc9..a12208bf77 100644 --- a/frontend/src/components/Logs/CopyClipboardHOC.tsx +++ b/frontend/src/components/Logs/CopyClipboardHOC.tsx @@ -1,6 +1,6 @@ import { Popover } from 'antd'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useCallback, useEffect } from 'react'; +import { ReactNode, useCallback, useEffect } from 'react'; import { useCopyToClipboard } from 'react-use'; function CopyClipboardHOC({ @@ -35,7 +35,7 @@ function CopyClipboardHOC({ interface CopyClipboardHOCProps { textToCopy: string; - children: React.ReactNode; + children: ReactNode; } export default CopyClipboardHOC; diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx index 6095d343fc..03129dafe0 100644 --- a/frontend/src/components/Logs/ListLogView/index.tsx +++ b/frontend/src/components/Logs/ListLogView/index.tsx @@ -8,7 +8,7 @@ import dompurify from 'dompurify'; import { useNotifications } from 'hooks/useNotifications'; // utils import { FlatLogData } from 'lib/logs/flatLogData'; -import React, { useCallback, useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useCopyToClipboard } from 'react-use'; // interfaces diff --git a/frontend/src/components/Logs/RawLogView/config.ts b/frontend/src/components/Logs/RawLogView/config.ts index e2f385a6b1..14981eaa1e 100644 --- a/frontend/src/components/Logs/RawLogView/config.ts +++ b/frontend/src/components/Logs/RawLogView/config.ts @@ -1 +1,3 @@ -export const rawLineStyle: React.CSSProperties = {}; +import { CSSProperties } from 'react'; + +export const rawLineStyle: CSSProperties = {}; diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx index f3ddde84c7..711b4420ad 100644 --- a/frontend/src/components/Logs/RawLogView/index.tsx +++ b/frontend/src/components/Logs/RawLogView/index.tsx @@ -5,7 +5,7 @@ import dayjs from 'dayjs'; import dompurify from 'dompurify'; // hooks import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { useCallback, useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; // interfaces import { ILog } from 'types/api/logs/log'; diff --git a/frontend/src/components/Logs/TableView/config.ts b/frontend/src/components/Logs/TableView/config.ts index 0bf91de96b..39622a4466 100644 --- a/frontend/src/components/Logs/TableView/config.ts +++ b/frontend/src/components/Logs/TableView/config.ts @@ -1,14 +1,14 @@ import { TableProps } from 'antd'; -import React from 'react'; +import { CSSProperties } from 'react'; -export const defaultCellStyle: React.CSSProperties = { +export const defaultCellStyle: CSSProperties = { paddingTop: 4, paddingBottom: 6, paddingRight: 8, paddingLeft: 8, }; -export const defaultTableStyle: React.CSSProperties = { +export const defaultTableStyle: CSSProperties = { minWidth: '40rem', maxWidth: '40rem', }; diff --git a/frontend/src/components/Logs/TableView/index.tsx b/frontend/src/components/Logs/TableView/index.tsx index dd90164d3b..5ec91d87d7 100644 --- a/frontend/src/components/Logs/TableView/index.tsx +++ b/frontend/src/components/Logs/TableView/index.tsx @@ -6,7 +6,7 @@ import dayjs from 'dayjs'; import dompurify from 'dompurify'; // utils import { FlatLogData } from 'lib/logs/flatLogData'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { IField } from 'types/api/logs/fields'; // interfaces import { ILog } from 'types/api/logs/log'; diff --git a/frontend/src/components/MessageTip/index.tsx b/frontend/src/components/MessageTip/index.tsx index 67cdb41703..23c740395e 100644 --- a/frontend/src/components/MessageTip/index.tsx +++ b/frontend/src/components/MessageTip/index.tsx @@ -1,11 +1,11 @@ -import React from 'react'; +import { ReactNode } from 'react'; import { StyledAlert } from './styles'; interface MessageTipProps { show?: boolean; - message: React.ReactNode | string; - action: React.ReactNode | undefined; + message: ReactNode | string; + action: ReactNode | undefined; } function MessageTip({ diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx index 83e380a981..a8f8bb6532 100644 --- a/frontend/src/components/Modal.tsx +++ b/frontend/src/components/Modal.tsx @@ -1,5 +1,5 @@ import { Modal, ModalProps as Props } from 'antd'; -import React, { ReactElement } from 'react'; +import { ReactElement } from 'react'; function CustomModal({ title, diff --git a/frontend/src/components/NotFound/NotFound.test.tsx b/frontend/src/components/NotFound/NotFound.test.tsx index 0eed86262c..f72596e875 100644 --- a/frontend/src/components/NotFound/NotFound.test.tsx +++ b/frontend/src/components/NotFound/NotFound.test.tsx @@ -1,5 +1,4 @@ import { render } from '@testing-library/react'; -import React from 'react'; import { Provider } from 'react-redux'; import { MemoryRouter } from 'react-router-dom'; import store from 'store'; diff --git a/frontend/src/components/NotFound/index.tsx b/frontend/src/components/NotFound/index.tsx index 04d140e34f..5af3c4640c 100644 --- a/frontend/src/components/NotFound/index.tsx +++ b/frontend/src/components/NotFound/index.tsx @@ -2,7 +2,7 @@ import getLocalStorageKey from 'api/browser/localstorage/get'; import NotFoundImage from 'assets/NotFound'; import { LOCALSTORAGE } from 'constants/localStorage'; import ROUTES from 'constants/routes'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { useDispatch } from 'react-redux'; import { Dispatch } from 'redux'; import AppActions from 'types/actions'; diff --git a/frontend/src/components/ReleaseNote/Releases/ReleaseNote0120.tsx b/frontend/src/components/ReleaseNote/Releases/ReleaseNote0120.tsx index 78b2800b61..249147fcde 100644 --- a/frontend/src/components/ReleaseNote/Releases/ReleaseNote0120.tsx +++ b/frontend/src/components/ReleaseNote/Releases/ReleaseNote0120.tsx @@ -1,7 +1,7 @@ import { Button, Space } from 'antd'; import setFlags from 'api/user/setFlags'; import MessageTip from 'components/MessageTip'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/components/ReleaseNote/index.tsx b/frontend/src/components/ReleaseNote/index.tsx index daede3a51f..bfabbd2637 100644 --- a/frontend/src/components/ReleaseNote/index.tsx +++ b/frontend/src/components/ReleaseNote/index.tsx @@ -1,7 +1,6 @@ import ReleaseNoteProps from 'components/ReleaseNote/ReleaseNoteProps'; import ReleaseNote0120 from 'components/ReleaseNote/Releases/ReleaseNote0120'; import ROUTES from 'constants/routes'; -import React from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { UserFlags } from 'types/api/user/setFlags'; diff --git a/frontend/src/components/ResizeTable/ResizableHeader.tsx b/frontend/src/components/ResizeTable/ResizableHeader.tsx index b3119c0c1a..8611a45886 100644 --- a/frontend/src/components/ResizeTable/ResizableHeader.tsx +++ b/frontend/src/components/ResizeTable/ResizableHeader.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import { SyntheticEvent, useMemo } from 'react'; import { Resizable, ResizeCallbackData } from 'react-resizable'; import { enableUserSelectHack } from './config'; @@ -37,7 +37,7 @@ function ResizableHeader(props: ResizableHeaderProps): JSX.Element { } interface ResizableHeaderProps { - onResize: (e: React.SyntheticEvent, data: ResizeCallbackData) => void; + onResize: (e: SyntheticEvent, data: ResizeCallbackData) => void; width: number; } diff --git a/frontend/src/components/ResizeTable/ResizeTable.tsx b/frontend/src/components/ResizeTable/ResizeTable.tsx index b7aee770c9..681d8b8670 100644 --- a/frontend/src/components/ResizeTable/ResizeTable.tsx +++ b/frontend/src/components/ResizeTable/ResizeTable.tsx @@ -1,7 +1,7 @@ import { Table } from 'antd'; import type { TableProps } from 'antd/es/table'; import { ColumnsType } from 'antd/lib/table'; -import React, { useCallback, useMemo, useState } from 'react'; +import { SyntheticEvent, useCallback, useMemo, useState } from 'react'; import { ResizeCallbackData } from 'react-resizable'; import ResizableHeader from './ResizableHeader'; @@ -12,7 +12,7 @@ function ResizeTable({ columns, ...restprops }: TableProps): JSX.Element { const handleResize = useCallback( (index: number) => ( - _e: React.SyntheticEvent, + _e: SyntheticEvent, { size }: ResizeCallbackData, ): void => { const newColumns = [...columnsData]; diff --git a/frontend/src/components/RouteTab/index.tsx b/frontend/src/components/RouteTab/index.tsx index 0059f5b84c..07b9f70938 100644 --- a/frontend/src/components/RouteTab/index.tsx +++ b/frontend/src/components/RouteTab/index.tsx @@ -1,6 +1,5 @@ import { Tabs, TabsProps } from 'antd'; import history from 'lib/history'; -import React from 'react'; function RouteTab({ routes, diff --git a/frontend/src/components/Spinner/index.tsx b/frontend/src/components/Spinner/index.tsx index 819e552442..669b3f0cda 100644 --- a/frontend/src/components/Spinner/index.tsx +++ b/frontend/src/components/Spinner/index.tsx @@ -1,6 +1,6 @@ import { LoadingOutlined } from '@ant-design/icons'; import { Spin, SpinProps } from 'antd'; -import React from 'react'; +import { CSSProperties } from 'react'; import { SpinerStyle } from './styles'; @@ -15,8 +15,8 @@ function Spinner({ size, tip, height, style }: SpinnerProps): JSX.Element { interface SpinnerProps { size?: SpinProps['size']; tip?: SpinProps['tip']; - height?: React.CSSProperties['height']; - style?: React.CSSProperties; + height?: CSSProperties['height']; + style?: CSSProperties; } Spinner.defaultProps = { size: undefined, diff --git a/frontend/src/components/Spinner/styles.ts b/frontend/src/components/Spinner/styles.ts index 53a77a8978..6763239c40 100644 --- a/frontend/src/components/Spinner/styles.ts +++ b/frontend/src/components/Spinner/styles.ts @@ -1,8 +1,8 @@ -import React from 'react'; +import { CSSProperties } from 'react'; import styled from 'styled-components'; interface Props { - height: React.CSSProperties['height']; + height: CSSProperties['height']; } export const SpinerStyle = styled.div` diff --git a/frontend/src/components/Styled/index.ts b/frontend/src/components/Styled/index.ts index ffa3fbccc0..579e15a499 100644 --- a/frontend/src/components/Styled/index.ts +++ b/frontend/src/components/Styled/index.ts @@ -1,7 +1,7 @@ import * as AntD from 'antd'; import { TextProps } from 'antd/lib/typography/Text'; import { TitleProps } from 'antd/lib/typography/Title'; -import React from 'react'; +import { HTMLAttributes } from 'react'; import styled, { FlattenSimpleInterpolation } from 'styled-components'; import { IStyledClass } from './types'; @@ -51,7 +51,7 @@ const StyledTypographyTitle = styled(Title)` ${styledClass} `; -type TStyledDiv = React.HTMLAttributes & IStyledClass; +type TStyledDiv = HTMLAttributes & IStyledClass; const StyledDiv = styled.div` ${styledClass} `; diff --git a/frontend/src/components/TextToolTip/index.tsx b/frontend/src/components/TextToolTip/index.tsx index 64a9cd053a..f01a623988 100644 --- a/frontend/src/components/TextToolTip/index.tsx +++ b/frontend/src/components/TextToolTip/index.tsx @@ -3,7 +3,7 @@ import { QuestionCircleFilled } from '@ant-design/icons'; import { Tooltip } from 'antd'; import { themeColors } from 'constants/theme'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { style } from './styles'; diff --git a/frontend/src/components/TimePreferenceDropDown/config.tsx b/frontend/src/components/TimePreferenceDropDown/config.tsx index bf09498ec7..e7bdd793db 100644 --- a/frontend/src/components/TimePreferenceDropDown/config.tsx +++ b/frontend/src/components/TimePreferenceDropDown/config.tsx @@ -1,6 +1,5 @@ import { Typography } from 'antd'; import { timeItems } from 'container/NewWidget/RightContainer/timeItems'; -import React from 'react'; export const menuItems = timeItems.map((item) => ({ key: item.enum, diff --git a/frontend/src/components/TimePreferenceDropDown/index.tsx b/frontend/src/components/TimePreferenceDropDown/index.tsx index 3ce9795f15..b24c07b3f2 100644 --- a/frontend/src/components/TimePreferenceDropDown/index.tsx +++ b/frontend/src/components/TimePreferenceDropDown/index.tsx @@ -3,7 +3,7 @@ import TimeItems, { timePreferance, timePreferenceType, } from 'container/NewWidget/RightContainer/timeItems'; -import React, { useCallback, useMemo } from 'react'; +import { Dispatch, SetStateAction, useCallback, useMemo } from 'react'; import { menuItems } from './config'; import { TextContainer } from './styles'; @@ -44,7 +44,7 @@ interface TimeMenuItemOnChangeHandlerEvent { } interface TimePreferenceDropDownProps { - setSelectedTime: React.Dispatch>; + setSelectedTime: Dispatch>; selectedTime: timePreferance; } diff --git a/frontend/src/components/ValueGraph/index.tsx b/frontend/src/components/ValueGraph/index.tsx index c5de1785c6..e75f338945 100644 --- a/frontend/src/components/ValueGraph/index.tsx +++ b/frontend/src/components/ValueGraph/index.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { Value } from './styles'; function ValueGraph({ value }: ValueGraphProps): JSX.Element { diff --git a/frontend/src/components/WelcomeLeftContainer/index.tsx b/frontend/src/components/WelcomeLeftContainer/index.tsx index ef69a4599d..3e8ec68e42 100644 --- a/frontend/src/components/WelcomeLeftContainer/index.tsx +++ b/frontend/src/components/WelcomeLeftContainer/index.tsx @@ -1,5 +1,5 @@ import { Card, Space, Typography } from 'antd'; -import React from 'react'; +import { ReactChild } from 'react'; import { useTranslation } from 'react-i18next'; import { Container, LeftContainer, Logo } from './styles'; @@ -34,7 +34,7 @@ function WelcomeLeftContainer({ interface WelcomeLeftContainerProps { version: string; - children: React.ReactChild; + children: ReactChild; } export default WelcomeLeftContainer; diff --git a/frontend/src/container/AllAlertChannels/AlertChannels.tsx b/frontend/src/container/AllAlertChannels/AlertChannels.tsx index 72d5a54b85..e3dccb6160 100644 --- a/frontend/src/container/AllAlertChannels/AlertChannels.tsx +++ b/frontend/src/container/AllAlertChannels/AlertChannels.tsx @@ -6,7 +6,7 @@ import ROUTES from 'constants/routes'; import useComponentPermission from 'hooks/useComponentPermission'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { generatePath } from 'react-router-dom'; diff --git a/frontend/src/container/AllAlertChannels/Delete.tsx b/frontend/src/container/AllAlertChannels/Delete.tsx index 1a4456cced..c5edbf1e6a 100644 --- a/frontend/src/container/AllAlertChannels/Delete.tsx +++ b/frontend/src/container/AllAlertChannels/Delete.tsx @@ -1,7 +1,7 @@ import { Button } from 'antd'; import { NotificationInstance } from 'antd/es/notification/interface'; import deleteChannel from 'api/channels/delete'; -import React, { useState } from 'react'; +import { Dispatch, SetStateAction, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Channels } from 'types/api/channels/getAll'; @@ -55,7 +55,7 @@ function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element { interface DeleteProps { notifications: NotificationInstance; - setChannels: React.Dispatch>; + setChannels: Dispatch>; id: string; } diff --git a/frontend/src/container/AllAlertChannels/index.tsx b/frontend/src/container/AllAlertChannels/index.tsx index 99636806ea..8038f17778 100644 --- a/frontend/src/container/AllAlertChannels/index.tsx +++ b/frontend/src/container/AllAlertChannels/index.tsx @@ -7,7 +7,7 @@ import ROUTES from 'constants/routes'; import useComponentPermission from 'hooks/useComponentPermission'; import useFetch from 'hooks/useFetch'; import history from 'lib/history'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx index c3b0580f44..4bc7d199e1 100644 --- a/frontend/src/container/AllError/index.tsx +++ b/frontend/src/container/AllError/index.tsx @@ -23,7 +23,7 @@ import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute import useUrlQuery from 'hooks/useUrlQuery'; import createQueryParams from 'lib/createQueryParams'; import history from 'lib/history'; -import React, { useCallback, useEffect, useMemo } from 'react'; +import { useCallback, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useQueries } from 'react-query'; import { useSelector } from 'react-redux'; diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx index 918877747e..039febc113 100644 --- a/frontend/src/container/AppLayout/index.tsx +++ b/frontend/src/container/AppLayout/index.tsx @@ -6,7 +6,7 @@ import Header from 'container/Header'; import SideNav from 'container/SideNav'; import TopNav from 'container/TopNav'; import { useNotifications } from 'hooks/useNotifications'; -import React, { ReactNode, useEffect, useRef } from 'react'; +import { ReactNode, useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { useQueries } from 'react-query'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/frontend/src/container/ConfigDropdown/Config/ErrorLink.tsx b/frontend/src/container/ConfigDropdown/Config/ErrorLink.tsx index 84ac44e60e..fa2f471113 100644 --- a/frontend/src/container/ConfigDropdown/Config/ErrorLink.tsx +++ b/frontend/src/container/ConfigDropdown/Config/ErrorLink.tsx @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react'; +import { PureComponent } from 'react'; interface State { hasError: boolean; diff --git a/frontend/src/container/ConfigDropdown/Config/Link.tsx b/frontend/src/container/ConfigDropdown/Config/Link.tsx index 2cc39b7779..b31e374538 100644 --- a/frontend/src/container/ConfigDropdown/Config/Link.tsx +++ b/frontend/src/container/ConfigDropdown/Config/Link.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { ReactNode } from 'react'; import { Link } from 'react-router-dom'; function LinkContainer({ children, href }: LinkContainerProps): JSX.Element { @@ -16,7 +16,7 @@ function LinkContainer({ children, href }: LinkContainerProps): JSX.Element { } interface LinkContainerProps { - children: React.ReactNode; + children: ReactNode; href: string; } diff --git a/frontend/src/container/ConfigDropdown/Config/index.tsx b/frontend/src/container/ConfigDropdown/Config/index.tsx index 3d356a0af4..52879ce2d7 100644 --- a/frontend/src/container/ConfigDropdown/Config/index.tsx +++ b/frontend/src/container/ConfigDropdown/Config/index.tsx @@ -1,7 +1,7 @@ import { Menu, Space } from 'antd'; import Spinner from 'components/Spinner'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { Suspense, useMemo } from 'react'; +import { lazy, Suspense, useMemo } from 'react'; import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs'; import ErrorLink from './ErrorLink'; @@ -17,7 +17,7 @@ function HelpToolTip({ config }: HelpToolTipProps): JSX.Element { const items = sortedConfig.map((item) => { const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`; - const Component = React.lazy( + const Component = lazy( () => import(`@ant-design/icons/es/icons/${iconName}.js`), ); return { diff --git a/frontend/src/container/ConfigDropdown/index.tsx b/frontend/src/container/ConfigDropdown/index.tsx index 1ddd676948..cae4d087d6 100644 --- a/frontend/src/container/ConfigDropdown/index.tsx +++ b/frontend/src/container/ConfigDropdown/index.tsx @@ -6,7 +6,7 @@ import { } from '@ant-design/icons'; import { Dropdown, Space } from 'antd'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs'; diff --git a/frontend/src/container/CreateAlertChannels/index.tsx b/frontend/src/container/CreateAlertChannels/index.tsx index a5db46da07..1261f53567 100644 --- a/frontend/src/container/CreateAlertChannels/index.tsx +++ b/frontend/src/container/CreateAlertChannels/index.tsx @@ -9,7 +9,7 @@ import ROUTES from 'constants/routes'; import FormAlertChannels from 'container/FormAlertChannels'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { diff --git a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx index cc2da48727..8385c8462e 100644 --- a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx +++ b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx @@ -1,5 +1,4 @@ import { Row } from 'antd'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { AlertTypes } from 'types/api/alerts/alertTypes'; diff --git a/frontend/src/container/CreateAlertRule/index.tsx b/frontend/src/container/CreateAlertRule/index.tsx index ae3d21897e..b0cb5546c1 100644 --- a/frontend/src/container/CreateAlertRule/index.tsx +++ b/frontend/src/container/CreateAlertRule/index.tsx @@ -1,6 +1,6 @@ import { Form, Row } from 'antd'; import FormAlertRules from 'container/FormAlertRules'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { AlertTypes } from 'types/api/alerts/alertTypes'; import { diff --git a/frontend/src/container/EditAlertChannels/index.tsx b/frontend/src/container/EditAlertChannels/index.tsx index 5711635167..42ebd543c6 100644 --- a/frontend/src/container/EditAlertChannels/index.tsx +++ b/frontend/src/container/EditAlertChannels/index.tsx @@ -19,7 +19,7 @@ import { import FormAlertChannels from 'container/FormAlertChannels'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; diff --git a/frontend/src/container/EditRules/index.tsx b/frontend/src/container/EditRules/index.tsx index 89c9e66410..b6a32615a6 100644 --- a/frontend/src/container/EditRules/index.tsx +++ b/frontend/src/container/EditRules/index.tsx @@ -1,6 +1,5 @@ import { Form } from 'antd'; import FormAlertRules from 'container/FormAlertRules'; -import React from 'react'; import { AlertTypes } from 'types/api/alerts/alertTypes'; import { AlertDef } from 'types/api/alerts/def'; diff --git a/frontend/src/container/ErrorDetails/index.tsx b/frontend/src/container/ErrorDetails/index.tsx index 999e8013d9..561114a289 100644 --- a/frontend/src/container/ErrorDetails/index.tsx +++ b/frontend/src/container/ErrorDetails/index.tsx @@ -7,7 +7,7 @@ import dayjs from 'dayjs'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; import { urlKey } from 'pages/ErrorDetails/utils'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useLocation } from 'react-router-dom'; diff --git a/frontend/src/container/FormAlertChannels/Settings/LabelFilter.tsx b/frontend/src/container/FormAlertChannels/Settings/LabelFilter.tsx index 21311e416d..cc6c45843d 100644 --- a/frontend/src/container/FormAlertChannels/Settings/LabelFilter.tsx +++ b/frontend/src/container/FormAlertChannels/Settings/LabelFilter.tsx @@ -1,6 +1,6 @@ import { Form, Input, Select } from 'antd'; import { LabelFilterStatement } from 'container/CreateAlertChannels/config'; -import React from 'react'; +import { Dispatch, SetStateAction } from 'react'; const { Option } = Select; @@ -55,9 +55,7 @@ function LabelFilterForm({ setFilter }: LabelFilterProps): JSX.Element { } export interface LabelFilterProps { - setFilter: React.Dispatch< - React.SetStateAction>> - >; + setFilter: Dispatch>>>; } export default LabelFilterForm; diff --git a/frontend/src/container/FormAlertChannels/Settings/Pager.tsx b/frontend/src/container/FormAlertChannels/Settings/Pager.tsx index 5c0ca2e7c8..ec228f4b8d 100644 --- a/frontend/src/container/FormAlertChannels/Settings/Pager.tsx +++ b/frontend/src/container/FormAlertChannels/Settings/Pager.tsx @@ -1,5 +1,5 @@ import { Form, Input } from 'antd'; -import React from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { useTranslation } from 'react-i18next'; import { PagerChannel } from '../../CreateAlertChannels/config'; @@ -148,7 +148,7 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element { } interface PagerFormProps { - setSelectedConfig: React.Dispatch>>; + setSelectedConfig: Dispatch>>; } export default PagerForm; diff --git a/frontend/src/container/FormAlertChannels/Settings/Slack.tsx b/frontend/src/container/FormAlertChannels/Settings/Slack.tsx index 9415a500d7..c344df8ff5 100644 --- a/frontend/src/container/FormAlertChannels/Settings/Slack.tsx +++ b/frontend/src/container/FormAlertChannels/Settings/Slack.tsx @@ -1,5 +1,5 @@ import { Form, Input } from 'antd'; -import React from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { useTranslation } from 'react-i18next'; import { SlackChannel } from '../../CreateAlertChannels/config'; @@ -66,7 +66,7 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element { } interface SlackProps { - setSelectedConfig: React.Dispatch>>; + setSelectedConfig: Dispatch>>; } export default Slack; diff --git a/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx b/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx index 537d826313..ead1464734 100644 --- a/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx +++ b/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx @@ -1,5 +1,5 @@ import { Form, Input } from 'antd'; -import React from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { useTranslation } from 'react-i18next'; import { WebhookChannel } from '../../CreateAlertChannels/config'; @@ -53,9 +53,7 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element { } interface WebhookProps { - setSelectedConfig: React.Dispatch< - React.SetStateAction> - >; + setSelectedConfig: Dispatch>>; } export default WebhookSettings; diff --git a/frontend/src/container/FormAlertChannels/index.tsx b/frontend/src/container/FormAlertChannels/index.tsx index 91de745b3b..14f6d32413 100644 --- a/frontend/src/container/FormAlertChannels/index.tsx +++ b/frontend/src/container/FormAlertChannels/index.tsx @@ -11,7 +11,7 @@ import { WebhookType, } from 'container/CreateAlertChannels/config'; import history from 'lib/history'; -import React from 'react'; +import { Dispatch, ReactElement, SetStateAction } from 'react'; import { useTranslation } from 'react-i18next'; import PagerSettings from './Settings/Pager'; @@ -37,7 +37,7 @@ function FormAlertChannels({ }: FormAlertChannelsProps): JSX.Element { const { t } = useTranslation('channels'); - const renderSettings = (): React.ReactElement | null => { + const renderSettings = (): ReactElement | null => { switch (type) { case SlackType: return ; @@ -115,8 +115,8 @@ function FormAlertChannels({ interface FormAlertChannelsProps { formInstance: FormInstance; type: ChannelType; - setSelectedConfig: React.Dispatch< - React.SetStateAction> + setSelectedConfig: Dispatch< + SetStateAction> >; onTypeChangeHandler: (value: ChannelType) => void; onSaveHandler: (props: ChannelType) => void; diff --git a/frontend/src/container/FormAlertRules/BasicInfo.tsx b/frontend/src/container/FormAlertRules/BasicInfo.tsx index 130f4fb3dd..f4d99126ec 100644 --- a/frontend/src/container/FormAlertRules/BasicInfo.tsx +++ b/frontend/src/container/FormAlertRules/BasicInfo.tsx @@ -1,5 +1,4 @@ import { Form, Select } from 'antd'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { AlertDef, Labels } from 'types/api/alerts/def'; diff --git a/frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx b/frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx index aa316fe558..fc8fb5dc09 100644 --- a/frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx +++ b/frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx @@ -1,6 +1,5 @@ import ClickHouseQueryBuilder from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query'; import { IClickHouseQueryHandleChange } from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/types'; -import React from 'react'; import { IChQueries } from 'types/api/alerts/compositeQuery'; import { rawQueryToIChQuery, toIClickHouseQuery } from './transform'; diff --git a/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx b/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx index 662a14c1e6..c2d78e661c 100644 --- a/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx +++ b/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx @@ -2,7 +2,7 @@ import { Select } from 'antd'; import getChannels from 'api/channels/getAll'; import useFetch from 'hooks/useFetch'; import { useNotifications } from 'hooks/useNotifications'; -import React from 'react'; +import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { StyledSelect } from './styles'; @@ -33,8 +33,8 @@ function ChannelSelect({ description: errorMessage, }); } - const renderOptions = (): React.ReactNode[] => { - const children: React.ReactNode[] = []; + const renderOptions = (): ReactNode[] => { + const children: ReactNode[] = []; if (loading || payload === undefined || payload.length === 0) { return children; diff --git a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx index 040a53348f..f358c6cbe4 100644 --- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx +++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx @@ -7,7 +7,7 @@ import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems'; import { Time } from 'container/TopNav/DateTimeSelection/config'; import getChartData from 'lib/getChartData'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { GetMetricQueryRange } from 'store/actions/dashboard/getQueryResults'; diff --git a/frontend/src/container/FormAlertRules/PromqlSection.tsx b/frontend/src/container/FormAlertRules/PromqlSection.tsx index 129e5bb92d..df2fd860d0 100644 --- a/frontend/src/container/FormAlertRules/PromqlSection.tsx +++ b/frontend/src/container/FormAlertRules/PromqlSection.tsx @@ -1,6 +1,5 @@ import PromQLQueryBuilder from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query'; import { IPromQLQueryHandleChange } from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/types'; -import React from 'react'; import { IPromQueries } from 'types/api/alerts/compositeQuery'; function PromqlSection({ diff --git a/frontend/src/container/FormAlertRules/QuerySection.tsx b/frontend/src/container/FormAlertRules/QuerySection.tsx index b3337dfc09..b24d1ab7a3 100644 --- a/frontend/src/container/FormAlertRules/QuerySection.tsx +++ b/frontend/src/container/FormAlertRules/QuerySection.tsx @@ -2,7 +2,7 @@ import { Button, Tabs } from 'antd'; import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts'; import { PANEL_TYPES } from 'constants/queryBuilder'; import { QueryBuilder } from 'container/QueryBuilder'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { AlertTypes } from 'types/api/alerts/alertTypes'; import { IChQueries, IPromQueries } from 'types/api/alerts/compositeQuery'; diff --git a/frontend/src/container/FormAlertRules/RuleOptions.tsx b/frontend/src/container/FormAlertRules/RuleOptions.tsx index 071ff84d7f..f24f38b017 100644 --- a/frontend/src/container/FormAlertRules/RuleOptions.tsx +++ b/frontend/src/container/FormAlertRules/RuleOptions.tsx @@ -1,5 +1,4 @@ import { Form, Select, Typography } from 'antd'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { AlertDef, diff --git a/frontend/src/container/FormAlertRules/UserGuide/index.tsx b/frontend/src/container/FormAlertRules/UserGuide/index.tsx index 33312a9fd7..86992d7226 100644 --- a/frontend/src/container/FormAlertRules/UserGuide/index.tsx +++ b/frontend/src/container/FormAlertRules/UserGuide/index.tsx @@ -1,6 +1,5 @@ import { Col, Row, Typography } from 'antd'; import TextToolTip from 'components/TextToolTip'; -import React from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { EQueryType } from 'types/common/dashboard'; diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx index 8866956da2..44dd192729 100644 --- a/frontend/src/container/FormAlertRules/index.tsx +++ b/frontend/src/container/FormAlertRules/index.tsx @@ -12,7 +12,7 @@ import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi'; import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi'; -import React, { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useQueryClient } from 'react-query'; import { AlertTypes } from 'types/api/alerts/alertTypes'; diff --git a/frontend/src/container/FormAlertRules/labels/QueryChip.tsx b/frontend/src/container/FormAlertRules/labels/QueryChip.tsx index 47e4c956ff..64c75d297a 100644 --- a/frontend/src/container/FormAlertRules/labels/QueryChip.tsx +++ b/frontend/src/container/FormAlertRules/labels/QueryChip.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { QueryChipContainer, QueryChipItem } from './styles'; import { ILabelRecord } from './types'; diff --git a/frontend/src/container/FormAlertRules/labels/index.tsx b/frontend/src/container/FormAlertRules/labels/index.tsx index 60ca08c052..ef7b94d01f 100644 --- a/frontend/src/container/FormAlertRules/labels/index.tsx +++ b/frontend/src/container/FormAlertRules/labels/index.tsx @@ -6,7 +6,7 @@ import { useMachine } from '@xstate/react'; import { Button, Input, message, Modal } from 'antd'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { map } from 'lodash-es'; -import React, { useCallback, useEffect, useState } from 'react'; +import { ChangeEvent, useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Labels } from 'types/api/alerts/def'; import { v4 as uuid } from 'uuid'; @@ -84,7 +84,7 @@ function LabelSelect({ handleBlur(); }, [handleBlur]); - const handleChange = (e: React.ChangeEvent): void => { + const handleChange = (e: ChangeEvent): void => { setCurrentVal(e.target?.value); }; diff --git a/frontend/src/container/GantChart/SpanLength/index.tsx b/frontend/src/container/GantChart/SpanLength/index.tsx index efe62deaff..9e3611bb01 100644 --- a/frontend/src/container/GantChart/SpanLength/index.tsx +++ b/frontend/src/container/GantChart/SpanLength/index.tsx @@ -1,6 +1,5 @@ import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React from 'react'; import { toFixed } from 'utils/toFixed'; import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles'; diff --git a/frontend/src/container/GantChart/SpanName/index.tsx b/frontend/src/container/GantChart/SpanName/index.tsx index 7f536624b9..90c6ffa80d 100644 --- a/frontend/src/container/GantChart/SpanName/index.tsx +++ b/frontend/src/container/GantChart/SpanName/index.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { Container, Service, Span, SpanWrapper } from './styles'; function SpanNameComponent({ diff --git a/frontend/src/container/GantChart/Trace/index.tsx b/frontend/src/container/GantChart/Trace/index.tsx index e419283757..d38e3594ae 100644 --- a/frontend/src/container/GantChart/Trace/index.tsx +++ b/frontend/src/container/GantChart/Trace/index.tsx @@ -4,7 +4,15 @@ import { StyledCol, StyledRow } from 'components/Styled'; import { IIntervalUnit } from 'container/TraceDetail/utils'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants'; -import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { + Dispatch, + MouseEventHandler, + SetStateAction, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; import { ITraceTree } from 'types/api/trace/getTraceItem'; import { ITraceMetaData } from '..'; @@ -71,7 +79,7 @@ function Trace(props: TraceProps): JSX.Element { const ref = useRef(null); - React.useEffect(() => { + useEffect(() => { if (activeSelectedId === id) { ref.current?.scrollIntoView({ block: 'nearest', @@ -97,7 +105,7 @@ function Trace(props: TraceProps): JSX.Element { setActiveSelectedId(id); }; - const onClickTreeExpansion: React.MouseEventHandler = ( + const onClickTreeExpansion: MouseEventHandler = ( event, ): void => { event.stopPropagation(); @@ -207,8 +215,8 @@ interface ITraceGlobal { interface TraceProps extends ITraceTree, ITraceGlobal { activeHoverId: string; - setActiveHoverId: React.Dispatch>; - setActiveSelectedId: React.Dispatch>; + setActiveHoverId: Dispatch>; + setActiveSelectedId: Dispatch>; activeSelectedId: string; level: number; activeSpanPath: string[]; diff --git a/frontend/src/container/GantChart/index.tsx b/frontend/src/container/GantChart/index.tsx index dbe707c2d7..0d54a837f2 100644 --- a/frontend/src/container/GantChart/index.tsx +++ b/frontend/src/container/GantChart/index.tsx @@ -1,6 +1,6 @@ import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons'; import { IIntervalUnit } from 'container/TraceDetail/utils'; -import React, { useEffect, useState } from 'react'; +import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { ITraceTree } from 'types/api/trace/getTraceItem'; import { CardContainer, CardWrapper, CollapseButton } from './styles'; @@ -79,8 +79,8 @@ export interface GanttChartProps { traceMetaData: ITraceMetaData; activeSelectedId: string; activeHoverId: string; - setActiveHoverId: React.Dispatch>; - setActiveSelectedId: React.Dispatch>; + setActiveHoverId: Dispatch>; + setActiveSelectedId: Dispatch>; spanId: string; intervalUnit: IIntervalUnit; } diff --git a/frontend/src/container/GeneralSettings/GeneralSettings.tsx b/frontend/src/container/GeneralSettings/GeneralSettings.tsx index 7530364d65..5491e1394b 100644 --- a/frontend/src/container/GeneralSettings/GeneralSettings.tsx +++ b/frontend/src/container/GeneralSettings/GeneralSettings.tsx @@ -6,7 +6,7 @@ import TextToolTip from 'components/TextToolTip'; import useComponentPermission from 'hooks/useComponentPermission'; import { useNotifications } from 'hooks/useNotifications'; import find from 'lodash-es/find'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { UseQueryResult } from 'react-query'; import { useSelector } from 'react-redux'; @@ -519,7 +519,7 @@ function GeneralSettings({ category.retentionFields.length > 0 ) { return ( - + @@ -576,7 +576,7 @@ function GeneralSettings({ - + ); } return null; diff --git a/frontend/src/container/GeneralSettings/Retention.tsx b/frontend/src/container/GeneralSettings/Retention.tsx index 806f811bba..6228391503 100644 --- a/frontend/src/container/GeneralSettings/Retention.tsx +++ b/frontend/src/container/GeneralSettings/Retention.tsx @@ -1,6 +1,13 @@ import { Col, Row, Select } from 'antd'; import { find } from 'lodash-es'; -import React, { useEffect, useRef, useState } from 'react'; +import { + ChangeEvent, + Dispatch, + SetStateAction, + useEffect, + useRef, + useState, +} from 'react'; import { Input, @@ -62,8 +69,8 @@ function Retention({ }, [selectedTimeUnit, selectedValue, setRetentionValue]); const onChangeHandler = ( - e: React.ChangeEvent, - func: React.Dispatch>, + e: ChangeEvent, + func: Dispatch>, ): void => { interacted.current = true; const { value } = e.target; @@ -111,7 +118,7 @@ function Retention({ interface RetentionProps { retentionValue: number | null; text: string; - setRetentionValue: React.Dispatch>; + setRetentionValue: Dispatch>; hide: boolean; } diff --git a/frontend/src/container/GeneralSettings/StatusMessage.tsx b/frontend/src/container/GeneralSettings/StatusMessage.tsx index bb62f34007..a673bb8bb8 100644 --- a/frontend/src/container/GeneralSettings/StatusMessage.tsx +++ b/frontend/src/container/GeneralSettings/StatusMessage.tsx @@ -1,7 +1,7 @@ import { green, orange, volcano } from '@ant-design/colors'; import { InfoCircleOutlined } from '@ant-design/icons'; import { Card, Col, Row } from 'antd'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { TStatus } from 'types/api/settings/getRetention'; diff --git a/frontend/src/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx index 2e803563e4..49b9cee4e3 100644 --- a/frontend/src/container/GeneralSettings/index.tsx +++ b/frontend/src/container/GeneralSettings/index.tsx @@ -2,7 +2,6 @@ import { Typography } from 'antd'; import getDisks from 'api/disks/getDisks'; import getRetentionPeriodApi from 'api/settings/getRetention'; import Spinner from 'components/Spinner'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { useQueries } from 'react-query'; import { ErrorResponse, SuccessResponse } from 'types/api'; diff --git a/frontend/src/container/GridGraphComponent/index.tsx b/frontend/src/container/GridGraphComponent/index.tsx index 968151e114..22fa25f98d 100644 --- a/frontend/src/container/GridGraphComponent/index.tsx +++ b/frontend/src/container/GridGraphComponent/index.tsx @@ -6,7 +6,6 @@ import ValueGraph from 'components/ValueGraph'; import { PANEL_TYPES } from 'constants/queryBuilder'; import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import history from 'lib/history'; -import React from 'react'; import { TitleContainer, ValueContainer } from './styles'; diff --git a/frontend/src/container/GridGraphLayout/EmptyWidget/index.tsx b/frontend/src/container/GridGraphLayout/EmptyWidget/index.tsx index df9b7662fe..3137f662ac 100644 --- a/frontend/src/container/GridGraphLayout/EmptyWidget/index.tsx +++ b/frontend/src/container/GridGraphLayout/EmptyWidget/index.tsx @@ -1,5 +1,4 @@ import { Typography } from 'antd'; -import React from 'react'; import { Container } from './styles'; diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/index.metricsBuilder.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/index.metricsBuilder.tsx index e2ffff224e..04b35ee83b 100644 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/index.metricsBuilder.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/index.metricsBuilder.tsx @@ -9,7 +9,7 @@ import { } from 'container/NewWidget/RightContainer/timeItems'; import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables'; import getChartData from 'lib/getChartData'; -import React, { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; import { GetMetricQueryRange } from 'store/actions/dashboard/getQueryResults'; diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx index ff3545bf92..0aefcc109f 100644 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx @@ -15,7 +15,7 @@ import GetMaxMinTime from 'lib/getMaxMinTime'; import GetMinMax from 'lib/getMinMax'; import getStartAndEndTime from 'lib/getStartAndEndTime'; import getStep from 'lib/getStep'; -import React, { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { useQueries } from 'react-query'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx index 4dec5de967..35923b8b12 100644 --- a/frontend/src/container/GridGraphLayout/Graph/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx @@ -7,13 +7,20 @@ import usePreviousValue from 'hooks/usePreviousValue'; import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables'; import getChartData from 'lib/getChartData'; import isEmpty from 'lodash-es/isEmpty'; -import React, { memo, useCallback, useMemo, useState } from 'react'; +import { + Dispatch, + memo, + SetStateAction, + useCallback, + useMemo, + useState, +} from 'react'; import { Layout } from 'react-grid-layout'; import { useTranslation } from 'react-i18next'; import { useInView } from 'react-intersection-observer'; import { useQuery } from 'react-query'; import { connect, useSelector } from 'react-redux'; -import { bindActionCreators, Dispatch } from 'redux'; +import { bindActionCreators } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; import { DeleteWidget, @@ -117,7 +124,7 @@ function GridCardGraph({ const prevChartDataSetRef = usePreviousValue(chartData); const onToggleModal = useCallback( - (func: React.Dispatch>) => { + (func: Dispatch>) => { func((value) => !value); }, [], @@ -318,7 +325,7 @@ interface GridCardGraphProps extends DispatchProps { // eslint-disable-next-line react/require-default-props layout?: Layout[]; // eslint-disable-next-line react/require-default-props - setLayout?: React.Dispatch>; + setLayout?: Dispatch>; onDragSelect?: (start: number, end: number) => void; } diff --git a/frontend/src/container/GridGraphLayout/GraphLayout.tsx b/frontend/src/container/GridGraphLayout/GraphLayout.tsx index 6ff958b433..dbfbb7b7f5 100644 --- a/frontend/src/container/GridGraphLayout/GraphLayout.tsx +++ b/frontend/src/container/GridGraphLayout/GraphLayout.tsx @@ -4,7 +4,7 @@ import { FeatureKeys } from 'constants/features'; import useComponentPermission from 'hooks/useComponentPermission'; import { useIsDarkMode } from 'hooks/useDarkMode'; import useFeatureFlag, { MESSAGE } from 'hooks/useFeatureFlag'; -import React from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { Layout } from 'react-grid-layout'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; @@ -130,7 +130,7 @@ interface GraphLayoutProps { onAddPanelHandler: VoidFunction; onLayoutChangeHandler: (layout: Layout[]) => Promise; widgets: Widgets[] | undefined; - setLayout: React.Dispatch>; + setLayout: Dispatch>; } export default GraphLayout; diff --git a/frontend/src/container/GridGraphLayout/WidgetHeader/config.ts b/frontend/src/container/GridGraphLayout/WidgetHeader/config.ts index 2d9771d235..0ac1105ba6 100644 --- a/frontend/src/container/GridGraphLayout/WidgetHeader/config.ts +++ b/frontend/src/container/GridGraphLayout/WidgetHeader/config.ts @@ -1,6 +1,7 @@ import { themeColors } from 'constants/theme'; +import { CSSProperties } from 'react'; -const positionCss: React.CSSProperties['position'] = 'fixed'; +const positionCss: CSSProperties['position'] = 'fixed'; export const spinnerStyles = { position: positionCss, right: '0.5rem' }; export const tooltipStyles = { @@ -13,7 +14,7 @@ export const tooltipStyles = { export const errorTooltipPosition = 'top'; -export const overlayStyles: React.CSSProperties = { +export const overlayStyles: CSSProperties = { display: 'flex', flexDirection: 'column', alignItems: 'center', diff --git a/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx b/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx index 6a3795e6a2..ed7eab478d 100644 --- a/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx +++ b/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx @@ -10,7 +10,7 @@ import { MenuItemType } from 'antd/es/menu/hooks/useItems'; import Spinner from 'components/Spinner'; import useComponentPermission from 'hooks/useComponentPermission'; import history from 'lib/history'; -import React, { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { UseQueryResult } from 'react-query'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx index 135fcacacc..d299e01e7e 100644 --- a/frontend/src/container/GridGraphLayout/index.tsx +++ b/frontend/src/container/GridGraphLayout/index.tsx @@ -3,11 +3,17 @@ import updateDashboardApi from 'api/dashboard/update'; import useComponentPermission from 'hooks/useComponentPermission'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useCallback, useEffect, useState } from 'react'; +import { + Dispatch, + SetStateAction, + useCallback, + useEffect, + useState, +} from 'react'; import { Layout } from 'react-grid-layout'; import { useTranslation } from 'react-i18next'; import { connect, useDispatch, useSelector } from 'react-redux'; -import { bindActionCreators, Dispatch } from 'redux'; +import { bindActionCreators, Dispatch as ReduxDispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; import { AppDispatch } from 'store'; import { UpdateTimeInterval } from 'store/actions'; @@ -66,7 +72,7 @@ function GridGraph(props: Props): JSX.Element { const [selectedDashboard] = dashboards; const { data } = selectedDashboard; const { widgets } = data; - const dispatch: AppDispatch = useDispatch>(); + const dispatch: AppDispatch = useDispatch>(); const [layouts, setLayout] = useState( getPreLayouts(widgets, selectedDashboard.data.layout || []), @@ -336,7 +342,7 @@ function GridGraph(props: Props): JSX.Element { } interface ComponentProps { - setLayout: React.Dispatch>; + setLayout: Dispatch>; } export interface LayoutProps extends Layout { @@ -353,7 +359,7 @@ export interface State { interface DispatchProps { toggleAddWidget: ( props: ToggleAddWidgetProps, - ) => (dispatch: Dispatch) => void; + ) => (dispatch: ReduxDispatch) => void; } const mapDispatchToProps = ( diff --git a/frontend/src/container/Header/CurrentOrganization/index.tsx b/frontend/src/container/Header/CurrentOrganization/index.tsx index 7b32c3f913..dcf001c024 100644 --- a/frontend/src/container/Header/CurrentOrganization/index.tsx +++ b/frontend/src/container/Header/CurrentOrganization/index.tsx @@ -4,7 +4,6 @@ import { INVITE_MEMBERS_HASH } from 'constants/app'; import ROUTES from 'constants/routes'; import useComponentPermission from 'hooks/useComponentPermission'; import history from 'lib/history'; -import React from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import AppReducer from 'types/reducer/app'; diff --git a/frontend/src/container/Header/ManageLicense/index.tsx b/frontend/src/container/Header/ManageLicense/index.tsx index 3eb4374f26..377af48103 100644 --- a/frontend/src/container/Header/ManageLicense/index.tsx +++ b/frontend/src/container/Header/ManageLicense/index.tsx @@ -2,7 +2,6 @@ import { Spin, Typography } from 'antd'; import ROUTES from 'constants/routes'; import useLicense, { LICENSE_PLAN_KEY } from 'hooks/useLicense'; import history from 'lib/history'; -import React from 'react'; import { FreePlanIcon, diff --git a/frontend/src/container/Header/SignedIn/index.tsx b/frontend/src/container/Header/SignedIn/index.tsx index b1804ea93a..33caab1670 100644 --- a/frontend/src/container/Header/SignedIn/index.tsx +++ b/frontend/src/container/Header/SignedIn/index.tsx @@ -1,7 +1,7 @@ import { Avatar, Typography } from 'antd'; import ROUTES from 'constants/routes'; import history from 'lib/history'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import AppReducer from 'types/reducer/app'; diff --git a/frontend/src/container/Header/index.tsx b/frontend/src/container/Header/index.tsx index d00bbca901..8b906eab74 100644 --- a/frontend/src/container/Header/index.tsx +++ b/frontend/src/container/Header/index.tsx @@ -8,8 +8,9 @@ import { Logout } from 'api/utils'; import ROUTES from 'constants/routes'; import Config from 'container/ConfigDropdown'; import { useIsDarkMode, useThemeMode } from 'hooks/useDarkMode'; -import React, { +import { Dispatch, + KeyboardEvent, SetStateAction, useCallback, useMemo, @@ -49,14 +50,11 @@ function HeaderContainer(): JSX.Element { [], ); - const onLogoutKeyDown = useCallback( - (e: React.KeyboardEvent) => { - if (e.key === 'Enter' || e.key === 'Space') { - Logout(); - } - }, - [], - ); + const onLogoutKeyDown = useCallback((e: KeyboardEvent) => { + if (e.key === 'Enter' || e.key === 'Space') { + Logout(); + } + }, []); const menu: MenuProps = useMemo( () => ({ diff --git a/frontend/src/container/Licenses/ApplyLicenseForm.tsx b/frontend/src/container/Licenses/ApplyLicenseForm.tsx index e575615e4f..e16569988a 100644 --- a/frontend/src/container/Licenses/ApplyLicenseForm.tsx +++ b/frontend/src/container/Licenses/ApplyLicenseForm.tsx @@ -1,7 +1,7 @@ import { Button, Form, Input } from 'antd'; import apply from 'api/licenses/apply'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { QueryObserverResult, RefetchOptions } from 'react-query'; import { useSelector } from 'react-redux'; diff --git a/frontend/src/container/Licenses/ListLicenses.tsx b/frontend/src/container/Licenses/ListLicenses.tsx index 950eabdfc3..d0ca5f0782 100644 --- a/frontend/src/container/Licenses/ListLicenses.tsx +++ b/frontend/src/container/Licenses/ListLicenses.tsx @@ -1,6 +1,5 @@ import { ColumnsType } from 'antd/lib/table'; import { ResizeTable } from 'components/ResizeTable'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { License } from 'types/api/licenses/def'; import { PayloadProps } from 'types/api/licenses/getAll'; diff --git a/frontend/src/container/Licenses/index.tsx b/frontend/src/container/Licenses/index.tsx index be4f9d363d..b4d068d908 100644 --- a/frontend/src/container/Licenses/index.tsx +++ b/frontend/src/container/Licenses/index.tsx @@ -1,7 +1,6 @@ import { Tabs, Typography } from 'antd'; import Spinner from 'components/Spinner'; import useLicense from 'hooks/useLicense'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import ApplyLicenseForm from './ApplyLicenseForm'; diff --git a/frontend/src/container/ListAlertRules/DeleteAlert.tsx b/frontend/src/container/ListAlertRules/DeleteAlert.tsx index 83d8badf2d..8f960b6ba7 100644 --- a/frontend/src/container/ListAlertRules/DeleteAlert.tsx +++ b/frontend/src/container/ListAlertRules/DeleteAlert.tsx @@ -1,7 +1,7 @@ import { NotificationInstance } from 'antd/es/notification/interface'; import deleteAlerts from 'api/alerts/delete'; import { State } from 'hooks/useFetch'; -import React, { useState } from 'react'; +import { Dispatch, SetStateAction, useState } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { PayloadProps as DeleteAlertPayloadProps } from 'types/api/alerts/delete'; @@ -109,7 +109,7 @@ function DeleteAlert({ interface DeleteAlertProps { id: GettableAlert['id']; - setData: React.Dispatch>; + setData: Dispatch>; notifications: NotificationInstance; } diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index a544899acd..6d02cae58b 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -9,7 +9,7 @@ import useComponentPermission from 'hooks/useComponentPermission'; import useInterval from 'hooks/useInterval'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { UseQueryResult } from 'react-query'; import { useSelector } from 'react-redux'; diff --git a/frontend/src/container/ListAlertRules/TableComponents/Status.tsx b/frontend/src/container/ListAlertRules/TableComponents/Status.tsx index d935b8d5ba..94e56723af 100644 --- a/frontend/src/container/ListAlertRules/TableComponents/Status.tsx +++ b/frontend/src/container/ListAlertRules/TableComponents/Status.tsx @@ -1,5 +1,4 @@ import { Tag } from 'antd'; -import React from 'react'; import { GettableAlert } from 'types/api/alerts/get'; function Status({ status }: StatusProps): JSX.Element { diff --git a/frontend/src/container/ListAlertRules/ToggleAlertState.tsx b/frontend/src/container/ListAlertRules/ToggleAlertState.tsx index 5410159226..edb894abe8 100644 --- a/frontend/src/container/ListAlertRules/ToggleAlertState.tsx +++ b/frontend/src/container/ListAlertRules/ToggleAlertState.tsx @@ -1,7 +1,7 @@ import patchAlert from 'api/alerts/patch'; import { State } from 'hooks/useFetch'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useState } from 'react'; +import { Dispatch, SetStateAction, useState } from 'react'; import { GettableAlert } from 'types/api/alerts/get'; import { PayloadProps as PatchPayloadProps } from 'types/api/alerts/patch'; @@ -104,7 +104,7 @@ function ToggleAlertState({ interface ToggleAlertStateProps { id: GettableAlert['id']; disabled: boolean; - setData: React.Dispatch>; + setData: Dispatch>; } export default ToggleAlertState; diff --git a/frontend/src/container/ListAlertRules/index.tsx b/frontend/src/container/ListAlertRules/index.tsx index 078769141e..3880a7c2e6 100644 --- a/frontend/src/container/ListAlertRules/index.tsx +++ b/frontend/src/container/ListAlertRules/index.tsx @@ -3,7 +3,7 @@ import getAll from 'api/alerts/getAll'; import ReleaseNote from 'components/ReleaseNote'; import Spinner from 'components/Spinner'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useLocation } from 'react-router-dom'; diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx index c23e8d1d5a..b737f7d0f9 100644 --- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx +++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx @@ -7,7 +7,7 @@ import ROUTES from 'constants/routes'; import { MESSAGE } from 'hooks/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { generatePath } from 'react-router-dom'; diff --git a/frontend/src/container/ListOfDashboard/SearchFilter/QueryChip.tsx b/frontend/src/container/ListOfDashboard/SearchFilter/QueryChip.tsx index 04825b7a81..5405660523 100644 --- a/frontend/src/container/ListOfDashboard/SearchFilter/QueryChip.tsx +++ b/frontend/src/container/ListOfDashboard/SearchFilter/QueryChip.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { QueryChipContainer, QueryChipItem } from './styles'; import { IQueryStructure } from './types'; diff --git a/frontend/src/container/ListOfDashboard/SearchFilter/index.tsx b/frontend/src/container/ListOfDashboard/SearchFilter/index.tsx index b8e16cd4db..eeddb1b6f3 100644 --- a/frontend/src/container/ListOfDashboard/SearchFilter/index.tsx +++ b/frontend/src/container/ListOfDashboard/SearchFilter/index.tsx @@ -4,7 +4,13 @@ import { Button, Select } from 'antd'; import { RefSelectProps } from 'antd/lib/select'; import history from 'lib/history'; import { filter, map } from 'lodash-es'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { + MutableRefObject, + useCallback, + useEffect, + useRef, + useState, +} from 'react'; import { Dashboard } from 'types/api/dashboard/getAll'; import { v4 as uuidv4 } from 'uuid'; @@ -31,7 +37,7 @@ function SearchFilter({ const [optionsData, setOptionsData] = useState( OptionsSchemas.attribute, ); - const selectRef = useRef() as React.MutableRefObject; + const selectRef = useRef() as MutableRefObject; const [selectedValues, setSelectedValues] = useState([]); const [staging, setStaging] = useState([]); const [queries, setQueries] = useState([]); diff --git a/frontend/src/container/ListOfDashboard/TableComponents/CreatedBy.tsx b/frontend/src/container/ListOfDashboard/TableComponents/CreatedBy.tsx index faa5d45e32..d463f80c03 100644 --- a/frontend/src/container/ListOfDashboard/TableComponents/CreatedBy.tsx +++ b/frontend/src/container/ListOfDashboard/TableComponents/CreatedBy.tsx @@ -1,7 +1,6 @@ import { Typography } from 'antd'; import convertDateToAmAndPm from 'lib/convertDateToAmAndPm'; import getFormattedDate from 'lib/getFormatedDate'; -import React from 'react'; import { Data } from '..'; diff --git a/frontend/src/container/ListOfDashboard/TableComponents/Date.tsx b/frontend/src/container/ListOfDashboard/TableComponents/Date.tsx index 6b93b4b220..c96ac1ebf1 100644 --- a/frontend/src/container/ListOfDashboard/TableComponents/Date.tsx +++ b/frontend/src/container/ListOfDashboard/TableComponents/Date.tsx @@ -1,7 +1,6 @@ import { Typography } from 'antd'; import convertDateToAmAndPm from 'lib/convertDateToAmAndPm'; import getFormattedDate from 'lib/getFormatedDate'; -import React from 'react'; import { Data } from '..'; diff --git a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx index fd9ef16001..800dd8d1e6 100644 --- a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx +++ b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx @@ -1,6 +1,5 @@ import { ExclamationCircleOutlined } from '@ant-design/icons'; import { Modal } from 'antd'; -import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; diff --git a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx index e54431063f..af53580926 100644 --- a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx +++ b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx @@ -1,6 +1,5 @@ import ROUTES from 'constants/routes'; import history from 'lib/history'; -import React from 'react'; import { generatePath } from 'react-router-dom'; import { Data } from '..'; diff --git a/frontend/src/container/ListOfDashboard/TableComponents/Tags.tsx b/frontend/src/container/ListOfDashboard/TableComponents/Tags.tsx index 40ecbe7c65..bc698487d2 100644 --- a/frontend/src/container/ListOfDashboard/TableComponents/Tags.tsx +++ b/frontend/src/container/ListOfDashboard/TableComponents/Tags.tsx @@ -1,6 +1,5 @@ /* eslint-disable react/destructuring-assignment */ import { Tag } from 'antd'; -import React from 'react'; import { Data } from '../index'; diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx index fe96ca4bfd..9a91d72331 100644 --- a/frontend/src/container/ListOfDashboard/index.tsx +++ b/frontend/src/container/ListOfDashboard/index.tsx @@ -16,8 +16,9 @@ import ROUTES from 'constants/routes'; import SearchFilter from 'container/ListOfDashboard/SearchFilter'; import useComponentPermission from 'hooks/useComponentPermission'; import history from 'lib/history'; -import React, { +import { Dispatch, + Key, useCallback, useEffect, useMemo, @@ -308,7 +309,7 @@ function ListOfAllDashboard(): JSX.Element { } export interface Data { - key: React.Key; + key: Key; name: string; description: string; tags: string[]; diff --git a/frontend/src/container/LogControls/index.tsx b/frontend/src/container/LogControls/index.tsx index 41bfeafb53..f688e2866f 100644 --- a/frontend/src/container/LogControls/index.tsx +++ b/frontend/src/container/LogControls/index.tsx @@ -7,7 +7,7 @@ import { Button, Divider, Select } from 'antd'; import { getGlobalTime } from 'container/LogsSearchFilter/utils'; import { getMinMax } from 'container/TopNav/AutoRefresh/config'; import { defaultSelectStyle } from 'pages/Logs/config'; -import React, { memo, useMemo } from 'react'; +import { memo, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/LogDetailedView/ActionItem.tsx b/frontend/src/container/LogDetailedView/ActionItem.tsx index 10a7419bff..28e429d7e2 100644 --- a/frontend/src/container/LogDetailedView/ActionItem.tsx +++ b/frontend/src/container/LogDetailedView/ActionItem.tsx @@ -2,7 +2,7 @@ import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons'; import { Button, Col, Popover } from 'antd'; import getStep from 'lib/getStep'; import { generateFilterQuery } from 'lib/logs/generateFilterQuery'; -import React, { memo, useMemo } from 'react'; +import { memo, useMemo } from 'react'; import { connect, useDispatch, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; diff --git a/frontend/src/container/LogDetailedView/JsonView.tsx b/frontend/src/container/LogDetailedView/JsonView.tsx index 95e5c558a1..e510d46d10 100644 --- a/frontend/src/container/LogDetailedView/JsonView.tsx +++ b/frontend/src/container/LogDetailedView/JsonView.tsx @@ -2,7 +2,7 @@ import { blue } from '@ant-design/colors'; import { CopyFilled } from '@ant-design/icons'; import { Button, Row } from 'antd'; import Editor from 'components/Editor'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useCopyToClipboard } from 'react-use'; import { ILog } from 'types/api/logs/log'; diff --git a/frontend/src/container/LogDetailedView/TableView.tsx b/frontend/src/container/LogDetailedView/TableView.tsx index 003dac2e7c..4efc8f73a9 100644 --- a/frontend/src/container/LogDetailedView/TableView.tsx +++ b/frontend/src/container/LogDetailedView/TableView.tsx @@ -11,7 +11,7 @@ import flatten from 'flat'; import history from 'lib/history'; import { fieldSearchFilter } from 'lib/logs/fieldSearch'; import { isEmpty } from 'lodash-es'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { useDispatch } from 'react-redux'; import { generatePath } from 'react-router-dom'; import { Dispatch } from 'redux'; diff --git a/frontend/src/container/LogDetailedView/index.tsx b/frontend/src/container/LogDetailedView/index.tsx index 98ab0909a4..47f0982448 100644 --- a/frontend/src/container/LogDetailedView/index.tsx +++ b/frontend/src/container/LogDetailedView/index.tsx @@ -1,5 +1,4 @@ import { Drawer, Tabs } from 'antd'; -import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/LogLiveTail/index.tsx b/frontend/src/container/LogLiveTail/index.tsx index 1139342a9d..08faeda94c 100644 --- a/frontend/src/container/LogLiveTail/index.tsx +++ b/frontend/src/container/LogLiveTail/index.tsx @@ -11,7 +11,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode'; import { useNotifications } from 'hooks/useNotifications'; import getStep from 'lib/getStep'; import { throttle } from 'lodash-es'; -import React, { useCallback, useEffect, useMemo, useRef } from 'react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; import { connect, useDispatch, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; diff --git a/frontend/src/container/Login/index.tsx b/frontend/src/container/Login/index.tsx index cb9775fbe8..e76f902820 100644 --- a/frontend/src/container/Login/index.tsx +++ b/frontend/src/container/Login/index.tsx @@ -6,7 +6,7 @@ import afterLogin from 'AppRoutes/utils'; import ROUTES from 'constants/routes'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { PayloadProps as PrecheckResultType } from 'types/api/user/loginPrecheck'; diff --git a/frontend/src/container/LogsAggregate/index.tsx b/frontend/src/container/LogsAggregate/index.tsx index c1217c0e46..9dc0871129 100644 --- a/frontend/src/container/LogsAggregate/index.tsx +++ b/frontend/src/container/LogsAggregate/index.tsx @@ -4,7 +4,7 @@ import Spinner from 'components/Spinner'; import dayjs from 'dayjs'; import useInterval from 'hooks/useInterval'; import getStep from 'lib/getStep'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { connect, useSelector } from 'react-redux'; import { bindActionCreators } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; diff --git a/frontend/src/container/LogsFilters/FieldItem.tsx b/frontend/src/container/LogsFilters/FieldItem.tsx index a62b16d1fc..dd788e8671 100644 --- a/frontend/src/container/LogsFilters/FieldItem.tsx +++ b/frontend/src/container/LogsFilters/FieldItem.tsx @@ -1,7 +1,7 @@ import { LoadingOutlined } from '@ant-design/icons'; import { Button, Popover, Spin, Typography } from 'antd'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { useCallback, useMemo, useState } from 'react'; +import { ReactNode, useCallback, useMemo, useState } from 'react'; import { IField, IInterestingFields, @@ -70,7 +70,7 @@ function FieldItem({ interface FieldItemProps { name: string; - buttonIcon: React.ReactNode; + buttonIcon: ReactNode; buttonOnClick: (props: { fieldData: IInterestingFields | ISelectedFields; fieldIndex: number; diff --git a/frontend/src/container/LogsFilters/index.tsx b/frontend/src/container/LogsFilters/index.tsx index 26c3bd739a..1980e4f115 100644 --- a/frontend/src/container/LogsFilters/index.tsx +++ b/frontend/src/container/LogsFilters/index.tsx @@ -2,7 +2,7 @@ import { CloseOutlined, PlusCircleFilled } from '@ant-design/icons'; import { Col, Input } from 'antd'; import CategoryHeading from 'components/Logs/CategoryHeading'; import { fieldSearchFilter } from 'lib/logs/fieldSearch'; -import React, { useCallback, useState } from 'react'; +import { ChangeEvent, useCallback, useState } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { ILogsReducer } from 'types/reducer/logs'; @@ -24,7 +24,7 @@ function LogsFilters(): JSX.Element { >([]); const [filterValuesInput, setFilterValuesInput] = useState(''); - const handleSearch = (e: React.ChangeEvent): void => { + const handleSearch = (e: ChangeEvent): void => { setFilterValuesInput((e.target as HTMLInputElement).value); }; diff --git a/frontend/src/container/LogsFilters/types.ts b/frontend/src/container/LogsFilters/types.ts index ece94aeaec..a062701e2a 100644 --- a/frontend/src/container/LogsFilters/types.ts +++ b/frontend/src/container/LogsFilters/types.ts @@ -1,10 +1,11 @@ +import { SetStateAction } from 'react'; import { IField, IInterestingFields, ISelectedFields, } from 'types/api/logs/fields'; -type SetLoading = (value: React.SetStateAction) => void; +type SetLoading = (value: SetStateAction) => void; export type IHandleInterestProps = { fieldData: IInterestingFields; diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx index 05ba17b8f6..1c223fb721 100644 --- a/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx +++ b/frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx @@ -1,5 +1,4 @@ import { Button, Row } from 'antd'; -import React from 'react'; interface SearchFieldsActionBarProps { applyUpdate: VoidFunction; diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/FieldKey.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/FieldKey.tsx index f454267cd7..eac4f1302d 100644 --- a/frontend/src/container/LogsSearchFilter/SearchFields/FieldKey.tsx +++ b/frontend/src/container/LogsSearchFilter/SearchFields/FieldKey.tsx @@ -1,5 +1,4 @@ import { Typography } from 'antd'; -import React from 'react'; interface FieldKeyProps { name: string; diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx index 9aff0b6dd7..4b01ba02e2 100644 --- a/frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx +++ b/frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx @@ -6,7 +6,7 @@ import { QueryOperatorsMultiVal, QueryOperatorsSingleVal, } from 'lib/logql/tokens'; -import React, { useCallback, useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { ILogsReducer } from 'types/reducer/logs'; diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/Suggestions.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/Suggestions.tsx index 56255d1ed1..dccb4c0c1b 100644 --- a/frontend/src/container/LogsSearchFilter/SearchFields/Suggestions.tsx +++ b/frontend/src/container/LogsSearchFilter/SearchFields/Suggestions.tsx @@ -1,7 +1,6 @@ import { Button } from 'antd'; import CategoryHeading from 'components/Logs/CategoryHeading'; import map from 'lodash-es/map'; -import React from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; // import { ADD_SEARCH_FIELD_QUERY_STRING } from 'types/actions/logs'; diff --git a/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx b/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx index 07662da8e2..2630f65a4b 100644 --- a/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx +++ b/frontend/src/container/LogsSearchFilter/SearchFields/index.tsx @@ -1,7 +1,7 @@ import { useNotifications } from 'hooks/useNotifications'; import { reverseParser } from 'lib/logql'; import { flatten } from 'lodash-es'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { ILogsReducer } from 'types/reducer/logs'; diff --git a/frontend/src/container/LogsSearchFilter/index.tsx b/frontend/src/container/LogsSearchFilter/index.tsx index efe7a39534..d3de26658b 100644 --- a/frontend/src/container/LogsSearchFilter/index.tsx +++ b/frontend/src/container/LogsSearchFilter/index.tsx @@ -2,14 +2,7 @@ import { Input, InputRef, Popover } from 'antd'; import useUrlQuery from 'hooks/useUrlQuery'; import getStep from 'lib/getStep'; import debounce from 'lodash-es/debounce'; -import React, { - memo, - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { connect, useDispatch, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; diff --git a/frontend/src/container/LogsTable/index.tsx b/frontend/src/container/LogsTable/index.tsx index 2b0013035d..464258877e 100644 --- a/frontend/src/container/LogsTable/index.tsx +++ b/frontend/src/container/LogsTable/index.tsx @@ -6,7 +6,7 @@ import LogsTableView from 'components/Logs/TableView'; import Spinner from 'components/Spinner'; import { contentStyle } from 'container/Trace/Search/config'; import useFontFaceObserver from 'hooks/useFontObserver'; -import React, { memo, useCallback, useMemo } from 'react'; +import { memo, useCallback, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { Virtuoso } from 'react-virtuoso'; // interfaces diff --git a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx index 8ae0033d4b..ca4c374125 100644 --- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx @@ -9,7 +9,7 @@ import { convertRawQueriesToTraceSelectedTags, resourceAttributesToTagFilterItems, } from 'hooks/useResourceAttribute/utils'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { useParams } from 'react-router-dom'; import { Widgets } from 'types/api/dashboard/getAll'; import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData'; diff --git a/frontend/src/container/MetricsApplication/Tabs/External.tsx b/frontend/src/container/MetricsApplication/Tabs/External.tsx index 3a234143ef..1a4a511653 100644 --- a/frontend/src/container/MetricsApplication/Tabs/External.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/External.tsx @@ -11,7 +11,7 @@ import { convertRawQueriesToTraceSelectedTags, resourceAttributesToTagFilterItems, } from 'hooks/useResourceAttribute/utils'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { useParams } from 'react-router-dom'; import { Widgets } from 'types/api/dashboard/getAll'; import { EQueryType } from 'types/common/dashboard'; diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx index eedabe262b..3fb81df2e0 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx @@ -13,7 +13,7 @@ import { import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond'; import { colors } from 'lib/getRandomColor'; import history from 'lib/history'; -import React, { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useLocation, useParams } from 'react-router-dom'; import { UpdateTimeInterval } from 'store/actions'; diff --git a/frontend/src/container/MetricsApplication/Tabs/util.ts b/frontend/src/container/MetricsApplication/Tabs/util.ts index 313ac6e082..b33bbf0767 100644 --- a/frontend/src/container/MetricsApplication/Tabs/util.ts +++ b/frontend/src/container/MetricsApplication/Tabs/util.ts @@ -4,6 +4,7 @@ import ROUTES from 'constants/routes'; import { routeConfig } from 'container/SideNav/config'; import { getQueryString } from 'container/SideNav/helper'; import history from 'lib/history'; +import { Dispatch, SetStateAction } from 'react'; import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData'; import { Tags } from 'types/reducer/trace'; @@ -50,9 +51,7 @@ export function onViewTracePopupClick({ } export function onGraphClickHandler( - setSelectedTimeStamp: ( - n: number, - ) => void | React.Dispatch>, + setSelectedTimeStamp: (n: number) => void | Dispatch>, ) { return async ( event: ChartEvent, diff --git a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx index 3fdfdc84d2..540bc0d546 100644 --- a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx +++ b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx @@ -6,7 +6,6 @@ import ROUTES from 'constants/routes'; import useResourceAttribute from 'hooks/useResourceAttribute'; import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils'; import history from 'lib/history'; -import React from 'react'; import { useSelector } from 'react-redux'; import { useParams } from 'react-router-dom'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/MetricsApplication/index.tsx b/frontend/src/container/MetricsApplication/index.tsx index 0e189fb1bd..e0d76100ec 100644 --- a/frontend/src/container/MetricsApplication/index.tsx +++ b/frontend/src/container/MetricsApplication/index.tsx @@ -1,7 +1,7 @@ import RouteTab from 'components/RouteTab'; import ROUTES from 'constants/routes'; import ResourceAttributesFilter from 'container/ResourceAttributesFilter'; -import React, { memo } from 'react'; +import { memo } from 'react'; import { generatePath, useParams } from 'react-router-dom'; import { useLocation } from 'react-use'; diff --git a/frontend/src/container/MetricsTable/Metrics.test.tsx b/frontend/src/container/MetricsTable/Metrics.test.tsx index b81a9533b7..74239c19f7 100644 --- a/frontend/src/container/MetricsTable/Metrics.test.tsx +++ b/frontend/src/container/MetricsTable/Metrics.test.tsx @@ -1,5 +1,5 @@ import { render, RenderResult, screen, waitFor } from '@testing-library/react'; -import React from 'react'; +import { ReactElement } from 'react'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; import { @@ -18,7 +18,7 @@ const rootReducer = combineReducers({ const mockStore = createStore(rootReducer); const renderWithReduxAndRouter = (mockStore: Store) => ( - component: React.ReactElement, + component: ReactElement, ): RenderResult => render( diff --git a/frontend/src/container/MetricsTable/SkipOnBoardModal/index.tsx b/frontend/src/container/MetricsTable/SkipOnBoardModal/index.tsx index 2018d49a9d..aedc3d4e43 100644 --- a/frontend/src/container/MetricsTable/SkipOnBoardModal/index.tsx +++ b/frontend/src/container/MetricsTable/SkipOnBoardModal/index.tsx @@ -1,6 +1,5 @@ import { Button, Typography } from 'antd'; import Modal from 'components/Modal'; -import React from 'react'; function SkipOnBoardingModal({ onContinueClick }: Props): JSX.Element { return ( diff --git a/frontend/src/container/MetricsTable/index.tsx b/frontend/src/container/MetricsTable/index.tsx index 6e9b74f88a..9fee92c811 100644 --- a/frontend/src/container/MetricsTable/index.tsx +++ b/frontend/src/container/MetricsTable/index.tsx @@ -13,7 +13,7 @@ import { SKIP_ONBOARDING } from 'constants/onboarding'; import ROUTES from 'constants/routes'; import { routeConfig } from 'container/SideNav/config'; import { getQueryString } from 'container/SideNav/helper'; -import React, { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { useSelector } from 'react-redux'; import { Link, useLocation } from 'react-router-dom'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/MySettings/Password/index.tsx b/frontend/src/container/MySettings/Password/index.tsx index 1d810de6cb..33b8f9c5f2 100644 --- a/frontend/src/container/MySettings/Password/index.tsx +++ b/frontend/src/container/MySettings/Password/index.tsx @@ -2,7 +2,7 @@ import { Button, Space, Typography } from 'antd'; import changeMyPassword from 'api/user/changeMyPassword'; import { useNotifications } from 'hooks/useNotifications'; import { isPasswordNotValidMessage, isPasswordValid } from 'pages/SignUp/utils'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/MySettings/UpdateName/index.tsx b/frontend/src/container/MySettings/UpdateName/index.tsx index df20b7141d..6da15a237a 100644 --- a/frontend/src/container/MySettings/UpdateName/index.tsx +++ b/frontend/src/container/MySettings/UpdateName/index.tsx @@ -1,7 +1,7 @@ import { Button, Space, Typography } from 'antd'; import editUser from 'api/user/editUser'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/frontend/src/container/MySettings/index.tsx b/frontend/src/container/MySettings/index.tsx index 7ce9e02e42..f0938e6440 100644 --- a/frontend/src/container/MySettings/index.tsx +++ b/frontend/src/container/MySettings/index.tsx @@ -1,5 +1,4 @@ import { Space, Typography } from 'antd'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import Password from './Password'; diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx index c7936db261..3051fa07c3 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx +++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx @@ -3,7 +3,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useCallback } from 'react'; +import { CSSProperties, useCallback } from 'react'; import { connect, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; @@ -54,7 +54,7 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element { [data, toggleAddWidget, notifications], ); const isDarkMode = useIsDarkMode(); - const fillColor: React.CSSProperties['color'] = isDarkMode ? 'white' : 'black'; + const fillColor: CSSProperties['color'] = isDarkMode ? 'white' : 'black'; return ( diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts index d5804e3b3d..5395b491a3 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts +++ b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts @@ -1,6 +1,7 @@ import TimeSeries from 'assets/Dashboard/TimeSeries'; import ValueIcon from 'assets/Dashboard/Value'; import { PANEL_TYPES } from 'constants/queryBuilder'; +import { CSSProperties } from 'react'; const Items: ItemsProps[] = [ { @@ -24,7 +25,7 @@ interface ItemsProps { } interface IconProps { - fillColor: React.CSSProperties['color']; + fillColor: CSSProperties['color']; } export default Items; diff --git a/frontend/src/container/NewDashboard/DashboardSettings/General/AddTags/index.tsx b/frontend/src/container/NewDashboard/DashboardSettings/General/AddTags/index.tsx index b7e2caf881..15b89f4b8e 100644 --- a/frontend/src/container/NewDashboard/DashboardSettings/General/AddTags/index.tsx +++ b/frontend/src/container/NewDashboard/DashboardSettings/General/AddTags/index.tsx @@ -1,7 +1,7 @@ import { PlusOutlined } from '@ant-design/icons'; import { Col, Tooltip, Typography } from 'antd'; import Input from 'components/Input'; -import React, { useState } from 'react'; +import { Dispatch, SetStateAction, useState } from 'react'; import { InputContainer, NewTagContainer, TagsContainer } from './styles'; @@ -38,7 +38,7 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element { const onChangeHandler = ( value: string, - func: React.Dispatch>, + func: Dispatch>, ): void => { func(value); }; @@ -113,7 +113,7 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element { interface AddTagsProps { tags: string[]; - setTags: React.Dispatch>; + setTags: Dispatch>; } export default AddTags; diff --git a/frontend/src/container/NewDashboard/DashboardSettings/General/Description/index.tsx b/frontend/src/container/NewDashboard/DashboardSettings/General/Description/index.tsx index aad663d7a3..849ad8791f 100644 --- a/frontend/src/container/NewDashboard/DashboardSettings/General/Description/index.tsx +++ b/frontend/src/container/NewDashboard/DashboardSettings/General/Description/index.tsx @@ -1,5 +1,5 @@ import { Input } from 'antd'; -import React, { useCallback } from 'react'; +import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react'; import { Container } from './styles'; @@ -10,7 +10,7 @@ function Description({ setDescription, }: DescriptionProps): JSX.Element { const onChangeHandler = useCallback( - (e: React.ChangeEvent) => { + (e: ChangeEvent) => { setDescription(e.target.value); }, [setDescription], @@ -29,7 +29,7 @@ function Description({ interface DescriptionProps { description: string; - setDescription: React.Dispatch>; + setDescription: Dispatch>; } export default Description; diff --git a/frontend/src/container/NewDashboard/DashboardSettings/General/index.tsx b/frontend/src/container/NewDashboard/DashboardSettings/General/index.tsx index 4a8fce57a2..a8f1892fa4 100644 --- a/frontend/src/container/NewDashboard/DashboardSettings/General/index.tsx +++ b/frontend/src/container/NewDashboard/DashboardSettings/General/index.tsx @@ -1,7 +1,7 @@ import { SaveOutlined } from '@ant-design/icons'; import { Col, Divider, Input, Space, Typography } from 'antd'; import AddTags from 'container/NewDashboard/DashboardSettings/General/AddTags'; -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { connect, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; diff --git a/frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx index 80b77283aa..05802a9b9e 100644 --- a/frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx +++ b/frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx @@ -15,7 +15,7 @@ import Editor from 'components/Editor'; import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser'; import sortValues from 'lib/dashbaordVariables/sortVariableValues'; import { map } from 'lodash-es'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { IDashboardVariable, TSortVariableValuesType, diff --git a/frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx b/frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx index 9ca7c6fb83..3f90bf565b 100644 --- a/frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx +++ b/frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx @@ -4,7 +4,7 @@ import { Button, Modal, Row, Space, Tag } from 'antd'; import { NotificationInstance } from 'antd/es/notification/interface'; import { ResizeTable } from 'components/ResizeTable'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; diff --git a/frontend/src/container/NewDashboard/DashboardSettings/index.tsx b/frontend/src/container/NewDashboard/DashboardSettings/index.tsx index 40176c3d1e..50a69495fa 100644 --- a/frontend/src/container/NewDashboard/DashboardSettings/index.tsx +++ b/frontend/src/container/NewDashboard/DashboardSettings/index.tsx @@ -1,5 +1,4 @@ import { Tabs } from 'antd'; -import React from 'react'; import GeneralDashboardSettings from './General'; import VariablesSetting from './Variables'; diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx index 148591c568..7543821b60 100644 --- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx +++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom/extend-expect'; import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; +import React, { useEffect } from 'react'; import { IDashboardVariable } from 'types/api/dashboard/getAll'; import VariableItem from './VariableItem'; @@ -130,7 +130,7 @@ describe('VariableItem', () => { />, ); - expect(React.useEffect).toHaveBeenCalled(); + expect(useEffect).toHaveBeenCalled(); }); test('calls useEffect only once when the component mounts', () => { diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx index a20e60f1a5..ef85297d92 100644 --- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx +++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx @@ -5,7 +5,7 @@ import query from 'api/dashboard/variables/query'; import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser'; import sortValues from 'lib/dashbaordVariables/sortVariableValues'; import map from 'lodash-es/map'; -import React, { memo, useCallback, useEffect, useState } from 'react'; +import { memo, useCallback, useEffect, useState } from 'react'; import { IDashboardVariable } from 'types/api/dashboard/getAll'; import { variablePropsToPayloadVariables } from '../utils'; diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/index.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/index.tsx index 9652782fd5..67d961f5c9 100644 --- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/index.tsx +++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/index.tsx @@ -2,7 +2,7 @@ import { Row } from 'antd'; import { NotificationInstance } from 'antd/es/notification/interface'; import { useNotifications } from 'hooks/useNotifications'; import { map, sortBy } from 'lodash-es'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; diff --git a/frontend/src/container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard/index.tsx b/frontend/src/container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard/index.tsx index a8b8871190..32f78d7ec2 100644 --- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard/index.tsx +++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard/index.tsx @@ -1,12 +1,12 @@ import Input from 'components/Input'; -import React, { useCallback } from 'react'; +import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react'; function NameOfTheDashboard({ setName, name, }: NameOfTheDashboardProps): JSX.Element { const onChangeHandler = useCallback( - (e: React.ChangeEvent) => { + (e: ChangeEvent) => { setName(e.target.value); }, [setName], @@ -24,7 +24,7 @@ function NameOfTheDashboard({ interface NameOfTheDashboardProps { name: string; - setName: React.Dispatch>; + setName: Dispatch>; } export default NameOfTheDashboard; diff --git a/frontend/src/container/NewDashboard/DescriptionOfDashboard/SettingsDrawer.tsx b/frontend/src/container/NewDashboard/DescriptionOfDashboard/SettingsDrawer.tsx index b8f6617204..33af3bdb3a 100644 --- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/SettingsDrawer.tsx +++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/SettingsDrawer.tsx @@ -1,6 +1,6 @@ import { SettingOutlined } from '@ant-design/icons'; import { Button } from 'antd'; -import React, { useState } from 'react'; +import { useState } from 'react'; import DashboardSettingsContent from '../DashboardSettings'; import { DrawerContainer } from './styles'; diff --git a/frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx b/frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx index 6e5bd00e9f..51d83b23a3 100644 --- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx +++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx @@ -1,7 +1,7 @@ import { Button, Modal, Typography } from 'antd'; import Editor from 'components/Editor'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useCopyToClipboard } from 'react-use'; import { DashboardData } from 'types/api/dashboard/getAll'; diff --git a/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx b/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx index c1a98cce8f..2faafd7cbb 100644 --- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx +++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx @@ -1,7 +1,7 @@ import { ShareAltOutlined } from '@ant-design/icons'; import { Button, Card, Col, Row, Space, Tag, Typography } from 'antd'; import useComponentPermission from 'hooks/useComponentPermission'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/NewDashboard/GridGraphs/index.tsx b/frontend/src/container/NewDashboard/GridGraphs/index.tsx index 5436f43704..b6fb01700a 100644 --- a/frontend/src/container/NewDashboard/GridGraphs/index.tsx +++ b/frontend/src/container/NewDashboard/GridGraphs/index.tsx @@ -1,6 +1,5 @@ import GridGraphLayout from 'container/GridGraphLayout'; import ComponentsSlider from 'container/NewDashboard/ComponentsSlider'; -import React from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import DashboardReducer from 'types/reducer/dashboards'; diff --git a/frontend/src/container/NewDashboard/index.tsx b/frontend/src/container/NewDashboard/index.tsx index 8fbe49de84..5eff095c6f 100644 --- a/frontend/src/container/NewDashboard/index.tsx +++ b/frontend/src/container/NewDashboard/index.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import Description from './DescriptionOfDashboard'; import GridGraphs from './GridGraphs'; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/QueryHeader.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/QueryHeader.tsx index 6584cdc390..b6bc5a6f17 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/QueryHeader.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/QueryHeader.tsx @@ -6,7 +6,7 @@ import { RightOutlined, } from '@ant-design/icons'; import { Button, Row } from 'antd'; -import React, { useState } from 'react'; +import { ReactNode, useState } from 'react'; import { QueryWrapper } from '../styles'; @@ -15,7 +15,7 @@ interface IQueryHeaderProps { onDisable: VoidFunction; name: string; onDelete: VoidFunction; - children: React.ReactNode; + children: ReactNode; } function QueryHeader({ diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/index.tsx index 304289cc74..ac3d7b6d55 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/index.tsx @@ -1,7 +1,6 @@ import { PlusOutlined } from '@ant-design/icons'; import { ClickHouseQueryTemplate } from 'constants/dashboard'; import GetQueryName from 'lib/query/GetQueryName'; -import React from 'react'; import { Query } from 'types/api/dashboard/getAll'; import { EQueryType } from 'types/common/dashboard'; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx index 389b7e15c4..539a72e3a2 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx @@ -1,6 +1,5 @@ import { Input } from 'antd'; import MonacoEditor from 'components/Editor'; -import React from 'react'; import { IClickHouseQuery } from 'types/api/dashboard/getAll'; import QueryHeader from '../QueryHeader'; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/index.tsx index 6ea88e5be8..dde28d8af7 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/index.tsx @@ -1,7 +1,6 @@ import { PlusOutlined } from '@ant-design/icons'; import { PromQLQueryTemplate } from 'constants/dashboard'; import GetQueryName from 'lib/query/GetQueryName'; -import React from 'react'; import { IPromQLQuery, Query } from 'types/api/dashboard/getAll'; import { EQueryType } from 'types/common/dashboard'; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx index 6cffd55d8d..3781fc71de 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx @@ -1,5 +1,4 @@ import { Input } from 'antd'; -import React from 'react'; import { IPromQLQuery } from 'types/api/dashboard/getAll'; import QueryHeader from '../QueryHeader'; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx index 668a2c20fc..aac9518aca 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx @@ -4,7 +4,7 @@ import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { QueryBuilder } from 'container/QueryBuilder'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { cloneDeep } from 'lodash-es'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { bindActionCreators, Dispatch } from 'redux'; diff --git a/frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx b/frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx index 7c78bd78f4..d119bb7c27 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QueryTypeTag.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { EQueryType } from 'types/common/dashboard'; import { Tag } from '../styles'; diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx index 5103b262a3..6fc58de892 100644 --- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { EQueryType } from 'types/common/dashboard'; import QueryTypeTag from '../QueryTypeTag'; diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx index 8c06836b2d..3f9903264a 100644 --- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.tsx @@ -2,7 +2,6 @@ import { Card, Typography } from 'antd'; import GridGraphComponent from 'container/GridGraphComponent'; import { NewWidgetProps } from 'container/NewWidget'; import getChartData from 'lib/getChartData'; -import React from 'react'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx index 342599c49a..506916855d 100644 --- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx @@ -1,7 +1,7 @@ import { InfoCircleOutlined } from '@ant-design/icons'; import { Typography } from 'antd'; import { Card } from 'container/GridGraphLayout/styles'; -import React, { memo } from 'react'; +import { memo } from 'react'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/NewWidget/LeftContainer/index.tsx b/frontend/src/container/NewWidget/LeftContainer/index.tsx index 47c4237ea7..1a0fc25516 100644 --- a/frontend/src/container/NewWidget/LeftContainer/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/index.tsx @@ -1,4 +1,4 @@ -import React, { memo } from 'react'; +import { memo } from 'react'; import { NewWidgetProps } from '../index'; import QuerySection from './QuerySection'; diff --git a/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx b/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx index c93c2e8e20..b1cf81de7a 100644 --- a/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx +++ b/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx @@ -1,6 +1,6 @@ import { AutoComplete, Col, Input, Typography } from 'antd'; import { find } from 'lodash-es'; -import React from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { flattenedCategories } from './dataFormatCategories'; @@ -19,7 +19,7 @@ function YAxisUnitSelector({ fieldLabel, }: { defaultValue: string; - onSelect: React.Dispatch>; + onSelect: Dispatch>; fieldLabel: string; }): JSX.Element { const onSelectHandler = (selectedValue: string): void => { diff --git a/frontend/src/container/NewWidget/RightContainer/index.tsx b/frontend/src/container/NewWidget/RightContainer/index.tsx index a666a90753..0f9ab1c597 100644 --- a/frontend/src/container/NewWidget/RightContainer/index.tsx +++ b/frontend/src/container/NewWidget/RightContainer/index.tsx @@ -5,7 +5,7 @@ import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import GraphTypes, { ITEMS, } from 'container/NewDashboard/ComponentsSlider/menuItems'; -import React, { useCallback } from 'react'; +import { Dispatch, SetStateAction, useCallback } from 'react'; import { Container, Title } from './styles'; import { timePreferance } from './timeItems'; @@ -27,7 +27,7 @@ function RightContainer({ setGraphHandler, }: RightContainerProps): JSX.Element { const onChangeHandler = useCallback( - (setFunc: React.Dispatch>, value: string) => { + (setFunc: Dispatch>, value: string) => { setFunc(value); }, [], @@ -135,20 +135,20 @@ function RightContainer({ interface RightContainerProps { title: string; - setTitle: React.Dispatch>; + setTitle: Dispatch>; description: string; - setDescription: React.Dispatch>; + setDescription: Dispatch>; stacked: boolean; - setStacked: React.Dispatch>; + setStacked: Dispatch>; opacity: string; - setOpacity: React.Dispatch>; + setOpacity: Dispatch>; selectedNullZeroValue: string; - setSelectedNullZeroValue: React.Dispatch>; + setSelectedNullZeroValue: Dispatch>; selectedGraph: GRAPH_TYPES; - setSelectedTime: React.Dispatch>; + setSelectedTime: Dispatch>; selectedTime: timePreferance; yAxisUnit: string; - setYAxisUnit: React.Dispatch>; + setYAxisUnit: Dispatch>; setGraphHandler: (type: ITEMS) => void; } diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx index 8e71dc6bf3..a429a8eaa1 100644 --- a/frontend/src/container/NewWidget/index.tsx +++ b/frontend/src/container/NewWidget/index.tsx @@ -9,7 +9,7 @@ import { useNotifications } from 'hooks/useNotifications'; import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables'; import history from 'lib/history'; import { DashboardWidgetPageParams } from 'pages/DashboardWidget'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { connect, useDispatch, useSelector } from 'react-redux'; import { generatePath, useLocation, useParams } from 'react-router-dom'; import { bindActionCreators, Dispatch } from 'redux'; diff --git a/frontend/src/container/OrganizationSettings/AuthDomains/AddDomain/index.tsx b/frontend/src/container/OrganizationSettings/AuthDomains/AddDomain/index.tsx index b64c29b7e9..0c23824aed 100644 --- a/frontend/src/container/OrganizationSettings/AuthDomains/AddDomain/index.tsx +++ b/frontend/src/container/OrganizationSettings/AuthDomains/AddDomain/index.tsx @@ -6,7 +6,7 @@ import createDomainApi from 'api/SAML/postDomain'; import { FeatureKeys } from 'constants/features'; import useFeatureFlag from 'hooks/useFeatureFlag/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/OrganizationSettings/AuthDomains/Create/Row/index.tsx b/frontend/src/container/OrganizationSettings/AuthDomains/Create/Row/index.tsx index 96c5d0a2ef..25f939e1c0 100644 --- a/frontend/src/container/OrganizationSettings/AuthDomains/Create/Row/index.tsx +++ b/frontend/src/container/OrganizationSettings/AuthDomains/Create/Row/index.tsx @@ -1,5 +1,5 @@ import { Button, Space, Typography } from 'antd'; -import React from 'react'; +import { ReactNode } from 'react'; import { IconContainer, TitleContainer, TitleText } from './styles'; @@ -29,7 +29,7 @@ function Row({ export interface RowProps { onClickHandler: VoidFunction; - Icon: React.ReactNode; + Icon: ReactNode; title: string; subTitle: string; buttonText: string; diff --git a/frontend/src/container/OrganizationSettings/AuthDomains/Create/index.tsx b/frontend/src/container/OrganizationSettings/AuthDomains/Create/index.tsx index 0d16a4f19e..7ca16570de 100644 --- a/frontend/src/container/OrganizationSettings/AuthDomains/Create/index.tsx +++ b/frontend/src/container/OrganizationSettings/AuthDomains/Create/index.tsx @@ -1,6 +1,6 @@ import { GoogleSquareFilled, KeyOutlined } from '@ant-design/icons'; import { Typography } from 'antd'; -import React, { useCallback, useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { AuthDomain, GOOGLE_AUTH, SAML } from 'types/api/SAML/listDomain'; import Row, { RowProps } from './Row'; diff --git a/frontend/src/container/OrganizationSettings/AuthDomains/Edit/EditGoogleAuth.tsx b/frontend/src/container/OrganizationSettings/AuthDomains/Edit/EditGoogleAuth.tsx index 82b4cd7e8e..2939b8d272 100644 --- a/frontend/src/container/OrganizationSettings/AuthDomains/Edit/EditGoogleAuth.tsx +++ b/frontend/src/container/OrganizationSettings/AuthDomains/Edit/EditGoogleAuth.tsx @@ -1,6 +1,5 @@ import { InfoCircleFilled } from '@ant-design/icons'; import { Card, Form, Input, Space, Typography } from 'antd'; -import React from 'react'; function EditGoogleAuth(): JSX.Element { return ( diff --git a/frontend/src/container/OrganizationSettings/AuthDomains/Edit/EditSAML.tsx b/frontend/src/container/OrganizationSettings/AuthDomains/Edit/EditSAML.tsx index 3ff035f411..b445e5cae9 100644 --- a/frontend/src/container/OrganizationSettings/AuthDomains/Edit/EditSAML.tsx +++ b/frontend/src/container/OrganizationSettings/AuthDomains/Edit/EditSAML.tsx @@ -1,6 +1,5 @@ import { InfoCircleFilled } from '@ant-design/icons'; import { Card, Form, Input, Space, Typography } from 'antd'; -import React from 'react'; function EditSAML(): JSX.Element { return ( diff --git a/frontend/src/container/OrganizationSettings/AuthDomains/Edit/index.tsx b/frontend/src/container/OrganizationSettings/AuthDomains/Edit/index.tsx index b93fecd114..dc47de5faa 100644 --- a/frontend/src/container/OrganizationSettings/AuthDomains/Edit/index.tsx +++ b/frontend/src/container/OrganizationSettings/AuthDomains/Edit/index.tsx @@ -1,7 +1,7 @@ import { Button, Form, Space } from 'antd'; import { useForm } from 'antd/lib/form/Form'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { AuthDomain, GOOGLE_AUTH, SAML } from 'types/api/SAML/listDomain'; diff --git a/frontend/src/container/OrganizationSettings/AuthDomains/Switch/index.tsx b/frontend/src/container/OrganizationSettings/AuthDomains/Switch/index.tsx index 9643effafb..ca4b3a539e 100644 --- a/frontend/src/container/OrganizationSettings/AuthDomains/Switch/index.tsx +++ b/frontend/src/container/OrganizationSettings/AuthDomains/Switch/index.tsx @@ -1,5 +1,5 @@ import { Switch } from 'antd'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { AuthDomain } from 'types/api/SAML/listDomain'; import { isSSOConfigValid } from '../helpers'; diff --git a/frontend/src/container/OrganizationSettings/AuthDomains/index.tsx b/frontend/src/container/OrganizationSettings/AuthDomains/index.tsx index f7a45fcdd8..44a30ede05 100644 --- a/frontend/src/container/OrganizationSettings/AuthDomains/index.tsx +++ b/frontend/src/container/OrganizationSettings/AuthDomains/index.tsx @@ -10,7 +10,7 @@ import { SIGNOZ_UPGRADE_PLAN_URL } from 'constants/app'; import { FeatureKeys } from 'constants/features'; import useFeatureFlag from 'hooks/useFeatureFlag/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useCallback, useState } from 'react'; +import { Dispatch, SetStateAction, useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; @@ -68,7 +68,7 @@ function AuthDomains(): JSX.Element { ); const onCloseHandler = useCallback( - (func: React.Dispatch>) => (): void => { + (func: Dispatch>) => (): void => { func(false); }, [], @@ -111,7 +111,7 @@ function AuthDomains(): JSX.Element { ); const onOpenHandler = useCallback( - (func: React.Dispatch>) => (): void => { + (func: Dispatch>) => (): void => { func(true); }, [], diff --git a/frontend/src/container/OrganizationSettings/DeleteMembersDetails/index.tsx b/frontend/src/container/OrganizationSettings/DeleteMembersDetails/index.tsx index db51e685b0..47bab40f39 100644 --- a/frontend/src/container/OrganizationSettings/DeleteMembersDetails/index.tsx +++ b/frontend/src/container/OrganizationSettings/DeleteMembersDetails/index.tsx @@ -1,7 +1,6 @@ import { gold } from '@ant-design/colors'; import { ExclamationCircleTwoTone } from '@ant-design/icons'; import { Space, Typography } from 'antd'; -import React from 'react'; function DeleteMembersDetails({ name, diff --git a/frontend/src/container/OrganizationSettings/DisplayName/index.tsx b/frontend/src/container/OrganizationSettings/DisplayName/index.tsx index e7b7cc6959..8bd8e2f891 100644 --- a/frontend/src/container/OrganizationSettings/DisplayName/index.tsx +++ b/frontend/src/container/OrganizationSettings/DisplayName/index.tsx @@ -1,7 +1,7 @@ import { Button, Form, Input } from 'antd'; import editOrg from 'api/user/editOrg'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx b/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx index a6e9254771..7069b66db3 100644 --- a/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx +++ b/frontend/src/container/OrganizationSettings/EditMembersDetails/index.tsx @@ -3,7 +3,14 @@ import { Button, Input, Select, Space, Tooltip } from 'antd'; import getResetPasswordToken from 'api/user/getResetPasswordToken'; import ROUTES from 'constants/routes'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useCallback, useEffect, useState } from 'react'; +import { + ChangeEventHandler, + Dispatch, + SetStateAction, + useCallback, + useEffect, + useState, +} from 'react'; import { useTranslation } from 'react-i18next'; import { useCopyToClipboard } from 'react-use'; import { ROLES } from 'types/roles'; @@ -31,7 +38,7 @@ function EditMembersDetails({ `${window.location.origin}${ROUTES.PASSWORD_RESET}?token=${token}`; const onChangeHandler = useCallback( - (setFunc: React.Dispatch>, value: string) => { + (setFunc: Dispatch>, value: string) => { setFunc(value); }, [], @@ -53,7 +60,7 @@ function EditMembersDetails({ } }, [state.error, state.value, t, notifications]); - const onPasswordChangeHandler: React.ChangeEventHandler = useCallback( + const onPasswordChangeHandler: ChangeEventHandler = useCallback( (event) => { setPasswordLink(event.target.value); }, @@ -163,9 +170,9 @@ interface EditMembersDetailsProps { emailAddress: string; name: string; role: ROLES; - setEmailAddress: React.Dispatch>; - setName: React.Dispatch>; - setRole: React.Dispatch>; + setEmailAddress: Dispatch>; + setName: Dispatch>; + setRole: Dispatch>; id: string; } diff --git a/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx b/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx index 42d22e479a..d059c2683c 100644 --- a/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx +++ b/frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx @@ -1,6 +1,6 @@ import { PlusOutlined } from '@ant-design/icons'; import { Button, Form, Input, Select, Space, Typography } from 'antd'; -import React, { useCallback, useEffect } from 'react'; +import { Dispatch, SetStateAction, useCallback, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { InviteTeamMembersProps } from '../PendingInvitesContainer/index'; @@ -101,7 +101,7 @@ function InviteTeamMembers({ allMembers, setAllMembers }: Props): JSX.Element { interface Props { allMembers: InviteTeamMembersProps[]; - setAllMembers: React.Dispatch>; + setAllMembers: Dispatch>; } export default InviteTeamMembers; diff --git a/frontend/src/container/OrganizationSettings/Members/index.tsx b/frontend/src/container/OrganizationSettings/Members/index.tsx index ccb1c367e7..6392545f54 100644 --- a/frontend/src/container/OrganizationSettings/Members/index.tsx +++ b/frontend/src/container/OrganizationSettings/Members/index.tsx @@ -7,7 +7,7 @@ import updateRole from 'api/user/updateRole'; import { ResizeTable } from 'components/ResizeTable'; import dayjs from 'dayjs'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useEffect, useState } from 'react'; +import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; @@ -29,7 +29,7 @@ function UserFunction({ const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); const onModalToggleHandler = ( - func: React.Dispatch>, + func: Dispatch>, value: boolean, ): void => { func(value); @@ -329,7 +329,7 @@ interface DataType { } interface UserFunctionProps extends DataType { - setDataSource: React.Dispatch>; + setDataSource: Dispatch>; } export default Members; diff --git a/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx b/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx index 5c1518eee2..aa17f8b942 100644 --- a/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx +++ b/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx @@ -8,7 +8,7 @@ import { ResizeTable } from 'components/ResizeTable'; import { INVITE_MEMBERS_HASH } from 'constants/app'; import ROUTES from 'constants/routes'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useLocation } from 'react-router-dom'; diff --git a/frontend/src/container/OrganizationSettings/index.tsx b/frontend/src/container/OrganizationSettings/index.tsx index af00d5e6cf..e36cf2ae60 100644 --- a/frontend/src/container/OrganizationSettings/index.tsx +++ b/frontend/src/container/OrganizationSettings/index.tsx @@ -1,7 +1,6 @@ import { Divider, Space } from 'antd'; import { FeatureKeys } from 'constants/features'; import { useIsFeatureDisabled } from 'hooks/useFeatureFlag'; -import React from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import AppReducer from 'types/reducer/app'; diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.tsx b/frontend/src/container/QueryBuilder/QueryBuilder.tsx index e5e1fc35bc..d5015cce0d 100644 --- a/frontend/src/container/QueryBuilder/QueryBuilder.tsx +++ b/frontend/src/container/QueryBuilder/QueryBuilder.tsx @@ -4,7 +4,7 @@ import { MAX_FORMULAS, MAX_QUERIES } from 'constants/queryBuilder'; // ** Hooks import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; // ** Constants -import React, { memo, useEffect, useMemo } from 'react'; +import { memo, useEffect, useMemo } from 'react'; // ** Components import { Formula, Query } from './components'; diff --git a/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.interfaces.ts b/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.interfaces.ts index 41c3e7c25a..2bb8a0e1fa 100644 --- a/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.interfaces.ts +++ b/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.interfaces.ts @@ -1,6 +1,6 @@ -import React from 'react'; +import { ReactNode } from 'react'; export type AdditionalFiltersProps = { listOfAdditionalFilter: string[]; - children: React.ReactNode; + children: ReactNode; }; diff --git a/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx b/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx index be023aac2e..79aa1b0715 100644 --- a/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx +++ b/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx @@ -1,5 +1,5 @@ import { Col, Row } from 'antd'; -import React, { Fragment, memo, ReactNode, useState } from 'react'; +import { Fragment, memo, ReactNode, useState } from 'react'; // ** Types import { AdditionalFiltersProps } from './AdditionalFiltersToggler.interfaces'; diff --git a/frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.tsx b/frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.tsx index 2f5387398c..52b3d030cb 100644 --- a/frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.tsx +++ b/frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.tsx @@ -1,5 +1,5 @@ import { Select } from 'antd'; -import React, { memo } from 'react'; +import { memo } from 'react'; import { DataSource } from 'types/common/queryBuilder'; import { SelectOption } from 'types/common/select'; // ** Helpers diff --git a/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx b/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx index 57cb5ff72c..8fd4421f2a 100644 --- a/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx +++ b/frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx @@ -1,5 +1,5 @@ import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { memo } from 'react'; +import { memo } from 'react'; // ** Types import { FilterLabelProps } from './FilterLabel.interfaces'; diff --git a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx index 410006b9e4..bee7c21bc1 100644 --- a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx +++ b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx @@ -3,7 +3,7 @@ import { Col, Input } from 'antd'; import { ListItemWrapper, ListMarker } from 'container/QueryBuilder/components'; // ** Hooks import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; -import React, { ChangeEvent, useCallback } from 'react'; +import { ChangeEvent, useCallback } from 'react'; import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData'; // ** Types diff --git a/frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.interfaces.ts b/frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.interfaces.ts index 33b0d8747e..60c516be52 100644 --- a/frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.interfaces.ts +++ b/frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.interfaces.ts @@ -1,8 +1,10 @@ +import { ReactNode } from 'react'; + export type HavingFilterTagProps = { - label: React.ReactNode; + label: ReactNode; value: string; disabled: boolean; - onClose: (event?: React.MouseEvent) => void; + onClose: VoidFunction; closable: boolean; onUpdate: (value: string) => void; }; diff --git a/frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.tsx b/frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.tsx index 7a488cff7d..1b8ceeaaf0 100644 --- a/frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.tsx +++ b/frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { HavingFilterTagProps } from './HavingFilterTag.interfaces'; import { StyledTag, StyledText } from './HavingFilterTag.styled'; diff --git a/frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.interfaces.ts b/frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.interfaces.ts index aeeefe04c1..c5ab00faf5 100644 --- a/frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.interfaces.ts +++ b/frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.interfaces.ts @@ -1,6 +1,6 @@ -import React from 'react'; +import { ReactNode } from 'react'; export type ListItemWrapperProps = { onDelete: () => void; - children: React.ReactNode; + children: ReactNode; }; diff --git a/frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.tsx b/frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.tsx index 1136ec02f2..7abc9e39b5 100644 --- a/frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.tsx +++ b/frontend/src/container/QueryBuilder/components/ListItemWrapper/ListItemWrapper.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - // ** Types import { ListItemWrapperProps } from './ListItemWrapper.interfaces'; // ** Styles diff --git a/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.tsx b/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.tsx index 86115db7cd..0e197e3b3a 100644 --- a/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.tsx +++ b/frontend/src/container/QueryBuilder/components/ListMarker/ListMarker.tsx @@ -1,6 +1,6 @@ import { EyeFilled, EyeInvisibleFilled } from '@ant-design/icons'; import { ButtonProps } from 'antd'; -import React, { memo } from 'react'; +import { memo } from 'react'; // ** Types import { ListMarkerProps } from './ListMarker.interfaces'; diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.tsx b/frontend/src/container/QueryBuilder/components/Query/Query.tsx index e972996798..5db70136cc 100644 --- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx +++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx @@ -23,7 +23,7 @@ import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearc import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useQueryOperations } from 'hooks/queryBuilder/useQueryOperations'; // ** Hooks -import React, { ChangeEvent, memo, ReactNode, useCallback } from 'react'; +import { ChangeEvent, memo, ReactNode, useCallback } from 'react'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { transformToUpperCase } from 'utils/transformToUpperCase'; diff --git a/frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx b/frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx index 5ede906aca..c787039dc7 100644 --- a/frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx +++ b/frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx @@ -1,6 +1,6 @@ import { Input } from 'antd'; import getStep from 'lib/getStep'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; diff --git a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx index 06b713df2c..63fbc6e4b5 100644 --- a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx +++ b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx @@ -10,7 +10,7 @@ import { import useDebounce from 'hooks/useDebounce'; import { getFilterObjectValue } from 'lib/newQueryBuilder/getFilterObjectValue'; import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix'; -import React, { memo, useCallback, useMemo, useState } from 'react'; +import { memo, useCallback, useMemo, useState } from 'react'; import { useQuery } from 'react-query'; import { DataSource } from 'types/common/queryBuilder'; import { ExtendedSelectOption } from 'types/common/select'; diff --git a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx index 8f52706f88..50fe67a29b 100644 --- a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx +++ b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx @@ -7,7 +7,7 @@ import { getFilterObjectValue } from 'lib/newQueryBuilder/getFilterObjectValue'; // ** Components // ** Helpers import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix'; -import React, { memo, useEffect, useState } from 'react'; +import { memo, useEffect, useState } from 'react'; import { useQuery } from 'react-query'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { SelectOption } from 'types/common/select'; diff --git a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx index a21727e8aa..7fc298aeb0 100644 --- a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx +++ b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx @@ -12,7 +12,7 @@ import { } from 'lib/query/transformQueryBuilderData'; // ** Helpers import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { Having, HavingForm } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; import { SelectOption } from 'types/common/select'; diff --git a/frontend/src/container/QueryBuilder/filters/HavingFilter/__tests__/utils.test.tsx b/frontend/src/container/QueryBuilder/filters/HavingFilter/__tests__/utils.test.tsx index 8ecb0d7bb3..f22d88a66a 100644 --- a/frontend/src/container/QueryBuilder/filters/HavingFilter/__tests__/utils.test.tsx +++ b/frontend/src/container/QueryBuilder/filters/HavingFilter/__tests__/utils.test.tsx @@ -6,7 +6,6 @@ import { initialQueryBuilderFormValues, } from 'constants/queryBuilder'; import { transformFromStringToHaving } from 'lib/query/transformQueryBuilderData'; -import React from 'react'; // ** Types import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; diff --git a/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx b/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx index 69b01198ec..a8db6b1f5d 100644 --- a/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx +++ b/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx @@ -1,5 +1,5 @@ import { InputNumber } from 'antd'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; diff --git a/frontend/src/container/QueryBuilder/filters/OperatorsSelect/OperatorsSelect.tsx b/frontend/src/container/QueryBuilder/filters/OperatorsSelect/OperatorsSelect.tsx index 090178e90f..b930ff8e1b 100644 --- a/frontend/src/container/QueryBuilder/filters/OperatorsSelect/OperatorsSelect.tsx +++ b/frontend/src/container/QueryBuilder/filters/OperatorsSelect/OperatorsSelect.tsx @@ -1,5 +1,5 @@ import { Select } from 'antd'; -import React, { memo } from 'react'; +import { memo } from 'react'; // ** Types import { selectStyle } from '../QueryBuilderSearch/config'; diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx index 963b9103c8..13a8baad33 100644 --- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx +++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx @@ -2,7 +2,7 @@ import { Select, Spin } from 'antd'; import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys'; import { QueryBuilderKeys } from 'constants/queryBuilder'; import * as Papa from 'papaparse'; -import React, { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { useQuery } from 'react-query'; import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder'; diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx index a5aca5feb4..950114c30f 100644 --- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx +++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx @@ -1,7 +1,13 @@ import { Select, Spin, Tag, Tooltip } from 'antd'; import { useAutoComplete } from 'hooks/queryBuilder/useAutoComplete'; import { useFetchKeysAndValues } from 'hooks/queryBuilder/useFetchKeysAndValues'; -import React, { useEffect, useMemo } from 'react'; +import { + KeyboardEvent, + ReactElement, + ReactNode, + useEffect, + useMemo, +} from 'react'; import { IBuilderQuery, TagFilter, @@ -44,7 +50,7 @@ function QueryBuilderSearch({ value, closable, onClose, - }: CustomTagProps): React.ReactElement => { + }: CustomTagProps): ReactElement => { const { tagOperator } = getTagToken(value); const isInNin = isInNInOperator(tagOperator); const chipValue = isInNin @@ -83,7 +89,7 @@ function QueryBuilderSearch({ if (!isMulti) handleSearch(value[value.length - 1]); }; - const onInputKeyDownHandler = (event: React.KeyboardEvent): void => { + const onInputKeyDownHandler = (event: KeyboardEvent): void => { if (isMulti || event.key === 'Backspace') handleKeyDown(event); if (isExistsNotExistsOperator(searchValue)) handleKeyDown(event); }; @@ -160,10 +166,10 @@ interface QueryBuilderSearchProps { } export interface CustomTagProps { - label: React.ReactNode; + label: ReactNode; value: string; disabled: boolean; - onClose: (event?: React.MouseEvent) => void; + onClose: () => void; closable: boolean; } diff --git a/frontend/src/container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter.tsx b/frontend/src/container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter.tsx index d384d73a76..1bd5173f87 100644 --- a/frontend/src/container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter.tsx +++ b/frontend/src/container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter.tsx @@ -1,6 +1,6 @@ import { Select } from 'antd'; import { REDUCE_TO_VALUES } from 'constants/queryBuilder'; -import React, { memo } from 'react'; +import { memo } from 'react'; // ** Types import { ReduceOperators } from 'types/common/queryBuilder'; import { SelectOption } from 'types/common/select'; diff --git a/frontend/src/container/ResetPassword/index.tsx b/frontend/src/container/ResetPassword/index.tsx index 69e0b7b047..eac4b098cd 100644 --- a/frontend/src/container/ResetPassword/index.tsx +++ b/frontend/src/container/ResetPassword/index.tsx @@ -6,7 +6,7 @@ import ROUTES from 'constants/routes'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; import { Label } from 'pages/SignUp/styles'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation } from 'react-use'; diff --git a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx index 3c208b621d..1be1dd3486 100644 --- a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx +++ b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx @@ -4,7 +4,7 @@ import useResourceAttribute, { isResourceEmpty, } from 'hooks/useResourceAttribute'; import { convertMetricKeyToTrace } from 'hooks/useResourceAttribute/utils'; -import React, { useMemo } from 'react'; +import { ReactNode, useMemo } from 'react'; import { v4 as uuid } from 'uuid'; import QueryChip from './components/QueryChip'; @@ -78,7 +78,7 @@ function ResourceAttributesFilter({ } interface ResourceAttributesFilterProps { - suffixIcon?: React.ReactNode; + suffixIcon?: ReactNode; } ResourceAttributesFilter.defaultProps = { diff --git a/frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx b/frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx index fd912e3ade..363e6d5143 100644 --- a/frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx +++ b/frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx @@ -1,5 +1,4 @@ import { convertMetricKeyToTrace } from 'hooks/useResourceAttribute/utils'; -import React from 'react'; import { QueryChipContainer, QueryChipItem } from '../../styles'; import { IQueryChipProps } from './types'; diff --git a/frontend/src/container/SideNav/Slack.tsx b/frontend/src/container/SideNav/Slack.tsx index f4f1e8e5c6..118ac924c1 100644 --- a/frontend/src/container/SideNav/Slack.tsx +++ b/frontend/src/container/SideNav/Slack.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - interface ISlackProps { width?: number; height?: number; diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx index d0e7fced95..a65a590589 100644 --- a/frontend/src/container/SideNav/index.tsx +++ b/frontend/src/container/SideNav/index.tsx @@ -4,7 +4,13 @@ import getLocalStorageKey from 'api/browser/localstorage/get'; import { IS_SIDEBAR_COLLAPSED } from 'constants/app'; import ROUTES from 'constants/routes'; import history from 'lib/history'; -import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react'; +import { + ReactNode, + useCallback, + useLayoutEffect, + useMemo, + useState, +} from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; @@ -162,10 +168,10 @@ function SideNav(): JSX.Element { interface SidebarItem { onClick: VoidFunction; - icon?: React.ReactNode; - text?: React.ReactNode; + icon?: ReactNode; + text?: ReactNode; key: string; - label?: React.ReactNode; + label?: ReactNode; } export default SideNav; diff --git a/frontend/src/container/Timeline/index.tsx b/frontend/src/container/Timeline/index.tsx index 9deeaaa261..058ca3e315 100644 --- a/frontend/src/container/Timeline/index.tsx +++ b/frontend/src/container/Timeline/index.tsx @@ -2,7 +2,7 @@ import { StyledDiv } from 'components/Styled'; import { ITraceMetaData } from 'container/GantChart'; import { IIntervalUnit, INTERVAL_UNITS } from 'container/TraceDetail/utils'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { useEffect, useState } from 'react'; +import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { useMeasure } from 'react-use'; import { styles, Svg, TimelineInterval } from './styles'; @@ -105,7 +105,7 @@ interface TimelineProps { levels: number; }; globalTraceMetadata: ITraceMetaData; - setIntervalUnit: React.Dispatch>; + setIntervalUnit: Dispatch>; } export default Timeline; diff --git a/frontend/src/container/TopNav/AutoRefresh/index.tsx b/frontend/src/container/TopNav/AutoRefresh/index.tsx index ab02e27a3d..e83276e983 100644 --- a/frontend/src/container/TopNav/AutoRefresh/index.tsx +++ b/frontend/src/container/TopNav/AutoRefresh/index.tsx @@ -14,7 +14,7 @@ import set from 'api/browser/localstorage/set'; import { DASHBOARD_TIME_IN_DURATION } from 'constants/app'; import useUrlQuery from 'hooks/useUrlQuery'; import _omit from 'lodash-es/omit'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { useInterval } from 'react-use'; diff --git a/frontend/src/container/TopNav/Breadcrumbs/index.tsx b/frontend/src/container/TopNav/Breadcrumbs/index.tsx index 05304bc1e3..01ec22677c 100644 --- a/frontend/src/container/TopNav/Breadcrumbs/index.tsx +++ b/frontend/src/container/TopNav/Breadcrumbs/index.tsx @@ -1,6 +1,5 @@ import { Breadcrumb } from 'antd'; import ROUTES from 'constants/routes'; -import React from 'react'; import { Link, RouteComponentProps, withRouter } from 'react-router-dom'; const breadcrumbNameMap = { diff --git a/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx b/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx index 719de038c3..a178b2edec 100644 --- a/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx +++ b/frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx @@ -1,5 +1,4 @@ import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; import CustomDateTimeModal from './index'; diff --git a/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx b/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx index 02fb2f6ad1..57cc54e5e7 100644 --- a/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx +++ b/frontend/src/container/TopNav/CustomDateTimeModal/index.tsx @@ -1,6 +1,6 @@ import { DatePicker, Modal } from 'antd'; import dayjs, { Dayjs } from 'dayjs'; -import React, { useState } from 'react'; +import { useState } from 'react'; export type DateTimeRangeType = [Dayjs | null, Dayjs | null] | null; diff --git a/frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx b/frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx index f4597e5727..6e608b1189 100644 --- a/frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx +++ b/frontend/src/container/TopNav/DateTimeSelection/Refresh.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { RefreshTextContainer, Typography } from './styles'; diff --git a/frontend/src/container/TopNav/DateTimeSelection/index.tsx b/frontend/src/container/TopNav/DateTimeSelection/index.tsx index 91567db64d..db4a0d8c42 100644 --- a/frontend/src/container/TopNav/DateTimeSelection/index.tsx +++ b/frontend/src/container/TopNav/DateTimeSelection/index.tsx @@ -5,7 +5,7 @@ import setLocalStorageKey from 'api/browser/localstorage/set'; import { LOCALSTORAGE } from 'constants/localStorage'; import dayjs, { Dayjs } from 'dayjs'; import getTimeString from 'lib/getTimeString'; -import React, { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { RouteComponentProps, withRouter } from 'react-router-dom'; import { bindActionCreators, Dispatch } from 'redux'; diff --git a/frontend/src/container/TopNav/index.tsx b/frontend/src/container/TopNav/index.tsx index 1cfbf19dbc..38efc91466 100644 --- a/frontend/src/container/TopNav/index.tsx +++ b/frontend/src/container/TopNav/index.tsx @@ -1,6 +1,6 @@ import { Col } from 'antd'; import ROUTES from 'constants/routes'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { matchPath, useHistory } from 'react-router-dom'; import ShowBreadcrumbs from './Breadcrumbs'; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx index ee42069fe3..35c60b1c68 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx @@ -2,7 +2,7 @@ import { Checkbox, Tooltip, Typography } from 'antd'; import getFilters from 'api/trace/getFilters'; import { AxiosError } from 'axios'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; import { getFilter, updateURL } from 'store/actions/trace/util'; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx index 440c9652a7..f9960c4ea9 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx @@ -1,5 +1,5 @@ import { Button, Input } from 'antd'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx index 0de6229661..c246d5eae9 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx @@ -2,7 +2,8 @@ import { Slider } from 'antd'; import { SliderRangeProps } from 'antd/lib/slider'; import getFilters from 'api/trace/getFilters'; import useDebouncedFn from 'hooks/useDebouncedFunction'; -import React, { +import { + ChangeEventHandler, useCallback, useEffect, useMemo, @@ -148,9 +149,7 @@ function Duration(): JSX.Element { undefined, ); - const onChangeMaxHandler: React.ChangeEventHandler = ( - event, - ) => { + const onChangeMaxHandler: ChangeEventHandler = (event) => { const { value } = event.target; const min = preMin; const max = value; @@ -159,9 +158,7 @@ function Duration(): JSX.Element { debouncedFunction(min, max); }; - const onChangeMinHandler: React.ChangeEventHandler = ( - event, - ) => { + const onChangeMinHandler: ChangeEventHandler = (event) => { const { value } = event.target; const min = value; const max = preMax; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/SearchTraceID/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/SearchTraceID/index.tsx index eef14987e1..da2a0b234f 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/SearchTraceID/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/SearchTraceID/index.tsx @@ -2,7 +2,7 @@ import { Input } from 'antd'; import getFilters from 'api/trace/getFilters'; import { AxiosError } from 'axios'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useEffect, useState } from 'react'; +import { ChangeEvent, useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; import { getFilter, updateURL } from 'store/actions/trace/util'; @@ -103,7 +103,7 @@ function TraceID(): JSX.Element { setIsLoading(false); } }; - const onChange = (e: React.ChangeEvent): void => { + const onChange = (e: ChangeEvent): void => { setUserEnteredValue(e.target.value); }; const onBlur = (): void => { diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx index fda3599305..c58f67dfd8 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelBody/index.tsx @@ -1,7 +1,6 @@ /* eslint-disable no-nested-ternary */ import { Card } from 'antd'; import Spinner from 'components/Spinner'; -import React from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx index cf272257f9..c9d0dd9373 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx @@ -3,7 +3,7 @@ import { Card, Divider, Typography } from 'antd'; import getFilters from 'api/trace/getFilters'; import { AxiosError } from 'axios'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useState } from 'react'; +import { MouseEventHandler, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; import { getFilter, updateURL } from 'store/actions/trace/util'; @@ -58,7 +58,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element { const { notifications } = useNotifications(); // eslint-disable-next-line sonarjs/cognitive-complexity - const onExpandHandler: React.MouseEventHandler = async (e) => { + const onExpandHandler: MouseEventHandler = async (e) => { try { e.preventDefault(); e.stopPropagation(); diff --git a/frontend/src/container/Trace/Filters/Panel/index.tsx b/frontend/src/container/Trace/Filters/Panel/index.tsx index b044d57ea0..c84b9dcc79 100644 --- a/frontend/src/container/Trace/Filters/Panel/index.tsx +++ b/frontend/src/container/Trace/Filters/Panel/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace'; diff --git a/frontend/src/container/Trace/Filters/index.tsx b/frontend/src/container/Trace/Filters/index.tsx index 36edd206fe..21f4048507 100644 --- a/frontend/src/container/Trace/Filters/index.tsx +++ b/frontend/src/container/Trace/Filters/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { TraceFilterEnum } from 'types/reducer/trace'; import Panel from './Panel'; diff --git a/frontend/src/container/Trace/Graph/index.tsx b/frontend/src/container/Trace/Graph/index.tsx index 2e7dea478f..30e2ea9ac4 100644 --- a/frontend/src/container/Trace/Graph/index.tsx +++ b/frontend/src/container/Trace/Graph/index.tsx @@ -1,7 +1,7 @@ import { Typography } from 'antd'; import Graph from 'components/Graph'; import Spinner from 'components/Spinner'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useSelector } from 'react-redux'; import { useMeasure } from 'react-use'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/Trace/Graph/styles.ts b/frontend/src/container/Trace/Graph/styles.ts index 16878bf6af..64be5e1127 100644 --- a/frontend/src/container/Trace/Graph/styles.ts +++ b/frontend/src/container/Trace/Graph/styles.ts @@ -1,10 +1,10 @@ import { StyledCSS } from 'container/GantChart/Trace/styles'; -import React from 'react'; +import { RefObject } from 'react'; import styled, { css } from 'styled-components'; interface Props { center?: boolean; - ref?: React.RefObject | null; // The ref type provided by react-use is incorrect -> https://github.com/streamich/react-use/issues/1264 Open Issue + ref?: RefObject | null; // The ref type provided by react-use is incorrect -> https://github.com/streamich/react-use/issues/1264 Open Issue } export const Container = styled.div` diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx b/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx index f14a35e0bd..2d17e6eae7 100644 --- a/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx +++ b/frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx @@ -1,6 +1,12 @@ import { AutoComplete, Input } from 'antd'; import getTagFilters from 'api/trace/getTagFilter'; -import React, { useCallback, useMemo, useState } from 'react'; +import { + Dispatch, + SetStateAction, + useCallback, + useMemo, + useState, +} from 'react'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; @@ -83,9 +89,7 @@ function TagsKey(props: TagsKeysProps): JSX.Element { interface TagsKeysProps { index: number; tag: FlatArray; - setLocalSelectedTags: React.Dispatch< - React.SetStateAction - >; + setLocalSelectedTags: Dispatch>; } export default TagsKey; diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx b/frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx index a74463d5a4..5f538b4453 100644 --- a/frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx +++ b/frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx @@ -1,7 +1,14 @@ import { Select } from 'antd'; import { BaseOptionType } from 'antd/es/select'; import getTagValue from 'api/trace/getTagValue'; -import React, { memo, useCallback, useMemo, useState } from 'react'; +import { + Dispatch, + memo, + SetStateAction, + useCallback, + useMemo, + useState, +} from 'react'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; @@ -139,9 +146,7 @@ function TagValue(props: TagValueProps): JSX.Element { interface TagValueProps { index: number; tag: FlatArray; - setLocalSelectedTags: React.Dispatch< - React.SetStateAction - >; + setLocalSelectedTags: Dispatch>; tagKey: string; } diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx b/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx index 90003b0142..1d8be3c7fa 100644 --- a/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx +++ b/frontend/src/container/Trace/Search/AllTags/Tag/index.tsx @@ -1,6 +1,6 @@ import { CloseOutlined } from '@ant-design/icons'; import { Select } from 'antd'; -import React from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { TraceReducer } from 'types/reducer/trace'; import { Container, IconContainer, SelectComponent } from './styles'; @@ -172,9 +172,7 @@ interface AllTagsProps { onCloseHandler: (index: number) => void; index: number; tag: FlatArray; - setLocalSelectedTags: React.Dispatch< - React.SetStateAction - >; + setLocalSelectedTags: Dispatch>; localSelectedTags: TraceReducer['selectedTags']; } diff --git a/frontend/src/container/Trace/Search/AllTags/Tag/utils.ts b/frontend/src/container/Trace/Search/AllTags/Tag/utils.ts index a9367b9c0f..bc51890a38 100644 --- a/frontend/src/container/Trace/Search/AllTags/Tag/utils.ts +++ b/frontend/src/container/Trace/Search/AllTags/Tag/utils.ts @@ -1,5 +1,6 @@ import { AutoCompleteProps } from 'antd'; import { DefaultOptionType } from 'antd/es/select'; +import { Dispatch, SetStateAction } from 'react'; import { PayloadProps as TagKeyPayload } from 'types/api/trace/getTagFilters'; import { PayloadProps as TagValuePayload } from 'types/api/trace/getTagValue'; import { OperatorValues, Tags } from 'types/reducer/trace'; @@ -104,9 +105,9 @@ export function separateTagValues( export function disableTagValue( selectedOperator: OperatorValues, - setLocalValue: React.Dispatch>, + setLocalValue: Dispatch>, selectedKeys: string, - setLocalSelectedTags: React.Dispatch>, + setLocalSelectedTags: Dispatch>, index: number, ): boolean { if (selectedOperator === 'Exists' || selectedOperator === 'NotExists') { @@ -205,8 +206,8 @@ export function mapOperators(selectedKey: string): AllMenuProps[] { export function onTagKeySelect( value: unknown, options: AutoCompleteProps['options'], - setSelectedKey: React.Dispatch>, - setLocalSelectedTags: React.Dispatch>, + setSelectedKey: Dispatch>, + setLocalSelectedTags: Dispatch>, index: number, tag: Tags, ): void { diff --git a/frontend/src/container/Trace/Search/AllTags/index.tsx b/frontend/src/container/Trace/Search/AllTags/index.tsx index effb0c87b9..0d17c79c21 100644 --- a/frontend/src/container/Trace/Search/AllTags/index.tsx +++ b/frontend/src/container/Trace/Search/AllTags/index.tsx @@ -1,6 +1,6 @@ import { CaretRightFilled, PlusOutlined } from '@ant-design/icons'; import { Button, Space, Typography } from 'antd'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { bindActionCreators } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; diff --git a/frontend/src/container/Trace/Search/index.tsx b/frontend/src/container/Trace/Search/index.tsx index 099059ac80..49ba39afef 100644 --- a/frontend/src/container/Trace/Search/index.tsx +++ b/frontend/src/container/Trace/Search/index.tsx @@ -1,6 +1,6 @@ import { CaretRightFilled } from '@ant-design/icons'; import { Popover } from 'antd'; -import React, { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { connect, useDispatch, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; diff --git a/frontend/src/container/Trace/TraceGraphFilter/index.tsx b/frontend/src/container/Trace/TraceGraphFilter/index.tsx index 48f6666101..bc13641d02 100644 --- a/frontend/src/container/Trace/TraceGraphFilter/index.tsx +++ b/frontend/src/container/Trace/TraceGraphFilter/index.tsx @@ -1,6 +1,6 @@ import { AutoComplete, Input, Space } from 'antd'; import getTagFilters from 'api/trace/getTagFilter'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/container/Trace/TraceTable/index.tsx b/frontend/src/container/Trace/TraceTable/index.tsx index 058a962d02..fc76b2bd79 100644 --- a/frontend/src/container/Trace/TraceTable/index.tsx +++ b/frontend/src/container/Trace/TraceTable/index.tsx @@ -11,7 +11,7 @@ import dayjs from 'dayjs'; import duration from 'dayjs/plugin/duration'; import history from 'lib/history'; import omit from 'lodash-es/omit'; -import React from 'react'; +import { HTMLAttributes } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Dispatch } from 'redux'; import { updateURL } from 'store/actions/trace/util'; @@ -198,7 +198,7 @@ function TraceTable(): JSX.Element { style={{ cursor: 'pointer', }} - onRow={(record: TableType): React.HTMLAttributes => ({ + onRow={(record: TableType): HTMLAttributes => ({ onClick: (event): void => { event.preventDefault(); event.stopPropagation(); diff --git a/frontend/src/container/TraceDetail/Missingtrace.tsx b/frontend/src/container/TraceDetail/Missingtrace.tsx index 0d2e91b5d7..4375fd95d3 100644 --- a/frontend/src/container/TraceDetail/Missingtrace.tsx +++ b/frontend/src/container/TraceDetail/Missingtrace.tsx @@ -1,7 +1,6 @@ import { volcano } from '@ant-design/colors'; import { InfoCircleOutlined } from '@ant-design/icons'; import { Popover, Typography } from 'antd'; -import React from 'react'; function PopOverContent(): JSX.Element { return ( diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/EllipsedButton.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/EllipsedButton.tsx index 56ef64e4ee..0ff9e06bbf 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/EllipsedButton.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/EllipsedButton.tsx @@ -1,5 +1,4 @@ import { StyledButton } from 'components/Styled'; -import React from 'react'; import { styles } from './styles'; diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx index aeab2a5144..77692e5ea0 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/Event.tsx @@ -2,7 +2,6 @@ import { Collapse } from 'antd'; import { useIsDarkMode } from 'hooks/useDarkMode'; import keys from 'lodash-es/keys'; import map from 'lodash-es/map'; -import React from 'react'; import { ITraceTree } from 'types/api/trace/getTraceItem'; import EllipsedButton from '../EllipsedButton'; diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/EventStartTime.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/EventStartTime.tsx index 40c05e6c99..11451ab01f 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/EventStartTime.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/EventStartTime.tsx @@ -1,7 +1,6 @@ import { Popover } from 'antd'; import dayjs from 'dayjs'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React from 'react'; import { CustomSubText, CustomSubTitle } from '../styles'; diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/RelativeStartTime.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/RelativeStartTime.tsx index 120aedc27f..08006f25a4 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/RelativeStartTime.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/RelativeStartTime.tsx @@ -2,7 +2,6 @@ import { InfoCircleOutlined } from '@ant-design/icons'; import { Popover, Space } from 'antd'; import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React from 'react'; import { CustomSubText, CustomSubTitle } from '../styles'; diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/index.tsx index c7aa3f78dd..1f6cb610be 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/index.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Events/index.tsx @@ -1,5 +1,4 @@ import { Typography } from 'antd'; -import React from 'react'; import { ITraceEvents } from 'types/api/trace/getTraceItem'; import ErrorTag from './Event'; diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx index 1f67dde5e1..293b6fc993 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx @@ -1,6 +1,6 @@ import { Tooltip } from 'antd'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { useMemo } from 'react'; +import { Fragment, useMemo } from 'react'; import { ITraceTag } from 'types/api/trace/getTraceItem'; import EllipsedButton from '../EllipsedButton'; @@ -21,7 +21,7 @@ function Tag({ tags, onToggleHandler, setText }: TagProps): JSX.Element { }, [tags]); return ( - + {tags.value && ( {tags.key} @@ -51,7 +51,7 @@ function Tag({ tags, onToggleHandler, setText }: TagProps): JSX.Element { )} - + ); } diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/index.tsx index 4c9e5227ca..80f04062ba 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/index.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/index.tsx @@ -1,7 +1,15 @@ import { Input, List, Typography } from 'antd'; import ROUTES from 'constants/routes'; import { formUrlParams } from 'container/TraceDetail/utils'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { + ChangeEvent, + Dispatch, + SetStateAction, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import { useTranslation } from 'react-i18next'; import { ITraceTag } from 'types/api/trace/getTraceItem'; @@ -34,7 +42,7 @@ function Tags({ ); const onChangeHandler = useCallback( - (e: React.ChangeEvent): void => { + (e: ChangeEvent): void => { const { value } = e.target; const filteredTags = tags.filter((tag) => tag.key.includes(value)); setAllRenderedTags(filteredTags); @@ -87,7 +95,7 @@ interface TagsProps extends CommonTagsProps { export interface CommonTagsProps { onToggleHandler: (state: boolean) => void; - setText: React.Dispatch>; + setText: Dispatch>; } Tags.defaultProps = { diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx index 7c0bd1ad9f..db9fde5ecb 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx +++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx @@ -4,7 +4,7 @@ import { StyledSpace } from 'components/Styled'; import ROUTES from 'constants/routes'; import { useIsDarkMode } from 'hooks/useDarkMode'; import history from 'lib/history'; -import React, { useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { useParams } from 'react-router-dom'; import { ITraceTree } from 'types/api/trace/getTraceItem'; diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx index 1b1791016e..83696a1160 100644 --- a/frontend/src/container/TraceDetail/index.tsx +++ b/frontend/src/container/TraceDetail/index.tsx @@ -19,7 +19,7 @@ import { spanServiceNameToColorMapping } from 'lib/getRandomColor'; import history from 'lib/history'; import { map } from 'lodash-es'; import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants'; -import React, { useEffect, useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { ITraceForest, PayloadProps } from 'types/api/trace/getTraceItem'; import { getSpanTreeMetadata } from 'utils/getSpanTreeMetadata'; import { spanToTreeUtil } from 'utils/spanToTree'; diff --git a/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx b/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx index 08464ab8b0..adcaa3f003 100644 --- a/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx +++ b/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx @@ -1,6 +1,6 @@ import { render, renderHook } from '@testing-library/react'; import TraceFlameGraph from 'container/TraceFlameGraph'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { Provider } from 'react-redux'; import store from 'store'; diff --git a/frontend/src/container/TraceFlameGraph/index.tsx b/frontend/src/container/TraceFlameGraph/index.tsx index 71862ca88d..7e52031646 100644 --- a/frontend/src/container/TraceFlameGraph/index.tsx +++ b/frontend/src/container/TraceFlameGraph/index.tsx @@ -2,7 +2,13 @@ import Color from 'color'; import { ITraceMetaData } from 'container/GantChart'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { useLayoutEffect, useMemo, useState } from 'react'; +import { + Dispatch, + SetStateAction, + useLayoutEffect, + useMemo, + useState, +} from 'react'; import { ITraceTree } from 'types/api/trace/getTraceItem'; import { @@ -18,7 +24,7 @@ interface SpanItemProps { spanData: ITraceTree; tooltipText: string; onSpanSelect: (id: string) => void; - onSpanHover: React.Dispatch>; + onSpanHover: Dispatch>; hoveredSpanId: string; selectedSpanId: string; } diff --git a/frontend/src/container/TriggeredAlerts/Filter.tsx b/frontend/src/container/TriggeredAlerts/Filter.tsx index 601651cdff..4a54916685 100644 --- a/frontend/src/container/TriggeredAlerts/Filter.tsx +++ b/frontend/src/container/TriggeredAlerts/Filter.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/no-unstable-nested-components */ import type { SelectProps } from 'antd'; import { Tag } from 'antd'; -import React, { useCallback, useMemo } from 'react'; +import { Dispatch, SetStateAction, useCallback, useMemo } from 'react'; import { Alerts } from 'types/api/alerts/getTriggered'; import { Container, Select } from './styles'; @@ -94,8 +94,8 @@ function Filter({ } interface FilterProps { - setSelectedFilter: React.Dispatch>>; - setSelectedGroup: React.Dispatch>>; + setSelectedFilter: Dispatch>>; + setSelectedGroup: Dispatch>>; allAlerts: Alerts[]; selectedGroup: Array; selectedFilter: Array; diff --git a/frontend/src/container/TriggeredAlerts/FilteredTable/ExapandableRow.tsx b/frontend/src/container/TriggeredAlerts/FilteredTable/ExapandableRow.tsx index 388e2d7499..a52f76518a 100644 --- a/frontend/src/container/TriggeredAlerts/FilteredTable/ExapandableRow.tsx +++ b/frontend/src/container/TriggeredAlerts/FilteredTable/ExapandableRow.tsx @@ -1,7 +1,6 @@ import { Tag, Typography } from 'antd'; import convertDateToAmAndPm from 'lib/convertDateToAmAndPm'; import getFormattedDate from 'lib/getFormatedDate'; -import React from 'react'; import { Alerts } from 'types/api/alerts/getTriggered'; import Status from '../TableComponents/AlertStatus'; diff --git a/frontend/src/container/TriggeredAlerts/FilteredTable/TableRow.tsx b/frontend/src/container/TriggeredAlerts/FilteredTable/TableRow.tsx index 97619b5f12..bd30296c4a 100644 --- a/frontend/src/container/TriggeredAlerts/FilteredTable/TableRow.tsx +++ b/frontend/src/container/TriggeredAlerts/FilteredTable/TableRow.tsx @@ -1,6 +1,6 @@ import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons'; import { Tag } from 'antd'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { Alerts } from 'types/api/alerts/getTriggered'; import ExapandableRow from './ExapandableRow'; diff --git a/frontend/src/container/TriggeredAlerts/FilteredTable/index.tsx b/frontend/src/container/TriggeredAlerts/FilteredTable/index.tsx index a9e56d903d..a9ef68f3e3 100644 --- a/frontend/src/container/TriggeredAlerts/FilteredTable/index.tsx +++ b/frontend/src/container/TriggeredAlerts/FilteredTable/index.tsx @@ -1,5 +1,5 @@ import groupBy from 'lodash-es/groupBy'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { Alerts } from 'types/api/alerts/getTriggered'; import { Value } from '../Filter'; diff --git a/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx b/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx index 00443441ee..84219daf12 100644 --- a/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx +++ b/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx @@ -5,7 +5,6 @@ import { ResizeTable } from 'components/ResizeTable'; import AlertStatus from 'container/TriggeredAlerts/TableComponents/AlertStatus'; import convertDateToAmAndPm from 'lib/convertDateToAmAndPm'; import getFormattedDate from 'lib/getFormatedDate'; -import React from 'react'; import { Alerts } from 'types/api/alerts/getTriggered'; import { Value } from './Filter'; diff --git a/frontend/src/container/TriggeredAlerts/TableComponents/AlertStatus.tsx b/frontend/src/container/TriggeredAlerts/TableComponents/AlertStatus.tsx index fc91115ebe..51564e65fa 100644 --- a/frontend/src/container/TriggeredAlerts/TableComponents/AlertStatus.tsx +++ b/frontend/src/container/TriggeredAlerts/TableComponents/AlertStatus.tsx @@ -1,5 +1,4 @@ import { Tag } from 'antd'; -import React from 'react'; function Severity({ severity }: SeverityProps): JSX.Element { switch (severity) { diff --git a/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx b/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx index b12a09d5e4..2b1da13a4b 100644 --- a/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx +++ b/frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx @@ -1,6 +1,6 @@ import getTriggeredApi from 'api/alerts/getTriggered'; import useInterval from 'hooks/useInterval'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { Alerts } from 'types/api/alerts/getTriggered'; import Filter, { Value } from './Filter'; diff --git a/frontend/src/container/TriggeredAlerts/index.tsx b/frontend/src/container/TriggeredAlerts/index.tsx index e9d024c81a..379c0b1106 100644 --- a/frontend/src/container/TriggeredAlerts/index.tsx +++ b/frontend/src/container/TriggeredAlerts/index.tsx @@ -2,7 +2,7 @@ import getTriggeredApi from 'api/alerts/getTriggered'; import Spinner from 'components/Spinner'; import { State } from 'hooks/useFetch'; import { useNotifications } from 'hooks/useNotifications'; -import React, { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { PayloadProps } from 'types/api/alerts/getTriggered'; diff --git a/frontend/src/container/Version/index.tsx b/frontend/src/container/Version/index.tsx index 8c7cab37e4..4cb00b7ad8 100644 --- a/frontend/src/container/Version/index.tsx +++ b/frontend/src/container/Version/index.tsx @@ -1,6 +1,6 @@ import { WarningFilled } from '@ant-design/icons'; import { Button, Card, Form, Space, Typography } from 'antd'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/hooks/queryBuilder/useAutoComplete.ts b/frontend/src/hooks/queryBuilder/useAutoComplete.ts index 2b4e223557..c7519761ec 100644 --- a/frontend/src/hooks/queryBuilder/useAutoComplete.ts +++ b/frontend/src/hooks/queryBuilder/useAutoComplete.ts @@ -7,7 +7,7 @@ import { } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils'; import { Option } from 'container/QueryBuilder/type'; import * as Papa from 'papaparse'; -import { useCallback, useState } from 'react'; +import { KeyboardEvent, useCallback, useState } from 'react'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { useFetchKeysAndValues } from './useFetchKeysAndValues'; @@ -67,7 +67,7 @@ export const useAutoComplete = (query: IBuilderQuery): IAutoComplete => { ); const handleKeyDown = useCallback( - (event: React.KeyboardEvent): void => { + (event: KeyboardEvent): void => { if ( event.key === ' ' && (searchValue.endsWith(' ') || searchValue.length === 0) diff --git a/frontend/src/hooks/useDarkMode/index.tsx b/frontend/src/hooks/useDarkMode/index.tsx index 50aa765eb1..8b58b1f77f 100644 --- a/frontend/src/hooks/useDarkMode/index.tsx +++ b/frontend/src/hooks/useDarkMode/index.tsx @@ -3,7 +3,14 @@ import { ThemeConfig } from 'antd/es/config-provider/context'; import get from 'api/browser/localstorage/get'; import set from 'api/browser/localstorage/set'; import { LOCALSTORAGE } from 'constants/localStorage'; -import React, { createContext, useCallback, useMemo, useState } from 'react'; +import { + createContext, + ReactNode, + useCallback, + useContext, + useMemo, + useState, +} from 'react'; import { THEME_MODE } from './constant'; @@ -37,7 +44,7 @@ export function ThemeProvider({ children }: ThemeProviderProps): JSX.Element { } interface ThemeProviderProps { - children: React.ReactNode; + children: ReactNode; } interface ThemeMode { @@ -46,13 +53,13 @@ interface ThemeMode { } export const useThemeMode = (): ThemeMode => { - const { theme, toggleTheme } = React.useContext(ThemeContext); + const { theme, toggleTheme } = useContext(ThemeContext); return { theme, toggleTheme }; }; export const useIsDarkMode = (): boolean => { - const { theme } = React.useContext(ThemeContext); + const { theme } = useContext(ThemeContext); return theme === THEME_MODE.DARK; }; diff --git a/frontend/src/hooks/useNotifications.tsx b/frontend/src/hooks/useNotifications.tsx index 8ba37c8d5c..787479e26e 100644 --- a/frontend/src/hooks/useNotifications.tsx +++ b/frontend/src/hooks/useNotifications.tsx @@ -1,6 +1,6 @@ import { notification } from 'antd'; import { NotificationInstance } from 'antd/es/notification/interface'; -import React, { createContext, useContext, useMemo } from 'react'; +import { createContext, useContext, useMemo } from 'react'; type Notification = { notifications: NotificationInstance; diff --git a/frontend/src/hooks/useResourceAttribute/ResourceProvider.tsx b/frontend/src/hooks/useResourceAttribute/ResourceProvider.tsx index 11b298074e..e027c70b8f 100644 --- a/frontend/src/hooks/useResourceAttribute/ResourceProvider.tsx +++ b/frontend/src/hooks/useResourceAttribute/ResourceProvider.tsx @@ -2,7 +2,7 @@ import { useMachine } from '@xstate/react'; import ROUTES from 'constants/routes'; import { encode } from 'js-base64'; import history from 'lib/history'; -import React, { useCallback, useMemo, useState } from 'react'; +import { ReactNode, useCallback, useMemo, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { whilelistedKeys } from './config'; @@ -182,7 +182,7 @@ function ResourceProvider({ children }: Props): JSX.Element { } interface Props { - children: React.ReactNode; + children: ReactNode; } export default ResourceProvider; diff --git a/frontend/src/hooks/useUrlQuery.test.tsx b/frontend/src/hooks/useUrlQuery.test.tsx index a24edb3360..3baf336b83 100644 --- a/frontend/src/hooks/useUrlQuery.test.tsx +++ b/frontend/src/hooks/useUrlQuery.test.tsx @@ -1,6 +1,5 @@ import { act, renderHook } from '@testing-library/react'; import { createMemoryHistory } from 'history'; -import React from 'react'; import { Router } from 'react-router-dom'; import useUrlQuery from './useUrlQuery'; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 3ce9a87de2..d7985e8dc6 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -3,7 +3,6 @@ import './ReactI18'; import AppRoutes from 'AppRoutes'; import { ThemeProvider } from 'hooks/useDarkMode'; -import React from 'react'; import { createRoot } from 'react-dom/client'; import { QueryClient, QueryClientProvider } from 'react-query'; import { ReactQueryDevtools } from 'react-query/devtools'; diff --git a/frontend/src/modules/Servicemap/Map.tsx b/frontend/src/modules/Servicemap/Map.tsx index 42c8a3d61e..b663aa5ed2 100644 --- a/frontend/src/modules/Servicemap/Map.tsx +++ b/frontend/src/modules/Servicemap/Map.tsx @@ -1,7 +1,7 @@ /* eslint-disable */ //@ts-nocheck import { useIsDarkMode } from 'hooks/useDarkMode'; -import React, { memo } from 'react'; +import { memo } from 'react'; import { ForceGraph2D } from 'react-force-graph'; import { getGraphData, getTooltip, transformLabel } from './utils'; diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index 21b43c3733..5bb748188b 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -8,7 +8,7 @@ import ResourceAttributesFilter from 'container/ResourceAttributesFilter'; import useResourceAttribute from 'hooks/useResourceAttribute'; import { whilelistedKeys } from 'hooks/useResourceAttribute/config'; import { IResourceAttribute } from 'hooks/useResourceAttribute/types'; -import React, { useEffect, useRef } from 'react'; +import { useEffect, useRef } from 'react'; import { connect } from 'react-redux'; import { RouteComponentProps, withRouter } from 'react-router-dom'; import { getDetailedServiceMapItems, ServiceMapStore } from 'store/actions'; diff --git a/frontend/src/modules/Servicemap/index.tsx b/frontend/src/modules/Servicemap/index.tsx index cf069e19f3..6c50cc0d26 100644 --- a/frontend/src/modules/Servicemap/index.tsx +++ b/frontend/src/modules/Servicemap/index.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import ServiceMap from './ServiceMap'; function ServiceMapContainer(): JSX.Element { diff --git a/frontend/src/modules/Usage/UsageExplorer.tsx b/frontend/src/modules/Usage/UsageExplorer.tsx index 4550e9dac9..bc9bb457ab 100644 --- a/frontend/src/modules/Usage/UsageExplorer.tsx +++ b/frontend/src/modules/Usage/UsageExplorer.tsx @@ -3,7 +3,7 @@ import { Select, Space, Typography } from 'antd'; import Graph from 'components/Graph'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { withRouter } from 'react-router-dom'; import { GetService, getUsageData, UsageDataItem } from 'store/actions'; diff --git a/frontend/src/modules/Usage/index.tsx b/frontend/src/modules/Usage/index.tsx index c2b629236e..5d664e90ef 100644 --- a/frontend/src/modules/Usage/index.tsx +++ b/frontend/src/modules/Usage/index.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { UsageExplorer } from './UsageExplorer'; function UsageExplorerContainer(): JSX.Element { diff --git a/frontend/src/pages/AlertChannelCreate/index.tsx b/frontend/src/pages/AlertChannelCreate/index.tsx index e2706a5a18..09d55d320e 100644 --- a/frontend/src/pages/AlertChannelCreate/index.tsx +++ b/frontend/src/pages/AlertChannelCreate/index.tsx @@ -4,7 +4,6 @@ import ROUTES from 'constants/routes'; import CreateAlertChannels from 'container/CreateAlertChannels'; import GeneralSettings from 'container/GeneralSettings'; import history from 'lib/history'; -import React from 'react'; import { useTranslation } from 'react-i18next'; function SettingsPage(): JSX.Element { diff --git a/frontend/src/pages/AlertList/index.tsx b/frontend/src/pages/AlertList/index.tsx index 8cfd48ed6c..336c399a2f 100644 --- a/frontend/src/pages/AlertList/index.tsx +++ b/frontend/src/pages/AlertList/index.tsx @@ -2,7 +2,6 @@ import { Tabs } from 'antd'; import AllAlertRules from 'container/ListAlertRules'; // import MapAlertChannels from 'container/MapAlertChannels'; import TriggeredAlerts from 'container/TriggeredAlerts'; -import React from 'react'; function AllAlertList(): JSX.Element { const items = [ diff --git a/frontend/src/pages/AllErrors/index.tsx b/frontend/src/pages/AllErrors/index.tsx index 2e7238bebc..863ba9d638 100644 --- a/frontend/src/pages/AllErrors/index.tsx +++ b/frontend/src/pages/AllErrors/index.tsx @@ -2,7 +2,6 @@ import RouteTab from 'components/RouteTab'; import ROUTES from 'constants/routes'; import AllErrorsContainer from 'container/AllError'; import ResourceAttributesFilter from 'container/ResourceAttributesFilter'; -import React from 'react'; import { useTranslation } from 'react-i18next'; function AllErrors(): JSX.Element { diff --git a/frontend/src/pages/ChannelsEdit/index.tsx b/frontend/src/pages/ChannelsEdit/index.tsx index 69dd1ee2ce..5a4115e837 100644 --- a/frontend/src/pages/ChannelsEdit/index.tsx +++ b/frontend/src/pages/ChannelsEdit/index.tsx @@ -10,7 +10,6 @@ import { WebhookType, } from 'container/CreateAlertChannels/config'; import EditAlertChannels from 'container/EditAlertChannels'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useParams } from 'react-router-dom'; diff --git a/frontend/src/pages/CreateAlert/index.tsx b/frontend/src/pages/CreateAlert/index.tsx index 51dbae66b3..1b5efbc496 100644 --- a/frontend/src/pages/CreateAlert/index.tsx +++ b/frontend/src/pages/CreateAlert/index.tsx @@ -1,5 +1,4 @@ import CreateAlertRule from 'container/CreateAlertRule'; -import React from 'react'; function CreateAlertPage(): JSX.Element { return ; diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx index 4380070228..35ccabcec5 100644 --- a/frontend/src/pages/Dashboard/index.tsx +++ b/frontend/src/pages/Dashboard/index.tsx @@ -1,7 +1,7 @@ import { Space } from 'antd'; import ReleaseNote from 'components/ReleaseNote'; import ListOfAllDashboard from 'container/ListOfDashboard'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { connect } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { bindActionCreators } from 'redux'; diff --git a/frontend/src/pages/DashboardWidget/index.tsx b/frontend/src/pages/DashboardWidget/index.tsx index 7e9f4e8f73..a4ed88e264 100644 --- a/frontend/src/pages/DashboardWidget/index.tsx +++ b/frontend/src/pages/DashboardWidget/index.tsx @@ -4,7 +4,7 @@ import ROUTES from 'constants/routes'; import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import NewWidget from 'container/NewWidget'; import history from 'lib/history'; -import React, { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { generatePath, useLocation, useParams } from 'react-router-dom'; import { bindActionCreators, Dispatch } from 'redux'; diff --git a/frontend/src/pages/EditRules/index.tsx b/frontend/src/pages/EditRules/index.tsx index 7372b08b90..af884f5692 100644 --- a/frontend/src/pages/EditRules/index.tsx +++ b/frontend/src/pages/EditRules/index.tsx @@ -4,7 +4,7 @@ import ROUTES from 'constants/routes'; import EditRulesContainer from 'container/EditRules'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useLocation } from 'react-router-dom'; diff --git a/frontend/src/pages/ErrorDetails/index.tsx b/frontend/src/pages/ErrorDetails/index.tsx index 94bd8e248e..203c6796ac 100644 --- a/frontend/src/pages/ErrorDetails/index.tsx +++ b/frontend/src/pages/ErrorDetails/index.tsx @@ -4,7 +4,7 @@ import getById from 'api/errors/getById'; import Spinner from 'components/Spinner'; import ROUTES from 'constants/routes'; import ErrorDetailsContainer from 'container/ErrorDetails'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; diff --git a/frontend/src/pages/GettingStarted/DocCard.tsx b/frontend/src/pages/GettingStarted/DocCard.tsx index 70f9f3e430..6fc4a1f8e3 100644 --- a/frontend/src/pages/GettingStarted/DocCard.tsx +++ b/frontend/src/pages/GettingStarted/DocCard.tsx @@ -1,6 +1,5 @@ import { Typography } from 'antd'; import { useIsDarkMode } from 'hooks/useDarkMode'; -import React from 'react'; import { Link } from 'react-router-dom'; import { DocCardContainer } from './styles'; diff --git a/frontend/src/pages/GettingStarted/Section.tsx b/frontend/src/pages/GettingStarted/Section.tsx index 4a90b746de..cbddde9783 100644 --- a/frontend/src/pages/GettingStarted/Section.tsx +++ b/frontend/src/pages/GettingStarted/Section.tsx @@ -1,6 +1,5 @@ import { Col, Row, Typography } from 'antd'; import { map } from 'lodash-es'; -import React from 'react'; import DocCard from './DocCard'; import { TGetStartedContentSection } from './types'; diff --git a/frontend/src/pages/GettingStarted/index.tsx b/frontend/src/pages/GettingStarted/index.tsx index cba67ec6c8..909a221bd4 100644 --- a/frontend/src/pages/GettingStarted/index.tsx +++ b/frontend/src/pages/GettingStarted/index.tsx @@ -1,5 +1,4 @@ import { Typography } from 'antd'; -import React from 'react'; import { GetStartedContent } from './renderConfig'; import DocSection from './Section'; diff --git a/frontend/src/pages/GettingStarted/renderConfig.tsx b/frontend/src/pages/GettingStarted/renderConfig.tsx index 86aa6b5ed7..eccc8a9ba5 100644 --- a/frontend/src/pages/GettingStarted/renderConfig.tsx +++ b/frontend/src/pages/GettingStarted/renderConfig.tsx @@ -8,7 +8,6 @@ import { } from '@ant-design/icons'; import { Typography } from 'antd'; import Slack from 'container/SideNav/Slack'; -import React from 'react'; import store from 'store'; import { TGetStartedContentSection } from './types'; diff --git a/frontend/src/pages/License/index.tsx b/frontend/src/pages/License/index.tsx index 650098edf3..bd7134fa20 100644 --- a/frontend/src/pages/License/index.tsx +++ b/frontend/src/pages/License/index.tsx @@ -1,5 +1,4 @@ import Licenses from 'container/Licenses'; -import React from 'react'; function LicensePage(): JSX.Element { return ; diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx index dbf271e9f4..a2090b9e1d 100644 --- a/frontend/src/pages/Login/index.tsx +++ b/frontend/src/pages/Login/index.tsx @@ -4,7 +4,6 @@ import Spinner from 'components/Spinner'; import WelcomeLeftContainer from 'components/WelcomeLeftContainer'; import LoginContainer from 'container/Login'; import useURLQuery from 'hooks/useUrlQuery'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; diff --git a/frontend/src/pages/Logs/PopoverContent.tsx b/frontend/src/pages/Logs/PopoverContent.tsx index 8dcf819d3a..9f0214ad64 100644 --- a/frontend/src/pages/Logs/PopoverContent.tsx +++ b/frontend/src/pages/Logs/PopoverContent.tsx @@ -1,5 +1,4 @@ import { InputNumber, Row, Space, Typography } from 'antd'; -import React from 'react'; interface PopoverContentProps { linesPerRow: number; diff --git a/frontend/src/pages/Logs/config.ts b/frontend/src/pages/Logs/config.ts index dca2a3b937..60f46195bd 100644 --- a/frontend/src/pages/Logs/config.ts +++ b/frontend/src/pages/Logs/config.ts @@ -1,3 +1,5 @@ +import { CSSProperties } from 'react'; + import { ViewModeOption } from './types'; export const viewModeOptionList: ViewModeOption[] = [ @@ -20,6 +22,6 @@ export const viewModeOptionList: ViewModeOption[] = [ export const logsOptions = ['raw', 'table']; -export const defaultSelectStyle: React.CSSProperties = { +export const defaultSelectStyle: CSSProperties = { minWidth: '6rem', }; diff --git a/frontend/src/pages/Logs/index.tsx b/frontend/src/pages/Logs/index.tsx index d92c45708e..76433a7c4d 100644 --- a/frontend/src/pages/Logs/index.tsx +++ b/frontend/src/pages/Logs/index.tsx @@ -6,7 +6,7 @@ import LogsAggregate from 'container/LogsAggregate'; import LogsFilters from 'container/LogsFilters'; import LogsSearchFilter from 'container/LogsSearchFilter'; import LogsTable from 'container/LogsTable'; -import React, { useCallback, useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { useDispatch } from 'react-redux'; import { Dispatch } from 'redux'; import AppActions from 'types/actions'; diff --git a/frontend/src/pages/MetricApplication/index.tsx b/frontend/src/pages/MetricApplication/index.tsx index e29a2b6056..9ed0fd3ab2 100644 --- a/frontend/src/pages/MetricApplication/index.tsx +++ b/frontend/src/pages/MetricApplication/index.tsx @@ -3,7 +3,7 @@ import Spinner from 'components/Spinner'; import MetricsApplicationContainer from 'container/MetricsApplication'; import useResourceAttribute from 'hooks/useResourceAttribute'; import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils'; -import React, { useEffect, useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { connect, useSelector } from 'react-redux'; import { useParams } from 'react-router-dom'; import { bindActionCreators } from 'redux'; diff --git a/frontend/src/pages/Metrics/index.tsx b/frontend/src/pages/Metrics/index.tsx index f224cec02a..1d83d28b33 100644 --- a/frontend/src/pages/Metrics/index.tsx +++ b/frontend/src/pages/Metrics/index.tsx @@ -8,7 +8,7 @@ import ResourceAttributesFilter from 'container/ResourceAttributesFilter'; import { useNotifications } from 'hooks/useNotifications'; import useResourceAttribute from 'hooks/useResourceAttribute'; import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils'; -import React, { useEffect, useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { connect, useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { bindActionCreators, Dispatch } from 'redux'; diff --git a/frontend/src/pages/MySettings/index.tsx b/frontend/src/pages/MySettings/index.tsx index 7029560078..f3f821e466 100644 --- a/frontend/src/pages/MySettings/index.tsx +++ b/frontend/src/pages/MySettings/index.tsx @@ -1,5 +1,4 @@ import MySettingsContainer from 'container/MySettings'; -import React from 'react'; function MySettings(): JSX.Element { return ; diff --git a/frontend/src/pages/NewDashboard/index.tsx b/frontend/src/pages/NewDashboard/index.tsx index 6d35ffede4..2183531f63 100644 --- a/frontend/src/pages/NewDashboard/index.tsx +++ b/frontend/src/pages/NewDashboard/index.tsx @@ -1,6 +1,6 @@ import Spinner from 'components/Spinner'; import NewDashboard from 'container/NewDashboard'; -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { connect, useSelector } from 'react-redux'; import { useParams } from 'react-router-dom'; import { bindActionCreators, Dispatch } from 'redux'; diff --git a/frontend/src/pages/ResetPassword/index.tsx b/frontend/src/pages/ResetPassword/index.tsx index f45e7d15f3..d407d1251f 100644 --- a/frontend/src/pages/ResetPassword/index.tsx +++ b/frontend/src/pages/ResetPassword/index.tsx @@ -2,7 +2,6 @@ import { Typography } from 'antd'; import getUserVersion from 'api/user/getVersion'; import Spinner from 'components/Spinner'; import ResetPasswordContainer from 'container/ResetPassword'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { useQueries } from 'react-query'; import { useSelector } from 'react-redux'; diff --git a/frontend/src/pages/Settings/index.tsx b/frontend/src/pages/Settings/index.tsx index 20b76122aa..93a668b420 100644 --- a/frontend/src/pages/Settings/index.tsx +++ b/frontend/src/pages/Settings/index.tsx @@ -5,7 +5,6 @@ import GeneralSettings from 'container/GeneralSettings'; import OrganizationSettings from 'container/OrganizationSettings'; import useComponentPermission from 'hooks/useComponentPermission'; import history from 'lib/history'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; diff --git a/frontend/src/pages/SignUp/SignUp.tsx b/frontend/src/pages/SignUp/SignUp.tsx index a8c1c1687c..30fe26a5a4 100644 --- a/frontend/src/pages/SignUp/SignUp.tsx +++ b/frontend/src/pages/SignUp/SignUp.tsx @@ -8,7 +8,7 @@ import WelcomeLeftContainer from 'components/WelcomeLeftContainer'; import ROUTES from 'constants/routes'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; import { useLocation } from 'react-router-dom'; diff --git a/frontend/src/pages/SignUp/index.tsx b/frontend/src/pages/SignUp/index.tsx index 2a073a756a..9f10826c6f 100644 --- a/frontend/src/pages/SignUp/index.tsx +++ b/frontend/src/pages/SignUp/index.tsx @@ -1,7 +1,6 @@ import { Typography } from 'antd'; import getUserVersion from 'api/user/getVersion'; import Spinner from 'components/Spinner'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { useQueries } from 'react-query'; import { useSelector } from 'react-redux'; diff --git a/frontend/src/pages/SignUp/styles.ts b/frontend/src/pages/SignUp/styles.ts index f8224e7dbd..cb301285af 100644 --- a/frontend/src/pages/SignUp/styles.ts +++ b/frontend/src/pages/SignUp/styles.ts @@ -1,5 +1,5 @@ import { Card, Form } from 'antd'; -import React from 'react'; +import { CSSProperties } from 'react'; import styled from 'styled-components'; export const FormWrapper = styled(Card)` @@ -25,7 +25,7 @@ export const ButtonContainer = styled.div` `; interface Props { - marginTop: React.CSSProperties['marginTop']; + marginTop: CSSProperties['marginTop']; } export const MarginTop = styled.div` diff --git a/frontend/src/pages/SomethingWentWrong/index.tsx b/frontend/src/pages/SomethingWentWrong/index.tsx index 794f9f5ba7..f15b127bd8 100644 --- a/frontend/src/pages/SomethingWentWrong/index.tsx +++ b/frontend/src/pages/SomethingWentWrong/index.tsx @@ -3,7 +3,6 @@ import SomethingWentWrongAsset from 'assets/SomethingWentWrong'; import { Container } from 'components/NotFound/styles'; import ROUTES from 'constants/routes'; import history from 'lib/history'; -import React from 'react'; function SomethingWentWrong(): JSX.Element { return ( diff --git a/frontend/src/pages/Status/index.tsx b/frontend/src/pages/Status/index.tsx index f923b428b4..cdc67bfb42 100644 --- a/frontend/src/pages/Status/index.tsx +++ b/frontend/src/pages/Status/index.tsx @@ -1,5 +1,4 @@ import Version from 'container/Version'; -import React from 'react'; function Status(): JSX.Element { return ; diff --git a/frontend/src/pages/Trace/index.tsx b/frontend/src/pages/Trace/index.tsx index fba0cb2afc..acf8ec2eff 100644 --- a/frontend/src/pages/Trace/index.tsx +++ b/frontend/src/pages/Trace/index.tsx @@ -9,7 +9,7 @@ import TraceTable from 'container/Trace/TraceTable'; import { useNotifications } from 'hooks/useNotifications'; import getStep from 'lib/getStep'; import history from 'lib/history'; -import React, { useCallback, useEffect, useState } from 'react'; +import { MouseEventHandler, useCallback, useEffect, useState } from 'react'; import { connect, useDispatch, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; @@ -127,7 +127,7 @@ function Trace({ [dispatch], ); - const onClickHandler: React.MouseEventHandler = useCallback( + const onClickHandler: MouseEventHandler = useCallback( (e) => { e.preventDefault(); e.stopPropagation(); diff --git a/frontend/src/pages/TraceDetail/index.tsx b/frontend/src/pages/TraceDetail/index.tsx index 97c3140408..f936bd2d0c 100644 --- a/frontend/src/pages/TraceDetail/index.tsx +++ b/frontend/src/pages/TraceDetail/index.tsx @@ -4,7 +4,7 @@ import NotFound from 'components/NotFound'; import Spinner from 'components/Spinner'; import TraceDetailContainer from 'container/TraceDetail'; import useUrlQuery from 'hooks/useUrlQuery'; -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; import { useQuery } from 'react-query'; import { useParams } from 'react-router-dom'; import { Props as TraceDetailProps } from 'types/api/trace/getTraceItem'; diff --git a/frontend/src/pages/UnAuthorized/index.tsx b/frontend/src/pages/UnAuthorized/index.tsx index fbf75b5f3c..c68f3ca823 100644 --- a/frontend/src/pages/UnAuthorized/index.tsx +++ b/frontend/src/pages/UnAuthorized/index.tsx @@ -2,7 +2,6 @@ import { Space, Typography } from 'antd'; import UnAuthorized from 'assets/UnAuthorized'; import { Button, Container } from 'components/NotFound/styles'; import ROUTES from 'constants/routes'; -import React from 'react'; function UnAuthorizePage(): JSX.Element { return ( diff --git a/frontend/src/providers/QueryBuilder.tsx b/frontend/src/providers/QueryBuilder.tsx index 9a1693ddd5..c5a61c01e9 100644 --- a/frontend/src/providers/QueryBuilder.tsx +++ b/frontend/src/providers/QueryBuilder.tsx @@ -10,7 +10,7 @@ import { import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { createNewBuilderItemName } from 'lib/newQueryBuilder/createNewBuilderItemName'; import { getOperatorsBySourceAndPanelType } from 'lib/newQueryBuilder/getOperatorsBySourceAndPanelType'; -import React, { +import { createContext, PropsWithChildren, useCallback, diff --git a/frontend/src/store/actions/dashboard/deleteWidget.ts b/frontend/src/store/actions/dashboard/deleteWidget.ts index ba8e1965e7..d4a29db3f5 100644 --- a/frontend/src/store/actions/dashboard/deleteWidget.ts +++ b/frontend/src/store/actions/dashboard/deleteWidget.ts @@ -1,7 +1,7 @@ import updateDashboardApi from 'api/dashboard/update'; import { AxiosError } from 'axios'; import { getPreLayouts, LayoutProps } from 'container/GridGraphLayout'; -import { Dispatch } from 'redux'; +import { Dispatch, SetStateAction } from 'react'; import store from 'store'; import AppActions from 'types/actions'; import { UPDATE_DASHBOARD } from 'types/actions/dashboard'; @@ -66,5 +66,5 @@ export const DeleteWidget = ({ export interface DeleteWidgetProps { widgetId: Widgets['id']; - setLayout?: React.Dispatch>; + setLayout?: Dispatch>; } diff --git a/frontend/src/wdyr.ts b/frontend/src/wdyr.ts index e64dcca566..161a1e8854 100644 --- a/frontend/src/wdyr.ts +++ b/frontend/src/wdyr.ts @@ -2,7 +2,7 @@ /* eslint-disable global-require */ /// // ^ https://github.com/welldone-software/why-did-you-render/issues/161 -import React from 'react'; +import * as React from 'react'; if (process.env.NODE_ENV === 'development') { const whyDidYouRender = require('@welldone-software/why-did-you-render'); diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 92ea1e3649..608bf0388e 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -4,7 +4,7 @@ "noImplicitAny": true, "module": "esnext", "target": "es5", - "jsx": "react", + "jsx": "react-jsx", "allowJs": true, "strict": true, "esModuleInterop": true, @@ -37,6 +37,6 @@ "./webpack.config.js", "./webpack.config.prod.js", "./jest.setup.ts", - "./tests/**.ts", + "./tests/**.ts" ] }