Preview icon styles fix. (#262)

Added ability to see formatted text in entity preview
opendatadiscovery · Nov 24, 2021 · 0aae422 · 0aae422
1 parent 02b115d
commit 0aae422
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/odd-platform-ui/src/components/Search/Results/ResultItem/ResultItem.tsx b/odd-platform-ui/src/components/Search/Results/ResultItem/ResultItem.tsx
@@ -54,7 +54,7 @@ const ResultItem: React.FC<ResultItemProps> = ({
             </Typography>
             <AppTooltip
               maxWidth={285}
-              sx={{ ml: 1.25, pr: 0.25 }}
+              sx={{ ml: 1.25, pr: 0.25, flexShrink: 0 }}
               checkForOverflow={false}
               title={({ open }) => (
                 <ResultItemPreviewContainer

diff --git a/...tform-ui/src/components/Search/Results/ResultItem/ResultItemPreview/ResultItemPreview.tsx b/...tform-ui/src/components/Search/Results/ResultItem/ResultItemPreview/ResultItemPreview.tsx
@@ -12,6 +12,9 @@ import {
 import BooleanFormatted from 'components/shared/BooleanFormatted/BooleanFormatted';
 import { format } from 'date-fns';
 import AppCircularProgress from 'components/shared/AppCircularProgress/AppCircularProgress';
+import cx from 'classnames';
+import gfm from 'remark-gfm';
+import ReactMarkdown from 'react-markdown';
 
 interface ResultItemPreviewProps {
   dataEntityId: number;
@@ -63,6 +66,17 @@ const ResultItemPreview: React.FC<ResultItemPreviewProps> = ({
     return metadataVal;
   };
 
+  const getDescription = React.useCallback(
+    () => (
+      <ReactMarkdown
+        className="markdown-body"
+        plugins={[gfm]}
+        source={dataEntityDetails?.internalDescription}
+      />
+    ),
+    [dataEntityDetails]
+  );
+
   return (
     <S.Container container>
       {!isDataEntityLoading ? (
@@ -127,7 +141,9 @@ const ResultItemPreview: React.FC<ResultItemPreviewProps> = ({
               </Typography>
             </Grid>
             <S.AboutText variant="body1" color="texts.secondary">
-              {dataEntityDetails?.internalDescription || 'Not created'}
+              {dataEntityDetails?.internalDescription
+                ? getDescription()
+                : 'Not created'}
             </S.AboutText>
           </S.AboutContainer>
         </>

diff --git a/...-ui/src/components/Search/Results/ResultItem/ResultItemPreview/ResultItemPreviewStyles.ts b/...-ui/src/components/Search/Results/ResultItem/ResultItemPreview/ResultItemPreviewStyles.ts
@@ -5,6 +5,8 @@ export const Container = styled(Grid)(({ theme }) => ({
   padding: theme.spacing(1),
   width: '269px',
   minHeight: '255px',
+  maxHeight: '400px',
+  overflowY: 'hidden',
 }));
 
 export const AboutContainer = styled(Grid)(({ theme }) => ({
@@ -14,8 +16,5 @@ export const AboutContainer = styled(Grid)(({ theme }) => ({
 }));
 
 export const AboutText = styled(Typography)(({ theme }) => ({
-  display: '-webkit-box',
-  overflow: 'hidden',
-  '-webkit-line-clamp': '4',
-  '-webkit-box-orient': 'vertical',
+  width: '100%',
 }));