fix(ui): glossary terms table expand / collapse state (#19205)

(cherry picked from commit 6f79067fd25573afa1d34162cbb234f9086b8475)
This commit is contained in:
Chirag Madlani 2025-01-03 10:21:37 +05:30
parent 10dd2e3082
commit c4f3fa7e82
4 changed files with 26 additions and 21 deletions

View File

@ -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}

View File

@ -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<{

View File

@ -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', () => {

View File

@ -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 {