From 5b145c3355a34d849d7e9ee8838efbb15487db2b Mon Sep 17 00:00:00 2001
From: vburlachenko <slaboezveno3@gmail.com>
Date: Fri, 26 Apr 2024 19:01:34 +0300
Subject: [PATCH] 1659 - created termToTerm relationship. Added API's to create
 relation and to link term using definition

---
 .../QueryExampleDetails/QueryExampleDetailsContainer.tsx   | 6 ++----
 .../Overview/TermDefinition/TermDefinition.styles.ts       | 1 -
 .../TermDetails/Overview/TermDefinition/TermDefinition.tsx | 4 ++--
 .../src/components/Terms/TermSearch/TermForm/TermsForm.tsx | 7 ++++++-
 .../components/shared/elements/forms/AssignTermForm.tsx    | 2 +-
 .../src/lib/hooks/api/dataModelling/queryExamples.ts       | 1 +
 6 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/odd-platform-ui/src/components/DataModelling/QueryExampleDetails/QueryExampleDetailsContainer.tsx b/odd-platform-ui/src/components/DataModelling/QueryExampleDetails/QueryExampleDetailsContainer.tsx
index 9d356a253..71e977605 100644
--- a/odd-platform-ui/src/components/DataModelling/QueryExampleDetails/QueryExampleDetailsContainer.tsx
+++ b/odd-platform-ui/src/components/DataModelling/QueryExampleDetails/QueryExampleDetailsContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Box, Grid, Typography } from '@mui/material';
 import { useGetQueryExampleDetails } from 'lib/hooks/api/dataModelling/queryExamples';
 import { useAppDateTime } from 'lib/hooks';
@@ -68,9 +68,7 @@ const QueryExampleDetailsContainer: React.FC = () => {
         <QueryExampleDetailsTabs
           linkedEntitiesHint={queryExampleDetails?.linkedEntities.pageInfo.total}
           linkedTermsHint={
-            queryExampleDetails?.linkedTerms?.items
-              ? queryExampleDetails?.linkedTerms?.items.length
-              : 0
+            queryExampleDetails?.linkedTerms?.items ? queryExampleDetails?.linkedTerms?.items.length : 0
           }
         />
       </Grid>
diff --git a/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.styles.ts b/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.styles.ts
index 98af8237f..45607c86b 100644
--- a/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.styles.ts
+++ b/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.styles.ts
@@ -13,6 +13,5 @@ export const Tooltip = styled('div')(({ theme }) => ({
 export const Definition = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'space-between',
   marginBottom: theme.spacing(1),
 }));
\ No newline at end of file
diff --git a/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.tsx b/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.tsx
index e0280d946..c874d6cd9 100644
--- a/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.tsx
+++ b/odd-platform-ui/src/components/Terms/TermDetails/Overview/TermDefinition/TermDefinition.tsx
@@ -38,14 +38,14 @@ const TermDefinition: FC<TermDefinitionProps> = ({ definition, termId, terms })
   return (
     <>
       <S.Definition>
-        <Typography variant='h2' mb={1}>
+        <Typography variant='h2' mr={1}>
           Definition
         </Typography>
         <AppTooltip title={tooltipInfoContent} checkForOverflow={false}>
           <InformationIcon width={14} height={14} />
         </AppTooltip>
       </S.Definition>
-      <Markdown value={transformDescriptionToMarkdown(definition)} variant='subtitle1' />
+      <Markdown value={transformDescriptionToMarkdown(definition)} />
     </>
   );
 };
diff --git a/odd-platform-ui/src/components/Terms/TermSearch/TermForm/TermsForm.tsx b/odd-platform-ui/src/components/Terms/TermSearch/TermForm/TermsForm.tsx
index 9860a4743..e8ee7bf44 100644
--- a/odd-platform-ui/src/components/Terms/TermSearch/TermForm/TermsForm.tsx
+++ b/odd-platform-ui/src/components/Terms/TermSearch/TermForm/TermsForm.tsx
@@ -19,6 +19,7 @@ import {
   getTermUpdatingStatuses,
 } from 'redux/selectors';
 import { termDetailsPath, useTermsRouteParams } from 'routes';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface TermsFormDialogProps {
   btnCreateEl: JSX.Element;
@@ -26,6 +27,7 @@ interface TermsFormDialogProps {
 
 const TermsForm: FC<TermsFormDialogProps> = ({ btnCreateEl }) => {
   const { t } = useTranslation();
+  const queryClient = useQueryClient();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const { termId } = useTermsRouteParams();
@@ -68,7 +70,10 @@ const TermsForm: FC<TermsFormDialogProps> = ({ btnCreateEl }) => {
       : dispatch(createTerm({ termFormData: parsedData }))
     )
       .unwrap()
-      .then((response: TermDetails) => {
+      .then(async (response: TermDetails) => {
+        await queryClient.invalidateQueries({
+          queryKey: ['term', termId],
+        });
         clearState();
         navigate(termDetailsPath(response.id));
       });
diff --git a/odd-platform-ui/src/components/shared/elements/forms/AssignTermForm.tsx b/odd-platform-ui/src/components/shared/elements/forms/AssignTermForm.tsx
index 0f55b602d..81b62b5a0 100644
--- a/odd-platform-ui/src/components/shared/elements/forms/AssignTermForm.tsx
+++ b/odd-platform-ui/src/components/shared/elements/forms/AssignTermForm.tsx
@@ -8,7 +8,7 @@ import type { TermRef } from 'generated-sources';
 import DialogWrapper from 'components/shared/elements/DialogWrapper/DialogWrapper';
 import Markdown from 'components/shared/elements/Markdown/Markdown';
 
-export interface AssignTermFormData {
+interface AssignTermFormData {
   termId: number;
 }
 
diff --git a/odd-platform-ui/src/lib/hooks/api/dataModelling/queryExamples.ts b/odd-platform-ui/src/lib/hooks/api/dataModelling/queryExamples.ts
index 241a89d95..c65b697a9 100644
--- a/odd-platform-ui/src/lib/hooks/api/dataModelling/queryExamples.ts
+++ b/odd-platform-ui/src/lib/hooks/api/dataModelling/queryExamples.ts
@@ -122,3 +122,4 @@ export function useGetQueryExamplesByTermId({
     queryFn: async () => queryExampleApi.getQueryExampleByTermId({ termId }),
   });
 }
+