🪟 🔧 Move connection views and CreateConnection component to component…

…s/connection (#21324)

* Move ConnectionForm from views to components/connection
Move FormCard to components/connection/ConnectionEditFormCard
Move CollapsibleCard to components/ui

* Move CreateConnection to components/connection

* CreateConnection -> CreateConnectionForm

airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx

@@ -3,14 +3,14 @@ import React, { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Cell, Header } from "components";
+import { SUPPORTED_MODES } from "components/connection/ConnectionForm/formConfig";
 import { Button } from "components/ui/Button";
 import { Switch } from "components/ui/Switch";
 
 import { SyncSchemaField, SyncSchemaFieldObject, SyncSchemaStream, traverseSchemaToField } from "core/domain/catalog";
 import { DestinationSyncMode, SyncMode } from "core/request/AirbyteClient";
 import { useBulkEditService } from "hooks/services/BulkEdit/BulkEditService";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
-import { SUPPORTED_MODES } from "views/Connection/ConnectionForm/formConfig";
 
 import styles from "./BulkHeader.module.scss";
 import { pathDisplayName, PathPopout } from "./PathPopout";

airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx

@@ -3,6 +3,7 @@ import isEqual from "lodash/isEqual";
 import React, { memo, useCallback, useMemo } from "react";
 import { useToggle } from "react-use";
 
+import { ConnectionFormValues, SUPPORTED_MODES } from "components/connection/ConnectionForm/formConfig";
 import { DropDownOptionDataItem } from "components/ui/DropDown";
 
 import { SyncSchemaField, SyncSchemaFieldObject, SyncSchemaStream } from "core/domain/catalog";
@@ -18,7 +19,6 @@ import { useDestinationNamespace } from "hooks/connection/useDestinationNamespac
 import { useNewTableDesignExperiment } from "hooks/connection/useNewTableDesignExperiment";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { naturalComparatorBy } from "utils/objects";
-import { ConnectionFormValues, SUPPORTED_MODES } from "views/Connection/ConnectionForm/formConfig";
 
 import styles from "./CatalogSection.module.scss";
 import { CatalogTreeTableRow } from "./next/CatalogTreeTableRow";

airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.tsx

@@ -1,11 +1,12 @@
 import { Field, FieldProps, setIn } from "formik";
 import React, { useCallback } from "react";
 
+import { FormikConnectionFormValues } from "components/connection/ConnectionForm/formConfig";
+
 import { SyncSchemaStream } from "core/domain/catalog";
 import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
 import { useNewTableDesignExperiment } from "hooks/connection/useNewTableDesignExperiment";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
-import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
 
 import { BulkHeader } from "./BulkHeader";
 import { CatalogSection } from "./CatalogSection";

airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.tsx

@@ -6,14 +6,14 @@ import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import { Header } from "components";
+import { SUPPORTED_MODES } from "components/connection/ConnectionForm/formConfig";
 import { Button } from "components/ui/Button";
 import { Switch } from "components/ui/Switch";
 
 import { SyncSchemaField, SyncSchemaFieldObject, SyncSchemaStream, traverseSchemaToField } from "core/domain/catalog";
 import { DestinationSyncMode, SyncMode } from "core/request/AirbyteClient";
 import { useBulkEditService } from "hooks/services/BulkEdit/BulkEditService";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
-import { SUPPORTED_MODES } from "views/Connection/ConnectionForm/formConfig";
 
 import { pathDisplayName } from "../PathPopout";
 import { HeaderCell } from "../styles";

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.tsx

@@ -5,6 +5,7 @@ import { useFormikContext } from "formik";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import { FormikConnectionFormValues } from "components/connection/ConnectionForm/formConfig";
 import { Header } from "components/SimpleTableComponents";
 import { Button } from "components/ui/Button";
 import { CheckBox } from "components/ui/CheckBox";
@@ -17,7 +18,6 @@ import { useBulkEditService } from "hooks/services/BulkEdit/BulkEditService";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { useModalService } from "hooks/services/Modal";
 import { links } from "utils/links";
-import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
 
 import {
   DestinationNamespaceFormValueType,

airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx

@@ -1,10 +1,11 @@
 import { renderHook } from "@testing-library/react-hooks";
 import * as formik from "formik";
 
+import { FormikConnectionFormValues } from "components/connection/ConnectionForm/formConfig";
+
 import { AirbyteStreamAndConfiguration } from "core/request/AirbyteClient";
 import * as bulkEditService from "hooks/services/BulkEdit/BulkEditService";
 import * as connectionFormService from "hooks/services/ConnectionForm/ConnectionFormService";
-import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
 
 // eslint-disable-next-line css-modules/no-unused-class
 import { useCatalogTreeTableRowProps } from "./useCatalogTreeTableRowProps";

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

@@ -1,4 +1,4 @@
-@use "../../scss/variables";
+@use "scss/variables";
 
 .formCard {
   padding: 22px 27px variables.$spacing-xl 24px;

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

@@ -4,21 +4,21 @@ import { useIntl } from "react-intl";
 import { useMutation } from "react-query";
 
 import { FormChangeTracker } from "components/common/FormChangeTracker";
+import { CollapsibleCardProps, CollapsibleCard } from "components/ui/CollapsibleCard";
 
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { generateMessageFromError } from "utils/errorStatusMessage";
-import { CollapsibleCardProps, CollapsibleCard } from "views/Connection/CollapsibleCard";
-import EditControls from "views/Connection/ConnectionForm/components/EditControls";
 
-import styles from "./FormCard.module.scss";
+import EditControls from "../ConnectionForm/EditControls";
+import styles from "./ConnectionEditFormCard.module.scss";
 
 interface FormCardProps<T> extends CollapsibleCardProps {
   bottomSeparator?: boolean;
   form: FormikConfig<T>;
   submitDisabled?: boolean;
 }
 
-export const FormCard = <T extends object>({
+export const ConnectionEditFormCard = <T extends object>({
   children,
   form,
   bottomSeparator = true,

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

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

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

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

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

@@ -19,14 +19,14 @@ import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useFormChangeTrackerService } from "hooks/services/FormChangeTracker";
 import { ValuesProps } from "hooks/services/useConnectionHook";
 
-import { NamespaceDefinitionField } from "./components/NamespaceDefinitionField";
-import { NonBreakingChangesPreferenceField } from "./components/NonBreakingChangesPreferenceField";
-import { useRefreshSourceSchemaWithConfirmationOnDirty } from "./components/refreshSourceSchemaWithConfirmationOnDirty";
-import { Section } from "./components/Section";
-import { SyncCatalogField } from "./components/SyncCatalogField";
 import styles from "./ConnectionFormFields.module.scss";
 import { FormikConnectionFormValues } from "./formConfig";
+import { NamespaceDefinitionField } from "./NamespaceDefinitionField";
+import { NonBreakingChangesPreferenceField } from "./NonBreakingChangesPreferenceField";
+import { useRefreshSourceSchemaWithConfirmationOnDirty } from "./refreshSourceSchemaWithConfirmationOnDirty";
 import { ScheduleField } from "./ScheduleField";
+import { Section } from "./Section";
+import { SyncCatalogField } from "./SyncCatalogField";
 
 interface ConnectionFormFieldsProps {
   values: ValuesProps | FormikConnectionFormValues;

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

@@ -1,5 +1,5 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .content {
   display: flex;

airbyte-webapp/src/components/connection/ConnectionForm/NamespaceDefinitionField.module.scss

@@ -0,0 +1 @@
+@forward "./ConnectionFormFields.module.scss";

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

@@ -6,7 +6,8 @@ import { ControlLabels } from "components/LabeledControl";
 import { DropDown } from "components/ui/DropDown";
 import { FlexContainer } from "components/ui/Flex";
 
-import { NamespaceDefinitionType } from "../../../../core/request/AirbyteClient";
+import { NamespaceDefinitionType } from "core/request/AirbyteClient";
+
 import styles from "./NamespaceDefinitionField.module.scss";
 
 export const StreamOptions = [

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

@@ -1,4 +1,4 @@
-@use "../../../../scss/variables";
+@use "scss/variables";
 
 .normalizationField {
   margin: variables.$spacing-lg 0;

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

@@ -1,4 +1,4 @@
-@use "../../../../scss/colors";
+@use "scss/colors";
 
 .message {
   overflow: hidden;

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

@@ -8,14 +8,14 @@ import { FlexContainer } from "components/ui/Flex";
 import { Input } from "components/ui/Input";
 import { Text } from "components/ui/Text";
 
+import availableCronTimeZones from "config/availableCronTimeZones.json";
 import { Action, Namespace } from "core/analytics";
 import { ConnectionScheduleData, ConnectionScheduleType } from "core/request/AirbyteClient";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { links } from "utils/links";
 
-import availableCronTimeZones from "../../../../config/availableCronTimeZones.json";
-import { FormikConnectionFormValues, useFrequencyDropdownData } from "../formConfig";
+import { FormikConnectionFormValues, useFrequencyDropdownData } from "./formConfig";
 import styles from "./ScheduleField.module.scss";
 
 const CRON_DEFAULT_VALUE = {

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

@@ -1,4 +1,4 @@
-@use "../../../../scss/variables";
+@use "scss/variables";
 
 .section {
   padding: variables.$spacing-xl;

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

@@ -3,13 +3,13 @@ import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import ArrayOfObjectsEditor from "components/ArrayOfObjectsEditor";
+import TransformationForm from "components/connection/TransformationForm";
 
 import { OperationRead } from "core/request/AirbyteClient";
 import { ConnectionFormMode } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { isDefined } from "utils/common";
-import TransformationForm from "views/Connection/TransformationForm";
 
-import { useDefaultTransformation } from "../formConfig";
+import { useDefaultTransformation } from "./formConfig";
 
 interface TransformationFieldProps extends ArrayHelpers {
   form: FormikProps<{ transformations: OperationRead[] }>;

airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.test.tsx

@@ -23,7 +23,7 @@ jest.doMock("services/connector/DestinationDefinitionService", () => ({
   useDestinationDefinition: () => mockDestinationDefinitionSpecification,
 }));
 
-jest.doMock("views/Connection/ConnectionForm/components/refreshSourceSchemaWithConfirmationOnDirty", () => ({
+jest.doMock("components/connection/ConnectionForm/refreshSourceSchemaWithConfirmationOnDirty", () => ({
   useRefreshSourceSchemaWithConfirmationOnDirty: jest.fn(),
 }));
 

airbyte-webapp/src/components/connection/ConnectionInfoCard/SchemaChangesDetected.test.tsx

@@ -17,7 +17,7 @@ jest.doMock("hooks/services/ConnectionEdit/ConnectionEditService", () => ({
 
 const mockUseRefreshSourceSchemaWithConfirmationOnDirty = jest.fn();
 
-jest.doMock("views/Connection/ConnectionForm/components/refreshSourceSchemaWithConfirmationOnDirty", () => ({
+jest.doMock("components/connection/ConnectionForm/refreshSourceSchemaWithConfirmationOnDirty", () => ({
   useRefreshSourceSchemaWithConfirmationOnDirty: mockUseRefreshSourceSchemaWithConfirmationOnDirty,
 }));
 

airbyte-webapp/src/components/connection/ConnectionInfoCard/SchemaChangesDetected.tsx

@@ -2,14 +2,14 @@ import classNames from "classnames";
 import { FormattedMessage } from "react-intl";
 import { useLocation, useNavigate } from "react-router-dom";
 
+import { useRefreshSourceSchemaWithConfirmationOnDirty } from "components/connection/ConnectionForm/refreshSourceSchemaWithConfirmationOnDirty";
 import { Button } from "components/ui/Button";
 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 styles from "./SchemaChangesDetected.module.scss";
 

airbyte-webapp/src/components/CreateConnection/CreateConnectionForm.module.scss → airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.module.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables";
+@use "scss/variables";
 
 .connectionFormContainer {
   width: 100%;

airbyte-webapp/src/components/CreateConnection/CreateConnectionForm.tsx → airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.tsx

@@ -2,6 +2,13 @@ import { Form, Formik, FormikHelpers } from "formik";
 import React, { Suspense, useCallback, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
+import { ConnectionFormFields } from "components/connection/ConnectionForm/ConnectionFormFields";
+import CreateControls from "components/connection/ConnectionForm/CreateControls";
+import {
+  FormikConnectionFormValues,
+  useConnectionValidationSchema,
+} from "components/connection/ConnectionForm/formConfig";
+import { OperationsSection } from "components/connection/ConnectionForm/OperationsSection";
 import LoadingSchema from "components/LoadingSchema";
 
 import { DestinationRead, SourceRead } from "core/request/AirbyteClient";
@@ -15,10 +22,6 @@ import { useFormChangeTrackerService } from "hooks/services/FormChangeTracker";
 import { useCreateConnection } from "hooks/services/useConnectionHook";
 import { SchemaError as SchemaErrorType, useDiscoverSchema } from "hooks/services/useSourceHook";
 import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService";
-import CreateControls from "views/Connection/ConnectionForm/components/CreateControls";
-import { OperationsSection } from "views/Connection/ConnectionForm/components/OperationsSection";
-import { ConnectionFormFields } from "views/Connection/ConnectionForm/ConnectionFormFields";
-import { useConnectionValidationSchema, FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
 
 import styles from "./CreateConnectionForm.module.scss";
 import { CreateConnectionNameField } from "./CreateConnectionNameField";

airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionNameField.module.scss

@@ -0,0 +1 @@
+@forward "../ConnectionForm/ConnectionFormFields.module.scss";

airbyte-webapp/src/components/CreateConnection/CreateConnectionNameField.tsx → airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionNameField.tsx

@@ -1,12 +1,11 @@
 import { Field, FieldProps } from "formik";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { Section } from "components/connection/ConnectionForm/Section";
 import { ControlLabels } from "components/LabeledControl";
 import { FlexContainer } from "components/ui/Flex";
 import { Input } from "components/ui/Input";
 
-import { Section } from "views/Connection/ConnectionForm/components/Section";
-
 import styles from "./CreateConnectionNameField.module.scss";
 
 export const CreateConnectionNameField = () => {

airbyte-webapp/src/components/CreateConnection/DataResidency.tsx → airbyte-webapp/src/components/connection/CreateConnectionForm/DataResidency.tsx

@@ -3,13 +3,13 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { DataGeographyDropdown } from "components/common/DataGeographyDropdown";
+import { Section } from "components/connection/ConnectionForm/Section";
 import { ControlLabels } from "components/LabeledControl";
 import { FlexContainer } from "components/ui/Flex";
 
 import { Geography } from "core/request/AirbyteClient";
 import { useAvailableGeographies } from "packages/cloud/services/geographies/GeographiesService";
 import { links } from "utils/links";
-import { Section } from "views/Connection/ConnectionForm/components/Section";
 
 import styles from "./DataResidency.module.scss";
 

airbyte-webapp/src/components/CreateConnection/TryAfterErrorBlock.module.scss → airbyte-webapp/src/components/connection/CreateConnectionForm/TryAfterErrorBlock.module.scss

@@ -1,4 +1,4 @@
-@use "../../scss/variables";
+@use "scss/variables";
 
 .container {
   padding: 40px;

airbyte-webapp/src/components/connection/DestinationNamespaceModal/DestinationNamespaceModal.tsx

@@ -4,14 +4,14 @@ import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
 import { LabeledRadioButton } from "components";
+import { FormikConnectionFormValues } from "components/connection/ConnectionForm/formConfig";
 import { Button } from "components/ui/Button";
 import { Input } from "components/ui/Input";
 import { ModalBody, ModalFooter } from "components/ui/Modal";
 import { Text } from "components/ui/Text";
 
 import { NamespaceDefinitionType } from "core/request/AirbyteClient";
 import { links } from "utils/links";
-import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
 
 import styles from "./DestinationNamespaceModal.module.scss";
 import { ExampleSettingsTable } from "./ExampleSettingsTable";

airbyte-webapp/src/components/connection/DestinationStreamNamesModal/DestinationStreamNamesModal.tsx

@@ -4,14 +4,13 @@ import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
 import { LabeledRadioButton } from "components";
+import { FormikConnectionFormValues } from "components/connection/ConnectionForm/formConfig";
 import { Button } from "components/ui/Button";
 import { Input } from "components/ui/Input";
 import { ModalBody, ModalFooter } from "components/ui/Modal";
 import { Text } from "components/ui/Text";
 import { InfoTooltip } from "components/ui/Tooltip";
 
-import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
-
 import styles from "./DestinationStreamNamesModal.module.scss";
 
 export const enum StreamNameDefinitionValueType {

airbyte-webapp/src/components/ui/CollapsibleCard/index.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { CollapsibleCard } from "./CollapsibleCard";
+
+export default {
+  title: "UI/CollapsibleCard",
+  component: CollapsibleCard,
+} as ComponentMeta<typeof CollapsibleCard>;
+
+const Template: ComponentStory<typeof CollapsibleCard> = (args) => <CollapsibleCard {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  title: "Card Title",
+  children: "The collapsible content goes here.",
+  collapsible: true,
+  defaultCollapsedState: true,
+};

airbyte-webapp/src/components/ui/CollapsibleCard/index.ts

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