chore: remove react import (#2727)

* chore: added jsx-runtime plugin in eslint tsconfig

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>

* chore: updated react imports

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>

* chore: renamed redux dispatch

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>

* fix: build is fixed

---------

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/.babelrc

@@ -1,7 +1,7 @@
 {
 	"presets": [
 		"@babel/preset-env",
-		"@babel/preset-react",
+		["@babel/preset-react", { "runtime": "automatic" }],
 		"@babel/preset-typescript"
 	],
 	"plugins": [

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: {

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;

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';

frontend/src/assets/Dashboard/TimeSeries.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function TimeSeries(): JSX.Element {
 	return (
 		<svg

frontend/src/assets/Dashboard/Value.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 
 function Value(props: ValueProps): JSX.Element {
 	const { fillColor } = props;
@@ -20,7 +20,7 @@ function Value(props: ValueProps): JSX.Element {
 }
 
 interface ValueProps {
-	fillColor: React.CSSProperties['color'];
+	fillColor: CSSProperties['color'];
 }
 
 export default Value;

frontend/src/assets/NotFound.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function NotFound(): JSX.Element {
 	return (
 		<svg

frontend/src/assets/SomethingWentWrong.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function SomethingWentWrong(): JSX.Element {
 	return (
 		<svg

frontend/src/assets/UnAuthorized.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function UnAuthorized(): JSX.Element {
 	return (
 		<svg

frontend/src/components/Editor/Editor.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import React from 'react';
 
 import Editor from './index';
 

frontend/src/components/Editor/index.tsx

@@ -1,6 +1,6 @@
 import MEditor, { EditorProps } from '@monaco-editor/react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 function Editor({
 	value,

frontend/src/components/Graph/index.tsx

@@ -26,7 +26,7 @@ import annotationPlugin from 'chartjs-plugin-annotation';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import isEqual from 'lodash-es/isEqual';
-import React, { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 
 import { hasData } from './hasData';
 import { getAxisLabelColor } from './helpers';

frontend/src/components/Input/index.tsx

@@ -1,5 +1,12 @@
 import { Form, Input, InputProps, InputRef } from 'antd';
-import React from 'react';
+import {
+	ChangeEventHandler,
+	FocusEventHandler,
+	KeyboardEventHandler,
+	LegacyRef,
+	ReactNode,
+	Ref,
+} from 'react';
 
 function InputComponent({
 	value,
@@ -22,7 +29,7 @@ function InputComponent({
 				type={type}
 				onChange={onChangeHandler}
 				value={value}
-				ref={ref as React.Ref<InputRef>}
+				ref={ref as Ref<InputRef>}
 				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<HTMLInputElement>;
+	onChangeHandler?: ChangeEventHandler<HTMLInputElement>;
 	placeholder?: InputProps['placeholder'];
-	ref?: React.LegacyRef<InputRef>;
+	ref?: LegacyRef<InputRef>;
 	size?: InputProps['size'];
-	onBlurHandler?: React.FocusEventHandler<HTMLInputElement>;
+	onBlurHandler?: FocusEventHandler<HTMLInputElement>;
-	onPressEnterHandler?: React.KeyboardEventHandler<HTMLInputElement>;
+	onPressEnterHandler?: KeyboardEventHandler<HTMLInputElement>;
 	label?: string;
 	labelOnTop?: boolean;
-	addonBefore?: React.ReactNode;
+	addonBefore?: ReactNode;
 }
 
 InputComponent.defaultProps = {

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(
-			<React.Suspense fallback={<div>Loading...</div>}>
+			<Suspense fallback={<div>Loading...</div>}>
 				<LoadableSampleComponent />
-			</React.Suspense>,
+			</Suspense>,
 		);
 
 		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);
 

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<LazyComponent> {
+}): LazyExoticComponent<LazyComponent> {
 	return lazy(() => importPath());
 }
 

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);

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 <CategoryHeadingText type="secondary">{children}</CategoryHeadingText>;

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;

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

frontend/src/components/Logs/RawLogView/config.ts

@@ -1 +1,3 @@
-export const rawLineStyle: React.CSSProperties = {};
+import { CSSProperties } from 'react';
+
+export const rawLineStyle: CSSProperties = {};

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';
 

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',
 };

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';

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;
+	message: ReactNode | string;
-	action: React.ReactNode | undefined;
+	action: ReactNode | undefined;
 }
 
 function MessageTip({

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,

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';

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';

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';

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';

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<Element>, data: ResizeCallbackData) => void;
+	onResize: (e: SyntheticEvent<Element>, data: ResizeCallbackData) => void;
 	width: number;
 }
 

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<any>): JSX.Element {
 
 	const handleResize = useCallback(
 		(index: number) => (
-			_e: React.SyntheticEvent<Element>,
+			_e: SyntheticEvent<Element>,
 			{ size }: ResizeCallbackData,
 		): void => {
 			const newColumns = [...columnsData];

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,

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'];
+	height?: CSSProperties['height'];
-	style?: React.CSSProperties;
+	style?: CSSProperties;
 }
 Spinner.defaultProps = {
 	size: undefined,

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<Props>`

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)<TStyledTypographyTitle>`
 	${styledClass}
 `;
 
-type TStyledDiv = React.HTMLAttributes<HTMLDivElement> & IStyledClass;
+type TStyledDiv = HTMLAttributes<HTMLDivElement> & IStyledClass;
 const StyledDiv = styled.div<TStyledDiv>`
 	${styledClass}
 `;

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';
 

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,

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<React.SetStateAction<timePreferance>>;
+	setSelectedTime: Dispatch<SetStateAction<timePreferance>>;
 	selectedTime: timePreferance;
 }
 

frontend/src/components/ValueGraph/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Value } from './styles';
 
 function ValueGraph({ value }: ValueGraphProps): JSX.Element {

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;

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';

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<React.SetStateAction<Channels[]>>;
+	setChannels: Dispatch<SetStateAction<Channels[]>>;
 	id: string;
 }
 

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';

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';

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';

frontend/src/container/ConfigDropdown/Config/ErrorLink.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
 interface State {
 	hasError: boolean;

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

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 {

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';

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 {

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';
 

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 {

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';
 

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';
 

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';

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<
+	setFilter: Dispatch<SetStateAction<Partial<Array<LabelFilterStatement>>>>;
-		React.SetStateAction<Partial<Array<LabelFilterStatement>>>
-	>;
 }
 
 export default LabelFilterForm;

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<React.SetStateAction<Partial<PagerChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<PagerChannel>>>;
 }
 
 export default PagerForm;

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<React.SetStateAction<Partial<SlackChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<SlackChannel>>>;
 }
 
 export default Slack;

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<
+	setSelectedConfig: Dispatch<SetStateAction<Partial<WebhookChannel>>>;
-		React.SetStateAction<Partial<WebhookChannel>>
-	>;
 }
 
 export default WebhookSettings;

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 <SlackSettings setSelectedConfig={setSelectedConfig} />;
@@ -115,8 +115,8 @@ function FormAlertChannels({
 interface FormAlertChannelsProps {
 	formInstance: FormInstance;
 	type: ChannelType;
-	setSelectedConfig: React.Dispatch<
+	setSelectedConfig: Dispatch<
-		React.SetStateAction<Partial<SlackChannel & WebhookChannel & PagerChannel>>
+		SetStateAction<Partial<SlackChannel & WebhookChannel & PagerChannel>>
 	>;
 	onTypeChangeHandler: (value: ChannelType) => void;
 	onSaveHandler: (props: ChannelType) => void;

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';
 

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';

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 renderOptions = (): ReactNode[] => {
-		const children: React.ReactNode[] = [];
+		const children: ReactNode[] = [];
 
 		if (loading || payload === undefined || payload.length === 0) {
 			return children;

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';

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({

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';

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,

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';
 

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';

frontend/src/container/FormAlertRules/labels/QueryChip.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { QueryChipContainer, QueryChipItem } from './styles';
 import { ILabelRecord } from './types';
 

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<HTMLInputElement>): void => {
+	const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
 		setCurrentVal(e.target?.value);
 	};
 

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';

frontend/src/container/GantChart/SpanName/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Container, Service, Span, SpanWrapper } from './styles';
 
 function SpanNameComponent({

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<HTMLUListElement>(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<HTMLDivElement> = (
+	const onClickTreeExpansion: MouseEventHandler<HTMLDivElement> = (
 		event,
 	): void => {
 		event.stopPropagation();
@@ -207,8 +215,8 @@ interface ITraceGlobal {
 
 interface TraceProps extends ITraceTree, ITraceGlobal {
 	activeHoverId: string;
-	setActiveHoverId: React.Dispatch<React.SetStateAction<string>>;
+	setActiveHoverId: Dispatch<SetStateAction<string>>;
-	setActiveSelectedId: React.Dispatch<React.SetStateAction<string>>;
+	setActiveSelectedId: Dispatch<SetStateAction<string>>;
 	activeSelectedId: string;
 	level: number;
 	activeSpanPath: string[];

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<React.SetStateAction<string>>;
+	setActiveHoverId: Dispatch<SetStateAction<string>>;
-	setActiveSelectedId: React.Dispatch<React.SetStateAction<string>>;
+	setActiveSelectedId: Dispatch<SetStateAction<string>>;
 	spanId: string;
 	intervalUnit: IIntervalUnit;
 }

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 (
-				<React.Fragment key={category.name}>
+				<Fragment key={category.name}>
 					<Col xs={22} xl={11} key={category.name} style={{ margin: '0.5rem' }}>
 						<Card style={{ height: '100%', minHeight: 300 }}>
 							<Typography.Title style={{ margin: 0 }} level={3}>
@@ -576,7 +576,7 @@ function GeneralSettings({
 							</Modal>
 						</Card>
 					</Col>
-				</React.Fragment>
+				</Fragment>
 			);
 		}
 		return null;

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<HTMLInputElement>,
+		e: ChangeEvent<HTMLInputElement>,
-		func: React.Dispatch<React.SetStateAction<number | null>>,
+		func: Dispatch<SetStateAction<number | null>>,
 	): void => {
 		interacted.current = true;
 		const { value } = e.target;
@@ -111,7 +118,7 @@ function Retention({
 interface RetentionProps {
 	retentionValue: number | null;
 	text: string;
-	setRetentionValue: React.Dispatch<React.SetStateAction<number | null>>;
+	setRetentionValue: Dispatch<SetStateAction<number | null>>;
 	hide: boolean;
 }
 

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';
 

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';

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';
 

frontend/src/container/GridGraphLayout/EmptyWidget/index.tsx

@@ -1,5 +1,4 @@
 import { Typography } from 'antd';
-import React from 'react';
 
 import { Container } from './styles';
 

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';

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';

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>(chartData);
 
 	const onToggleModal = useCallback(
-		(func: React.Dispatch<React.SetStateAction<boolean>>) => {
+		(func: Dispatch<SetStateAction<boolean>>) => {
 			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<React.SetStateAction<LayoutProps[]>>;
+	setLayout?: Dispatch<SetStateAction<LayoutProps[]>>;
 	onDragSelect?: (start: number, end: number) => void;
 }
 

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<void>;
 	widgets: Widgets[] | undefined;
-	setLayout: React.Dispatch<React.SetStateAction<LayoutProps[]>>;
+	setLayout: Dispatch<SetStateAction<LayoutProps[]>>;
 }
 
 export default GraphLayout;

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',

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';

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<Dispatch<AppActions>>();
+	const dispatch: AppDispatch = useDispatch<ReduxDispatch<AppActions>>();
 
 	const [layouts, setLayout] = useState<LayoutProps[]>(
 		getPreLayouts(widgets, selectedDashboard.data.layout || []),
@@ -336,7 +342,7 @@ function GridGraph(props: Props): JSX.Element {
 }
 
 interface ComponentProps {
-	setLayout: React.Dispatch<React.SetStateAction<LayoutProps[]>>;
+	setLayout: Dispatch<SetStateAction<LayoutProps[]>>;
 }
 
 export interface LayoutProps extends Layout {
@@ -353,7 +359,7 @@ export interface State {
 interface DispatchProps {
 	toggleAddWidget: (
 		props: ToggleAddWidgetProps,
-	) => (dispatch: Dispatch<AppActions>) => void;
+	) => (dispatch: ReduxDispatch<AppActions>) => void;
 }
 
 const mapDispatchToProps = (

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';

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,

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';

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(
+	const onLogoutKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
-		(e: React.KeyboardEvent<HTMLDivElement>) => {
+		if (e.key === 'Enter' || e.key === 'Space') {
-			if (e.key === 'Enter' || e.key === 'Space') {
+			Logout();
-				Logout();
+		}
-			}
+	}, []);
-		},
-		[],
-	);
 
 	const menu: MenuProps = useMemo(
 		() => ({

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';

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';

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';

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<React.SetStateAction<GettableAlert[]>>;
+	setData: Dispatch<SetStateAction<GettableAlert[]>>;
 	notifications: NotificationInstance;
 }
 

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';

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 {

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<React.SetStateAction<GettableAlert[]>>;
+	setData: Dispatch<SetStateAction<GettableAlert[]>>;
 }
 
 export default ToggleAlertState;

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';