From 3d52258b65e5ef43c5c1046b78f694400f3558fd Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Fri, 6 Sep 2024 19:23:13 +0530 Subject: [PATCH] #16644: support resizable column to customProperty (#17735) * support resizable column to customProperty * fix sonar by mocking react-ant-column-resize globally * remove duplicate table less and added css loader fix in webpack config file --- .../src/main/resources/ui/jest.config.js | 2 ++ .../src/main/resources/ui/package.json | 1 + .../CustomPropertyTable.tsx | 3 +- .../ui/src/components/common/Table/Table.tsx | 24 ++++++++++++- .../ui/src/styles/components/table.less | 6 ++++ .../test/unit/mocks/reactColumnResize.mock.js | 34 +++++++++++++++++++ .../main/resources/ui/webpack.config.dev.js | 2 ++ .../main/resources/ui/webpack.config.prod.js | 2 ++ .../src/main/resources/ui/yarn.lock | 16 +++++++++ 9 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/test/unit/mocks/reactColumnResize.mock.js diff --git a/openmetadata-ui/src/main/resources/ui/jest.config.js b/openmetadata-ui/src/main/resources/ui/jest.config.js index 67d0bb886b0..1dc70fae355 100644 --- a/openmetadata-ui/src/main/resources/ui/jest.config.js +++ b/openmetadata-ui/src/main/resources/ui/jest.config.js @@ -64,6 +64,8 @@ module.exports = { '@azure/msal-react': '/node_modules/@azure/msal-react/dist/index.js', axios: 'axios/dist/node/axios.cjs', + 'react-antd-column-resize': + '/src/test/unit/mocks/reactColumnResize.mock.js', }, transformIgnorePatterns: ['node_modules/(?!@azure/msal-react)'], diff --git a/openmetadata-ui/src/main/resources/ui/package.json b/openmetadata-ui/src/main/resources/ui/package.json index ad0a5a4a8ac..231b376f622 100644 --- a/openmetadata-ui/src/main/resources/ui/package.json +++ b/openmetadata-ui/src/main/resources/ui/package.json @@ -85,6 +85,7 @@ "codemirror": "^5.65.16", "cookie-storage": "^6.1.0", "cronstrue": "^1.122.0", + "react-antd-column-resize": "1.0.3", "crypto-random-string-with-promisify-polyfill": "^5.0.0", "diff": "^5.0.0", "dompurify": "^3.1.5", diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx index 419ade433a0..5af1a69756e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx @@ -153,7 +153,7 @@ export const CustomPropertyTable = ({ dataIndex: 'name', key: 'name', ellipsis: true, - width: '50%', + width: isRenderedInRightPanel ? 150 : 400, render: (_, record) => getEntityName(record), sorter: columnSorter, }, @@ -279,6 +279,7 @@ export const CustomPropertyTable = ({ extends TableProps { + resizableColumns?: boolean; +} + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types -const Table = ({ loading, ...rest }: TableProps) => { +const Table = ({ + loading, + ...rest +}: TableComponentProps) => { + const { resizableColumns, components, tableWidth } = useAntdColumnResize( + () => ({ columns: rest.columns || [], minWidth: 150 }), + [rest.columns] + ); + const isLoading = useMemo( () => (loading as SpinProps)?.spinning ?? (loading as boolean) ?? false, [loading] @@ -56,6 +69,14 @@ const Table = ({ loading, ...rest }: TableProps) => { // ); // } + const resizingTableProps = rest.resizableColumns + ? { + columns: resizableColumns, + components, + scroll: { x: tableWidth }, + } + : {}; + return ( ({ loading, ...rest }: TableProps) => { ...rest.locale, emptyText: isLoading ? null : rest.locale?.emptyText, }} + {...resizingTableProps} /> ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less index bd644c467c8..5bbdd79a066 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less @@ -59,6 +59,12 @@ border-radius: 6px; overflow: hidden; + .ant-table-content { + .react-resizable { + display: contents; + } + } + .ant-table-content > table { border-top: none; tbody > tr { diff --git a/openmetadata-ui/src/main/resources/ui/src/test/unit/mocks/reactColumnResize.mock.js b/openmetadata-ui/src/main/resources/ui/src/test/unit/mocks/reactColumnResize.mock.js new file mode 100644 index 00000000000..81d8282d54c --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/test/unit/mocks/reactColumnResize.mock.js @@ -0,0 +1,34 @@ +/* + * Copyright 2024 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; + +/* eslint-disable */ +module.exports = { + useAntdColumnResize: jest.fn().mockImplementation((hookDataFunction) => { + return { + resizableColumns: hookDataFunction().columns, + components: { + header: { + cell: jest + .fn() + .mockImplementation(({ className, title, children }) => ( + + )), + }, + }, + tableWidth: 0, + }; + }), +}; diff --git a/openmetadata-ui/src/main/resources/ui/webpack.config.dev.js b/openmetadata-ui/src/main/resources/ui/webpack.config.dev.js index 7d6e41dae74..0601b7e0307 100644 --- a/openmetadata-ui/src/main/resources/ui/webpack.config.dev.js +++ b/openmetadata-ui/src/main/resources/ui/webpack.config.dev.js @@ -96,6 +96,8 @@ module.exports = { path.resolve(__dirname, 'node_modules/quill-emoji'), path.resolve(__dirname, 'node_modules/react-awesome-query-builder'), path.resolve(__dirname, 'node_modules/katex'), + path.resolve(__dirname, 'node_modules/react-resizable'), + path.resolve(__dirname, 'node_modules/react-antd-column-resize'), ], // May need to handle files outside the source code // (from node_modules) diff --git a/openmetadata-ui/src/main/resources/ui/webpack.config.prod.js b/openmetadata-ui/src/main/resources/ui/webpack.config.prod.js index 8bfb3cf392b..46500b9b679 100644 --- a/openmetadata-ui/src/main/resources/ui/webpack.config.prod.js +++ b/openmetadata-ui/src/main/resources/ui/webpack.config.prod.js @@ -97,6 +97,8 @@ module.exports = { path.resolve(__dirname, 'node_modules/quill-emoji'), path.resolve(__dirname, 'node_modules/react-awesome-query-builder'), path.resolve(__dirname, 'node_modules/katex'), + path.resolve(__dirname, 'node_modules/react-resizable'), + path.resolve(__dirname, 'node_modules/react-antd-column-resize'), ], // May need to handle files outside the source code // (from node_modules) diff --git a/openmetadata-ui/src/main/resources/ui/yarn.lock b/openmetadata-ui/src/main/resources/ui/yarn.lock index 9774089bee8..d4bf7e028b6 100644 --- a/openmetadata-ui/src/main/resources/ui/yarn.lock +++ b/openmetadata-ui/src/main/resources/ui/yarn.lock @@ -12183,6 +12183,14 @@ rc-util@^5.0.1, rc-util@^5.0.6, rc-util@^5.12.0, rc-util@^5.15.0, rc-util@^5.16. react-is "^16.12.0" shallowequal "^1.1.0" +rc-util@^5.31.1: + version "5.43.0" + resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.43.0.tgz#bba91fbef2c3e30ea2c236893746f3e9b05ecc4c" + integrity sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw== + dependencies: + "@babel/runtime" "^7.18.3" + react-is "^18.2.0" + rc-util@^5.9.4: version "5.21.5" resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.21.5.tgz#6e2a5699f820ba915f43f11a4b7dfb0b0672d0fa" @@ -12212,6 +12220,14 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-antd-column-resize@1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/react-antd-column-resize/-/react-antd-column-resize-1.0.3.tgz#71170e97e0497ce476793d5969ca4f404e3470e4" + integrity sha512-JOuwMwR3N5xs3VKZ2pEfA3KWO394WJL9OgqYs7zeYhaD9buEK42kvVtrs590iEK0qmRatrsei11lekjY9ilNrQ== + dependencies: + rc-util "^5.31.1" + react-resizable "^3.0.5" + react-awesome-query-builder@5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/react-awesome-query-builder/-/react-awesome-query-builder-5.1.2.tgz#2a8e34e4558275471069ca5b39d73113e748cf84"
+ {children} +