bug/WP-52 Jobs View Infinite Scroll Fix (#865)

* fix for infinite scroll not working, fixed logic for getting more jobs * update getJobSearchList tapis command to use skip instead of startAfter * update to scroll value calculation logic * added testing for scroll functionality
TACC · Sep 29, 2023 · eca948c · eca948c
1 parent 9b53589
commit eca948c
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 61 deletions.
diff --git a/client/src/components/Jobs/Jobs.jsx b/client/src/components/Jobs/Jobs.jsx
@@ -75,11 +75,14 @@ function JobsView({
   const infiniteScrollCallback = useCallback(() => {
     // TODOv3: dropV2Jobs
     const dispatchType = version === 'v3' ? 'GET_JOBS' : 'GET_V2_JOBS';
-    dispatch({
-      type: dispatchType,
-      params: { offset: jobs.length, queryString: query.query_string || '' },
-    });
-  }, [dispatch, jobs, query.query_string]);
+
+    if (!isJobLoading) {
+      dispatch({
+        type: dispatchType,
+        params: { offset: jobs.length, queryString: query.query_string || '' },
+      });
+    }
+  }, [dispatch, jobs, query.query_string, isJobLoading]);
 
   const jobDetailLink = useCallback(
     ({
@@ -217,22 +220,20 @@ function JobsView({
           disabled={isJobLoading || isNotificationLoading}
         />
       )}
-      <div className={includeSearchbar ? 'o-flex-item-table-wrap' : ''}>
-        <InfiniteScrollTable
-          tableColumns={filterColumns}
-          tableData={jobs}
-          onInfiniteScroll={infiniteScrollCallback}
-          isLoading={isJobLoading || isNotificationLoading}
-          className={showDetails ? 'jobs-detailed-view' : 'jobs-view'}
-          noDataText={
-            <Section className={'no-results-message'}>
-              <SectionMessage type="info">{noDataText}</SectionMessage>
-            </Section>
-          }
-          getRowProps={rowProps}
-          columnMemoProps={[version]} /* TODOv3: dropV2Jobs. */
-        />
-      </div>
+      <InfiniteScrollTable
+        tableColumns={filterColumns}
+        tableData={jobs}
+        onInfiniteScroll={infiniteScrollCallback}
+        isLoading={isJobLoading || isNotificationLoading}
+        className={showDetails ? 'jobs-detailed-view' : 'jobs-view'}
+        noDataText={
+          <Section className={'no-results-message'}>
+            <SectionMessage type="info">{noDataText}</SectionMessage>
+          </Section>
+        }
+        getRowProps={rowProps}
+        columnMemoProps={[version]} /* TODOv3: dropV2Jobs. */
+      />
     </>
   );
 }

diff --git a/client/src/components/Jobs/Jobs.test.js b/client/src/components/Jobs/Jobs.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import Jobs from './Jobs';
 import { createMemoryHistory } from 'history';
 import { default as jobsList } from './Jobs.fixture';
@@ -135,4 +135,35 @@ describe('Jobs View', () => {
     const { getByText } = renderJobsComponent(store, history);
     expect(getByText(/unable to retrieve your jobs/)).toBeDefined();
   });
+
+  it('should dispatch another get jobs event on scroll with proper offset', async () => {
+    const store = mockStore({
+      notifications,
+      jobs: { ...jobs, list: jobsList },
+      workbench: { ...workbench, config: { hideDataFiles: false } },
+      apps: {
+        appIcons: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <Jobs />
+        </BrowserRouter>
+      </Provider>
+    );
+
+    const scrollContainer = container.querySelector('.table-container');
+
+    fireEvent.scroll(scrollContainer, { target: { scrollTop: 1 } });
+
+    expect(store.getActions()).toEqual([
+      { type: 'GET_JOBS', params: { offset: 0, queryString: '' } },
+      {
+        type: 'GET_JOBS',
+        params: { offset: jobsList.length, queryString: '' },
+      },
+    ]);
+  });
 });
diff --git a/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx b/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.jsx
@@ -62,51 +62,60 @@ const InfiniteScrollTable = ({
     useTable({ columns, data });
 
   const onScroll = ({ target }) => {
-    const bottom =
-      target.scrollHeight - target.scrollTop === target.clientHeight;
+    const scrollbarHeight = target.offsetHeight - target.clientHeight;
+    const clientRectHeight = target.getBoundingClientRect().height;
+    const clientCalcHeight = clientRectHeight - scrollbarHeight;
+    const difference = Math.floor(target.scrollHeight - target.scrollTop);
+
+    const bottom = difference <= clientCalcHeight;
+
     if (bottom && target.scrollTop > 0) {
       onInfiniteScroll(tableData.length);
     }
   };
 
   return (
-    <table
-      {...getTableProps()}
-      className={`${className} InfiniteScrollTable o-fixed-header-table`}
-    >
-      <thead>
-        {headerGroups.map((headerGroup) => (
-          <tr {...headerGroup.getHeaderGroupProps()}>
-            {headerGroup.headers.map((column) => (
-              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody {...getTableBodyProps()} onScroll={onScroll}>
-        {rows.map((row) => {
-          prepareRow(row);
-          return (
-            <tr {...row.getRowProps()} {...getRowProps(row)}>
-              {row.cells.map((cell) => {
-                return (
-                  <td
-                    {...cell.getCellProps({ className: cell.column.className })}
-                  >
-                    {cell.render('Cell')}
-                  </td>
-                );
-              })}
+    <div className={'table-container'} onScroll={onScroll}>
+      <table
+        {...getTableProps()}
+        className={`${className} InfiniteScrollTable o-fixed-header-table`}
+      >
+        <thead>
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column) => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
             </tr>
-          );
-        })}
-        <InfiniteScrollLoadingRow isLoading={isLoading} />
-        <InfiniteScrollNoDataRow
-          display={!isLoading && tableData.length === 0}
-          noDataText={noDataText}
-        />
-      </tbody>
-    </table>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row) => {
+            prepareRow(row);
+            return (
+              <tr {...row.getRowProps()} {...getRowProps(row)}>
+                {row.cells.map((cell) => {
+                  return (
+                    <td
+                      {...cell.getCellProps({
+                        className: cell.column.className,
+                      })}
+                    >
+                      {cell.render('Cell')}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+          <InfiniteScrollLoadingRow isLoading={isLoading} />
+          <InfiniteScrollNoDataRow
+            display={!isLoading && tableData.length === 0}
+            noDataText={noDataText}
+          />
+        </tbody>
+      </table>
+    </div>
   );
 };
 

diff --git a/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.scss b/client/src/components/_common/InfiniteScrollTable/InfiniteScrollTable.scss
@@ -79,3 +79,8 @@
     width: 100%;
   }
 }
+
+.table-container {
+  height: 100%;
+  overflow: scroll;
+}
diff --git a/server/portal/apps/workspace/api/views.py b/server/portal/apps/workspace/api/views.py
@@ -179,7 +179,7 @@ def listing(self, client, request):
 
         data = client.jobs.getJobSearchList(
             limit=limit,
-            startAfter=offset,
+            skip=offset,
             orderBy='lastUpdated(desc),name(asc)',
             _tapis_query_parameters={'tags.contains': f'portalName: {portal_name}'},
             select='allAttributes'