mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-10-13 17:58:36 +00:00
fix(ui): glossary terms table expand / collapse state (#19205)
(cherry picked from commit 6f79067fd25573afa1d34162cbb234f9086b8475)
This commit is contained in:
parent
10dd2e3082
commit
c4f3fa7e82
@ -106,10 +106,14 @@ const GlossaryTermTab = ({
|
|||||||
useGlossaryStore();
|
useGlossaryStore();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const glossaryTerms = useMemo(
|
const { glossaryTerms, expandableKeys } = useMemo(() => {
|
||||||
() => (glossaryChildTerms as ModifiedGlossaryTerm[]) ?? [],
|
const terms = (glossaryChildTerms as ModifiedGlossaryTerm[]) ?? [];
|
||||||
[glossaryChildTerms]
|
|
||||||
);
|
return {
|
||||||
|
expandableKeys: findExpandableKeysForArray(terms),
|
||||||
|
glossaryTerms: terms,
|
||||||
|
};
|
||||||
|
}, [glossaryChildTerms]);
|
||||||
|
|
||||||
const [movedGlossaryTerm, setMovedGlossaryTerm] =
|
const [movedGlossaryTerm, setMovedGlossaryTerm] =
|
||||||
useState<MoveGlossaryTermType>();
|
useState<MoveGlossaryTermType>();
|
||||||
@ -143,10 +147,6 @@ const GlossaryTermTab = ({
|
|||||||
return null;
|
return null;
|
||||||
}, [isGlossary, activeGlossary]);
|
}, [isGlossary, activeGlossary]);
|
||||||
|
|
||||||
const expandableKeys = useMemo(() => {
|
|
||||||
return findExpandableKeysForArray(glossaryTerms);
|
|
||||||
}, [glossaryTerms]);
|
|
||||||
|
|
||||||
const columns = useMemo(() => {
|
const columns = useMemo(() => {
|
||||||
const data: ColumnsType<ModifiedGlossaryTerm> = [
|
const data: ColumnsType<ModifiedGlossaryTerm> = [
|
||||||
{
|
{
|
||||||
@ -818,6 +818,10 @@ const GlossaryTermTab = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filteredGlossaryTerms = glossaryTerms.filter((term) =>
|
||||||
|
selectedStatus.includes(term.status as string)
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row className={className} gutter={[0, 16]}>
|
<Row className={className} gutter={[0, 16]}>
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
@ -897,9 +901,7 @@ const GlossaryTermTab = ({
|
|||||||
columns={rearrangedColumns.filter((col) => !col.hidden)}
|
columns={rearrangedColumns.filter((col) => !col.hidden)}
|
||||||
components={TABLE_CONSTANTS}
|
components={TABLE_CONSTANTS}
|
||||||
data-testid="glossary-terms-table"
|
data-testid="glossary-terms-table"
|
||||||
dataSource={glossaryTerms.filter((term) =>
|
dataSource={filteredGlossaryTerms}
|
||||||
selectedStatus.includes(term.status as string)
|
|
||||||
)}
|
|
||||||
expandable={expandableConfig}
|
expandable={expandableConfig}
|
||||||
loading={isTableLoading}
|
loading={isTableLoading}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
@ -18,6 +18,7 @@ import { findAndUpdateNested } from '../../utils/GlossaryUtils';
|
|||||||
|
|
||||||
export type ModifiedGlossary = Glossary & {
|
export type ModifiedGlossary = Glossary & {
|
||||||
children?: GlossaryTermWithChildren[];
|
children?: GlossaryTermWithChildren[];
|
||||||
|
childrenCount?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useGlossaryStore = create<{
|
export const useGlossaryStore = create<{
|
||||||
|
@ -223,7 +223,7 @@ describe('Glossary Utils', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('findAndUpdateNested', () => {
|
describe('Glossary Utils - findAndUpdateNested', () => {
|
||||||
it('should add new term to the correct parent', () => {
|
it('should add new term to the correct parent', () => {
|
||||||
const terms: ModifiedGlossary[] = [
|
const terms: ModifiedGlossary[] = [
|
||||||
{
|
{
|
||||||
@ -263,6 +263,7 @@ describe('findAndUpdateNested', () => {
|
|||||||
|
|
||||||
const updatedTerms = findAndUpdateNested(terms, newTerm);
|
const updatedTerms = findAndUpdateNested(terms, newTerm);
|
||||||
|
|
||||||
|
expect(updatedTerms[0].childrenCount).toBe(1);
|
||||||
expect(updatedTerms[0].children).toHaveLength(1);
|
expect(updatedTerms[0].children).toHaveLength(1);
|
||||||
expect(updatedTerms?.[0].children?.[0]).toEqual(newTerm);
|
expect(updatedTerms?.[0].children?.[0]).toEqual(newTerm);
|
||||||
});
|
});
|
||||||
@ -310,14 +311,11 @@ describe('findAndUpdateNested', () => {
|
|||||||
|
|
||||||
const updatedTerms = findAndUpdateNested(terms, newTerm);
|
const updatedTerms = findAndUpdateNested(terms, newTerm);
|
||||||
|
|
||||||
expect(
|
const modifiedTerms = updatedTerms[0].children?.[0].children ?? [];
|
||||||
updatedTerms?.[0].children && updatedTerms?.[0].children[0].children
|
|
||||||
).toHaveLength(1);
|
expect(modifiedTerms).toHaveLength(1);
|
||||||
expect(
|
expect(updatedTerms[0].children?.[0].childrenCount).toBe(1);
|
||||||
updatedTerms?.[0].children &&
|
expect(modifiedTerms[0]).toEqual(newTerm);
|
||||||
updatedTerms?.[0].children[0].children &&
|
|
||||||
updatedTerms?.[0].children[0].children[0]
|
|
||||||
).toEqual(newTerm);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not modify terms if parent is not found', () => {
|
it('should not modify terms if parent is not found', () => {
|
||||||
|
@ -349,9 +349,13 @@ export const findAndUpdateNested = (
|
|||||||
// So we need to find the parent term and update it's children
|
// So we need to find the parent term and update it's children
|
||||||
return terms.map((term) => {
|
return terms.map((term) => {
|
||||||
if (term.fullyQualifiedName === newTerm.parent?.fullyQualifiedName) {
|
if (term.fullyQualifiedName === newTerm.parent?.fullyQualifiedName) {
|
||||||
|
const children = [...(term.children || []), newTerm] as GlossaryTerm[];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...term,
|
...term,
|
||||||
children: [...(term.children || []), newTerm] as GlossaryTerm[],
|
children,
|
||||||
|
// Need to update childrenCount in case of 0 to update expand / collapse icon
|
||||||
|
childrenCount: children.length,
|
||||||
} as ModifiedGlossary;
|
} as ModifiedGlossary;
|
||||||
} else if ('children' in term && term.children?.length) {
|
} else if ('children' in term && term.children?.length) {
|
||||||
return {
|
return {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user