#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

openmetadata-ui/src/main/resources/ui/jest.config.js

@@ -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)'],
 

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",

openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx

@@ -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,
       },
@@ -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(

openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx

@@ -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]
@@ -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}
@@ -68,6 +89,7 @@ const Table = <T extends object = any>({ loading, ...rest }: TableProps<T>) => {
         ...rest.locale,
         emptyText: isLoading ? null : rest.locale?.emptyText,
       }}
+      {...resizingTableProps}
     />
   );
 };

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 {

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 }) => (
+              <th className={className} title={title}>
+                {children}
+              </th>
+            )),
+        },
+      },
+      tableWidth: 0,
+    };
+  }),
+};

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)

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)

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"