From 16d490fbe3c3e4745bf66eb5852305d255353401 Mon Sep 17 00:00:00 2001 From: Kanishka Chowdhury Date: Wed, 6 Sep 2023 19:00:00 +0530 Subject: [PATCH] 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 --- frontend/src/AppRoutes/routes.ts | 2 +- frontend/src/api/user/signup.ts | 6 +-- .../src/components/Graph/Plugin/DragSelect.ts | 8 ++-- .../Graph/Plugin/IntersectionCursor.ts | 4 +- frontend/src/components/Styled/index.ts | 43 ++++++++++++------- frontend/src/container/LogControls/index.tsx | 4 +- .../filters/OrderByFilter/useOrderByFilter.ts | 6 +-- .../filters/OrderByFilter/utils.ts | 4 +- .../filters/QueryBuilderSearch/utils.ts | 6 +-- frontend/src/container/TraceDetail/index.tsx | 6 +-- .../src/hooks/queryBuilder/useAutoComplete.ts | 4 +- frontend/src/hooks/queryBuilder/useTag.ts | 4 +- frontend/src/pages/SignUp/SignUp.tsx | 4 +- .../src/types/api/user/getInviteDetails.ts | 4 +- frontend/src/wdyr.ts | 2 +- 15 files changed, 59 insertions(+), 48 deletions(-) diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts index ed19a96d6d..c50c15ab37 100644 --- a/frontend/src/AppRoutes/routes.ts +++ b/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, diff --git a/frontend/src/api/user/signup.ts b/frontend/src/api/user/signup.ts index 09aabebf61..fcb483dffb 100644 --- a/frontend/src/api/user/signup.ts +++ b/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 | ErrorResponse -> => { +): Promise | ErrorResponse> => { try { const response = await axios.post(`/register`, { ...props, diff --git a/frontend/src/components/Graph/Plugin/DragSelect.ts b/frontend/src/components/Graph/Plugin/DragSelect.ts index a22c6da91d..400b870b87 100644 --- a/frontend/src/components/Graph/Plugin/DragSelect.ts +++ b/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; diff --git a/frontend/src/components/Graph/Plugin/IntersectionCursor.ts b/frontend/src/components/Graph/Plugin/IntersectionCursor.ts index 99b4e50011..a3d9a4d6a4 100644 --- a/frontend/src/components/Graph/Plugin/IntersectionCursor.ts +++ b/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; diff --git a/frontend/src/components/Styled/index.ts b/frontend/src/components/Styled/index.ts index 579e15a499..b999485859 100644 --- a/frontend/src/components/Styled/index.ts +++ b/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)` +type TStyledCol = ColProps & IStyledClass; +const StyledCol = styled(Col)` ${styledClass} `; -type TStyledRow = AntD.RowProps & IStyledClass; -const StyledRow = styled(AntD.Row)` +type TStyledRow = RowProps & IStyledClass; +const StyledRow = styled(Row)` ${styledClass} `; -type TStyledDivider = AntD.DividerProps & IStyledClass; -const StyledDivider = styled(AntD.Divider)` +type TStyledDivider = DividerProps & IStyledClass; +const StyledDivider = styled(Divider)` ${styledClass} `; -type TStyledSpace = AntD.SpaceProps & IStyledClass; -const StyledSpace = styled(AntD.Space)` +type TStyledSpace = SpaceProps & IStyledClass; +const StyledSpace = styled(Space)` ${styledClass} `; -type TStyledTabs = AntD.TabsProps & IStyledClass; -const StyledTabs = styled(AntD.Divider)` +type TStyledTabs = TabsProps & IStyledClass; +const StyledTabs = styled(Divider)` ${styledClass} `; -type TStyledButton = AntD.ButtonProps & IStyledClass; -const StyledButton = styled(AntD.Button)` +type TStyledButton = ButtonProps & IStyledClass; +const StyledButton = styled(Button)` ${styledClass} `; -const { Text } = AntD.Typography; +const { Text } = Typography; type TStyledTypographyText = TextProps & IStyledClass; const StyledTypographyText = styled(Text)` ${styledClass} `; -const { Title } = AntD.Typography; +const { Title } = Typography; type TStyledTypographyTitle = TitleProps & IStyledClass; const StyledTypographyTitle = styled(Title)` ${styledClass} diff --git a/frontend/src/container/LogControls/index.tsx b/frontend/src/container/LogControls/index.tsx index 7c3de3fef3..01fe12e808 100644 --- a/frontend/src/container/LogControls/index.tsx +++ b/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'); diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts b/frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts index 8d8fae7e0f..552b71406f 100644 --- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts +++ b/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 { diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts b/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts index d109744138..370a82170c 100644 --- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts +++ b/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[]; diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts index 7db0e6f552..7593bf41fc 100644 --- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts +++ b/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; diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx index 83696a1160..658b1a4abe 100644 --- a/frontend/src/container/TraceDetail/index.tsx +++ b/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 ( - + { 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}`; diff --git a/frontend/src/pages/SignUp/SignUp.tsx b/frontend/src/pages/SignUp/SignUp.tsx index f102c8f97d..7f36d099a5 100644 --- a/frontend/src/pages/SignUp/SignUp.tsx +++ b/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({ + const [precheck, setPrecheck] = useState({ sso: false, isUser: false, }); diff --git a/frontend/src/types/api/user/getInviteDetails.ts b/frontend/src/types/api/user/getInviteDetails.ts index 06c690ce2e..3fc85905be 100644 --- a/frontend/src/types/api/user/getInviteDetails.ts +++ b/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; } diff --git a/frontend/src/wdyr.ts b/frontend/src/wdyr.ts index 161a1e8854..e64dcca566 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 * as React from 'react'; +import React from 'react'; if (process.env.NODE_ENV === 'development') { const whyDidYouRender = require('@welldone-software/why-did-you-render');