From 1b9c0fcfaebdea7a968dde5d871aa0c371785e3b Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Mon, 11 May 2020 21:17:22 -0400
Subject: [PATCH] Auto include collapse/expand icon for first column as a part
 of row component

---
 .../StudyListTable/StudyListTableRow.js       | 30 ++++++++++++++++---
 platform/ui/src/views/StudyList/StudyList.js  | 10 +------
 .../StudyListContainer/StudyListContainer.jsx | 11 ++-----
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/platform/ui/src/components/StudyListTable/StudyListTableRow.js b/platform/ui/src/components/StudyListTable/StudyListTableRow.js
index dbaa37389..5ae2f79a0 100644
--- a/platform/ui/src/components/StudyListTable/StudyListTableRow.js
+++ b/platform/ui/src/components/StudyListTable/StudyListTableRow.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import Icon from './../Icon';
 
-const StudyListTableRow = (props) => {
+const StudyListTableRow = props => {
   const { tableData } = props;
   const { row, expandedContent, onClickRow, isExpanded } = tableData;
   return (
     <>
-      <tr>
       <tr className="select-none">
         <td
           className={classnames('border-0 p-0', {
@@ -34,7 +34,7 @@ const StudyListTableRow = (props) => {
                   )}
                   onClick={onClickRow}
                 >
-                  {row.map((cell) => {
+                  {row.map((cell, index) => {
                     const { content, gridCol, name } = cell;
 
                     return (
@@ -45,8 +45,30 @@ const StudyListTableRow = (props) => {
                           { 'border-b border-secondary-light': !isExpanded },
                           `w-${gridCol}/24` || ''
                         )}
+                        style={{
+                          maxWidth: 0,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
                       >
-                        <div className="flex flex-row items-center pl-1">
+                        <div
+                          className="flex flex-row items-center pl-1"
+                          style={{
+                            width: '100%',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {index === 0 && (
+                            <Icon
+                              name={
+                                isExpanded ? 'chevron-down' : 'chevron-right'
+                              }
+                              className="mr-4"
+                            />
+                          )}
                           {content}
                         </div>
                       </td>
diff --git a/platform/ui/src/views/StudyList/StudyList.js b/platform/ui/src/views/StudyList/StudyList.js
index 9030e7788..2e36916ef 100644
--- a/platform/ui/src/views/StudyList/StudyList.js
+++ b/platform/ui/src/views/StudyList/StudyList.js
@@ -142,15 +142,7 @@ const StudyList = () => {
       row: [
         {
           key: 'patientName',
-          content: (
-            <>
-              <Icon
-                name={isExpanded ? 'chevron-down' : 'chevron-right'}
-                className="mr-4"
-              />
-              {PatientName}
-            </>
-          ),
+          content: PatientName,
           gridCol: 4,
         },
         {
diff --git a/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx b/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx
index e66305dec..44b224ade 100644
--- a/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx
+++ b/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx
@@ -62,6 +62,7 @@ function StudyListContainer({ history, data: studies }) {
         skipEmptyString: true,
       })}`,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedFilterValues]);
 
   const filtersMeta = [
@@ -163,15 +164,7 @@ function StudyListContainer({ history, data: studies }) {
       row: [
         {
           key: 'patientName',
-          content: (
-            <>
-              <Icon
-                name={isExpanded ? 'chevron-down' : 'chevron-right'}
-                className="mr-4"
-              />
-              {patientName}
-            </>
-          ),
+          content: patientName,
           gridCol: 4,
         },
         {