bugfix: markdown is rendered correctly on dataset field overview page (…

…#1595)
opendatadiscovery · Jan 24, 2024 · a56e633 · a56e633
1 parent 8866d3c
commit a56e633
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 130 deletions.
diff --git a/odd-platform-ui/package.json b/odd-platform-ui/package.json
@@ -48,7 +48,7 @@
     "@tanstack/react-query": "^5.15.0",
     "@tanstack/react-virtual": "^3.0.1",
     "@tanstack/react-table": "^8.11.2",
-    "@uiw/react-md-editor": "^3.23.5",
+    "@uiw/react-md-editor": "^3.25.6",
     "@visx/curve": "^3.3.0",
     "@visx/event": "^3.3.0",
     "@visx/group": "^3.3.0",

diff --git a/odd-platform-ui/pnpm-lock.yaml b/odd-platform-ui/pnpm-lock.yaml
diff --git a/...setStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescription.tsx b/...setStructureView/DatasetFieldOverview/DatasetFieldDescription/DatasetFieldDescription.tsx
@@ -76,20 +76,22 @@ const DatasetFieldDescription: FC<DatasetFieldDescriptionProps> = ({
           />
         )}
       </Grid>
-      {editMode ? (
-        <DatasetFieldDescriptionEdit
-          value={internalDescription}
-          handleMarkdownChange={handleRealtimeMarkdownChange}
-          handleUpdateDescription={handleUpdateDescription}
-          toggleEditMode={toggleEditMode}
-          error={error}
-        />
-      ) : (
-        <DatasetFieldDescriptionPreview
-          isDescriptionEmpty={!description}
-          value={transformDescriptionToMarkdown(description)}
-        />
-      )}
+      <Box width='100%'>
+        {editMode ? (
+          <DatasetFieldDescriptionEdit
+            value={internalDescription}
+            handleMarkdownChange={handleRealtimeMarkdownChange}
+            handleUpdateDescription={handleUpdateDescription}
+            toggleEditMode={toggleEditMode}
+            error={error}
+          />
+        ) : (
+          <DatasetFieldDescriptionPreview
+            isDescriptionEmpty={!description}
+            value={transformDescriptionToMarkdown(description)}
+          />
+        )}
+      </Box>
     </>
   );
 };

diff --git a/...DatasetFieldDescription/DatasetFieldDescriptionPreview/DatasetFieldDescriptionPreview.tsx b/...DatasetFieldDescription/DatasetFieldDescriptionPreview/DatasetFieldDescriptionPreview.tsx
@@ -10,16 +10,13 @@ interface DatasetFieldDescriptionPreviewProps {
 const DatasetFieldDescriptionPreview: FC<DatasetFieldDescriptionPreviewProps> = ({
   isDescriptionEmpty,
   value,
-}) => (
-  <div>
-    {!isDescriptionEmpty ? (
-      <Markdown value={value} variant='subtitle1' />
-    ) : (
-      <Typography mt={1} variant='subtitle1'>
-        Description is not created yet
-      </Typography>
-    )}
-  </div>
-);
+}) =>
+  !isDescriptionEmpty ? (
+    <Markdown value={value} variant='subtitle1' />
+  ) : (
+    <Typography mt={1} variant='subtitle1'>
+      Description is not created yet
+    </Typography>
+  );
 
 export default DatasetFieldDescriptionPreview;
diff --git a/...verview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx b/...verview/DatasetStructureView/DatasetFieldOverview/DatasetFieldTerms/TermItem/TermItem.tsx
@@ -1,5 +1,5 @@
 import React, { type FC, useCallback } from 'react';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { Permission, type TermRef } from 'generated-sources';
 import { WithPermissions } from 'components/shared/contexts';
 import {
@@ -11,6 +11,7 @@ import {
 import { DeleteIcon, LinkedTermIcon } from 'components/shared/icons';
 import { useDeleteDatasetFieldTerm } from 'lib/hooks';
 import { termDetailsPath } from 'routes';
+import { Link } from 'react-router-dom';
 
 interface TermItemProps {
   name: TermRef['name'];
@@ -45,15 +46,18 @@ const TermItem: FC<TermItemProps> = ({
 
   return (
     <InfoItem
-      labelWidth={4}
+      sx={{ width: '100%' }}
       label={
-        <Box p={0.75} display='flex' flexWrap='nowrap' alignItems='center'>
-          <Button to={termDetailsLink} buttonType='link-m' text={name} sx={{ mr: 0.5 }} />
+        <Box p={0.75} display='flex' flexWrap='nowrap' alignItems='center' gap={0.5}>
+          <Link to={termDetailsLink}>
+            <Typography color='button.link.normal.color'>{name}</Typography>
+          </Link>
           {isDescriptionLink && <LinkedTermIcon />}
         </Box>
       }
       info={
         <CollapsibleInfoContainer
+          style={{ width: '100%' }}
           content={<Markdown value={definition} />}
           actions={
             !isDescriptionLink ? (