From ebd4061f95759033eb90ab80a262343ca01048f6 Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Wed, 4 Oct 2023 10:56:05 -0500
Subject: [PATCH 01/10] task/WP-72 highlighted search queries/term in job
 history infinitescrolltable

---
 client/src/components/Jobs/Jobs.jsx           |  1 +
 .../HighlightSearchTerm.jsx                   | 53 +++++++++++++++++++
 .../HighlightSearchTerm.scss                  |  4 ++
 .../_common/HighlightSearchTerm/index.js      |  3 ++
 .../InfiniteScrollTable.jsx                   | 18 ++++++-
 client/src/components/_common/index.js        |  1 +
 6 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
 create mode 100644 client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
 create mode 100644 client/src/components/_common/HighlightSearchTerm/index.js

diff --git a/client/src/components/Jobs/Jobs.jsx b/client/src/components/Jobs/Jobs.jsx
index 1945d1bf7..48473b331 100644
--- a/client/src/components/Jobs/Jobs.jsx
+++ b/client/src/components/Jobs/Jobs.jsx
@@ -233,6 +233,7 @@ function JobsView({
         }
         getRowProps={rowProps}
         columnMemoProps={[version]} /* TODOv3: dropV2Jobs. */
+        searchTerm={query.query_string}
       />
     </>
   );
diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
new file mode 100644
index 000000000..71d13c10c
--- /dev/null
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
@@ -0,0 +1,53 @@
+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() ? (
+        <mark className="highlight" key={i}>{part}</mark>
+      ) : (
+        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 <mark className="highlight">{cell.render('Cell')}</mark>;
+  } 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;
\ No newline at end of file
diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
new file mode 100644
index 000000000..9f234d308
--- /dev/null
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
@@ -0,0 +1,4 @@
+.highlight {
+    padding: 2.8px 0;
+    background-color: yellow;
+}
\ No newline at end of file
diff --git a/client/src/components/_common/HighlightSearchTerm/index.js b/client/src/components/_common/HighlightSearchTerm/index.js
new file mode 100644
index 000000000..aee968c3c
--- /dev/null
+++ b/client/src/components/_common/HighlightSearchTerm/index.js
@@ -0,0 +1,3 @@
+import HighlightSearchTerm from './HighlightSearchTerm';
+
+export default HighlightSearchTerm;
\ No newline at end of file
diff --git a/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx b/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx
index a3bbe85e5..e8fcfeaa6 100644
--- a/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx
+++ b/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: [],
 };
diff --git a/client/src/components/_common/index.js b/client/src/components/_common/index.js
index 3812495d2..ec663f8ca 100644
--- a/client/src/components/_common/index.js
+++ b/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';

From 317f005adceb1778d16ba4a09f7646c4732b16e9 Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Wed, 4 Oct 2023 11:02:19 -0500
Subject: [PATCH 02/10] fixed formatting

---
 .../_common/HighlightSearchTerm/HighlightSearchTerm.jsx     | 6 ++++--
 .../_common/HighlightSearchTerm/HighlightSearchTerm.scss    | 6 +++---
 client/src/components/_common/HighlightSearchTerm/index.js  | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
index 71d13c10c..778c743bd 100644
--- a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
@@ -10,7 +10,9 @@ const HighlightSearchTerm = ({ searchTerm, cell, id }) => {
     const parts = content.split(new RegExp(`(${searchTerm})`, 'gi'));
     return parts.map((part, i) =>
       part.toLowerCase() === searchTerm.toLowerCase() ? (
-        <mark className="highlight" key={i}>{part}</mark>
+        <mark className="highlight" key={i}>
+          {part}
+        </mark>
       ) : (
         part
       )
@@ -50,4 +52,4 @@ HighlightSearchTerm.defaultProps = {
   outputLocation: '',
 };
 
-export default HighlightSearchTerm;
\ No newline at end of file
+export default HighlightSearchTerm;
diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
index 9f234d308..9613cfa8f 100644
--- a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
@@ -1,4 +1,4 @@
 .highlight {
-    padding: 2.8px 0;
-    background-color: yellow;
-}
\ No newline at end of file
+  padding: 2.8px 0;
+  background-color: yellow;
+}
diff --git a/client/src/components/_common/HighlightSearchTerm/index.js b/client/src/components/_common/HighlightSearchTerm/index.js
index aee968c3c..ccb240cb7 100644
--- a/client/src/components/_common/HighlightSearchTerm/index.js
+++ b/client/src/components/_common/HighlightSearchTerm/index.js
@@ -1,3 +1,3 @@
 import HighlightSearchTerm from './HighlightSearchTerm';
 
-export default HighlightSearchTerm;
\ No newline at end of file
+export default HighlightSearchTerm;

From 500a0ddef19abd0ce66c8410b53b1c6ff30af122 Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Wed, 4 Oct 2023 11:37:52 -0500
Subject: [PATCH 03/10] removed highlight and added bold

---
 .../_common/HighlightSearchTerm/HighlightSearchTerm.scss       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
index 9613cfa8f..2db2ade9b 100644
--- a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
@@ -1,4 +1,5 @@
 .highlight {
   padding: 2.8px 0;
-  background-color: yellow;
+  background-color: unset;
+  font-weight: bold;
 }

From 8a35df5e58acffef3acbe27e255cc0c01c488cdb Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Wed, 4 Oct 2023 13:29:06 -0500
Subject: [PATCH 04/10] remove css properties and replaced <mark> with <b>

---
 .../_common/HighlightSearchTerm/HighlightSearchTerm.jsx     | 6 +++---
 .../_common/HighlightSearchTerm/HighlightSearchTerm.scss    | 2 --
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
index 778c743bd..2f317851b 100644
--- a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
@@ -10,9 +10,9 @@ const HighlightSearchTerm = ({ searchTerm, cell, id }) => {
     const parts = content.split(new RegExp(`(${searchTerm})`, 'gi'));
     return parts.map((part, i) =>
       part.toLowerCase() === searchTerm.toLowerCase() ? (
-        <mark className="highlight" key={i}>
+        <b className="highlight" key={i}>
           {part}
-        </mark>
+        </b>
       ) : (
         part
       )
@@ -31,7 +31,7 @@ const HighlightSearchTerm = ({ searchTerm, cell, id }) => {
       </Link>
     ) : null;
   } else if (id == 'uuid') {
-    return <mark className="highlight">{cell.render('Cell')}</mark>;
+    return <b className="highlight">{cell.render('Cell')}</b>;
   } else if (id == 'name') {
     const jobName = cell.row.values[id];
 
diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
index 2db2ade9b..a9bb77c2b 100644
--- a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
@@ -1,5 +1,3 @@
 .highlight {
-  padding: 2.8px 0;
-  background-color: unset;
   font-weight: bold;
 }

From ad8f992fcacabff071c161589d7647c82e602805 Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Wed, 4 Oct 2023 15:54:56 -0500
Subject: [PATCH 05/10] used local css modules instead of global

---
 .../_common/HighlightSearchTerm/HighlightSearchTerm.jsx     | 6 +++---
 ...lightSearchTerm.scss => HighlightSearchTerm.module.scss} | 0
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename client/src/components/_common/HighlightSearchTerm/{HighlightSearchTerm.scss => HighlightSearchTerm.module.scss} (100%)

diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
index 2f317851b..f7a2841b1 100644
--- a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
@@ -3,14 +3,14 @@ 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';
+import styles from './HighlightSearchTerm.module.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}>
+        <b className={styles['highlight']} key={i}>
           {part}
         </b>
       ) : (
@@ -31,7 +31,7 @@ const HighlightSearchTerm = ({ searchTerm, cell, id }) => {
       </Link>
     ) : null;
   } else if (id == 'uuid') {
-    return <b className="highlight">{cell.render('Cell')}</b>;
+    return <b className={styles['highlight']}>{cell.render('Cell')}</b>;
   } else if (id == 'name') {
     const jobName = cell.row.values[id];
 
diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.module.scss
similarity index 100%
rename from client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.scss
rename to client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.module.scss

From f086b7cdd2a0ce5c7ce024f4bdcb7c6ee9f549d5 Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Fri, 6 Oct 2023 15:02:40 -0500
Subject: [PATCH 06/10] Changed implementation of HighlightSearchTerm component
 to be used by Jobs.jsx

---
 client/src/components/Jobs/Jobs.jsx           | 42 +++++++++++++------
 .../HighlightSearchTerm.jsx                   | 33 +++------------
 .../InfiniteScrollTable.jsx                   | 17 +-------
 3 files changed, 36 insertions(+), 56 deletions(-)

diff --git a/client/src/components/Jobs/Jobs.jsx b/client/src/components/Jobs/Jobs.jsx
index 48473b331..008adcb6d 100644
--- a/client/src/components/Jobs/Jobs.jsx
+++ b/client/src/components/Jobs/Jobs.jsx
@@ -5,6 +5,7 @@ import { Link, useLocation } from 'react-router-dom';
 import {
   AppIcon,
   InfiniteScrollTable,
+  HighlightSearchTerm,
   Message,
   SectionMessage,
   Section,
@@ -105,7 +106,7 @@ function JobsView({
           }}
           className="wb-link"
         >
-          View Details
+          {query.query_string ? <b>View Details</b> : 'View Details'}
         </Link>
       );
     },
@@ -133,15 +134,25 @@ function JobsView({
     {
       Header: 'Job Name',
       accessor: 'name',
-      Cell: (el) => (
-        <span
-          title={el.value}
-          id={`jobID${el.row.index}`}
-          className="job__name"
-        >
-          {el.value}
-        </span>
-      ),
+      Cell: (el) => {
+        const query = queryStringParser.parse(useLocation().search);
+        return (
+          <span
+            title={el.value}
+            id={`jobID${el.row.index}`}
+            className="job__name"
+          >
+            {query.query_string ? (
+              <HighlightSearchTerm
+                searchTerm={query.query_string}
+                content={el.value}
+              />
+            ) : (
+              el.value
+            )}
+          </span>
+        );
+      },
     },
     {
       Header: 'Job Status',
@@ -183,12 +194,20 @@ function JobsView({
         // TODOv3: dropV2Jobs
         if (el.row.original.uuid) {
           const outputLocation = getOutputPath(el.row.original);
+          const query = queryStringParser.parse(useLocation().search);
           return outputLocation && !hideDataFiles ? (
             <Link
               to={`${ROUTES.WORKBENCH}${ROUTES.DATA}/tapis/private/${outputLocation}`}
               className="wb-link job__path"
             >
-              {outputLocation}
+              {query.query_string ? (
+                <HighlightSearchTerm
+                  searchTerm={query.query_string}
+                  content={outputLocation}
+                />
+              ) : (
+                outputLocation
+              )}
             </Link>
           ) : null;
         } else {
@@ -233,7 +252,6 @@ function JobsView({
         }
         getRowProps={rowProps}
         columnMemoProps={[version]} /* TODOv3: dropV2Jobs. */
-        searchTerm={query.query_string}
       />
     </>
   );
diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
index f7a2841b1..0fe57b69a 100644
--- a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
@@ -1,12 +1,9 @@
 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 styles from './HighlightSearchTerm.module.scss';
 
-const HighlightSearchTerm = ({ searchTerm, cell, id }) => {
-  const highlightParts = (content) => {
+const HighlightSearchTerm = ({ searchTerm, content }) => {
+  const highlightParts = () => {
     const parts = content.split(new RegExp(`(${searchTerm})`, 'gi'));
     return parts.map((part, i) =>
       part.toLowerCase() === searchTerm.toLowerCase() ? (
@@ -19,37 +16,17 @@ const HighlightSearchTerm = ({ searchTerm, cell, id }) => {
     );
   };
 
-  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={styles['highlight']}>{cell.render('Cell')}</b>;
-  } else if (id == 'name') {
-    const jobName = cell.row.values[id];
-
-    return <span>{highlightParts(jobName)}</span>;
-  }
-
-  return null;
+  return <>{highlightParts()}</>;
 };
 
 HighlightSearchTerm.propTypes = {
   searchTerm: PropTypes.string,
-  cell: PropTypes.object,
-  id: PropTypes.string,
+  content: PropTypes.string,
 };
 
 HighlightSearchTerm.defaultProps = {
   searchTerm: '',
-  outputLocation: '',
+  content: '',
 };
 
 export default HighlightSearchTerm;
diff --git a/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx b/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx
index e8fcfeaa6..d9f673df1 100644
--- a/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx
+++ b/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx
@@ -3,7 +3,6 @@ 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,
@@ -55,7 +54,6 @@ const InfiniteScrollTable = ({
   noDataText,
   getRowProps,
   columnMemoProps,
-  searchTerm,
 }) => {
   const columns = React.useMemo(() => tableColumns, columnMemoProps);
   const data = React.useMemo(() => tableData, [tableData]);
@@ -103,18 +101,7 @@ const InfiniteScrollTable = ({
                         className: cell.column.className,
                       })}
                     >
-                      {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')
-                      )}
+                      {cell.render('Cell')}
                     </td>
                   );
                 })}
@@ -141,7 +128,6 @@ InfiniteScrollTable.propTypes = {
   noDataText: rowContentPropType,
   getRowProps: PropTypes.func,
   columnMemoProps: PropTypes.arrayOf(PropTypes.any),
-  searchTerm: PropTypes.string,
   cell: PropTypes.object,
 };
 InfiniteScrollTable.defaultProps = {
@@ -149,7 +135,6 @@ InfiniteScrollTable.defaultProps = {
   isLoading: false,
   className: '',
   noDataText: '',
-  searchTerm: '',
   getRowProps: (row) => {},
   columnMemoProps: [],
 };

From cff28c7ac892da42e055535b5e14d7dd6ec758d2 Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Mon, 23 Oct 2023 09:22:18 -0500
Subject: [PATCH 07/10] added useMemo hook and improved HighlightSearchTerm
 perf

---
 client/src/components/Jobs/Jobs.jsx             | 14 +++++++-------
 .../HighlightSearchTerm/HighlightSearchTerm.jsx | 17 ++++++++++++-----
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Jobs/Jobs.jsx b/client/src/components/Jobs/Jobs.jsx
index 008adcb6d..5e703aecd 100644
--- a/client/src/components/Jobs/Jobs.jsx
+++ b/client/src/components/Jobs/Jobs.jsx
@@ -47,7 +47,10 @@ function JobsView({
     shallowEqual
   );
 
-  const query = queryStringParser.parse(useLocation().search);
+  const query = React.useMemo(
+    () => queryStringParser.parse(location.search),
+    [location.search]
+  );
 
   const noDataText =
     // TODOv3: dropV2Jobs
@@ -91,8 +94,6 @@ function JobsView({
         original: { id, uuid, name },
       },
     }) => {
-      const query = queryStringParser.parse(useLocation().search);
-
       // TODOv3: dropV2Jobs
       const jobsPathname = uuid ? `/jobs/${uuid}` : `/jobsv2/${id}`;
       return (
@@ -110,7 +111,7 @@ function JobsView({
         </Link>
       );
     },
-    []
+    [query]
   );
 
   if (error) {
@@ -135,7 +136,6 @@ function JobsView({
       Header: 'Job Name',
       accessor: 'name',
       Cell: (el) => {
-        const query = queryStringParser.parse(useLocation().search);
         return (
           <span
             title={el.value}
@@ -194,7 +194,7 @@ function JobsView({
         // TODOv3: dropV2Jobs
         if (el.row.original.uuid) {
           const outputLocation = getOutputPath(el.row.original);
-          const query = queryStringParser.parse(useLocation().search);
+
           return outputLocation && !hideDataFiles ? (
             <Link
               to={`${ROUTES.WORKBENCH}${ROUTES.DATA}/tapis/private/${outputLocation}`}
@@ -251,7 +251,7 @@ function JobsView({
           </Section>
         }
         getRowProps={rowProps}
-        columnMemoProps={[version]} /* TODOv3: dropV2Jobs. */
+        columnMemoProps={[version, query]} /* TODOv3: dropV2Jobs. */
       />
     </>
   );
diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
index 0fe57b69a..592085e29 100644
--- a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.jsx
@@ -3,17 +3,24 @@ import PropTypes from 'prop-types';
 import styles from './HighlightSearchTerm.module.scss';
 
 const HighlightSearchTerm = ({ searchTerm, content }) => {
+  if (!searchTerm) {
+    return <>{content}</>;
+  }
+
+  const searchTermRegex = new RegExp(`(${searchTerm})`, 'gi');
+
   const highlightParts = () => {
-    const parts = content.split(new RegExp(`(${searchTerm})`, 'gi'));
-    return parts.map((part, i) =>
-      part.toLowerCase() === searchTerm.toLowerCase() ? (
+    const parts = content.split(searchTermRegex);
+    return parts.map((part, i) => {
+      const isSearchTerm = part.match(searchTermRegex);
+      return isSearchTerm ? (
         <b className={styles['highlight']} key={i}>
           {part}
         </b>
       ) : (
         part
-      )
-    );
+      );
+    });
   };
 
   return <>{highlightParts()}</>;

From 3dffd09791861efa570e0a3f1f2fc3404cdd5f1e Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Mon, 23 Oct 2023 09:32:10 -0500
Subject: [PATCH 08/10] removed useMemo hook

---
 client/src/components/Jobs/Jobs.jsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/components/Jobs/Jobs.jsx b/client/src/components/Jobs/Jobs.jsx
index 5e703aecd..9ab35f85c 100644
--- a/client/src/components/Jobs/Jobs.jsx
+++ b/client/src/components/Jobs/Jobs.jsx
@@ -47,10 +47,7 @@ function JobsView({
     shallowEqual
   );
 
-  const query = React.useMemo(
-    () => queryStringParser.parse(location.search),
-    [location.search]
-  );
+  const query = queryStringParser.parse(useLocation().search);
 
   const noDataText =
     // TODOv3: dropV2Jobs

From 003e96f2f606f2803eaf161d9b9f743e2fe4e92c Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Mon, 23 Oct 2023 11:30:27 -0500
Subject: [PATCH 09/10] added unit tests for HighlightSearchTerm component

---
 .../HighlightSearchTerm.test.js               | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js

diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js
new file mode 100644
index 000000000..11060513f
--- /dev/null
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  toBeInTheDocument,
+  toHaveClass,
+  toBeNull,
+} from '@testing-library/jest-dom';
+
+import HighlightSearchTerm from './HighlightSearchTerm';
+
+describe('HighlightSearchTerm Component', () => {
+  it('renders content when searchTerm is not provided', () => {
+    const { getByText } = render(<HighlightSearchTerm content="Lorem ipsum" />);
+    expect(getByText('Lorem ipsum')).toBeInTheDocument();
+  });
+
+  it('renders without highlighting when searchTerm in content do not match', () => {
+    const { getByText } = render(
+      <HighlightSearchTerm
+        searchTerm="minim"
+        content="Lorem ipsum dolor sit amet"
+      />
+    );
+    expect(getByText('Lorem ipsum dolor sit amet')).toBeInTheDocument();
+    expect(document.querySelector('.highlight')).toBeNull();
+  });
+
+  it('renders content when searchTerm is not provided', () => {
+    const { getByText } = render(<HighlightSearchTerm content="Lorem ipsum" />);
+    expect(getByText('Lorem ipsum')).toBeInTheDocument();
+  });
+
+  it('renders content with searchTerm highlighted', () => {
+    const { getByText } = render(
+      <HighlightSearchTerm
+        searchTerm="ipsum"
+        content="Lorem ipsum dolor sit amet"
+      />
+    );
+    const highlightedText = getByText('ipsum');
+    expect(highlightedText).toHaveClass('highlight');
+  });
+
+  it('renders content with multiple searchTerm occurrences highlighted', () => {
+    const { getAllByText } = render(
+      <HighlightSearchTerm
+        searchTerm="ipsum"
+        content="Lorem ipsum ipsum Loremipsum ipsumipsum dolor sit amet"
+      />
+    );
+    const highlightedText = getAllByText('ipsum');
+    expect(highlightedText.length).toBe(5);
+    highlightedText.forEach((element) => {
+      expect(element).toHaveClass('highlight');
+    });
+  });
+});

From 6b24fb0d925305b5992329514f502393495eca57 Mon Sep 17 00:00:00 2001
From: Asim Regmi <asimregmi.ar@gmail.com>
Date: Tue, 24 Oct 2023 13:25:57 -0500
Subject: [PATCH 10/10] updated comment and fixed linting

---
 client/src/components/Jobs/Jobs.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Jobs/Jobs.jsx b/client/src/components/Jobs/Jobs.jsx
index 9ab35f85c..c10f6abcb 100644
--- a/client/src/components/Jobs/Jobs.jsx
+++ b/client/src/components/Jobs/Jobs.jsx
@@ -248,7 +248,10 @@ function JobsView({
           </Section>
         }
         getRowProps={rowProps}
-        columnMemoProps={[version, query]} /* TODOv3: dropV2Jobs. */
+        columnMemoProps={[
+          version,
+          query,
+        ]} /* TODOv3: dropV2Jobs. Refactor version prop. */
       />
     </>
   );