Search: Results: Add support for entities of type Data Quality

odd-platform-ui/src/components/Search/Results/ResultItem/ResultItem.tsx

@@ -1,25 +1,13 @@
-import React, { MouseEvent } from 'react';
-import {
-  withStyles,
-  Typography,
-  Grid,
-  Menu,
-  MenuItem,
-} from '@material-ui/core';
-import TruncateMarkup from 'react-truncate-markup';
-import { formatDistanceToNowStrict, format } from 'date-fns';
+import React from 'react';
+import { Grid, Typography, withStyles } from '@material-ui/core';
+import { format, formatDistanceToNowStrict } from 'date-fns';
 import { Link } from 'react-router-dom';
 import cx from 'classnames';
-import {
-  DataEntity,
-  DataEntityTypeNameEnum,
-  DataEntityRef,
-} from 'generated-sources';
+import { DataEntity, DataEntityTypeNameEnum } from 'generated-sources';
 import { SearchTotalsByName, SearchType } from 'redux/interfaces/search';
 import EntityTypeItem from 'components/shared/EntityTypeItem/EntityTypeItem';
-import AppButton from 'components/shared/AppButton/AppButton';
-import MoreIcon from 'components/shared/Icons/MoreIcon';
 import { dataEntityDetailsPath } from 'lib/paths';
+import ResultItemTruncatedCell from 'components/Search/Results/ResultItem/ResultItemTruncatedCell/ResultItemTruncatedCell';
 import { styles, StylesType } from './ResultItemStyles';
 
 interface ResultItemProps extends StylesType {
@@ -36,112 +24,6 @@ const ResultItem: React.FC<ResultItemProps> = ({
 }) => {
   const detailsLink = dataEntityDetailsPath(searchResult.id);
 
-  const [isMenuOpen, setIsMenuOpen] = React.useState<boolean>(false);
-
-  const dataRefListEllipsis = (
-    menuName: string,
-    list?: DataEntityRef[]
-  ) => () => {
-    let anchorEl;
-    return (
-      <>
-        <AppButton
-          ref={el => {
-            anchorEl = el;
-          }}
-          color="expand"
-          size="small"
-          icon={<MoreIcon />}
-          edge="end"
-          aria-label=""
-          aria-controls={`menu-${menuName}-${searchResult.id}`}
-          aria-haspopup="true"
-          onClick={(event: MouseEvent) => {
-            event.stopPropagation();
-            setIsMenuOpen(true);
-          }}
-        />
-        <Menu
-          anchorEl={anchorEl || null}
-          getContentAnchorEl={null}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-          id={`menu-${menuName}-${searchResult.id}`}
-          keepMounted
-          open={isMenuOpen}
-          onClose={() => setIsMenuOpen(false)}
-        >
-          {list?.map(item => (
-            <MenuItem key={item.id}>
-              {item.internalName || item.externalName}
-            </MenuItem>
-          ))}
-        </Menu>
-      </>
-    );
-  };
-
-  let sources;
-  if ('sourceList' in searchResult && searchResult.sourceList?.length) {
-    sources = (
-      <TruncateMarkup
-        lines={1}
-        lineHeight="16px"
-        ellipsis={dataRefListEllipsis('sources', searchResult.sourceList)}
-      >
-        <div className={classes.truncatedList}>
-          {searchResult.sourceList?.map(source => (
-            <TruncateMarkup.Atom key={source.id}>
-              <AppButton
-                color="primaryLight"
-                size="small"
-                onClick={() => {}}
-              >
-                <Link
-                  // key={source.id}
-                  target="__blank"
-                  to={dataEntityDetailsPath(source.id)}
-                >
-                  {source.internalName || source.externalName}
-                </Link>
-              </AppButton>
-            </TruncateMarkup.Atom>
-          ))}
-        </div>
-      </TruncateMarkup>
-    );
-  }
-
-  let targets;
-  if ('targetList' in searchResult && searchResult.targetList?.length) {
-    targets = (
-      <TruncateMarkup
-        lines={1}
-        lineHeight="16px"
-        ellipsis={dataRefListEllipsis('targets', searchResult.targetList)}
-      >
-        <div className={classes.truncatedList}>
-          {searchResult.targetList?.map(target => (
-            <TruncateMarkup.Atom key={target.id}>
-              <AppButton
-                color="primaryLight"
-                size="small"
-                onClick={() => {}}
-              >
-                <Link
-                  // key={target.id}
-                  target="__blank"
-                  to={dataEntityDetailsPath(target.id)}
-                >
-                  {target.internalName || target.externalName}
-                </Link>
-              </AppButton>
-            </TruncateMarkup.Atom>
-          ))}
-        </div>
-      </TruncateMarkup>
-    );
-  }
   return (
     <Link to={detailsLink} className={classes.itemLink}>
       <Grid container className={classes.container} wrap="nowrap">
@@ -190,19 +72,50 @@ const ResultItem: React.FC<ResultItemProps> = ({
               wrap="wrap"
               className={cx(classes.col, classes.collg)}
             >
-              {sources}
+              <ResultItemTruncatedCell
+                searchResult={searchResult}
+                truncatedCellType="sourceList"
+              />
             </Grid>
             <Grid item className={cx(classes.col, classes.collg)}>
-              {targets}
+              <ResultItemTruncatedCell
+                searchResult={searchResult}
+                truncatedCellType="targetList"
+              />
             </Grid>
           </>
         ) : null}
         {searchType &&
         searchType === totals[DataEntityTypeNameEnum.CONSUMER]?.id ? (
           <Grid item className={cx(classes.col, classes.collg)}>
-            {sources}
+            <ResultItemTruncatedCell
+              searchResult={searchResult}
+              truncatedCellType="sourceList"
+            />
           </Grid>
         ) : null}
+        {searchType &&
+        searchType === totals[DataEntityTypeNameEnum.QUALITY_TEST]?.id ? (
+          <>
+            <Grid
+              item
+              container
+              wrap="wrap"
+              className={cx(classes.col, classes.collg)}
+            >
+              <ResultItemTruncatedCell
+                searchResult={searchResult}
+                truncatedCellType="datasetsList"
+              />
+            </Grid>
+            <Grid item className={cx(classes.col, classes.collg)}>
+              <ResultItemTruncatedCell
+                searchResult={searchResult}
+                truncatedCellType="linkedUrlList"
+              />
+            </Grid>
+          </>
+        ) : null}
         <Grid item className={cx(classes.col, classes.colmd)}>
           <Typography
             variant="body1"

odd-platform-ui/src/components/Search/Results/ResultItem/ResultItemTruncatedCell/ResultItemTruncatedCell.tsx

@@ -0,0 +1,112 @@
+import React, { MouseEvent } from 'react';
+import { Menu, MenuItem, withStyles } from '@material-ui/core';
+import TruncateMarkup from 'react-truncate-markup';
+import { Link } from 'react-router-dom';
+import { DataEntity, DataEntityRef } from 'generated-sources';
+import AppButton from 'components/shared/AppButton/AppButton';
+import MoreIcon from 'components/shared/Icons/MoreIcon';
+import { dataEntityDetailsPath } from 'lib/paths';
+import { styles, StylesType } from './ResultItemTruncatedCellStyles';
+
+type TruncatedCellType =
+  | 'sourceList'
+  | 'targetList'
+  | 'inputList'
+  | 'datasetsList'
+  | 'linkedUrlList';
+
+interface ResultItemProps extends StylesType {
+  searchResult: DataEntity;
+  truncatedCellType: TruncatedCellType;
+}
+
+const ResultItemTruncatedCell: React.FC<ResultItemProps> = ({
+  classes,
+  searchResult,
+  truncatedCellType,
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = React.useState<boolean>(false);
+
+  const dataRefListEllipsis = (
+    menuName: string,
+    list?: DataEntityRef[] | string[]
+  ) => () => {
+    let anchorEl;
+    return (
+      <>
+        <AppButton
+          ref={el => {
+            anchorEl = el;
+          }}
+          color="expand"
+          size="small"
+          icon={<MoreIcon />}
+          edge="end"
+          aria-label=""
+          aria-controls={`menu-${menuName}-${searchResult.id}`}
+          aria-haspopup="true"
+          onClick={(event: MouseEvent) => {
+            event.stopPropagation();
+            setIsMenuOpen(true);
+          }}
+        />
+        <Menu
+          anchorEl={anchorEl || null}
+          getContentAnchorEl={null}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+          id={`menu-${menuName}-${searchResult.id}`}
+          keepMounted
+          open={isMenuOpen}
+          onClose={() => setIsMenuOpen(false)}
+        >
+          {list?.map((item: DataEntityRef | string) =>
+            typeof item === 'string' ? (
+              <MenuItem key={item}>{item}</MenuItem>
+            ) : (
+              <MenuItem key={item.id}>
+                {item.internalName || item.externalName}
+              </MenuItem>
+            )
+          )}
+        </Menu>
+      </>
+    );
+  };
+
+  const getTruncateMarkupAtom = (item: DataEntityRef | string) => {
+    const key = typeof item === 'string' ? item : item.id;
+    const linkTo =
+      typeof item === 'string' ? item : dataEntityDetailsPath(item.id);
+    const linkContent =
+      typeof item === 'string'
+        ? item
+        : item.internalName || item.externalName;
+    return (
+      <TruncateMarkup.Atom key={key}>
+        <AppButton color="primaryLight" size="small" onClick={() => {}}>
+          <Link target="__blank" to={linkTo}>
+            {linkContent}
+          </Link>
+        </AppButton>
+      </TruncateMarkup.Atom>
+    );
+  };
+
+  return (
+    <TruncateMarkup
+      lines={1}
+      lineHeight="16px"
+      ellipsis={dataRefListEllipsis(
+        truncatedCellType,
+        searchResult[truncatedCellType]
+      )}
+    >
+      <div className={classes.truncatedList}>
+        {searchResult[truncatedCellType]?.map(getTruncateMarkupAtom)}
+      </div>
+    </TruncateMarkup>
+  );
+};
+
+export default withStyles(styles)(ResultItemTruncatedCell);

odd-platform-ui/src/components/Search/Results/ResultItem/ResultItemTruncatedCell/ResultItemTruncatedCellStyles.ts

@@ -0,0 +1,16 @@
+import { createStyles, Theme, WithStyles } from '@material-ui/core';
+
+export const styles = (theme: Theme) =>
+  createStyles({
+    truncatedList: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      margin: theme.spacing(-0.25, -0.25),
+      '& > *': {
+        margin: theme.spacing(0.25, 0.25),
+      },
+    },
+  });
+
+export type StylesType = WithStyles<typeof styles>;

odd-platform-ui/src/components/Search/Results/Results.tsx

@@ -167,6 +167,18 @@ const Results: React.FC<ResultsProps> = ({
               </Grid>
             </>
           ) : null}
+          {searchType &&
+          searchType ===
+            totals[DataEntityTypeNameEnum.QUALITY_TEST]?.id ? (
+            <>
+              <Grid item className={cx(classes.col, classes.collg)}>
+                <Typography variant="caption">Entities</Typography>
+              </Grid>
+              <Grid item className={cx(classes.col, classes.collg)}>
+                <Typography variant="caption">Suit URL</Typography>
+              </Grid>
+            </>
+          ) : null}
           <Grid item className={cx(classes.col, classes.colmd)}>
             <Typography variant="caption">Namespace</Typography>
           </Grid>