From edb15cf9b8b28683985c13f4b6a39b1f6a1f2fc8 Mon Sep 17 00:00:00 2001
From: Andrey Nenashev <anenashev@provectus.com>
Date: Thu, 12 Oct 2023 14:00:57 +0200
Subject: [PATCH] (bugfix): correct rendering terms' markdown on dataset
 structure page (#1465)

---
 .../DatasetFieldTerms/TermItem/TermItem.tsx          |  9 +++++++--
 .../Overview/OverviewTerms/TermItem/TermItem.tsx     |  2 +-
 .../elements/forms/AssignTermForm/AssignTermForm.tsx |  3 ++-
 odd-platform-ui/src/lib/hooks/api/terms.ts           | 12 ++++--------
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx
index ddb1688b9..b0a7621fd 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/DatasetStructure/DatasetStructureOverview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx
@@ -2,7 +2,12 @@ import React, { type FC, useCallback } from 'react';
 import { Box } from '@mui/material';
 import { Permission, type TermRef } from 'generated-sources';
 import { WithPermissions } from 'components/shared/contexts';
-import { Button, CollapsibleInfoContainer, InfoItem } from 'components/shared/elements';
+import {
+  Button,
+  CollapsibleInfoContainer,
+  InfoItem,
+  Markdown,
+} from 'components/shared/elements';
 import { DeleteIcon, LinkedTermIcon } from 'components/shared/icons';
 import { useAppPaths, useDeleteDatasetFieldTerm } from 'lib/hooks';
 
@@ -49,7 +54,7 @@ const TermItem: FC<TermItemProps> = ({
       }
       info={
         <CollapsibleInfoContainer
-          content={<>{definition}</>}
+          content={<Markdown value={definition} />}
           actions={
             !isDescriptionLink ? (
               <WithPermissions permissionTo={Permission.DATASET_FIELD_DELETE_TERM}>
diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTerms/TermItem/TermItem.tsx b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTerms/TermItem/TermItem.tsx
index cc49ad0c1..68445a35f 100644
--- a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTerms/TermItem/TermItem.tsx
+++ b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewTerms/TermItem/TermItem.tsx
@@ -41,7 +41,7 @@ const TermItem: React.FC<TermItemProps> = ({
             {linkedTerm.isDescriptionLink && <LinkedTermIcon />}
           </Box>
           <S.TermDefinition variant='subtitle2'>
-            {linkedTerm.term.definition}
+            {linkedTerm.term.namespace.name}
           </S.TermDefinition>
         </Grid>
         {!linkedTerm.isDescriptionLink && !isStatusDeleted && (
diff --git a/odd-platform-ui/src/components/shared/elements/forms/AssignTermForm/AssignTermForm.tsx b/odd-platform-ui/src/components/shared/elements/forms/AssignTermForm/AssignTermForm.tsx
index b5d1a064b..81b62b5a0 100644
--- a/odd-platform-ui/src/components/shared/elements/forms/AssignTermForm/AssignTermForm.tsx
+++ b/odd-platform-ui/src/components/shared/elements/forms/AssignTermForm/AssignTermForm.tsx
@@ -6,6 +6,7 @@ import Button from 'components/shared/elements/Button/Button';
 import TermsAutocomplete from 'components/shared/elements/Autocomplete/TermsAutocomplete/TermsAutocomplete';
 import type { TermRef } from 'generated-sources';
 import DialogWrapper from 'components/shared/elements/DialogWrapper/DialogWrapper';
+import Markdown from 'components/shared/elements/Markdown/Markdown';
 
 interface AssignTermFormData {
   termId: number;
@@ -75,7 +76,7 @@ const AssignTermForm: FC<AssignTermFormProps> = ({
             <Typography variant='body2' color='texts.secondary' component='span'>
               {t('Definition')}:
             </Typography>
-            {selectedTerm.definition}
+            <Markdown value={selectedTerm.definition} />
           </Grid>
         </>
       )}
diff --git a/odd-platform-ui/src/lib/hooks/api/terms.ts b/odd-platform-ui/src/lib/hooks/api/terms.ts
index 61ac14d0d..b0f0169d0 100644
--- a/odd-platform-ui/src/lib/hooks/api/terms.ts
+++ b/odd-platform-ui/src/lib/hooks/api/terms.ts
@@ -1,19 +1,15 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { termApi } from 'lib/api';
-import type { TermApiGetTermByNamespaceAndNameRequest, TermRef } from 'generated-sources';
+import type { TermApiGetTermByNamespaceAndNameRequest } from 'generated-sources';
 import type { AppError } from 'lib/errorHandling';
 
 export function useGetTermByNamespaceAndName() {
   const queryClient = useQueryClient();
 
-  return async ({
-    namespaceName,
-    termName,
-  }: TermApiGetTermByNamespaceAndNameRequest): Promise<TermRef | AppError> => {
+  return async ({ namespaceName, termName }: TermApiGetTermByNamespaceAndNameRequest) => {
     try {
-      const params = { namespaceName, termName };
-      return await queryClient.fetchQuery(['term', namespaceName, termName], () =>
-        termApi.getTermByNamespaceAndName(params)
+      return await queryClient.fetchQuery(['terms', namespaceName, termName], () =>
+        termApi.getTermByNamespaceAndName({ namespaceName, termName })
       );
     } catch (error) {
       return error as AppError;