diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts index 4d2a8555460..4ee37ae5ca0 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts +++ b/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 elements inside the but exclude those with aria-hidden="true" + // since we have added re-sizeable columns, that one 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++) { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx index 1c6b5246158..c0135d64f7b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx +++ b/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() ? ( ( { return isEmpty(synonyms) ? (
{NO_DATA_PLACEHOLDER}
@@ -235,14 +235,18 @@ const GlossaryTermTab = ({ title: t('label.owner-plural'), dataIndex: 'owners', key: 'owners', - width: '17%', + width: 150, render: (owners: EntityReference[]) => , }, { 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 = ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx index 85b9b1e38e8..ec80a3752ee 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx @@ -72,7 +72,13 @@ const Table = ({ const resizingTableProps = rest.resizableColumns ? { columns: resizableColumns, - components, + components: { + ...rest.components, + header: { + row: rest.components?.header?.row, + cell: components.header.cell, + }, + }, scroll: { x: tableWidth }, } : {}; 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 5bbdd79a066..73e25daf62c 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 @@ -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; + } + } + } + } + } + } +}