Skip to content

Commit

Permalink
#16644: support resizable column to customProperty (#17735)
Browse files Browse the repository at this point in the history
* 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

(cherry picked from commit 3d52258)
  • Loading branch information
Ashish8689 committed Sep 6, 2024
1 parent acd0cfe commit 9d73e7e
Show file tree
Hide file tree
Showing 9 changed files with 88 additions and 2 deletions.
2 changes: 2 additions & 0 deletions openmetadata-ui/src/main/resources/ui/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ module.exports = {
'@azure/msal-react':
'<rootDir>/node_modules/@azure/msal-react/dist/index.js',
axios: 'axios/dist/node/axios.cjs',
'react-antd-column-resize':
'<rootDir>/src/test/unit/mocks/reactColumnResize.mock.js',
},
transformIgnorePatterns: ['node_modules/(?!@azure/msal-react)'],

Expand Down
1 change: 1 addition & 0 deletions openmetadata-ui/src/main/resources/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export const CustomPropertyTable = <T extends ExtentionEntitiesKeys>({
dataIndex: 'name',
key: 'name',
ellipsis: true,
width: '50%',
width: isRenderedInRightPanel ? 150 : 400,
render: (_, record) => getEntityName(record),
sorter: columnSorter,
},
Expand Down Expand Up @@ -279,6 +279,7 @@ export const CustomPropertyTable = <T extends ExtentionEntitiesKeys>({
</div>
<Table
bordered
resizableColumns
columns={tableColumn}
data-testid="custom-properties-table"
dataSource={entityTypeDetail?.customProperties?.slice(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,24 @@
*/
import { SpinProps, Table as AntdTable, TableProps } from 'antd';
import React, { useMemo } from 'react';
import { useAntdColumnResize } from 'react-antd-column-resize';
import { getTableExpandableConfig } from '../../../utils/TableUtils';
import Loader from '../Loader/Loader';

interface TableComponentProps<T> extends TableProps<T> {
resizableColumns?: boolean;
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const Table = <T extends object = any>({ loading, ...rest }: TableProps<T>) => {
const Table = <T extends object = any>({
loading,
...rest
}: TableComponentProps<T>) => {
const { resizableColumns, components, tableWidth } = useAntdColumnResize(
() => ({ columns: rest.columns || [], minWidth: 150 }),
[rest.columns]
);

const isLoading = useMemo(
() => (loading as SpinProps)?.spinning ?? (loading as boolean) ?? false,
[loading]
Expand Down Expand Up @@ -56,6 +69,14 @@ const Table = <T extends object = any>({ loading, ...rest }: TableProps<T>) => {
// );
// }

const resizingTableProps = rest.resizableColumns
? {
columns: resizableColumns,
components,
scroll: { x: tableWidth },
}
: {};

return (
<AntdTable
{...rest}
Expand All @@ -68,6 +89,7 @@ const Table = <T extends object = any>({ loading, ...rest }: TableProps<T>) => {
...rest.locale,
emptyText: isLoading ? null : rest.locale?.emptyText,
}}
{...resizingTableProps}
/>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -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 }) => (
<th className={className} title={title}>
{children}
</th>
)),
},
},
tableWidth: 0,
};
}),
};
2 changes: 2 additions & 0 deletions openmetadata-ui/src/main/resources/ui/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 2 additions & 0 deletions openmetadata-ui/src/main/resources/ui/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
16 changes: 16 additions & 0 deletions openmetadata-ui/src/main/resources/ui/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -12271,6 +12271,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"
Expand Down Expand Up @@ -12300,6 +12308,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"
Expand Down

0 comments on commit 9d73e7e

Please sign in to comment.