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

…#1595)
opendatadiscovery · Jan 24, 2024 · a56e633 · a56e633
1 parent 8866d3c
commit a56e633
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 ? (

diff --git a/...Description/InternalDescription/InternalDescriptionPreview/InternalDescriptionPreview.tsx b/...Description/InternalDescription/InternalDescriptionPreview/InternalDescriptionPreview.tsx
@@ -16,32 +16,29 @@ const InternalDescriptionPreview: FC<InternalDescriptionPreviewProps> = ({
   isStatusDeleted,
   toggleEditMode,
   value,
-}) => (
-  <div>
-    {!isDescriptionEmpty ? (
-      <Markdown value={value} />
-    ) : (
-      <Grid
-        item
-        xs={12}
-        container
-        alignItems='center'
-        justifyContent='flex-start'
-        wrap='nowrap'
-      >
-        <Typography variant='subtitle2'>Not created.</Typography>
-        <WithPermissions permissionTo={Permission.DATA_ENTITY_DESCRIPTION_UPDATE}>
-          {!isStatusDeleted && (
-            <Button
-              text='Add Description'
-              onClick={toggleEditMode}
-              buttonType='tertiary-sm'
-            />
-          )}
-        </WithPermissions>
-      </Grid>
-    )}
-  </div>
-);
+}) =>
+  !isDescriptionEmpty ? (
+    <Markdown value={value} />
+  ) : (
+    <Grid
+      item
+      xs={12}
+      container
+      alignItems='center'
+      justifyContent='flex-start'
+      wrap='nowrap'
+    >
+      <Typography variant='subtitle2'>Not created.</Typography>
+      <WithPermissions permissionTo={Permission.DATA_ENTITY_DESCRIPTION_UPDATE}>
+        {!isStatusDeleted && (
+          <Button
+            text='Add Description'
+            onClick={toggleEditMode}
+            buttonType='tertiary-sm'
+          />
+        )}
+      </WithPermissions>
+    </Grid>
+  );
 
 export default memo(InternalDescriptionPreview);
diff --git a/odd-platform-ui/src/components/Management/CollectorsList/CollectorItem/CollectorItem.tsx b/odd-platform-ui/src/components/Management/CollectorsList/CollectorItem/CollectorItem.tsx
@@ -87,7 +87,6 @@ const CollectorItem: FC<CollectorItemProps> = ({ collector }) => {
         {!isHidden && (
           <InfoItem
             sx={{ p: 1, backgroundColor: 'warning.light', borderRadius: 1 }}
-            labelWidth={0.4}
             label={<AlertIcon fill='#E59900' width={24} height={24} />}
             info={
               <Typography variant='body1'>

diff --git a/odd-platform-ui/src/components/Management/DataSourcesList/DataSourceItem/DataSourceItem.tsx b/odd-platform-ui/src/components/Management/DataSourcesList/DataSourceItem/DataSourceItem.tsx
@@ -110,7 +110,6 @@ const DataSourceItem: FC<DataSourceItemProps> = ({ dataSource }) => {
           {!isHidden && (
             <InfoItem
               sx={{ p: 1, backgroundColor: 'warning.light', borderRadius: 1 }}
-              labelWidth={0.4}
               label={<AlertIcon fill='#E59900' width={24} height={24} />}
               info={
                 <Typography variant='body1'>

diff --git a/...rc/components/shared/elements/CollapsibleInfoContainer/CollapsibleInfoContainer.styles.ts b/...rc/components/shared/elements/CollapsibleInfoContainer/CollapsibleInfoContainer.styles.ts
@@ -31,5 +31,6 @@ export const ContentWrapper = styled('div')(
 export const ContentContainer = styled('div')(({ theme }) => ({
   display: 'flex',
   flexWrap: 'nowrap',
+  width: '100%',
   marginRight: theme.spacing(1),
 }));
diff --git a/odd-platform-ui/src/components/shared/elements/InfoItem/InfoItem.tsx b/odd-platform-ui/src/components/shared/elements/InfoItem/InfoItem.tsx
@@ -1,32 +1,23 @@
 import React, { type FC, type ReactElement } from 'react';
 import type { SxProps } from '@mui/system';
-import { Grid, type GridSize } from '@mui/material';
+import { Box } from '@mui/material';
 
 interface InfoItemProps {
   label: ReactElement;
-  labelWidth?: GridSize;
   info: ReactElement;
   sx?: SxProps;
 }
 
-const InfoItem: FC<InfoItemProps> = ({ labelWidth, label, sx, info }) => {
-  const getXS = () => {
-    if (labelWidth === 12) return 12;
-    if (typeof labelWidth === 'number') return (12 - labelWidth) as GridSize;
-    return 'auto';
-  };
+const InfoItem: FC<InfoItemProps> = ({ label, sx, info }) => (
+  <Box display='flex' flexWrap='wrap' sx={sx} flexShrink={1}>
+    <Box display='flex' flexGrow={0.03} alignItems='center'>
+      {label}
+    </Box>
 
-  return (
-    <Grid container sx={sx}>
-      <Grid item xs={labelWidth ?? 'auto'} display='flex' alignItems='center'>
-        {label}
-      </Grid>
-
-      <Grid item xs={getXS()} display='flex' alignItems='center'>
-        {info}
-      </Grid>
-    </Grid>
-  );
-};
+    <Box display='flex' alignItems='center' flexWrap='wrap' width='100%'>
+      {info}
+    </Box>
+  </Box>
+);
 
 export default InfoItem;
diff --git a/odd-platform-ui/src/components/shared/elements/Markdown/Markdown.tsx b/odd-platform-ui/src/components/shared/elements/Markdown/Markdown.tsx
@@ -13,13 +13,11 @@ interface MarkdownProps {
   value: string;
   editor?: boolean;
   disableCopy?: boolean;
-  onChange?:
-    | ((
-        value?: string | undefined,
-        event?: React.ChangeEvent<HTMLTextAreaElement> | undefined,
-        state?: ContextStore | undefined
-      ) => void)
-    | undefined;
+  onChange?: (
+    value?: string | undefined,
+    event?: React.ChangeEvent<HTMLTextAreaElement> | undefined,
+    state?: ContextStore | undefined
+  ) => void;
   height?: CSSProperties['height'];
   variant?: TypographyVariant;
 }
@@ -103,7 +101,11 @@ const Markdown: FC<MarkdownProps> = ({
       style={{ width: '100%', backgroundColor: 'inherit' }}
       wrapperElement={wrapperElement}
       disableCopy={disableCopy}
-      components={{ div: MarkdownCopyButton, a: TermLink, p: Preview(variant) }}
+      components={{
+        a: TermLink,
+        div: MarkdownCopyButton,
+        p: Preview(variant),
+      }}
     />
   );
 };