-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🪟 🐛 Fix direct job linking to work with pagination #16517
Changes from 23 commits
8eb89b8
88a99d8
9002461
80c213e
aeaffad
df71109
d68fc5a
ac750d9
ef2d6dc
6419233
84b8dbe
5d53ab7
5a5adea
ed71403
c991275
09d8b92
be27e62
ac7e103
97958e1
93c4d73
a787b05
cdf4a59
9264180
85e31da
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,12 +2,14 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons"; | |
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
import React, { useEffect, useState } from "react"; | ||
import { FormattedMessage } from "react-intl"; | ||
import { Link, useLocation } from "react-router-dom"; | ||
|
||
import { Button, LoadingButton } from "components"; | ||
import { Card } from "components/base/Card"; | ||
import { Tooltip } from "components/base/Tooltip"; | ||
import EmptyResource from "components/EmptyResourceBlock"; | ||
import { RotateIcon } from "components/icons/RotateIcon"; | ||
import { useAttemptLink } from "components/JobItem/attemptLinkUtils"; | ||
|
||
import { getFrequencyType } from "config/utils"; | ||
import { Action, Namespace } from "core/analytics"; | ||
|
@@ -52,15 +54,23 @@ const StatusView: React.FC<StatusViewProps> = ({ connection }) => { | |
const [activeJob, setActiveJob] = useState<ActiveJob>(); | ||
const [jobPageSize, setJobPageSize] = useState(JOB_PAGE_SIZE_INCREMENT); | ||
const analyticsService = useAnalyticsService(); | ||
const { jobs, isPreviousData: isJobPageLoading } = useListJobs({ | ||
const { jobId: linkedJobId } = useAttemptLink(); | ||
const { pathname } = useLocation(); | ||
const { | ||
jobs, | ||
totalJobCount, | ||
isPreviousData: isJobPageLoading, | ||
} = useListJobs({ | ||
configId: connection.connectionId, | ||
configTypes: ["sync", "reset_connection"], | ||
includingJobId: linkedJobId ? Number(linkedJobId) : undefined, | ||
pagination: { | ||
pageSize: jobPageSize, | ||
}, | ||
}); | ||
|
||
const moreJobPagesAvailable = jobs.length === jobPageSize; | ||
const linkedJobNotFound = linkedJobId && jobs.length === 0; | ||
const moreJobPagesAvailable = !linkedJobNotFound && jobPageSize < totalJobCount; | ||
|
||
useEffect(() => { | ||
const jobRunningOrPending = getJobRunningOrPending(jobs); | ||
|
@@ -74,6 +84,9 @@ const StatusView: React.FC<StatusViewProps> = ({ connection }) => { | |
// We need to disable button when job is canceled but the job list still has a running job | ||
} as ActiveJob) | ||
); | ||
|
||
// necessary because request to listJobs may return a result larger than the current page size if a linkedJobId is passed in | ||
setJobPageSize((prevJobPageSize) => Math.max(prevJobPageSize, jobs.length)); | ||
}, [jobs]); | ||
|
||
const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService(); | ||
|
@@ -171,7 +184,20 @@ const StatusView: React.FC<StatusViewProps> = ({ connection }) => { | |
</div> | ||
} | ||
> | ||
{jobs.length ? <JobsList jobs={jobs} /> : <EmptyResource text={<FormattedMessage id="sources.noSync" />} />} | ||
{jobs.length ? ( | ||
<JobsList jobs={jobs} /> | ||
) : linkedJobNotFound ? ( | ||
<EmptyResource | ||
text={<FormattedMessage id="connection.linkedJobNotFound" />} | ||
description={ | ||
<Link to={pathname}> | ||
<FormattedMessage id="connection.returnToSyncHistory" /> | ||
</Link> | ||
} | ||
/> | ||
Comment on lines
+189
to
+197
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I wonder if instead of showing this, what if it showed an error notification at the bottom of the screen but still showed the jobs list? I suppose that in this case, the API would need to still return the jobs as usual. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah that was how I had originally implemented the backend API, but the backend team pushed back on that a bit saying it made the endpoint somewhat confusing to return results even if the specific job ID could not be found (it was basically behaving in two different ways depending on that), which I kind of agreed with. I don't expect users to run into this situation very often, since it would require them to manually edit the job ID in the URL, so hopefully having this separate view with a single click to get back to the main job view is not too cumbersome |
||
) : ( | ||
<EmptyResource text={<FormattedMessage id="sources.noSync" />} /> | ||
)} | ||
</Card> | ||
|
||
{(moreJobPagesAvailable || isJobPageLoading) && ( | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just updating this to use the best practice of using the arrow function for a change to a state value that depends on itself