chore(FE): reduce main.js chunk size (#3486)

* refactor(FE/routes): lazy load DashboardWidget route

* refactor(FE/Styled): update antd import

* chore(FE): remove majority of import * and import only necessary items

* fix(FE): fix missing papa parse import

* fix(FE): fix missing papa parse import

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/AppRoutes/routes.ts

@@ -1,5 +1,4 @@
 import ROUTES from 'constants/routes';
-import DashboardWidget from 'pages/DashboardWidget';
 import { RouteProps } from 'react-router-dom';
 
 import {
@@ -8,6 +7,7 @@ import {
 	CreateAlertChannelAlerts,
 	CreateNewAlerts,
 	DashboardPage,
+	DashboardWidget,
 	EditAlertChannelsAlerts,
 	EditRulesPage,
 	ErrorDetails,

frontend/src/api/user/signup.ts

@@ -2,14 +2,12 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import * as loginPrecheck from 'types/api/user/loginPrecheck';
+import { PayloadProps } from 'types/api/user/loginPrecheck';
 import { Props } from 'types/api/user/signup';
 
 const signup = async (
 	props: Props,
-): Promise<
-	SuccessResponse<null | loginPrecheck.PayloadProps> | ErrorResponse
-> => {
+): Promise<SuccessResponse<null | PayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.post(`/register`, {
 			...props,

frontend/src/components/Graph/Plugin/DragSelect.ts

@@ -1,5 +1,5 @@
 import { Chart, ChartTypeRegistry, Plugin } from 'chart.js';
-import * as ChartHelpers from 'chart.js/helpers';
+import { getRelativePosition } from 'chart.js/helpers';
 
 // utils
 import { ChartEventHandler, mergeDefaultOptions } from './utils';
@@ -45,7 +45,7 @@ function createMousedownHandler(
 	return (ev): void => {
 		const { left, right } = chart.chartArea;
 
-		let { x: startDragPositionX } = ChartHelpers.getRelativePosition(ev, chart);
+		let { x: startDragPositionX } = getRelativePosition(ev, chart);
 
 		if (left > startDragPositionX) {
 			startDragPositionX = left;
@@ -74,7 +74,7 @@ function createMousemoveHandler(
 
 		const { left, right } = chart.chartArea;
 
-		let { x: dragPositionX } = ChartHelpers.getRelativePosition(ev, chart);
+		let { x: dragPositionX } = getRelativePosition(ev, chart);
 
 		if (left > dragPositionX) {
 			dragPositionX = left;
@@ -99,7 +99,7 @@ function createMouseupHandler(
 	return (ev): void => {
 		const { left, right } = chart.chartArea;
 
-		let { x: endRelativePostionX } = ChartHelpers.getRelativePosition(ev, chart);
+		let { x: endRelativePostionX } = getRelativePosition(ev, chart);
 
 		if (left > endRelativePostionX) {
 			endRelativePostionX = left;

frontend/src/components/Graph/Plugin/IntersectionCursor.ts

@@ -1,5 +1,5 @@
 import { Chart, ChartEvent, ChartTypeRegistry, Plugin } from 'chart.js';
-import * as ChartHelpers from 'chart.js/helpers';
+import { getRelativePosition } from 'chart.js/helpers';
 
 // utils
 import { ChartEventHandler, mergeDefaultOptions } from './utils';
@@ -42,7 +42,7 @@ function createMousemoveHandler(
 	return (ev: ChartEvent | MouseEvent): void => {
 		const { left, right, top, bottom } = chart.chartArea;
 
-		let { x, y } = ChartHelpers.getRelativePosition(ev, chart);
+		let { x, y } = getRelativePosition(ev, chart);
 
 		if (left > x) {
 			x = left;

frontend/src/components/Styled/index.ts

@@ -1,4 +1,17 @@
-import * as AntD from 'antd';
+import {
+	Button,
+	ButtonProps,
+	Col,
+	ColProps,
+	Divider,
+	DividerProps,
+	Row,
+	RowProps,
+	Space,
+	SpaceProps,
+	TabsProps,
+	Typography,
+} from 'antd';
 import { TextProps } from 'antd/lib/typography/Text';
 import { TitleProps } from 'antd/lib/typography/Title';
 import { HTMLAttributes } from 'react';
@@ -9,43 +22,43 @@ import { IStyledClass } from './types';
 const styledClass = (props: IStyledClass): FlattenSimpleInterpolation | null =>
 	props.styledclass || null;
 
-type TStyledCol = AntD.ColProps & IStyledClass;
-const StyledCol = styled(AntD.Col)<TStyledCol>`
+type TStyledCol = ColProps & IStyledClass;
+const StyledCol = styled(Col)<TStyledCol>`
 	${styledClass}
 `;
 
-type TStyledRow = AntD.RowProps & IStyledClass;
-const StyledRow = styled(AntD.Row)<TStyledRow>`
+type TStyledRow = RowProps & IStyledClass;
+const StyledRow = styled(Row)<TStyledRow>`
 	${styledClass}
 `;
 
-type TStyledDivider = AntD.DividerProps & IStyledClass;
-const StyledDivider = styled(AntD.Divider)<TStyledDivider>`
+type TStyledDivider = DividerProps & IStyledClass;
+const StyledDivider = styled(Divider)<TStyledDivider>`
 	${styledClass}
 `;
 
-type TStyledSpace = AntD.SpaceProps & IStyledClass;
-const StyledSpace = styled(AntD.Space)<TStyledSpace>`
+type TStyledSpace = SpaceProps & IStyledClass;
+const StyledSpace = styled(Space)<TStyledSpace>`
 	${styledClass}
 `;
 
-type TStyledTabs = AntD.TabsProps & IStyledClass;
-const StyledTabs = styled(AntD.Divider)<TStyledTabs>`
+type TStyledTabs = TabsProps & IStyledClass;
+const StyledTabs = styled(Divider)<TStyledTabs>`
 	${styledClass}
 `;
 
-type TStyledButton = AntD.ButtonProps & IStyledClass;
-const StyledButton = styled(AntD.Button)<TStyledButton>`
+type TStyledButton = ButtonProps & IStyledClass;
+const StyledButton = styled(Button)<TStyledButton>`
 	${styledClass}
 `;
 
-const { Text } = AntD.Typography;
+const { Text } = Typography;
 type TStyledTypographyText = TextProps & IStyledClass;
 const StyledTypographyText = styled(Text)<TStyledTypographyText>`
 	${styledClass}
 `;
 
-const { Title } = AntD.Typography;
+const { Title } = Typography;
 type TStyledTypographyTitle = TitleProps & IStyledClass;
 const StyledTypographyTitle = styled(Title)<TStyledTypographyTitle>`
 	${styledClass}

frontend/src/container/LogControls/index.tsx

@@ -8,7 +8,7 @@ import dayjs from 'dayjs';
 import { Pagination } from 'hooks/queryPagination';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { OrderPreferenceItems } from 'pages/Logs/config';
-import * as Papa from 'papaparse';
+import { unparse } from 'papaparse';
 import { memo, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Dispatch } from 'redux';
@@ -121,7 +121,7 @@ function LogControls(): JSX.Element | null {
 	}, [flattenLogData]);
 
 	const downloadCsvFile = useCallback((): void => {
-		const csv = Papa.unparse(flattenLogData);
+		const csv = unparse(flattenLogData);
 		const csvBlob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
 		const csvUrl = URL.createObjectURL(csvBlob);
 		const downloadLink = document.createElement('a');

frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts

@@ -2,7 +2,7 @@ import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import useDebounce from 'hooks/useDebounce';
 import { IOption } from 'hooks/useResourceAttribute/types';
 import { isEqual, uniqWith } from 'lodash-es';
-import * as Papa from 'papaparse';
+import { parse } from 'papaparse';
 import { useCallback, useMemo, useState } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
@@ -45,7 +45,7 @@ export const useOrderByFilter = ({
 
 	const getUniqValues = useCallback((values: IOption[]): IOption[] => {
 		const modifiedValues = values.map((item) => {
-			const match = Papa.parse(item.value, { delimiter: orderByValueDelimiter });
+			const match = parse(item.value, { delimiter: orderByValueDelimiter });
 			if (!match) return { label: item.label, value: item.value };
 			// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars
 			const [_, order] = match.data.flat() as string[];
@@ -141,7 +141,7 @@ export const useOrderByFilter = ({
 		const result = getUniqValues(validResult);
 
 		const orderByValues: OrderByPayload[] = result.map((item) => {
-			const match = Papa.parse(item.value, { delimiter: orderByValueDelimiter });
+			const match = parse(item.value, { delimiter: orderByValueDelimiter });
 
 			if (!match) {
 				return {

frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts

@@ -1,5 +1,5 @@
 import { IOption } from 'hooks/useResourceAttribute/types';
-import * as Papa from 'papaparse';
+import { parse } from 'papaparse';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
@@ -51,7 +51,7 @@ export function mapLabelValuePairs(
 
 export function getLabelFromValue(arr: IOption[]): string[] {
 	return arr.flat().map((item) => {
-		const match = Papa.parse(item.value, { delimiter: orderByValueDelimiter });
+		const match = parse(item.value, { delimiter: orderByValueDelimiter });
 		if (match) {
 			const [key] = match.data as string[];
 

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts

@@ -1,5 +1,5 @@
 import { OPERATORS } from 'constants/queryBuilder';
-import * as Papa from 'papaparse';
+import { parse } from 'papaparse';
 
 import { orderByValueDelimiter } from '../OrderByFilter/utils';
 
@@ -25,7 +25,7 @@ export function getTagToken(tag: string): ITagToken {
 			tagKey: matchTagKey,
 			tagOperator: matchTagOperator,
 			tagValue: isInNInOperator(matchTagOperator)
-				? Papa.parse(matchTagValue).data.flat()
+				? parse(matchTagValue).data.flat()
 				: matchTagValue,
 		} as ITagToken;
 	}
@@ -118,7 +118,7 @@ export function checkCommaInValue(str: string): string {
 }
 
 export function getRemoveOrderFromValue(tag: string): string {
-	const match = Papa.parse(tag, { delimiter: orderByValueDelimiter });
+	const match = parse(tag, { delimiter: orderByValueDelimiter });
 	if (match) {
 		const [key] = match.data.flat() as string[];
 		return key;

frontend/src/container/TraceDetail/index.tsx

@@ -8,7 +8,7 @@ import {
 	StyledSpace,
 	StyledTypography,
 } from 'components/Styled';
-import * as StyledStyles from 'components/Styled/styles';
+import { Flex, Spacing } from 'components/Styled/styles';
 import GanttChart, { ITraceMetaData } from 'container/GantChart';
 import { getNodeById } from 'container/GantChart/utils';
 import Timeline from 'container/Timeline';
@@ -128,7 +128,7 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 	const isGlobalTimeVisible = tree && traceMetaData.globalStart;
 
 	return (
-		<StyledRow styledclass={[StyledStyles.Flex({ flex: 1 })]}>
+		<StyledRow styledclass={[Flex({ flex: 1 })]}>
 			<StyledCol flex="auto" styledclass={styles.leftContainer}>
 				<StyledRow styledclass={styles.flameAndTimelineContainer}>
 					<StyledCol
@@ -199,7 +199,7 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 				<StyledRow
 					styledclass={[
 						styles.traceDetailContentSpacing,
-						StyledStyles.Spacing({
+						Spacing({
 							margin: '1.5rem 1rem 0.5rem',
 						}),
 					]}

frontend/src/hooks/queryBuilder/useAutoComplete.ts

@@ -5,7 +5,7 @@ import {
 	tagRegexp,
 } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { Option } from 'container/QueryBuilder/type';
-import * as Papa from 'papaparse';
+import { parse } from 'papaparse';
 import { KeyboardEvent, useCallback, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -61,7 +61,7 @@ export const useAutoComplete = (
 					const matches = prev?.matchAll(tagRegexp);
 					const [match] = matches ? Array.from(matches) : [];
 					const [, , , matchTagValue] = match;
-					const data = Papa.parse(matchTagValue).data.flat();
+					const data = parse(matchTagValue).data.flat();
 					return replaceStringWithMaxLength(prev, data as string[], value);
 				});
 			}

frontend/src/hooks/queryBuilder/useTag.ts

@@ -4,8 +4,8 @@ import {
 	isExistsNotExistsOperator,
 	isInNInOperator,
 } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { unparse } from 'papaparse';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import * as Papa from 'papaparse';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -38,7 +38,7 @@ export const useTag = (
 			(query?.filters?.items || []).map((ele) => {
 				if (isInNInOperator(getOperatorFromValue(ele.op))) {
 					try {
-						const csvString = Papa.unparse([ele.value]);
+						const csvString = unparse([ele.value]);
 						return `${ele.key?.key} ${getOperatorFromValue(ele.op)} ${csvString}`;
 					} catch {
 						return `${ele.key?.key} ${getOperatorFromValue(ele.op)} ${ele.value}`;

frontend/src/pages/SignUp/SignUp.tsx

@@ -14,7 +14,7 @@ import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { SuccessResponse } from 'types/api';
 import { PayloadProps } from 'types/api/user/getUser';
-import * as loginPrecheck from 'types/api/user/loginPrecheck';
+import { PayloadProps as LoginPrecheckPayloadProps } from 'types/api/user/loginPrecheck';
 
 import {
 	ButtonContainer,
@@ -41,7 +41,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 	const { t } = useTranslation(['signup']);
 	const [loading, setLoading] = useState(false);
 
-	const [precheck, setPrecheck] = useState<loginPrecheck.PayloadProps>({
+	const [precheck, setPrecheck] = useState<LoginPrecheckPayloadProps>({
 		sso: false,
 		isUser: false,
 	});

frontend/src/types/api/user/getInviteDetails.ts

@@ -2,7 +2,7 @@ import { User } from 'types/reducer/app';
 import { ROLES } from 'types/roles';
 
 import { Organization } from './getOrganization';
-import * as loginPrecheck from './loginPrecheck';
+import { PayloadProps as LoginPrecheckPayloadProps } from './loginPrecheck';
 
 export interface Props {
 	inviteId: string;
@@ -15,5 +15,5 @@ export interface PayloadProps {
 	role: ROLES;
 	token: string;
 	organization: Organization['name'];
-	precheck?: loginPrecheck.PayloadProps;
+	precheck?: LoginPrecheckPayloadProps;
 }

frontend/src/wdyr.ts

@@ -2,7 +2,7 @@
 /* eslint-disable global-require */
 /// <reference types="@welldone-software/why-did-you-render" />
 // ^ https://github.com/welldone-software/why-did-you-render/issues/161
-import * as React from 'react';
+import React from 'react';
 
 if (process.env.NODE_ENV === 'development') {
 	const whyDidYouRender = require('@welldone-software/why-did-you-render');