Skip to content

Commit 29486e5

Browse files
hoorayimhelpinghoorayimhelping
authored
feat: make flagged taskPagination code production-ready (#3426)
1 parent 094ba53 commit 29486e5

File tree

11 files changed

+342
-852
lines changed

11 files changed

+342
-852
lines changed

‎cypress/e2e/shared/tasks.pagination.test.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import {Organization} from '../../../src/types'
2+
3+
describe('Paginating tasks', () => {
4+
beforeEach(() => {
5+
cy.flush()
6+
cy.signin()
7+
cy.get<Organization>('@org').then(({id: orgID}: Organization) =>
8+
cy
9+
.createToken(orgID, 'test token', 'active', [
10+
{action: 'write', resource: {type: 'views', orgID}},
11+
{action: 'write', resource: {type: 'documents', orgID}},
12+
{action: 'write', resource: {type: 'tasks', orgID}},
13+
])
14+
.then(({body}) => {
15+
cy.wrap(body.token).as('token')
16+
})
17+
)
18+
19+
cy.fixture('routes').then(({orgs}) => {
20+
cy.get<Organization>('@org').then(({id}: Organization) => {
21+
cy.visit(`${orgs}/${id}/tasks`)
22+
cy.getByTestID('tree-nav')
23+
})
24+
})
25+
26+
cy.get<Organization>('@org').then(({id}: Organization) => {
27+
cy.get<string>('@token').then(token => {
28+
cy.createTask(token, id, 'Task 1')
29+
cy.createTask(token, id, 'Task 2')
30+
cy.createTask(token, id, 'Task 3')
31+
cy.createTask(token, id, 'Task 4')
32+
cy.createTask(token, id, 'Task 5')
33+
cy.createTask(token, id, 'Task 6')
34+
cy.createTask(token, id, 'Task 7')
35+
cy.createTask(token, id, 'Task 8')
36+
cy.createTask(token, id, 'Task 9')
37+
cy.createTask(token, id, 'Task 10')
38+
cy.createTask(token, id, 'Task 11')
39+
cy.createTask(token, id, 'Task 12')
40+
cy.createTask(token, id, 'Task 13')
41+
cy.createTask(token, id, 'Task 14')
42+
cy.createTask(token, id, 'Task 15')
43+
cy.createTask(token, id, 'Task 16')
44+
cy.createTask(token, id, 'Task 17')
45+
cy.createTask(token, id, 'Task 18')
46+
cy.createTask(token, id, 'Task 19')
47+
cy.createTask(token, id, 'Task 20')
48+
cy.createTask(token, id, 'Task 21')
49+
})
50+
})
51+
cy.reload()
52+
})
53+
54+
it('can paginate between pages of 10 tasks', () => {
55+
cy.getByTestID('task-card').should('have.length', 10)
56+
57+
cy.getByTestID('pagination-direction-item')
58+
.last()
59+
.click()
60+
cy.getByTestID('task-card').should('have.length', 10)
61+
62+
cy.getByTestID('pagination-direction-item')
63+
.last()
64+
.click()
65+
cy.getByTestID('task-card')
66+
.should('have.length', 1)
67+
.contains('Task 21')
68+
69+
// reloading should put us on the last page we were on
70+
cy.reload()
71+
cy.getByTestID('task-card')
72+
.should('have.length', 1)
73+
.contains('Task 21')
74+
75+
cy.getByTestID('search-widget').type('task 1')
76+
77+
// filtering should reduce the page count from 3 to 2 and put us on the last page
78+
cy.getByTestID('pagination-item').should('have.length', 2)
79+
cy.getByTestID('task-card')
80+
.should('have.length', 1)
81+
.contains('Task 19')
82+
83+
cy.getByTestID('pagination-direction-item')
84+
.first()
85+
.click()
86+
cy.getByTestID('task-card').should('have.length', 10)
87+
88+
cy.getByTestID('task-card').contains('Task 1')
89+
cy.getByTestID('task-card').contains('Task 18')
90+
91+
cy.getByTestID('dismiss-button').click()
92+
cy.getByTestID('pagination-item').should('have.length', 3)
93+
})
94+
})

‎src/shared/containers/SetOrg.tsx‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,8 @@ import PageSpinner from 'src/perf/components/PageSpinner'
99
import {
1010
MePage,
1111
TasksPage,
12-
TasksPagePaginated,
1312
TaskPage,
1413
TaskRunsPage,
15-
TaskRunsPagePaginated,
1614
TaskEditPage,
1715
DashboardsIndex,
1816
DashboardsIndexPaginated,
@@ -157,25 +155,10 @@ const SetOrg: FC = () => {
157155
<Route path={`${orgPath}/checks/:checkID`} component={CheckHistory} />
158156

159157
{/* Tasks */}
160-
{isFlagEnabled('paginatedTasks') ? (
161-
<Route
162-
path={`${orgPath}/tasks/:id/runs`}
163-
component={TaskRunsPagePaginated}
164-
/>
165-
) : (
166-
<Route
167-
path={`${orgPath}/tasks/:id/runs`}
168-
component={TaskRunsPage}
169-
/>
170-
)}
158+
<Route path={`${orgPath}/tasks/:id/runs`} component={TaskRunsPage} />
171159
<Route path={`${orgPath}/tasks/:id/edit`} component={TaskEditPage} />
172160
<Route path={`${orgPath}/tasks/new`} component={TaskPage} />
173-
{isFlagEnabled('paginatedTasks') ? (
174-
<Route path={`${orgPath}/tasks`} component={TasksPagePaginated} />
175-
) : (
176-
<Route path={`${orgPath}/tasks`} component={TasksPage} />
177-
)}
178-
161+
<Route path={`${orgPath}/tasks`} component={TasksPage} />
179162
{/* Data Explorer */}
180163
<Route
181164
path={`${orgPath}/data-explorer`}

‎src/shared/containers/index.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,10 @@ export const DataExplorerPage = lazy(() =>
55
)
66
export const MePage = lazy(() => import('src/me/containers/MePage'))
77
export const TasksPage = lazy(() => import('src/tasks/containers/TasksPage'))
8-
export const TasksPagePaginated = lazy(() =>
9-
import('src/tasks/pagination/TasksPage')
10-
)
118
export const TaskPage = lazy(() => import('src/tasks/containers/TaskPage'))
129
export const TaskRunsPage = lazy(() =>
1310
import('src/tasks/components/TaskRunsPage')
1411
)
15-
export const TaskRunsPagePaginated = lazy(() =>
16-
import('src/tasks/pagination/TaskRunsPage')
17-
)
1812
export const TaskEditPage = lazy(() =>
1913
import('src/tasks/containers/TaskEditPage')
2014
)

‎src/tasks/components/TaskRunsPage.tsx‎

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {withRouter, RouteComponentProps} from 'react-router-dom'
77
import {Page, Sort} from '@influxdata/clockface'
88
import TaskRunsList from 'src/tasks/components/TaskRunsList'
99
import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
10-
import GetResources from 'src/resources/components/GetResources'
1110
import {TaskRunsCard} from 'src/tasks/components/TaskRunsCard'
1211
import {PageBreadcrumbs} from 'src/tasks/components/PageBreadcrumbs'
1312

@@ -18,16 +17,12 @@ import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
1817
// Actions
1918
import {getRuns, runTask, updateTaskStatus} from 'src/tasks/actions/thunks'
2019

21-
// Selectors
22-
import {getByID} from 'src/resources/selectors'
23-
2420
// Utils
2521
import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
2622

2723
// Types
2824
import {SortTypes} from 'src/shared/utils/sort'
2925
import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
30-
import {ResourceType, Task} from 'src/types'
3126

3227
type ReduxProps = ConnectedProps<typeof connector>
3328
type Props = ReduxProps & RouteComponentProps<{id: string; orgID: string}>
@@ -87,16 +82,14 @@ class TaskRunsPage extends PureComponent<Props, State> {
8782
</Page.ControlBarRight>
8883
</Page.ControlBar>
8984
<Page.Contents fullWidth={false} scrollable={true}>
90-
<GetResources resources={[ResourceType.Tasks]}>
91-
<TaskRunsList
92-
taskID={match.params.id}
93-
runs={runs}
94-
sortKey={sortKey}
95-
sortDirection={sortDirection}
96-
sortType={sortType}
97-
onClickColumn={this.handleClickColumn}
98-
/>
99-
</GetResources>
85+
<TaskRunsList
86+
taskID={match.params.id}
87+
runs={runs}
88+
sortKey={sortKey}
89+
sortDirection={sortDirection}
90+
sortType={sortType}
91+
onClickColumn={this.handleClickColumn}
92+
/>
10093
</Page.Contents>
10194
</Page>
10295
</SpinnerContainer>
@@ -143,13 +136,8 @@ class TaskRunsPage extends PureComponent<Props, State> {
143136
}
144137
}
145138

146-
const mstp = (state: AppState, props) => {
147-
const {runs, runStatus} = state.resources.tasks
148-
const currentTask = getByID<Task>(
149-
state,
150-
ResourceType.Tasks,
151-
props.match.params.id
152-
)
139+
const mstp = (state: AppState) => {
140+
const {currentTask, runs, runStatus} = state.resources.tasks
153141

154142
return {
155143
runs,
@@ -159,9 +147,9 @@ const mstp = (state: AppState, props) => {
159147
}
160148

161149
const mdtp = {
162-
updateTaskStatus,
163150
getRuns,
164151
onRunTask: runTask,
152+
updateTaskStatus,
165153
}
166154

167155
const connector = connect(mstp, mdtp)

‎src/tasks/components/TasksList.test.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ const setup = (override?) => {
2323
onSelect: oneTestFunction,
2424
onImportTask: oneTestFunction,
2525
checkTaskLimits: secondTestFunction,
26+
pageHeight: 600,
27+
totalCount: tasks.length,
2628
...override,
2729
}
2830

0 commit comments

Comments
 (0)