🪟 🧹 Reorganize connections pages (#20845)

* Reorganize connection pages Flatten structure Simplify names * Consolidate all the Connection routes to a single file * Extract job types and utilities to own files within JobItem Move JobsWithJobs to JobItem/utils * Move ConnectionName component to components/connection * Move StatusMainInfo components and rename to components/connection/ConnectionInfoCard * Move ConnectionBlock to components/connection * Clean up ConnectionPage structure * Update style import in ConnectionInfoCard test * Clean up ConnectionRoutePaths enum * Apply suggestions from code review - Update export default style Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io> * Update ConnectionInfoCard test description name * Update test snapshots Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>
airbytehq · Jan 13, 2023 · 45c2f20 · 45c2f20
1 parent c97685c
commit 45c2f20
Show file tree

Hide file tree

Showing 76 changed files with 336 additions and 305 deletions.
diff --git a/airbyte-webapp/src/components/ConnectionBlock/index.tsx b/airbyte-webapp/src/components/ConnectionBlock/index.tsx
diff --git a/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`CreateConnectionForm should render 1`] = `
                   <label
                     class="<removed-for-snapshot-test>"
                   >
-                    Connection name*
+                    Connection name
                     <span
                       class="<removed-for-snapshot-test>"
                     >
@@ -104,7 +104,7 @@ exports[`CreateConnectionForm should render 1`] = `
                     <label
                       class="<removed-for-snapshot-test>"
                     >
-                      Replication frequency*
+                      Replication frequency
                       <span
                         class="<removed-for-snapshot-test>"
                       >
@@ -243,7 +243,7 @@ exports[`CreateConnectionForm should render 1`] = `
                       <label
                         class="<removed-for-snapshot-test>"
                       >
-                        Destination Namespace*
+                        Destination Namespace
                         <span
                           class="<removed-for-snapshot-test>"
                         >
@@ -366,7 +366,7 @@ exports[`CreateConnectionForm should render 1`] = `
                     <label
                       class="<removed-for-snapshot-test>"
                     >
-                      Destination Stream Prefix (Optional)
+                      Destination Stream Prefix
                       <span
                         class="<removed-for-snapshot-test>"
                       >
@@ -390,6 +390,11 @@ exports[`CreateConnectionForm should render 1`] = `
                           </span>
                         </span>
                       </span>
+                      <p
+                        class="<removed-for-snapshot-test>"
+                      >
+                        Optional
+                      </p>
                     </label>
                   </div>
                 </div>

diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectionSettingsCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectionSettingsCell.tsx
@@ -6,9 +6,8 @@ import styled from "styled-components";
 import { Link } from "components";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
-import { ConnectionSettingsRoutes } from "pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsRoutes";
-
-import { RoutePaths } from "../../../pages/routePaths";
+import { ConnectionRoutePaths } from "pages/connections/types";
+import { RoutePaths } from "pages/routePaths";
 
 interface IProps {
   id: string;
@@ -39,7 +38,7 @@ const ConnectorCell: React.FC<IProps> = ({ id }) => {
     event.stopPropagation();
   };
 
-  const settingPath = `/${RoutePaths.Workspaces}/${workspaceId}/${RoutePaths.Connections}/${id}/${ConnectionSettingsRoutes.REPLICATION}`;
+  const settingPath = `/${RoutePaths.Workspaces}/${workspaceId}/${RoutePaths.Connections}/${id}/${ConnectionRoutePaths.Replication}`;
   return (
     <Content onClick={openSettings}>
       <Link to={settingPath}>

diff --git a/airbyte-webapp/src/components/JobItem/JobItem.tsx b/airbyte-webapp/src/components/JobItem/JobItem.tsx
@@ -3,15 +3,16 @@ import styled from "styled-components";
 
 import { Spinner } from "components/ui/Spinner";
 
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
+import { SynchronousJobRead } from "core/request/AirbyteClient";
 
-import { AttemptRead, JobStatus, SynchronousJobRead } from "../../core/request/AirbyteClient";
 import { useAttemptLink } from "./attemptLinkUtils";
 import ContentWrapper from "./components/ContentWrapper";
 import ErrorDetails from "./components/ErrorDetails";
 import { JobLogs } from "./components/JobLogs";
 import MainInfo from "./components/MainInfo";
 import styles from "./JobItem.module.scss";
+import { JobsWithJobs } from "./types";
+import { didJobSucceed, getJobAttempts, getJobId } from "./utils";
 
 const Item = styled.div<{ isFailed: boolean }>`
   border-bottom: 1px solid ${({ theme }) => theme.greyColor20};
@@ -27,18 +28,6 @@ interface JobItemProps {
   job: SynchronousJobRead | JobsWithJobs;
 }
 
-const didJobSucceed = (job: SynchronousJobRead | JobsWithJobs): boolean =>
-  "succeeded" in job ? job.succeeded : getJobStatus(job) !== "failed";
-
-export const getJobStatus: (job: SynchronousJobRead | JobsWithJobs) => JobStatus = (job) =>
-  "succeeded" in job ? (job.succeeded ? JobStatus.succeeded : JobStatus.failed) : job.job.status;
-
-export const getJobAttemps: (job: SynchronousJobRead | JobsWithJobs) => AttemptRead[] | undefined = (job) =>
-  "attempts" in job ? job.attempts : undefined;
-
-export const getJobId = (job: SynchronousJobRead | JobsWithJobs): string | number =>
-  "id" in job ? job.id : job.job.id;
-
 export const JobItem: React.FC<JobItemProps> = ({ job }) => {
   const { jobId: linkedJobId } = useAttemptLink();
   const alreadyScrolled = useRef(false);
@@ -63,7 +52,7 @@ export const JobItem: React.FC<JobItemProps> = ({ job }) => {
 
   return (
     <Item isFailed={!didSucceed} ref={scrollAnchor}>
-      <MainInfo isOpen={isOpen} isFailed={!didSucceed} onExpand={onExpand} job={job} attempts={getJobAttemps(job)} />
+      <MainInfo isOpen={isOpen} isFailed={!didSucceed} onExpand={onExpand} job={job} attempts={getJobAttempts(job)} />
       <ContentWrapper isOpen={isOpen} onToggled={onDetailsToggled}>
         <div>
           <Suspense
@@ -75,7 +64,7 @@ export const JobItem: React.FC<JobItemProps> = ({ job }) => {
           >
             {isOpen && (
               <>
-                <ErrorDetails attempts={getJobAttemps(job)} />
+                <ErrorDetails attempts={getJobAttempts(job)} />
                 <JobLogs job={job} jobIsFailed={!didSucceed} />
               </>
             )}

diff --git a/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx b/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx
@@ -8,10 +8,10 @@ import { StatusIconStatus } from "components/ui/StatusIcon/StatusIcon";
 import { Text } from "components/ui/Text";
 
 import { AttemptRead, AttemptStatus, SynchronousJobRead } from "core/request/AirbyteClient";
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 import { useGetDebugInfoJob } from "services/job/JobService";
 
 import { parseAttemptLink } from "../attemptLinkUtils";
+import { JobsWithJobs } from "../types";
 import { isCancelledAttempt } from "../utils";
 import styles from "./JobLogs.module.scss";
 import Logs from "./Logs";

diff --git a/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx b/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx
@@ -9,9 +9,9 @@ import { Cell, Row } from "components/SimpleTableComponents";
 import { StatusIcon } from "components/ui/StatusIcon";
 
 import { AttemptRead, JobStatus, SynchronousJobRead } from "core/request/AirbyteClient";
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 
-import { getJobStatus } from "../JobItem";
+import { JobsWithJobs } from "../types";
+import { getJobStatus } from "../utils";
 import { AttemptDetails } from "./AttemptDetails";
 import styles from "./MainInfo.module.scss";
 import { ResetStreamsDetails } from "./ResetStreamDetails";

diff --git a/airbyte-webapp/src/components/JobItem/index.ts b/airbyte-webapp/src/components/JobItem/index.ts
@@ -0,0 +1 @@
+export * from "./JobItem";
diff --git a/airbyte-webapp/src/components/JobItem/types.ts b/airbyte-webapp/src/components/JobItem/types.ts
@@ -0,0 +1,5 @@
+import { JobWithAttemptsRead } from "core/request/AirbyteClient";
+
+export interface JobsWithJobs extends JobWithAttemptsRead {
+  job: Exclude<JobWithAttemptsRead["job"], undefined>;
+}
diff --git a/airbyte-webapp/src/components/JobItem/utils.ts b/airbyte-webapp/src/components/JobItem/utils.ts
@@ -1,8 +1,28 @@
-import { AttemptFailureReason, AttemptFailureType, AttemptRead } from "core/request/AirbyteClient";
+import {
+  AttemptFailureReason,
+  AttemptFailureType,
+  AttemptRead,
+  JobStatus,
+  SynchronousJobRead,
+} from "core/request/AirbyteClient";
+
+import { JobsWithJobs } from "./types";
 
 export const getFailureFromAttempt = (attempt: AttemptRead): AttemptFailureReason | undefined =>
   attempt.failureSummary?.failures[0];
 
 export const isCancelledAttempt = (attempt: AttemptRead): boolean =>
   attempt.failureSummary?.failures.some(({ failureType }) => failureType === AttemptFailureType.manual_cancellation) ??
   false;
+
+export const didJobSucceed = (job: SynchronousJobRead | JobsWithJobs): boolean =>
+  "succeeded" in job ? job.succeeded : getJobStatus(job) !== "failed";
+
+export const getJobStatus: (job: SynchronousJobRead | JobsWithJobs) => JobStatus = (job) =>
+  "succeeded" in job ? (job.succeeded ? JobStatus.succeeded : JobStatus.failed) : job.job.status;
+
+export const getJobAttempts: (job: SynchronousJobRead | JobsWithJobs) => AttemptRead[] | undefined = (job) =>
+  "attempts" in job ? job.attempts : undefined;
+
+export const getJobId = (job: SynchronousJobRead | JobsWithJobs): string | number =>
+  "id" in job ? job.id : job.job.id;
diff --git a/...nnectionBlock/ConnectionBlock.module.scss → ...nnectionBlock/ConnectionBlock.module.scss b/...nnectionBlock/ConnectionBlock.module.scss → ...nnectionBlock/ConnectionBlock.module.scss
@@ -1,4 +1,4 @@
-@use "../../scss/colors";
+@use "scss/colors";
 
 .lightContentCard {
   display: flex;

diff --git a/...nents/ConnectionBlock/ConnectionBlock.tsx → ...ction/ConnectionBlock/ConnectionBlock.tsx b/...nents/ConnectionBlock/ConnectionBlock.tsx → ...ction/ConnectionBlock/ConnectionBlock.tsx
@@ -13,12 +13,10 @@ interface IProps {
   itemTo?: { name: string; icon?: string };
 }
 
-const ConnectionBlock: React.FC<IProps> = (props) => (
+export const ConnectionBlock: React.FC<IProps> = (props) => (
   <Card className={classNames(styles.lightContentCard)}>
     {props.itemFrom ? <ConnectionBlockItem {...props.itemFrom} /> : <Content className={styles.extraBlock} />}
     <FontAwesomeIcon className={styles.arrow} icon={faChevronRight} />
     {props.itemTo ? <ConnectionBlockItem {...props.itemTo} /> : <Content className={styles.extraBlock} />}
   </Card>
 );
-
-export default ConnectionBlock;
diff --git a/...s/ConnectionBlock/ConnectionBlockItem.tsx → ...n/ConnectionBlock/ConnectionBlockItem.tsx b/...s/ConnectionBlock/ConnectionBlockItem.tsx → ...n/ConnectionBlock/ConnectionBlockItem.tsx
diff --git a/airbyte-webapp/src/components/connection/ConnectionBlock/index.ts b/airbyte-webapp/src/components/connection/ConnectionBlock/index.ts
@@ -0,0 +1 @@
+export * from "./ConnectionBlock";
diff --git a/...ectionItemPage/StatusMainInfo.module.scss → ...onInfoCard/ConnectionInfoCard.module.scss b/...ectionItemPage/StatusMainInfo.module.scss → ...onInfoCard/ConnectionInfoCard.module.scss
diff --git a/...onnectionItemPage/StatusMainInfo.test.tsx → ...ctionInfoCard/ConnectionInfoCard.test.tsx b/...onnectionItemPage/StatusMainInfo.test.tsx → ...ctionInfoCard/ConnectionInfoCard.test.tsx
@@ -7,7 +7,7 @@ import { ConnectionStatus, SchemaChange } from "core/request/AirbyteClient";
 import { defaultOssFeatures, FeatureItem } from "hooks/services/Feature";
 
 // eslint-disable-next-line css-modules/no-unused-class
-import styles from "./StatusMainInfo.module.scss";
+import styles from "./ConnectionInfoCard.module.scss";
 
 const mockUseConnectionEditService = jest.fn();
 
@@ -32,9 +32,9 @@ const TestWrapperWithAutoDetectSchema: React.FC<React.PropsWithChildren<Record<s
 );
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const { StatusMainInfo } = require("./StatusMainInfo");
+const { ConnectionInfoCard } = require("./ConnectionInfoCard");
 
-describe("<StatusMainInfo />", () => {
+describe(`<${ConnectionInfoCard.name} />`, () => {
   beforeEach(() => {
     mockUseConnectionEditService.mockReturnValue({
       connection: mockConnection,
@@ -43,16 +43,16 @@ describe("<StatusMainInfo />", () => {
   });
 
   it("renders", () => {
-    const { getByTestId, queryByTestId } = render(<StatusMainInfo />, { wrapper: TestWrapperWithAutoDetectSchema });
+    const { getByTestId, queryByTestId } = render(<ConnectionInfoCard />, { wrapper: TestWrapperWithAutoDetectSchema });
 
-    expect(getByTestId("statusMainInfo")).toBeDefined();
+    expect(getByTestId("connectionInfo")).toBeDefined();
 
     expect(getByTestId("enabledControl")).toBeDefined();
     expect(getByTestId("enabledControl-switch")).toBeEnabled();
 
     // schema changes-related
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.breaking);
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.breaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
     expect(queryByTestId("schemaChangesDetected")).toBeFalsy();
   });
 
@@ -62,10 +62,10 @@ describe("<StatusMainInfo />", () => {
       schemaHasBeenRefreshed: false,
     });
 
-    const { getByTestId, queryByTestId } = render(<StatusMainInfo />, { wrapper: TestWrapperWithAutoDetectSchema });
+    const { getByTestId, queryByTestId } = render(<ConnectionInfoCard />, { wrapper: TestWrapperWithAutoDetectSchema });
 
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.breaking);
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.breaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
 
     expect(queryByTestId("enabledControl")).toBeFalsy();
     expect(queryByTestId("schemaChangesDetected")).toBeFalsy();
@@ -77,10 +77,10 @@ describe("<StatusMainInfo />", () => {
       schemaHasBeenRefreshed: false,
     });
 
-    const { getByTestId } = render(<StatusMainInfo />, { wrapper: TestWrapperWithAutoDetectSchema });
+    const { getByTestId } = render(<ConnectionInfoCard />, { wrapper: TestWrapperWithAutoDetectSchema });
 
-    expect(getByTestId("statusMainInfo-sourceLink")).toHaveClass(styles.breaking);
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
+    expect(getByTestId("connectionInfo-sourceLink")).toHaveClass(styles.breaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
     expect(getByTestId("schemaChangesDetected")).toBeDefined();
 
     expect(getByTestId("enabledControl-switch")).toBeDisabled();
@@ -92,10 +92,10 @@ describe("<StatusMainInfo />", () => {
       schemaHasBeenRefreshed: false,
     });
 
-    const { getByTestId } = render(<StatusMainInfo />, { wrapper: TestWrapperWithAutoDetectSchema });
+    const { getByTestId } = render(<ConnectionInfoCard />, { wrapper: TestWrapperWithAutoDetectSchema });
 
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.breaking);
-    expect(getByTestId("statusMainInfo-sourceLink")).toHaveClass(styles.nonBreaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.breaking);
+    expect(getByTestId("connectionInfo-sourceLink")).toHaveClass(styles.nonBreaking);
     expect(getByTestId("schemaChangesDetected")).toBeDefined();
 
     expect(getByTestId("enabledControl-switch")).toBeEnabled();

diff --git a/...ges/ConnectionItemPage/StatusMainInfo.tsx → ...ConnectionInfoCard/ConnectionInfoCard.tsx b/...ges/ConnectionItemPage/StatusMainInfo.tsx → ...ConnectionInfoCard/ConnectionInfoCard.tsx
@@ -14,11 +14,11 @@ import { RoutePaths } from "pages/routePaths";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { useSourceDefinition } from "services/connector/SourceDefinitionService";
 
+import styles from "./ConnectionInfoCard.module.scss";
 import { EnabledControl } from "./EnabledControl";
 import { SchemaChangesDetected } from "./SchemaChangesDetected";
-import styles from "./StatusMainInfo.module.scss";
 
-export const StatusMainInfo: React.FC = () => {
+export const ConnectionInfoCard: React.FC = () => {
   const {
     connection: { source, destination, status, schemaChange },
     schemaHasBeenRefreshed,
@@ -43,12 +43,12 @@ export const StatusMainInfo: React.FC = () => {
         };
 
   return (
-    <div className={styles.container} data-testid="statusMainInfo">
+    <div className={styles.container} data-testid="connectionInfo">
       <div className={styles.pathContainer}>
         <Link
           to={sourceConnectionPath}
           className={classNames(styles.connectorLink, schemaChangeClassNames)}
-          data-testid="statusMainInfo-sourceLink"
+          data-testid="connectionInfo-sourceLink"
         >
           <ConnectorCard
             connectionName={source.sourceName}
@@ -61,7 +61,7 @@ export const StatusMainInfo: React.FC = () => {
         <Link
           to={destinationConnectionPath}
           className={styles.connectorLink}
-          data-testid="statusMainInfo-destinationLink"
+          data-testid="connectionInfo-destinationLink"
         >
           <ConnectorCard
             connectionName={destination.destinationName}

diff --git a/...ectionItemPage/EnabledControl.module.scss → ...ectionInfoCard/EnabledControl.module.scss b/...ectionItemPage/EnabledControl.module.scss → ...ectionInfoCard/EnabledControl.module.scss
diff --git a/...ges/ConnectionItemPage/EnabledControl.tsx → ...ion/ConnectionInfoCard/EnabledControl.tsx b/...ges/ConnectionItemPage/EnabledControl.tsx → ...ion/ConnectionInfoCard/EnabledControl.tsx
diff --git a/...temPage/SchemaChangesDetected.module.scss → ...nfoCard/SchemaChangesDetected.module.scss b/...temPage/SchemaChangesDetected.module.scss → ...nfoCard/SchemaChangesDetected.module.scss
diff --git a/...onItemPage/SchemaChangesDetected.test.tsx → ...onInfoCard/SchemaChangesDetected.test.tsx b/...onItemPage/SchemaChangesDetected.test.tsx → ...onInfoCard/SchemaChangesDetected.test.tsx
diff --git a/...nectionItemPage/SchemaChangesDetected.tsx → ...nectionInfoCard/SchemaChangesDetected.tsx b/...nectionItemPage/SchemaChangesDetected.tsx → ...nectionInfoCard/SchemaChangesDetected.tsx
@@ -8,9 +8,9 @@ import { Text } from "components/ui/Text";
 import { useSchemaChanges } from "hooks/connection/useSchemaChanges";
 import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService";
 import { useFormChangeTrackerService } from "hooks/services/FormChangeTracker";
+import { ConnectionRoutePaths } from "pages/connections/types";
 import { useRefreshSourceSchemaWithConfirmationOnDirty } from "views/Connection/ConnectionForm/components/refreshSourceSchemaWithConfirmationOnDirty";
 
-import { ConnectionSettingsRoutes } from "./ConnectionSettingsRoutes";
 import styles from "./SchemaChangesDetected.module.scss";
 
 export const SchemaChangesDetected: React.FC = () => {
@@ -31,8 +31,8 @@ export const SchemaChangesDetected: React.FC = () => {
   }
 
   const onReviewActionButtonClick: React.MouseEventHandler<HTMLButtonElement> = () => {
-    if (!location.pathname.includes(`/${ConnectionSettingsRoutes.REPLICATION}`)) {
-      navigate(ConnectionSettingsRoutes.REPLICATION);
+    if (!location.pathname.includes(`/${ConnectionRoutePaths.Replication}`)) {
+      navigate(ConnectionRoutePaths.Replication);
     }
 
     refreshSchema();

diff --git a/airbyte-webapp/src/components/connection/ConnectionInfoCard/index.ts b/airbyte-webapp/src/components/connection/ConnectionInfoCard/index.ts
@@ -0,0 +1 @@
+export * from "./ConnectionInfoCard";
diff --git a/...ectionItemPage/ConnectionName.module.scss → ...ConnectionName/ConnectionName.module.scss b/...ectionItemPage/ConnectionName.module.scss → ...ConnectionName/ConnectionName.module.scss
@@ -1,5 +1,5 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .container {
   margin-top: variables.$spacing-md;

diff --git a/...ges/ConnectionItemPage/ConnectionName.tsx → ...nection/ConnectionName/ConnectionName.tsx b/...ges/ConnectionItemPage/ConnectionName.tsx → ...nection/ConnectionName/ConnectionName.tsx
diff --git a/airbyte-webapp/src/components/connection/ConnectionName/index.ts b/airbyte-webapp/src/components/connection/ConnectionName/index.ts
@@ -0,0 +1 @@
+export * from "./ConnectionName";
diff --git a/airbyte-webapp/src/components/connection/JobProgress/JobProgress.tsx b/airbyte-webapp/src/components/connection/JobProgress/JobProgress.tsx
@@ -3,11 +3,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { getJobStatus } from "components/JobItem/JobItem";
+import { JobsWithJobs } from "components/JobItem/types";
+import { getJobStatus } from "components/JobItem/utils";
 import { Text } from "components/ui/Text";
 
 import { AttemptRead, AttemptStatus, SynchronousJobRead } from "core/request/AirbyteClient";
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 import { formatBytes } from "utils/numberHelper";
 
 import styles from "./JobProgress.module.scss";