Task/WP-72: Highlight matching search terms

client/src/components/Jobs/Jobs.jsx

@@ -233,6 +233,7 @@ function JobsView({
         }
         getRowProps={rowProps}
         columnMemoProps={[version]} /* TODOv3: dropV2Jobs. */
+        searchTerm={query.query_string}
       />
     </>
   );

client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'react-router-dom';
+import * as ROUTES from '../../../constants/routes';
+import { getOutputPath } from 'utils/jobsUtil';
+import './HighlightSearchTerm.scss';
+
+const HighlightSearchTerm = ({ searchTerm, cell, id }) => {
+  const highlightParts = (content) => {
+    const parts = content.split(new RegExp(`(${searchTerm})`, 'gi'));
+    return parts.map((part, i) =>
+      part.toLowerCase() === searchTerm.toLowerCase() ? (
+        <b className="highlight" key={i}>
+          {part}
+        </b>
+      ) : (
+        part
+      )
+    );
+  };
+
+  if (id == 'Output Location') {
+    const outputLocation = getOutputPath(cell.row.original);
+
+    return outputLocation ? (
+      <Link
+        to={`${ROUTES.WORKBENCH}${ROUTES.DATA}/tapis/private/${outputLocation}`}
+        className="wb-link job__path"
+      >
+        {highlightParts(outputLocation)}
+      </Link>
+    ) : null;
+  } else if (id == 'uuid') {
+    return <b className="highlight">{cell.render('Cell')}</b>;
+  } else if (id == 'name') {
+    const jobName = cell.row.values[id];
+
+    return <span>{highlightParts(jobName)}</span>;
+  }
+
+  return null;
+};
+
+HighlightSearchTerm.propTypes = {
+  searchTerm: PropTypes.string,
+  cell: PropTypes.object,
+  id: PropTypes.string,
+};
+
+HighlightSearchTerm.defaultProps = {
+  searchTerm: '',
+  outputLocation: '',
+};
+
+export default HighlightSearchTerm;

client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss

@@ -0,0 +1,3 @@
+.highlight {
+  font-weight: bold;
+}

client/src/components/_common/HighlightSearchTerm/index.js

@@ -0,0 +1,3 @@
+import HighlightSearchTerm from './HighlightSearchTerm';
+
+export default HighlightSearchTerm;

client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx

@@ -3,6 +3,7 @@ import { useTable } from 'react-table';
 import PropTypes from 'prop-types';
 import LoadingSpinner from '../LoadingSpinner';
 import './InfiniteScrollTable.scss';
+import { HighlightSearchTerm } from '_common';
 
 const rowContentPropType = PropTypes.oneOfType([
   PropTypes.string,
@@ -54,6 +55,7 @@ const InfiniteScrollTable = ({
   noDataText,
   getRowProps,
   columnMemoProps,
+  searchTerm,
 }) => {
   const columns = React.useMemo(() => tableColumns, columnMemoProps);
   const data = React.useMemo(() => tableData, [tableData]);
@@ -101,7 +103,18 @@ const InfiniteScrollTable = ({
                         className: cell.column.className,
                       })}
                     >
-                      {cell.render('Cell')}
+                      {searchTerm !== '' &&
+                      (cell.column.id === 'name' ||
+                        cell.column.id === 'Output Location' ||
+                        cell.column.id === 'uuid') ? (
+                        <HighlightSearchTerm
+                          searchTerm={searchTerm}
+                          cell={cell}
+                          id={cell.column.id}
+                        />
+                      ) : (
+                        cell.render('Cell')
+                      )}
                     </td>
                   );
                 })}
@@ -128,12 +141,15 @@ InfiniteScrollTable.propTypes = {
   noDataText: rowContentPropType,
   getRowProps: PropTypes.func,
   columnMemoProps: PropTypes.arrayOf(PropTypes.any),
+  searchTerm: PropTypes.string,
+  cell: PropTypes.object,
 };
 InfiniteScrollTable.defaultProps = {
   onInfiniteScroll: (offset) => {},
   isLoading: false,
   className: '',
   noDataText: '',
+  searchTerm: '',
   getRowProps: (row) => {},
   columnMemoProps: [],
 };

client/src/components/_common/index.js

@@ -16,6 +16,7 @@ export { default as Icon } from './Icon';
 export { default as Message } from './Message';
 export { default as InlineMessage } from './InlineMessage';
 export { default as SectionMessage } from './SectionMessage';
+export { default as HighlightSearchTerm } from './HighlightSearchTerm';
 export { default as Sidebar } from './Sidebar';
 export { default as DescriptionList } from './DescriptionList';
 export { default as DropdownSelector } from './DropdownSelector';