#16465 : supported glossary table column resizable (#17918)

* supported glossary table column resizable

* code cleanup

* fix the column resizing affecting other column width

* fix the playwright failure around the glossary due to re-sizable added

openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts

@@ -1221,7 +1221,11 @@ export const filterStatus = async (
   await saveButton.click();
 
   const glossaryTermsTable = page.getByTestId('glossary-terms-table');
-  const rows = glossaryTermsTable.locator('tbody tr');
+  // will select all <tr> elements inside the <tbody> but exclude those with aria-hidden="true"
+  // since we have added re-sizeable columns, that one <tr> entry is present in the tbody
+  const rows = glossaryTermsTable.locator(
+    'tbody.ant-table-tbody > tr:not([aria-hidden="true"])'
+  );
   const statusColumnIndex = 3;
 
   for (let i = 0; i < (await rows.count()); i++) {

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx

@@ -155,7 +155,7 @@ const GlossaryTermTab = ({
         key: 'name',
         className: 'glossary-name-column',
         ellipsis: true,
-        width: '40%',
+        width: 200,
         render: (_, record) => {
           const name = getEntityName(record);
 
@@ -184,7 +184,7 @@ const GlossaryTermTab = ({
         title: t('label.description'),
         dataIndex: 'description',
         key: 'description',
-        width: permissions.Create ? '21%' : '33%',
+        width: 250,
         render: (description: string) =>
           description.trim() ? (
             <RichTextEditorPreviewerV1
@@ -200,7 +200,7 @@ const GlossaryTermTab = ({
         title: t('label.reviewer'),
         dataIndex: 'reviewers',
         key: 'reviewers',
-        width: '33%',
+        width: 150,
         render: (reviewers: EntityReference[]) => (
           <OwnerLabel
             owners={reviewers}
@@ -214,7 +214,7 @@ const GlossaryTermTab = ({
         title: t('label.synonym-plural'),
         dataIndex: 'synonyms',
         key: 'synonyms',
-        width: '33%',
+        width: 150,
         render: (synonyms: string[]) => {
           return isEmpty(synonyms) ? (
             <div>{NO_DATA_PLACEHOLDER}</div>
@@ -235,14 +235,18 @@ const GlossaryTermTab = ({
         title: t('label.owner-plural'),
         dataIndex: 'owners',
         key: 'owners',
-        width: '17%',
+        width: 150,
         render: (owners: EntityReference[]) => <OwnerLabel owners={owners} />,
       },
       {
         title: t('label.status'),
         dataIndex: 'status',
         key: 'status',
-        width: '12%',
+        // this check is added to the width, since the last column is optional and to maintain
+        // the re-sizing of the column should not be affected the others columns width sizes.
+        ...(permissions.Create && {
+          width: 100,
+        }),
         render: (_, record) => {
           const status = record.status ?? Status.Approved;
 
@@ -261,7 +265,6 @@ const GlossaryTermTab = ({
       data.push({
         title: t('label.action-plural'),
         key: 'new-term',
-        width: '10%',
         render: (_, record) => {
           const status = record.status ?? Status.Approved;
           const allowAddTerm = status === Status.Approved;
@@ -887,6 +890,7 @@ const GlossaryTermTab = ({
           <DndProvider backend={HTML5Backend}>
             <Table
               bordered
+              resizableColumns
               className={classNames('drop-over-background', {
                 'drop-over-table': isTableHovered,
               })}
@@ -901,7 +905,6 @@ const GlossaryTermTab = ({
               pagination={false}
               rowKey="fullyQualifiedName"
               size="small"
-              tableLayout="fixed"
               onHeaderRow={onTableHeader}
               onRow={onTableRow}
             />

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

@@ -72,7 +72,13 @@ const Table = <T extends object = any>({
   const resizingTableProps = rest.resizableColumns
     ? {
         columns: resizableColumns,
-        components,
+        components: {
+          ...rest.components,
+          header: {
+            row: rest.components?.header?.row,
+            cell: components.header.cell,
+          },
+        },
         scroll: { x: tableWidth },
       }
     : {};

openmetadata-ui/src/main/resources/ui/src/styles/components/table.less

@@ -11,6 +11,8 @@
  *  limitations under the License.
  */
 
+@import (reference) url('../variables.less');
+
 .ant-table-wrapper {
   .ant-table-thead {
     tr > th {
@@ -136,3 +138,23 @@
     gap: 8px;
   }
 }
+
+// Setting the background color of the resizable column to  where dragger is located
+.ant-table.ant-table-bordered {
+  > .ant-table-container {
+    > .ant-table-content,
+    > .ant-table-header,
+    > .ant-table-body,
+    > .ant-table-summary {
+      > table {
+        > thead {
+          > tr {
+            > .resizable-container::before {
+              background-color: @border-color !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}