From 62b2462e0366e8382e80e3b1969868f8f4137905 Mon Sep 17 00:00:00 2001 From: Chintan Sudani <46838508+csudani7@users.noreply.github.com> Date: Fri, 3 Feb 2023 18:06:26 +0530 Subject: [PATCH] feat: modified resize table component (#2175) * fix: Removed Strict mode to stop render twice * feat: modified resize table component --- .../ResizableHeader.tsx | 0 .../ResizeTable.tsx} | 30 +++++---- .../config.ts | 0 frontend/src/components/ResizeTable/index.ts | 4 ++ .../styles.ts | 0 .../components/ResizeTableWrapper/index.ts | 4 -- .../AllAlertChannels/AlertChannels.tsx | 15 +---- frontend/src/container/AllError/index.tsx | 38 +++++------ frontend/src/container/ErrorDetails/index.tsx | 15 +---- .../src/container/Licenses/ListLicenses.tsx | 16 +---- .../container/ListAlertRules/ListAlert.tsx | 15 +---- .../src/container/ListOfDashboard/index.tsx | 43 +++++------- .../container/LogDetailedView/TableView.tsx | 22 +++--- .../MetricsApplication/TopOperationsTable.tsx | 25 +++---- frontend/src/container/MetricsTable/index.tsx | 21 +++--- .../DashboardSettings/Variables/index.tsx | 14 +--- .../AuthDomains/index.tsx | 37 +++++----- .../OrganizationSettings/Members/index.tsx | 23 +++---- .../PendingInvitesContainer/index.tsx | 23 +++---- .../src/container/Trace/TraceTable/index.tsx | 67 +++++++++---------- .../TriggeredAlerts/NoFilterTable.tsx | 19 ++---- 21 files changed, 164 insertions(+), 267 deletions(-) rename frontend/src/components/{ResizeTableWrapper => ResizeTable}/ResizableHeader.tsx (100%) rename frontend/src/components/{ResizeTableWrapper/ResizeTableWrapper.tsx => ResizeTable/ResizeTable.tsx} (58%) rename frontend/src/components/{ResizeTableWrapper => ResizeTable}/config.ts (100%) create mode 100644 frontend/src/components/ResizeTable/index.ts rename frontend/src/components/{ResizeTableWrapper => ResizeTable}/styles.ts (100%) delete mode 100644 frontend/src/components/ResizeTableWrapper/index.ts diff --git a/frontend/src/components/ResizeTableWrapper/ResizableHeader.tsx b/frontend/src/components/ResizeTable/ResizableHeader.tsx similarity index 100% rename from frontend/src/components/ResizeTableWrapper/ResizableHeader.tsx rename to frontend/src/components/ResizeTable/ResizableHeader.tsx diff --git a/frontend/src/components/ResizeTableWrapper/ResizeTableWrapper.tsx b/frontend/src/components/ResizeTable/ResizeTable.tsx similarity index 58% rename from frontend/src/components/ResizeTableWrapper/ResizeTableWrapper.tsx rename to frontend/src/components/ResizeTable/ResizeTable.tsx index 9d5a1d47c6..b7aee770c9 100644 --- a/frontend/src/components/ResizeTableWrapper/ResizeTableWrapper.tsx +++ b/frontend/src/components/ResizeTable/ResizeTable.tsx @@ -1,12 +1,14 @@ +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 { ResizeCallbackData } from 'react-resizable'; -function ResizeTableWrapper({ - children, - columns, -}: ResizeTableWrapperProps): JSX.Element { - const [columnsData, setColumns] = useState(columns); +import ResizableHeader from './ResizableHeader'; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +function ResizeTable({ columns, ...restprops }: TableProps): JSX.Element { + const [columnsData, setColumns] = useState(columns || []); const handleResize = useCallback( (index: number) => ( @@ -35,13 +37,15 @@ function ResizeTableWrapper({ [columnsData, handleResize], ); - return <> {React.cloneElement(children, { columns: mergeColumns })}; + return ( + } + /> + ); } -interface ResizeTableWrapperProps { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - columns: ColumnsType; - children: JSX.Element; -} - -export default ResizeTableWrapper; +export default ResizeTable; diff --git a/frontend/src/components/ResizeTableWrapper/config.ts b/frontend/src/components/ResizeTable/config.ts similarity index 100% rename from frontend/src/components/ResizeTableWrapper/config.ts rename to frontend/src/components/ResizeTable/config.ts diff --git a/frontend/src/components/ResizeTable/index.ts b/frontend/src/components/ResizeTable/index.ts new file mode 100644 index 0000000000..ec177d06eb --- /dev/null +++ b/frontend/src/components/ResizeTable/index.ts @@ -0,0 +1,4 @@ +import ResizableHeader from './ResizableHeader'; +import ResizeTable from './ResizeTable'; + +export { ResizableHeader, ResizeTable }; diff --git a/frontend/src/components/ResizeTableWrapper/styles.ts b/frontend/src/components/ResizeTable/styles.ts similarity index 100% rename from frontend/src/components/ResizeTableWrapper/styles.ts rename to frontend/src/components/ResizeTable/styles.ts diff --git a/frontend/src/components/ResizeTableWrapper/index.ts b/frontend/src/components/ResizeTableWrapper/index.ts deleted file mode 100644 index 653d0657a5..0000000000 --- a/frontend/src/components/ResizeTableWrapper/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import ResizableHeader from './ResizableHeader'; -import ResizeTableWrapper from './ResizeTableWrapper'; - -export { ResizableHeader, ResizeTableWrapper }; diff --git a/frontend/src/container/AllAlertChannels/AlertChannels.tsx b/frontend/src/container/AllAlertChannels/AlertChannels.tsx index e7a6415346..03a9e8a40e 100644 --- a/frontend/src/container/AllAlertChannels/AlertChannels.tsx +++ b/frontend/src/container/AllAlertChannels/AlertChannels.tsx @@ -1,10 +1,7 @@ /* eslint-disable react/display-name */ -import { Button, notification, Table } from 'antd'; +import { Button, notification } from 'antd'; import { ColumnsType } from 'antd/lib/table'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import ROUTES from 'constants/routes'; import useComponentPermission from 'hooks/useComponentPermission'; import history from 'lib/history'; @@ -69,13 +66,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element { return ( <> {Element} - -
- + ); } diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx index 9a9f986f8b..4ab3e7c100 100644 --- a/frontend/src/container/AllError/index.tsx +++ b/frontend/src/container/AllError/index.tsx @@ -5,7 +5,6 @@ import { Input, notification, Space, - Table, TableProps, Tooltip, Typography, @@ -16,10 +15,7 @@ import { ColumnsType } from 'antd/lib/table'; import { FilterConfirmProps } from 'antd/lib/table/interface'; import getAll from 'api/errors/getAll'; import getErrorCounts from 'api/errors/getErrorCounts'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import ROUTES from 'constants/routes'; import dayjs from 'dayjs'; import useUrlQuery from 'hooks/useUrlQuery'; @@ -392,23 +388,21 @@ function AllErrors(): JSX.Element { return ( <> {NotificationElement} - -
- + ); } diff --git a/frontend/src/container/ErrorDetails/index.tsx b/frontend/src/container/ErrorDetails/index.tsx index 5894c8a8d2..57a8c92906 100644 --- a/frontend/src/container/ErrorDetails/index.tsx +++ b/frontend/src/container/ErrorDetails/index.tsx @@ -1,10 +1,7 @@ -import { Button, Divider, notification, Space, Table, Typography } from 'antd'; +import { Button, Divider, notification, Space, Typography } from 'antd'; import getNextPrevId from 'api/errors/getNextPrevId'; import Editor from 'components/Editor'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import { getNanoSeconds } from 'container/AllError/utils'; import dayjs from 'dayjs'; import history from 'lib/history'; @@ -176,13 +173,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element { - -
- + diff --git a/frontend/src/container/Licenses/ListLicenses.tsx b/frontend/src/container/Licenses/ListLicenses.tsx index 6b66e074c8..950eabdfc3 100644 --- a/frontend/src/container/Licenses/ListLicenses.tsx +++ b/frontend/src/container/Licenses/ListLicenses.tsx @@ -1,9 +1,5 @@ -import { Table } from 'antd'; import { ColumnsType } from 'antd/lib/table'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { License } from 'types/api/licenses/def'; @@ -39,15 +35,7 @@ function ListLicenses({ licenses }: ListLicensesProps): JSX.Element { }, ]; - return ( - -
- - ); + return ; } interface ListLicensesProps { diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index 096c14b447..dd51e42745 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -1,11 +1,8 @@ /* eslint-disable react/display-name */ import { PlusOutlined } from '@ant-design/icons'; -import { notification, Table, Typography } from 'antd'; +import { notification, Typography } from 'antd'; import { ColumnsType } from 'antd/lib/table'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import TextToolTip from 'components/TextToolTip'; import ROUTES from 'constants/routes'; import useComponentPermission from 'hooks/useComponentPermission'; @@ -172,13 +169,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { )} - -
- + ); } diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx index ed4bfe5ba2..d3feaa0bc9 100644 --- a/frontend/src/container/ListOfDashboard/index.tsx +++ b/frontend/src/container/ListOfDashboard/index.tsx @@ -1,19 +1,8 @@ import { PlusOutlined } from '@ant-design/icons'; -import { - Card, - Dropdown, - Menu, - Row, - Table, - TableColumnProps, - Typography, -} from 'antd'; +import { Card, Dropdown, Menu, Row, TableColumnProps, Typography } from 'antd'; import createDashboard from 'api/dashboard/create'; import { AxiosError } from 'axios'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import TextToolTip from 'components/TextToolTip'; import ROUTES from 'constants/routes'; import SearchFilter from 'container/ListOfDashboard/SearchFilter'; @@ -281,21 +270,19 @@ function ListOfAllDashboard(): JSX.Element { uploadedGrafana={uploadedGrafana} onModalHandler={(): void => onModalHandler(false)} /> - -
- + ); diff --git a/frontend/src/container/LogDetailedView/TableView.tsx b/frontend/src/container/LogDetailedView/TableView.tsx index 19bf846339..92b15d1b57 100644 --- a/frontend/src/container/LogDetailedView/TableView.tsx +++ b/frontend/src/container/LogDetailedView/TableView.tsx @@ -1,11 +1,8 @@ import { blue, orange } from '@ant-design/colors'; -import { Input, Table } from 'antd'; +import { Input } from 'antd'; import AddToQueryHOC from 'components/Logs/AddToQueryHOC'; import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import flatten from 'flat'; import { fieldSearchFilter } from 'lib/logs/fieldSearch'; import React, { useMemo, useState } from 'react'; @@ -97,15 +94,12 @@ function TableView({ logData }: TableViewProps): JSX.Element | null { value={fieldSearchInput} onChange={(e): void => setFieldSearchInput(e.target.value)} /> - -
- + ); } diff --git a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx index 54ac09e556..0a23480ee2 100644 --- a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx +++ b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx @@ -1,9 +1,6 @@ -import { Table, Tooltip, Typography } from 'antd'; +import { Tooltip, Typography } from 'antd'; import { ColumnsType } from 'antd/lib/table'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import { METRICS_PAGE_QUERY_PARAM } from 'constants/query'; import ROUTES from 'constants/routes'; import history from 'lib/history'; @@ -99,16 +96,14 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element { ]; return ( - -
'Key Operations'} - tableLayout="fixed" - dataSource={data} - components={{ header: { cell: ResizableHeader } }} - rowKey="name" - /> - + 'Key Operations'} + tableLayout="fixed" + dataSource={data} + rowKey="name" + /> ); } diff --git a/frontend/src/container/MetricsTable/index.tsx b/frontend/src/container/MetricsTable/index.tsx index 28945cf21c..c815769f54 100644 --- a/frontend/src/container/MetricsTable/index.tsx +++ b/frontend/src/container/MetricsTable/index.tsx @@ -1,6 +1,6 @@ import { blue } from '@ant-design/colors'; import { SearchOutlined } from '@ant-design/icons'; -import { Button, Card, Input, Space, Table } from 'antd'; +import { Button, Card, Input, Space } from 'antd'; import type { ColumnsType, ColumnType } from 'antd/es/table'; import type { FilterConfirmProps, @@ -8,10 +8,7 @@ import type { } from 'antd/es/table/interface'; import localStorageGet from 'api/browser/localstorage/get'; import localStorageSet from 'api/browser/localstorage/set'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import { SKIP_ONBOARDING } from 'constants/onboarding'; import ROUTES from 'constants/routes'; import React, { useCallback, useMemo, useState } from 'react'; @@ -149,14 +146,12 @@ function Metrics(): JSX.Element { return ( - -
- + ); } diff --git a/frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx b/frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx index bea27da6f7..666ccac4cf 100644 --- a/frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx +++ b/frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx @@ -1,11 +1,8 @@ import { blue, red } from '@ant-design/colors'; import { PlusOutlined } from '@ant-design/icons'; -import { Button, Modal, notification, Row, Space, Table, Tag } from 'antd'; +import { Button, Modal, notification, Row, Space, Tag } from 'antd'; import { NotificationInstance } from 'antd/es/notification/interface'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import React, { useRef, useState } from 'react'; import { connect, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; @@ -168,12 +165,7 @@ function VariablesSetting({ New Variables - -
- + )} - -
record.name + v4()} - dataSource={!SSOFlag ? notEntripriseData : []} - components={{ header: { cell: ResizableHeader } }} - tableLayout="fixed" - /> - + record.name + v4()} + dataSource={!SSOFlag ? notEntripriseData : []} + tableLayout="fixed" + /> ); } @@ -327,15 +322,13 @@ function AuthDomains(): JSX.Element { - -
record.name + v4()} - /> - + record.name + v4()} + /> ); diff --git a/frontend/src/container/OrganizationSettings/Members/index.tsx b/frontend/src/container/OrganizationSettings/Members/index.tsx index cebbe92e92..0438fd83d4 100644 --- a/frontend/src/container/OrganizationSettings/Members/index.tsx +++ b/frontend/src/container/OrganizationSettings/Members/index.tsx @@ -1,13 +1,10 @@ -import { Button, Modal, notification, Space, Table, Typography } from 'antd'; +import { Button, Modal, notification, Space, Typography } from 'antd'; import { ColumnsType } from 'antd/lib/table'; import deleteUser from 'api/user/deleteUser'; import editUserApi from 'api/user/editUser'; import getOrgUser from 'api/user/getOrgUser'; import updateRole from 'api/user/updateRole'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import dayjs from 'dayjs'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -312,15 +309,13 @@ function Members(): JSX.Element { return ( Members - -
- + ); } diff --git a/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx b/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx index 900fb3f740..2052366f73 100644 --- a/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx +++ b/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx @@ -1,13 +1,10 @@ import { PlusOutlined } from '@ant-design/icons'; -import { Button, Modal, notification, Space, Table, Typography } from 'antd'; +import { Button, Modal, notification, Space, Typography } from 'antd'; import { ColumnsType } from 'antd/lib/table'; import deleteInvite from 'api/user/deleteInvite'; import getPendingInvites from 'api/user/getPendingInvites'; import sendInvite from 'api/user/sendInvite'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import { INVITE_MEMBERS_HASH } from 'constants/app'; import ROUTES from 'constants/routes'; import React, { useCallback, useEffect, useState } from 'react'; @@ -272,15 +269,13 @@ function PendingInvitesContainer(): JSX.Element { {t('invite_members')} - -
- + ); diff --git a/frontend/src/container/Trace/TraceTable/index.tsx b/frontend/src/container/Trace/TraceTable/index.tsx index 54f4d6628c..058a962d02 100644 --- a/frontend/src/container/Trace/TraceTable/index.tsx +++ b/frontend/src/container/Trace/TraceTable/index.tsx @@ -1,9 +1,6 @@ -import { Table, TableProps, Tag, Typography } from 'antd'; +import { TableProps, Tag, Typography } from 'antd'; import { ColumnsType } from 'antd/lib/table'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import ROUTES from 'constants/routes'; import { getSpanOrder, @@ -190,36 +187,36 @@ function TraceTable(): JSX.Element { ) as number; return ( - -
`${record.traceID}-${record.spanID}-${v4()}`} - style={{ - cursor: 'pointer', - }} - onRow={(record): React.HTMLAttributes => ({ - onClick: (event): void => { - event.preventDefault(); - event.stopPropagation(); - if (event.metaKey || event.ctrlKey) { - window.open(getLink(record), '_blank'); - } else { - history.push(getLink(record)); - } - }, - })} - pagination={{ - current: spansAggregate.currentPage, - pageSize: spansAggregate.pageSize, - responsive: true, - position: ['bottomLeft'], - total: totalCount, - }} - /> - + + `${record.traceID}-${record.spanID}-${v4()}` + } + style={{ + cursor: 'pointer', + }} + onRow={(record: TableType): React.HTMLAttributes => ({ + onClick: (event): void => { + event.preventDefault(); + event.stopPropagation(); + if (event.metaKey || event.ctrlKey) { + window.open(getLink(record), '_blank'); + } else { + history.push(getLink(record)); + } + }, + })} + pagination={{ + current: spansAggregate.currentPage, + pageSize: spansAggregate.pageSize, + responsive: true, + position: ['bottomLeft'], + total: totalCount, + }} + /> ); } diff --git a/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx b/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx index 932e2efdc9..00443441ee 100644 --- a/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx +++ b/frontend/src/container/TriggeredAlerts/NoFilterTable.tsx @@ -1,10 +1,7 @@ /* eslint-disable react/display-name */ -import { Table, Tag, Typography } from 'antd'; +import { Tag, Typography } from 'antd'; import { ColumnsType } from 'antd/lib/table'; -import { - ResizableHeader, - ResizeTableWrapper, -} from 'components/ResizeTableWrapper'; +import { ResizeTable } from 'components/ResizeTable'; import AlertStatus from 'container/TriggeredAlerts/TableComponents/AlertStatus'; import convertDateToAmAndPm from 'lib/convertDateToAmAndPm'; import getFormattedDate from 'lib/getFormatedDate'; @@ -103,13 +100,11 @@ function NoFilterTable({ ]; return ( - -
- + ); }