fix(#14257): glossary term name get fully truncate for long text in glossary table (#14469)

* fix: glossary term name get fully truncate for long text

* fix a type issue in explore-page-v1 component

* fix some alignment of text and term icon

* fix the max width of name column in glossary table

* minor change

* minor change

* fix ellipsis issue for table column glossary term

* restrict term icon view based on height instead of width

* remove unwanted class

* revert back w-max-90 class

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
This commit is contained in:
Abhishek Porwal 2023-12-22 17:07:32 +05:30 committed by GitHub
parent fe4c353bf3
commit a8e53d2b5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 30 additions and 27 deletions

View File

@ -109,27 +109,30 @@ const GlossaryTermTab = ({
title: t('label.term-plural'), title: t('label.term-plural'),
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
className: 'glossary-name-column w-max-400 truncate', className: 'glossary-name-column',
ellipsis: true,
width: '40%',
render: (_, record) => { render: (_, record) => {
const name = getEntityName(record); const name = getEntityName(record);
return ( return (
<Space align="center"> <>
{record.style?.iconURL && ( {record.style?.iconURL && (
<img <img
className="m-r-xss vertical-baseline"
data-testid="tag-icon" data-testid="tag-icon"
height={12}
src={record.style.iconURL} src={record.style.iconURL}
width={16}
/> />
)} )}
<Link <Link
className="cursor-pointer help-text" className="cursor-pointer vertical-baseline"
data-testid={name} data-testid={name}
style={{ color: record.style?.color }} style={{ color: record.style?.color }}
to={getGlossaryPath(record.fullyQualifiedName || record.name)}> to={getGlossaryPath(record.fullyQualifiedName || record.name)}>
{name} {name}
</Link> </Link>
</Space> </>
); );
}, },
}, },
@ -137,6 +140,7 @@ const GlossaryTermTab = ({
title: t('label.description'), title: t('label.description'),
dataIndex: 'description', dataIndex: 'description',
key: 'description', key: 'description',
width: permissions.Create ? '21%' : '33%',
render: (description: string) => render: (description: string) =>
description.trim() ? ( description.trim() ? (
<RichTextEditorPreviewer <RichTextEditorPreviewer
@ -152,12 +156,14 @@ const GlossaryTermTab = ({
title: t('label.owner'), title: t('label.owner'),
dataIndex: 'owner', dataIndex: 'owner',
key: 'owner', key: 'owner',
width: '15%',
render: (owner: EntityReference) => <OwnerLabel owner={owner} />, render: (owner: EntityReference) => <OwnerLabel owner={owner} />,
}, },
{ {
title: t('label.status'), title: t('label.status'),
dataIndex: 'status', dataIndex: 'status',
key: 'status', key: 'status',
width: '12%',
filterIcon: FilterIcon, filterIcon: FilterIcon,
filters: StatusFilters, filters: StatusFilters,
render: (_, record) => { render: (_, record) => {
@ -178,7 +184,7 @@ const GlossaryTermTab = ({
data.push({ data.push({
title: t('label.action-plural'), title: t('label.action-plural'),
key: 'new-term', key: 'new-term',
width: 80, width: '12%',
render: (_, record) => { render: (_, record) => {
const status = record.status ?? Status.Approved; const status = record.status ?? Status.Approved;
const allowAddTerm = status === Status.Approved; const allowAddTerm = status === Status.Approved;
@ -396,9 +402,8 @@ const GlossaryTermTab = ({
loading={isTableLoading} loading={isTableLoading}
pagination={false} pagination={false}
rowKey="fullyQualifiedName" rowKey="fullyQualifiedName"
scroll={{ x: true }}
size="small" size="small"
tableLayout="auto" tableLayout="fixed"
onHeaderRow={onTableHeader} onHeaderRow={onTableHeader}
onRow={onTableRow} onRow={onTableRow}
/> />

View File

@ -344,7 +344,7 @@ const ExplorePageV1: FunctionComponent = () => {
const counts: Record<string, number> = {}; const counts: Record<string, number> = {};
buckets.forEach((item) => { buckets.forEach((item) => {
if (item && TABS_SEARCH_INDEXES.includes(item.key)) { if (item && TABS_SEARCH_INDEXES.includes(item.key as SearchIndex)) {
counts[item.key ?? ''] = item.doc_count; counts[item.key ?? ''] = item.doc_count;
} }
}); });

View File

@ -116,9 +116,6 @@
.w-max-fit-content { .w-max-fit-content {
max-width: fit-content; max-width: fit-content;
} }
.w-max-95 {
max-width: 95%;
}
.w-300 { .w-300 {
width: 300px; width: 300px;
} }

View File

@ -41,8 +41,8 @@
} }
.expand-cell-empty-icon-container { .expand-cell-empty-icon-container {
width: 18px; width: 8px;
height: 16px; height: 12px;
display: inline-flex; display: inline-flex;
} }
} }

View File

@ -121,15 +121,9 @@
} }
// Alignment Items // Alignment Items
.align-middle {
vertical-align: middle;
}
.self-end { .self-end {
align-self: flex-end; align-self: flex-end;
} }
.vertical-align-inherit {
vertical-align: inherit;
}
.self-center { .self-center {
align-self: center; align-self: center;
@ -208,3 +202,11 @@
.vertical-baseline { .vertical-baseline {
vertical-align: baseline; vertical-align: baseline;
} }
.align-middle {
vertical-align: middle;
}
.vertical-align-inherit {
vertical-align: inherit;
}

View File

@ -205,7 +205,6 @@ export const getGlobalSettingsMenuWithPermission = (
}, },
], ],
}, },
{ {
category: i18next.t('label.integration-plural'), category: i18next.t('label.integration-plural'),
key: 'integrations', key: 'integrations',

View File

@ -505,23 +505,23 @@ export function getTableExpandableConfig<T>(
const expandableConfig: ExpandableConfig<T> = { const expandableConfig: ExpandableConfig<T> = {
expandIcon: ({ expanded, onExpand, expandable, record }) => expandIcon: ({ expanded, onExpand, expandable, record }) =>
expandable ? ( expandable ? (
<div className="items-center inline"> <>
{isDraggable && ( {isDraggable && (
<IconDrag className="m-r-xs drag-icon" height={12} width={12} /> <IconDrag className="m-r-xs drag-icon" height={12} width={8} />
)} )}
<Icon <Icon
className="m-r-xs" className="m-r-xs vertical-baseline"
component={expanded ? IconDown : IconRight} component={expanded ? IconDown : IconRight}
data-testid="expand-icon" data-testid="expand-icon"
style={{ fontSize: '10px', color: TEXT_BODY_COLOR }} style={{ fontSize: '10px', color: TEXT_BODY_COLOR }}
onClick={(e) => onExpand(record, e)} onClick={(e) => onExpand(record, e)}
/> />
</div> </>
) : ( ) : (
isDraggable && ( isDraggable && (
<> <>
<IconDrag className="m-r-xs drag-icon" height={12} width={12} /> <IconDrag className="m-r-xs drag-icon" height={12} width={8} />
<div className="expand-cell-empty-icon-container" /> <span className="expand-cell-empty-icon-container" />
</> </>
) )
), ),