From 152846f554311b968288b8f91eb2fb70755b0fb2 Mon Sep 17 00:00:00 2001 From: Chintan Sudani <46838508+csudani7@users.noreply.github.com> Date: Thu, 2 Feb 2023 16:53:15 +0530 Subject: [PATCH] feat: Added Resizable Wrapper for Ant Design Table (#2014) * feat: Added Resizable Wrapper for AntD Table * chore: Merging upstream develop into fork * chore: updated lock file * fix: Lint issues resolved * fix: Lint issues resolved * fix: Types issues * fix: linting issues * fix: Types issues * fix: POC of new resize lib * fix: linting issues * chore: resize is updated * fix: added old lib logic * fix: removed console.log * chore: types are updated * chore: removed un used style --------- Co-authored-by: Palash Gupta --- frontend/package.json | 2 + .../ResizeTableWrapper/ResizableHeader.tsx | 51 + .../ResizeTableWrapper/ResizeTableWrapper.tsx | 47 + .../components/ResizeTableWrapper/config.ts | 1 + .../components/ResizeTableWrapper/index.ts | 4 + .../components/ResizeTableWrapper/styles.ts | 11 + .../AllAlertChannels/AlertChannels.tsx | 16 +- frontend/src/container/AllError/index.tsx | 42 +- frontend/src/container/ErrorDetails/index.tsx | 14 +- .../src/container/Licenses/ListLicenses.tsx | 18 +- .../container/ListAlertRules/ListAlert.tsx | 19 +- .../src/container/ListOfDashboard/index.tsx | 38 +- .../container/LogDetailedView/TableView.tsx | 25 +- .../MetricsApplication/TopOperationsTable.tsx | 28 +- frontend/src/container/MetricsTable/index.tsx | 22 +- .../DashboardSettings/Variables/index.tsx | 14 +- .../AuthDomains/index.tsx | 38 +- .../OrganizationSettings/Members/index.tsx | 25 +- .../PendingInvitesContainer/index.tsx | 25 +- .../src/container/Trace/TraceTable/index.tsx | 68 +- .../TriggeredAlerts/NoFilterTable.tsx | 17 +- frontend/yarn.lock | 986 ++++++++++-------- 22 files changed, 948 insertions(+), 563 deletions(-) create mode 100644 frontend/src/components/ResizeTableWrapper/ResizableHeader.tsx create mode 100644 frontend/src/components/ResizeTableWrapper/ResizeTableWrapper.tsx create mode 100644 frontend/src/components/ResizeTableWrapper/config.ts create mode 100644 frontend/src/components/ResizeTableWrapper/index.ts create mode 100644 frontend/src/components/ResizeTableWrapper/styles.ts diff --git a/frontend/package.json b/frontend/package.json index bd06d4893f..2b3bb77c16 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -138,6 +138,7 @@ "@types/react-dom": "18.0.10", "@types/react-grid-layout": "^1.1.2", "@types/react-redux": "^7.1.11", + "@types/react-resizable": "3.0.3", "@types/react-router-dom": "^5.1.6", "@types/redux": "^3.6.0", "@types/styled-components": "^5.1.4", @@ -176,6 +177,7 @@ "portfinder-sync": "^0.0.2", "prettier": "2.2.1", "react-hot-loader": "^4.13.0", + "react-resizable": "3.0.4", "ts-jest": "^27.1.4", "ts-node": "^10.2.1", "typescript-plugin-css-modules": "^3.4.0", diff --git a/frontend/src/components/ResizeTableWrapper/ResizableHeader.tsx b/frontend/src/components/ResizeTableWrapper/ResizableHeader.tsx new file mode 100644 index 0000000000..48f904b05a --- /dev/null +++ b/frontend/src/components/ResizeTableWrapper/ResizableHeader.tsx @@ -0,0 +1,51 @@ +import React, { useMemo } from 'react'; +import { Resizable, ResizeCallbackData } from 'react-resizable'; + +import { enableUserSelectHack } from './config'; +import { SpanStyle } from './styles'; + +function ResizableHeader(props: ResizableHeaderProps): JSX.Element { + const { onResize, width, ...restProps } = props; + + const handle = useMemo( + () => ( + e.stopPropagation()} + /> + ), + [], + ); + + const draggableOpts = useMemo( + () => ({ + enableUserSelectHack, + }), + [], + ); + + if (!width) { + // eslint-disable-next-line react/jsx-props-no-spreading + return ; + } + + return ( + + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + + + ); +} + +interface ResizableHeaderProps { + onResize: (e: React.SyntheticEvent, data: ResizeCallbackData) => void; + width: number; +} + +export default ResizableHeader; diff --git a/frontend/src/components/ResizeTableWrapper/ResizeTableWrapper.tsx b/frontend/src/components/ResizeTableWrapper/ResizeTableWrapper.tsx new file mode 100644 index 0000000000..9d5a1d47c6 --- /dev/null +++ b/frontend/src/components/ResizeTableWrapper/ResizeTableWrapper.tsx @@ -0,0 +1,47 @@ +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); + + const handleResize = useCallback( + (index: number) => ( + _e: React.SyntheticEvent, + { size }: ResizeCallbackData, + ): void => { + const newColumns = [...columnsData]; + newColumns[index] = { + ...newColumns[index], + width: size.width, + }; + setColumns(newColumns); + }, + [columnsData], + ); + + const mergeColumns = useMemo( + () => + columnsData.map((col, index) => ({ + ...col, + onHeaderCell: (column: ColumnsType[number]): unknown => ({ + width: column.width, + onResize: handleResize(index), + }), + })), + [columnsData, handleResize], + ); + + return <> {React.cloneElement(children, { columns: mergeColumns })}; +} + +interface ResizeTableWrapperProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + columns: ColumnsType; + children: JSX.Element; +} + +export default ResizeTableWrapper; diff --git a/frontend/src/components/ResizeTableWrapper/config.ts b/frontend/src/components/ResizeTableWrapper/config.ts new file mode 100644 index 0000000000..0186ddd1a3 --- /dev/null +++ b/frontend/src/components/ResizeTableWrapper/config.ts @@ -0,0 +1 @@ +export const enableUserSelectHack = { enableUserSelectHack: false }; diff --git a/frontend/src/components/ResizeTableWrapper/index.ts b/frontend/src/components/ResizeTableWrapper/index.ts new file mode 100644 index 0000000000..653d0657a5 --- /dev/null +++ b/frontend/src/components/ResizeTableWrapper/index.ts @@ -0,0 +1,4 @@ +import ResizableHeader from './ResizableHeader'; +import ResizeTableWrapper from './ResizeTableWrapper'; + +export { ResizableHeader, ResizeTableWrapper }; diff --git a/frontend/src/components/ResizeTableWrapper/styles.ts b/frontend/src/components/ResizeTableWrapper/styles.ts new file mode 100644 index 0000000000..acb0c28219 --- /dev/null +++ b/frontend/src/components/ResizeTableWrapper/styles.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +export const SpanStyle = styled.span` + position: absolute; + right: -5px; + bottom: 0; + z-index: 1; + width: 10px; + height: 100%; + cursor: col-resize; +`; diff --git a/frontend/src/container/AllAlertChannels/AlertChannels.tsx b/frontend/src/container/AllAlertChannels/AlertChannels.tsx index 762304a871..e7a6415346 100644 --- a/frontend/src/container/AllAlertChannels/AlertChannels.tsx +++ b/frontend/src/container/AllAlertChannels/AlertChannels.tsx @@ -1,6 +1,10 @@ /* eslint-disable react/display-name */ import { Button, notification, Table } from 'antd'; import { ColumnsType } from 'antd/lib/table'; +import { + ResizableHeader, + ResizeTableWrapper, +} from 'components/ResizeTableWrapper'; import ROUTES from 'constants/routes'; import useComponentPermission from 'hooks/useComponentPermission'; import history from 'lib/history'; @@ -34,11 +38,13 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element { title: t('column_channel_name'), dataIndex: 'name', key: 'name', + width: 100, }, { title: t('column_channel_type'), dataIndex: 'type', key: 'type', + width: 80, }, ]; @@ -48,6 +54,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element { dataIndex: 'id', key: 'action', align: 'center', + width: 80, render: (id: string): JSX.Element => ( <>