ui: fixed re-render issue in glossary term page (#14051)

open-metadata · Nov 22, 2023 · 06d9ca3 · 06d9ca3
1 parent dc1d465
commit 06d9ca3
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/...resources/ui/src/components/Glossary/GlossaryTerms/tabs/GlossaryOverviewTab.component.tsx b/...resources/ui/src/components/Glossary/GlossaryTerms/tabs/GlossaryOverviewTab.component.tsx
@@ -18,6 +18,7 @@ import { Glossary } from '../../../../generated/entity/data/glossary';
 import { GlossaryTerm } from '../../../../generated/entity/data/glossaryTerm';
 import { ChangeDescription } from '../../../../generated/entity/type';
 import { TagLabel } from '../../../../generated/type/tagLabel';
+import { getEntityName } from '../../../../utils/EntityUtils';
 import {
   getEntityVersionByField,
   getEntityVersionTags,
@@ -109,7 +110,7 @@ const GlossaryOverviewTab = ({
           <Col span={24}>
             <DescriptionV1
               description={glossaryDescription}
-              entityName={selectedData?.displayName ?? selectedData?.name}
+              entityName={getEntityName(selectedData)}
               entityType={EntityType.GLOSSARY}
               hasEditAccess={permissions.EditDescription || permissions.EditAll}
               isEdit={isDescriptionEditable}

diff --git a/...adata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx b/...adata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
@@ -13,7 +13,7 @@
 
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
 import ErrorPlaceHolder from '../../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
@@ -248,28 +248,31 @@ const GlossaryPage = () => {
       .finally(() => setDeleteStatus(LOADING_STATE.INITIAL));
   };
 
-  const handleGlossaryTermUpdate = async (updatedData: GlossaryTerm) => {
-    const jsonPatch = compare(selectedData as GlossaryTerm, updatedData);
-    try {
-      const response = await patchGlossaryTerm(
-        selectedData?.id as string,
-        jsonPatch
-      );
-      if (response) {
-        setSelectedData(response);
-        if (selectedData?.name !== updatedData.name) {
-          history.push(getGlossaryPath(response.fullyQualifiedName));
-          fetchGlossaryList();
+  const handleGlossaryTermUpdate = useCallback(
+    async (updatedData: GlossaryTerm) => {
+      const jsonPatch = compare(selectedData as GlossaryTerm, updatedData);
+      try {
+        const response = await patchGlossaryTerm(
+          selectedData?.id as string,
+          jsonPatch
+        );
+        if (response) {
+          setSelectedData(response);
+          if (selectedData?.name !== updatedData.name) {
+            history.push(getGlossaryPath(response.fullyQualifiedName));
+            fetchGlossaryList();
+          }
+        } else {
+          throw t('server.entity-updating-error', {
+            entity: t('label.glossary-term'),
+          });
         }
-      } else {
-        throw t('server.entity-updating-error', {
-          entity: t('label.glossary-term'),
-        });
+      } catch (error) {
+        showErrorToast(error as AxiosError);
       }
-    } catch (error) {
-      showErrorToast(error as AxiosError);
-    }
-  };
+    },
+    [selectedData]
+  );
 
   const handleGlossaryTermDelete = (id: string) => {
     setDeleteStatus(LOADING_STATE.WAITING);