use list job api changes to retrieve linked job if linked

airbyte-webapp/src/components/JobItem/JobItem.tsx

@@ -48,7 +48,7 @@ export const JobItem: React.FC<JobItemProps> = ({ job }) => {
   const didSucceed = didJobSucceed(job);
 
   const onExpand = () => {
-    setIsOpen(!isOpen);
+    setIsOpen((prevIsOpen) => !prevIsOpen);
   };
 
   const onDetailsToggled = useCallback(() => {

airbyte-webapp/src/locales/en.json

@@ -257,7 +257,6 @@
   "sources.syncNow": "Sync now",
   "sources.source": "Source",
   "sources.noSync": "No sync yet",
-  "sources.linkedJobNotFound": "The linked job could not be found",
   "sources.emptySchema": "Schema is empty",
   "sources.noSources": "Source list is empty",
   "sources.sourceSettings": "Source Settings",
@@ -362,6 +361,8 @@
   "connection.cancelSync": "Cancel Sync",
   "connection.cancelReset": "Cancel Reset",
   "connection.canceling": "Canceling...",
+  "connection.linkedJobNotFound": "The linked job could not be found",
+  "connection.returnToSyncHistory": "Return to Sync History",
 
   "form.frequency": "Replication frequency*",
   "form.frequency.placeholder": "Select a frequency",

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx

@@ -2,6 +2,7 @@ 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, ContentCard, LoadingButton } from "components";
 import { Tooltip } from "components/base/Tooltip";
@@ -53,6 +54,7 @@ const StatusView: React.FC<StatusViewProps> = ({ connection }) => {
   const [jobPageSize, setJobPageSize] = useState(JOB_PAGE_SIZE_INCREMENT);
   const analyticsService = useAnalyticsService();
   const { jobId: linkedJobId } = useAttemptLink();
+  const { pathname } = useLocation();
   const {
     jobs,
     totalJobCount,
@@ -82,7 +84,8 @@ const StatusView: React.FC<StatusViewProps> = ({ connection }) => {
         } as ActiveJob)
     );
 
-    setJobPageSize(jobs.length);
+    // 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();
@@ -183,7 +186,14 @@ const StatusView: React.FC<StatusViewProps> = ({ connection }) => {
         {jobs.length ? (
           <JobsList jobs={jobs} />
         ) : linkedJobNotFound ? (
-          <EmptyResource text={<FormattedMessage id="sources.linkedJobNotFound" />} description="test description" />
+          <EmptyResource
+            text={<FormattedMessage id="connection.linkedJobNotFound" />}
+            description={
+              <Link to={pathname}>
+                <FormattedMessage id="connection.returnToSyncHistory" />
+              </Link>
+            }
+          />
         ) : (
           <EmptyResource text={<FormattedMessage id="sources.noSync" />} />
         )}

airbyte-webapp/src/services/job/JobService.tsx

@@ -17,7 +17,8 @@ import { useSuspenseQuery } from "../connector/useSuspenseQuery";
 export const jobsKeys = {
   all: ["jobs"] as const,
   lists: () => [...jobsKeys.all, "list"] as const,
-  list: (filters: string, pagination?: Pagination) => [...jobsKeys.lists(), { filters, pagination }] as const,
+  list: (filters: string, includingJobId?: number, pagination?: Pagination) =>
+    [...jobsKeys.lists(), { filters, includingJobId, pagination }] as const,
   detail: (jobId: number) => [...jobsKeys.all, "details", jobId] as const,
   getDebugInfo: (jobId: number) => [...jobsKeys.all, "getDebugInfo", jobId] as const,
   cancel: (jobId: string) => [...jobsKeys.all, "cancel", jobId] as const,
@@ -31,11 +32,16 @@ function useGetJobService() {
 
 export const useListJobs = (listParams: JobListRequestBody) => {
   const service = useGetJobService();
-  const result = useQuery(jobsKeys.list(listParams.configId, listParams.pagination), () => service.list(listParams), {
-    refetchInterval: 2500, // every 2,5 seconds,
-    keepPreviousData: true,
-    suspense: true,
-  });
+  console.log(`listParams: ${JSON.stringify(listParams)}`);
+  const result = useQuery(
+    jobsKeys.list(listParams.configId, listParams.includingJobId, listParams.pagination),
+    () => service.list(listParams),
+    {
+      refetchInterval: 2500, // every 2,5 seconds,
+      keepPreviousData: true,
+      suspense: true,
+    }
+  );
   // cast to JobReadList because (suspense: true) means we will never get undefined
   const jobReadList = result.data as JobReadList;
   return { jobs: jobReadList.jobs, totalJobCount: jobReadList.totalJobCount, isPreviousData: result.isPreviousData };