Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#16465 : supported glossary table column resizable #17918

Merged
merged 10 commits into from
Jan 3, 2025
Merged

#16465 : supported glossary table column resizable #17918

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ae340dd
supported glossary table column resizable
Ashish8689 Sep 19, 2024
365d46c
code cleanup
Ashish8689 Sep 19, 2024
f335c33
Merge branch 'main' into glossary-table-resizable
Ashish8689 Sep 20, 2024
ddef83a
Merge branch 'main' into glossary-table-resizable
Ashish8689 Dec 20, 2024
918b051
fix the column resizing affecting other column width
Ashish8689 Dec 24, 2024
2035af8
Merge branch 'main' into glossary-table-resizable
Ashish8689 Dec 24, 2024
04e2a4f
Merge branch 'main' into glossary-table-resizable
Ashish8689 Jan 2, 2025
7162a30
Merge branch 'main' into glossary-table-resizable
Ashish8689 Jan 2, 2025
bd075e8
fix the playwright failure around the glossary due to re-sizable added
Ashish8689 Jan 2, 2025
b32f189
convert code to less
Ashish8689 Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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++) {
Expand Down
19 changes: 11 additions & 8 deletions ...c/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ const GlossaryTermTab = ({
key: 'name',
className: 'glossary-name-column',
ellipsis: true,
width: '40%',
width: 200,
render: (_, record) => {
const name = getEntityName(record);

Expand Down Expand Up @@ -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
Expand All @@ -200,7 +200,7 @@ const GlossaryTermTab = ({
title: t('label.reviewer'),
dataIndex: 'reviewers',
key: 'reviewers',
width: '33%',
width: 150,
render: (reviewers: EntityReference[]) => (
<OwnerLabel
owners={reviewers}
Expand All @@ -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>
Expand All @@ -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,
}),
Comment on lines +247 to +249
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There won't be any width if create permission is not there?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, so to maintain that the last column, should not have width where the re-sizeable table is there.

render: (_, record) => {
const status = record.status ?? Status.Approved;

Expand All @@ -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;
Expand Down Expand Up @@ -887,6 +890,7 @@ const GlossaryTermTab = ({
<DndProvider backend={HTML5Backend}>
<Table
bordered
resizableColumns
className={classNames('drop-over-background', {
'drop-over-table': isTableHovered,
})}
Expand All @@ -901,7 +905,6 @@ const GlossaryTermTab = ({
pagination={false}
rowKey="fullyQualifiedName"
size="small"
tableLayout="fixed"
onHeaderRow={onTableHeader}
onRow={onTableRow}
/>
Expand Down
8 changes: 7 additions & 1 deletion openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
}
: {};
Expand Down
34 changes: 34 additions & 0 deletions openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
* limitations under the License.
*/

@import (reference) url('../variables.less');

.ant-table-wrapper {
.ant-table-thead {
tr > th {
Expand Down Expand Up @@ -136,3 +138,35 @@
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
> table
> thead
> tr
> .resizable-container::before,
.ant-table.ant-table-bordered
> .ant-table-container
> .ant-table-header
> table
> thead
> tr
> .resizable-container::before,
.ant-table.ant-table-bordered
> .ant-table-container
> .ant-table-body
> table
> thead
> tr
> .resizable-container::before,
.ant-table.ant-table-bordered
> .ant-table-container
> .ant-table-summary
> table
> thead
> tr
> .resizable-container::before {
background-color: @border-color !important;
}
Loading