Skip to content

Commit

Permalink
Merge branch 'main' into task/WP-211-targetPath
Browse files Browse the repository at this point in the history
  • Loading branch information
rstijerina authored Sep 29, 2023
2 parents 090a0bf + eca948c commit 6388cf3
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 61 deletions.
43 changes: 22 additions & 21 deletions client/src/components/Jobs/Jobs.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
({
Expand Down Expand Up @@ -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. */
/>
</>
);
}
Expand Down
33 changes: 32 additions & 1 deletion client/src/components/Jobs/Jobs.test.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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: '' },
},
]);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,8 @@
width: 100%;
}
}

.table-container {
height: 100%;
overflow: scroll;
}
2 changes: 1 addition & 1 deletion server/portal/apps/workspace/api/views.py
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down

0 comments on commit 6388cf3

Please sign in to comment.