Move CatalogDiff modal from views to components

airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.module.scss → airbyte-webapp/src/components/connection/CatalogDiffModal/CatalogDiffModal.module.scss

@@ -1,4 +1,4 @@
-@use "../../../scss/variables";
+@use "scss/variables";
 
 .modalContent {
   display: flex;

airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx → airbyte-webapp/src/components/connection/CatalogDiffModal/CatalogDiffModal.tsx

@@ -9,8 +9,8 @@ import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient";
 import { useModalService } from "hooks/services/Modal";
 
 import styles from "./CatalogDiffModal.module.scss";
-import { DiffSection } from "./components/DiffSection";
-import { FieldSection } from "./components/FieldSection";
+import { DiffSection } from "./DiffSection";
+import { FieldSection } from "./FieldSection";
 import { getSortedDiff } from "./utils";
 
 interface CatalogDiffModalProps {

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx → airbyte-webapp/src/components/connection/CatalogDiffModal/DiffAccordion.tsx

@@ -3,10 +3,10 @@ import { useMemo } from "react";
 
 import { StreamTransform } from "core/request/AirbyteClient";
 
-import { getSortedDiff } from "../utils";
 import styles from "./DiffAccordion.module.scss";
 import { DiffAccordionHeader } from "./DiffAccordionHeader";
 import { DiffFieldTable } from "./DiffFieldTable";
+import { getSortedDiff } from "./utils";
 
 interface DiffAccordionProps {
   streamTransform: StreamTransform;

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss → airbyte-webapp/src/components/connection/CatalogDiffModal/DiffAccordionHeader.module.scss

@@ -1,5 +1,5 @@
-@forward "../components/StreamRow.module.scss";
-@forward "../components/DiffSection.module.scss";
+@forward "./StreamRow.module.scss";
+@forward "./DiffSection.module.scss";
 @use "scss/variables";
 
 .row {

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx → airbyte-webapp/src/components/connection/CatalogDiffModal/DiffFieldTable.tsx

@@ -2,10 +2,10 @@ import { FormattedMessage } from "react-intl";
 
 import { FieldTransform } from "core/request/AirbyteClient";
 
-import { DiffVerb } from "../types";
 import styles from "./DiffFieldTable.module.scss";
 import { DiffHeader } from "./DiffHeader";
 import { FieldRow } from "./FieldRow";
+import { DiffVerb } from "./types";
 
 interface DiffFieldTableProps {
   fieldTransforms: FieldTransform[];

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx → airbyte-webapp/src/components/connection/CatalogDiffModal/DiffHeader.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl";
 
-import { DiffVerb } from "../types";
+import { DiffVerb } from "./types";
 
 export type DiffType = "field" | "stream";
 

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx → airbyte-webapp/src/components/connection/CatalogDiffModal/DiffSection.tsx

@@ -2,10 +2,10 @@ import { FormattedMessage } from "react-intl";
 
 import { AirbyteCatalog, StreamDescriptor, StreamTransform } from "core/request/AirbyteClient";
 
-import { DiffVerb } from "../types";
 import { DiffHeader } from "./DiffHeader";
 import styles from "./DiffSection.module.scss";
 import { StreamRow } from "./StreamRow";
+import { DiffVerb } from "./types";
 
 interface DiffSectionProps {
   streams: StreamTransform[];

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx → airbyte-webapp/src/components/connection/CatalogDiffModal/FieldSection.tsx

@@ -2,10 +2,10 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { StreamTransform } from "core/request/AirbyteClient";
 
-import { DiffVerb } from "../types";
 import { DiffAccordion } from "./DiffAccordion";
 import { DiffHeader } from "./DiffHeader";
 import styles from "./FieldSection.module.scss";
+import { DiffVerb } from "./types";
 
 interface FieldSectionProps {
   streams: StreamTransform[];

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx → airbyte-webapp/src/components/connection/CatalogDiffModal/StreamRow.tsx

@@ -2,11 +2,12 @@ import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 
+import { ModificationIcon } from "components/icons/ModificationIcon";
+
 import { StreamTransform } from "core/request/AirbyteClient";
 
-import { ModificationIcon } from "../../../../components/icons/ModificationIcon";
-import { DiffVerb } from "../types";
 import styles from "./StreamRow.module.scss";
+import { DiffVerb } from "./types";
 
 interface StreamRowProps {
   streamTransform: StreamTransform;

airbyte-webapp/src/components/connection/CatalogDiffModal/index.ts

@@ -0,0 +1 @@
+export * from "./CatalogDiffModal";

airbyte-webapp/src/views/Connection/CatalogDiffModal/useConfirmCatalogDiff.tsx → airbyte-webapp/src/hooks/connection/useConfirmCatalogDiff.tsx

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
 import { useIntl } from "react-intl";
 
+import { CatalogDiffModal } from "components/connection/CatalogDiffModal/CatalogDiffModal";
+
 import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService";
 import { useModalService } from "hooks/services/Modal";
 
-import { CatalogDiffModal } from "./CatalogDiffModal";
-
 export const useConfirmCatalogDiff = () => {
   const { formatMessage } = useIntl();
   const { openModal } = useModalService();

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx

@@ -9,6 +9,7 @@ import LoadingSchema from "components/LoadingSchema";
 import { Action, Namespace } from "core/analytics";
 import { getFrequencyFromScheduleData } from "core/analytics/utils";
 import { toWebBackendConnectionUpdate } from "core/domain/connection";
+import { useConfirmCatalogDiff } from "hooks/connection/useConfirmCatalogDiff";
 import { PageTrackingCodes, useAnalyticsService, useTrackPage } from "hooks/services/Analytics";
 import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService";
 import {
@@ -20,7 +21,6 @@ import { useModalService } from "hooks/services/Modal";
 import { useConnectionService, ValuesProps } from "hooks/services/useConnectionHook";
 import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService";
 import { equal } from "utils/objects";
-import { useConfirmCatalogDiff } from "views/Connection/CatalogDiffModal/useConfirmCatalogDiff";
 import EditControls from "views/Connection/ConnectionForm/components/EditControls";
 import { ConnectionFormFields } from "views/Connection/ConnectionForm/ConnectionFormFields";
 import {