assigned pr to a reviewer from webhook event

.nvmrc

@@ -1 +1 @@
-18
+20

client/package.json

@@ -5,8 +5,9 @@
   "private": true,
   "dependencies": {
     "date-fns": "^2.29.3",
+    "js-cookie": "^3.0.5",
     "react": "^18.2.0",
-    "react-data-table-component": "^7.5.3",
+    "react-data-table-component": "^7.6.2",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1",
     "react-scripts": "^5.0.1",
@@ -41,10 +42,12 @@
   },
   "proxy": "http://localhost:8080",
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.4.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^18.15.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",

client/src/App.css

@@ -95,6 +95,18 @@ button.no-click:hover {
     justify-content: space-between;
 }
 
+.expanded-row {
+    padding-bottom: 0.25em;
+}
+
+.expanded-row .expanded-nav {
+    display: none;
+}
+
+.expanded-row:hover .expanded-nav {
+    display: flex;
+}
+
 .expanded-row .note {
     margin: 2px 0px;
 }

client/src/App.tsx

@@ -1,5 +1,6 @@
 import './App.css';
 import React, {useEffect, useState} from 'react';
+import Cookies from 'js-cookie';
 import RenderReviewList from './components/RenderReviewList';
 import SignInWithSlackOAuth from './components/SignInWithSlackOAuth';
 import SignInWithSlackApp from './components/SignInWithSlackApp';
@@ -19,9 +20,9 @@ interface Session {
 
 function App() {
     const queryString = new URLSearchParams(window.location.search);
-    const [status, setStatus] = useState(queryString.get('status') || 'pending');
+    const [status, setStatus] = useState(queryString.get('status') || Cookies.get('status') || 'pending');
     const [session, setSession] = useState({} as Session);
-    const [selectedChannel, setSelectedChannel] = useState(queryString.get('channel') || 'all');
+    const [selectedChannel, setSelectedChannel] = useState(queryString.get('channel') || Cookies.get('channel') || 'all');
 
     const handleNavBarClick = (value: string) => {
         setStatus(value);
@@ -33,6 +34,14 @@ function App() {
             .catch(logError);
     }, []);
 
+    useEffect(() => {
+        Cookies.set('channel', selectedChannel);
+    }, [selectedChannel]);
+
+    useEffect(() => {
+        Cookies.set('status', status);
+    }, [status]);
+
     return (
         <div className="App">
             {!session?.user

client/src/components/ExpandedRowDataView.tsx

@@ -71,7 +71,7 @@ const ExpandedRowDataView = ({data, onError, onUpdate, user}: DataViewProps) =>
                 </div>
                 <div className="right small-text">Last updated on {format(new Date(data.updatedAt), 'MMM dd, yyyy hh:mmaaaaa')}</div>
             </div>
-            <div className="note">{data.note}</div>
+            <div className="note">{data.note}&nbsp;</div>
         </div>
     );
 };

client/src/components/RenderReviewList.tsx

@@ -12,6 +12,7 @@ import type {
     CodeReview,
     User,
 } from '../lib/types';
+import Cookies from 'js-cookie';
 import ExpandedRow from './ExpandedRow';
 import FancyProgress from './FancyProgress';
 import {format} from 'date-fns';
@@ -37,20 +38,17 @@ const columns: TableColumn<CodeReview>[] = [
         name: 'Date',
         selector: (row: CodeReview) => format(new Date(row.createdAt), 'MMM dd, yyyy'),
         maxWidth: '7em',
-        compact: true,
     },
     {
         name: 'Owner',
         selector: (row: CodeReview) => row.owner,
-        maxWidth: '12em',
-        compact: true,
+        maxWidth: '10em',
     },
     {
         name: 'Jira Ticket',
         format: (row: CodeReview) => row.jiraTicket && <a href={`${row.jiraTicketLinkUrl}`}>{row.jiraTicket}</a>,
         selector: () => true,
         maxWidth: '7em',
-        compact: true,
     },
     {
         name: 'Pull Request',
@@ -59,33 +57,28 @@ const columns: TableColumn<CodeReview>[] = [
                 <a href={row.pullRequestLink}>{row.pullRequestLink.replace(/.*\/(.*?\/pull\/\d+)/,'$1')}</a>
             </div>),
         selector: () => true,
-        maxWidth: '20em',
-        compact: true,
+        maxWidth: '15em',
     },
     {
         name: 'Slack Link',
         format: (row: CodeReview) => row.slackThreadTs && row.slackPermalink && <a href={row.slackPermalink ?? '#'}>{row.slackThreadTs}</a>,
         selector: () => true,
-        maxWidth: '12em',
-        compact: true,
+        maxWidth: '10em',
     },
     {
         name: 'Reviewers',
         selector: (row: CodeReview) => row.reviewers?.join(', ') ?? '',
         wrap: true,
-        compact: true,
     },
     {
         name: 'Approvers',
         selector: (row: CodeReview) => row.approvers?.join(', ') ?? '',
         wrap: true,
-        compact: true,
     },
     {
         name: 'Request Changes',
         selector: (row: CodeReview) => row.requestChanges?.join(', ') ?? '',
         wrap: true,
-        compact: true,
     },
 ];
 
@@ -96,6 +89,11 @@ const paginationComponentOptions = {
     selectAllRowsItem: false,
 };
 
+const cellPaddings = {
+    paddingLeft: '0',
+    paddingRight: '0.5em',
+}
+
 const customStyles = {
     header: {
         style: {
@@ -114,6 +112,16 @@ const customStyles = {
         style: {
             backgroundColor: '#252525',
         }
+    },
+    headCells: {
+        style: {
+            ...cellPaddings,
+        }
+    },
+    cells: {
+        style: {
+            ...cellPaddings,
+        }
     }
 };
 
@@ -144,11 +152,13 @@ createTheme('custom', {
  * @constructor
  */
 const RenderReviewList = ({channel, status, user}: RenderReviewListProps) => {
+    const queryString = new URLSearchParams(window.location.search);
     const [dataSet, setDataSet] = useState([] as CodeReview[]);
     const [loading, setLoading] = useState(true);
     const [totalRows, setTotalRows] = useState(0);
-    const [pageSize, setPageSize] = useState(10);
+    const [pageSize, setPageSize] = useState(Number(Cookies.get('pageSize') || '10'));
     const [currentPage, setCurrentPage] = useStateWithDeps(1, [channel, status]);
+    const [expandedRow] = useState(queryString.get('expanded') || Cookies.get('expanded') || 'yes');
 
     /**
      * Fetch the list of code review.
@@ -210,6 +220,14 @@ const RenderReviewList = ({channel, status, user}: RenderReviewListProps) => {
         });
     }, [channel, currentPage, pageSize, status]);
 
+    useEffect(() => {
+        Cookies.set('pageSize', String(pageSize));
+    }, [pageSize]);
+
+    useEffect(() => {
+        Cookies.set('expanded', expandedRow);
+    }, [expandedRow]);
+
     return (
         <div id="reviews-list">
             <DataTable
@@ -219,21 +237,21 @@ const RenderReviewList = ({channel, status, user}: RenderReviewListProps) => {
                 data={dataSet}
                 progressPending={loading}
                 paginationPerPage={pageSize}
-                paginationRowsPerPageOptions={[10,20,30,50,100]}
-                pagination
-                paginationServer
+                paginationRowsPerPageOptions={[10,15,20,25,30,40,50,100]}
+                pagination={true}
+                paginationServer={true}
                 paginationTotalRows={totalRows}
                 paginationComponentOptions={paginationComponentOptions}
                 progressComponent={<FancyProgress/>}
                 onChangeRowsPerPage={setPageSize}
                 onChangePage={setCurrentPage}
                 paginationDefaultPage={currentPage}
 
-                fixedHeader
-                striped
-                highlightOnHover
-                dense
-                persistTableHead
+                fixedHeader={true}
+                striped={true}
+                highlightOnHover={true}
+                dense={true}
+                persistTableHead={true}
 
                 conditionalRowStyles={[
                     {
@@ -242,8 +260,10 @@ const RenderReviewList = ({channel, status, user}: RenderReviewListProps) => {
                     }
                 ]}
 
-                expandableRows
+                expandableRows={true}
                 expandableRowsComponent={expandedRowComponent}
+                expandableRowExpanded={() => expandedRow === 'yes'}
+                expandableInheritConditionalStyles={true}
             />
         </div>
     );