Merge branch 'master' into grubberr/11566-source-github-reviews

Author: grubberr

airbyte-config/init/src/main/resources/seed/destination_definitions.yaml

@@ -203,7 +203,7 @@
 - name: S3
   destinationDefinitionId: 4816b78f-1489-44c1-9060-4b19d5fa9362
   dockerRepository: airbyte/destination-s3
-  dockerImageTag: 0.2.12
+  dockerImageTag: 0.2.13
   documentationUrl: https://docs.airbyte.io/integrations/destinations/s3
   icon: s3.svg
   resourceRequirements:

airbyte-config/init/src/main/resources/seed/destination_specs.yaml

@@ -3469,7 +3469,7 @@
     supported_destination_sync_modes:
     - "append"
     - "overwrite"
-- dockerImage: "airbyte/destination-s3:0.2.12"
+- dockerImage: "airbyte/destination-s3:0.2.13"
   spec:
     documentationUrl: "https://docs.airbyte.io/integrations/destinations/s3"
     connectionSpecification:

airbyte-webapp/src/config/ConfigServiceProvider.tsx

@@ -10,7 +10,7 @@ type ConfigContext<T extends Config = Config> = {
   config: T;
 };
 
-const configContext = React.createContext<ConfigContext | null>(null);
+export const configContext = React.createContext<ConfigContext | null>(null);
 
 export function useConfig<T extends Config>(): T {
   const configService = useContext(configContext);

airbyte-webapp/src/core/domain/catalog/api.ts

@@ -28,6 +28,9 @@ export type SyncSchemaStream = {
   stream: AirbyteStream;
   config: AirbyteStreamConfiguration;
 
+  /**
+   * This field is not returned from API and is used to track unique objects
+   */
   id: string;
 };
 

airbyte-webapp/src/core/domain/notification/NotificationService.tsx

@@ -0,0 +1,21 @@
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { NotificationStatus } from "./types";
+
+class NotificationService extends AirbyteRequestService {
+  get url(): string {
+    return "notifications";
+  }
+
+  public try(payload: {
+    notificationType: "slack";
+    sendOnSuccess: boolean;
+    sendOnFailure: boolean;
+    slackConfiguration: {
+      webhook: string;
+    };
+  }): Promise<NotificationStatus> {
+    return this.fetch<NotificationStatus>(`${this.url}/try`, payload);
+  }
+}
+
+export { NotificationService };

airbyte-webapp/src/core/domain/notification/types.tsx

@@ -0,0 +1,4 @@
+export interface NotificationStatus {
+  status: string;
+  message: string;
+}

airbyte-webapp/src/core/resources/Notifications.ts

@@ -1,21 +1,35 @@
 import { useFetcher } from "rest-hooks";
+import { useMutation } from "react-query";
 
 import WorkspaceResource from "core/resources/Workspace";
-import NotificationsResource, {
-  Notifications,
-} from "core/resources/Notifications";
 
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
 import { Destination, Source } from "core/domain/connector";
 import { Workspace } from "core/domain/workspace/Workspace";
+import { NotificationStatus } from "core/domain/notification/types";
+import { useConfig } from "config";
+import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares";
+import { useInitService } from "services/useInitService";
+import { NotificationService } from "core/domain/notification/NotificationService";
 
 export type WebhookPayload = {
   webhook: string;
   sendOnSuccess: boolean;
   sendOnFailure: boolean;
 };
 
+function useGetNotificationService(): NotificationService {
+  const { apiUrl } = useConfig();
+
+  const requestAuthMiddleware = useDefaultRequestMiddlewares();
+
+  return useInitService(
+    () => new NotificationService(apiUrl, requestAuthMiddleware),
+    [apiUrl, requestAuthMiddleware]
+  );
+}
+
 const useWorkspace = (): {
   workspace: Workspace;
   updatePreferences: (data: {
@@ -25,7 +39,7 @@ const useWorkspace = (): {
     securityUpdates: boolean;
   }) => Promise<Workspace>;
   updateWebhook: (data: WebhookPayload) => Promise<Workspace>;
-  testWebhook: (data: WebhookPayload) => Promise<Notifications>;
+  testWebhook: (data: WebhookPayload) => Promise<NotificationStatus>;
   setInitialSetupConfig: (data: {
     email: string;
     anonymousDataCollection: boolean;
@@ -43,8 +57,9 @@ const useWorkspace = (): {
     destination: Destination;
   }) => Promise<void>;
 } => {
+  const notificationService = useGetNotificationService();
   const updateWorkspace = useFetcher(WorkspaceResource.updateShape());
-  const tryWebhookUrl = useFetcher(NotificationsResource.tryShape());
+
   const workspace = useCurrentWorkspace();
 
   const analyticsService = useAnalyticsService();
@@ -130,19 +145,6 @@ const useWorkspace = (): {
       }
     );
 
-  const testWebhook = async (data: WebhookPayload) =>
-    await tryWebhookUrl(
-      {
-        notificationType: "slack",
-        sendOnSuccess: data.sendOnSuccess,
-        sendOnFailure: data.sendOnFailure,
-        slackConfiguration: {
-          webhook: data.webhook,
-        },
-      },
-      {}
-    );
-
   const updateWebhook = async (data: WebhookPayload) =>
     await updateWorkspace(
       {},
@@ -166,13 +168,24 @@ const useWorkspace = (): {
       }
     );
 
+  const tryWebhookUrl = useMutation((data: WebhookPayload) =>
+    notificationService.try({
+      notificationType: "slack",
+      sendOnSuccess: data.sendOnSuccess,
+      sendOnFailure: data.sendOnFailure,
+      slackConfiguration: {
+        webhook: data.webhook,
+      },
+    })
+  );
+
   return {
     workspace,
     finishOnboarding,
     setInitialSetupConfig,
     updatePreferences,
     updateWebhook,
-    testWebhook,
+    testWebhook: tryWebhookUrl.mutateAsync,
     sendFeedback,
   };
 };

airbyte-webapp/src/hooks/services/useWorkspace.tsx

@@ -47,10 +47,6 @@ const NotificationPage: React.FC = () => {
     successMessage,
   } = useAsyncWithTimeout(async (data: WebhookPayload) => updateWebhook(data));
 
-  const onTestWebhook = async (data: WebhookPayload) => {
-    await testWebhook(data);
-  };
-
   const firstNotification = workspace.notifications?.[0];
 
   const initialValues = useMemo(
@@ -74,7 +70,7 @@ const NotificationPage: React.FC = () => {
           <WebHookForm
             webhook={initialValues}
             onSubmit={onSubmitWebhook}
-            onTest={onTestWebhook}
+            onTest={testWebhook}
             errorMessage={errorMessage}
             successMessage={successMessage}
           />

airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/NotificationPage.tsx

@@ -7,7 +7,7 @@ import { IntlProvider } from "react-intl";
 
 import en from "locales/en.json";
 import { FeatureService } from "hooks/services/Feature";
-import { ConfigServiceProvider, defaultConfig } from "config";
+import { configContext, defaultConfig } from "config";
 
 export type RenderOptions = {
   // optionally pass in a history object to control routes in the test
@@ -27,11 +27,11 @@ export function render(
     return (
       <ThemeProvider theme={{}}>
         <IntlProvider locale="en" messages={en}>
-          <ConfigServiceProvider defaultConfig={defaultConfig}>
+          <configContext.Provider value={{ config: defaultConfig }}>
             <FeatureService>
               <MemoryRouter>{children}</MemoryRouter>
             </FeatureService>
-          </ConfigServiceProvider>
+          </configContext.Provider>
         </IntlProvider>
       </ThemeProvider>
     );

airbyte-webapp/src/utils/testutils.tsx

@@ -71,6 +71,8 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
     cursorField,
     destinationSyncMode,
   } = stream.config;
+
+  const { defaultCursorField } = stream.stream;
   const syncSchema = useMemo(
     () => ({
       syncMode,
@@ -126,9 +128,11 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
           <PathPopout
             pathType={cursorType}
             paths={paths}
-            path={cursorField}
+            path={
+              cursorType === "sourceDefined" ? defaultCursorField : cursorField
+            }
             placeholder={
-              <FormattedMessage id="connectionForm.primaryKey.searchPlaceholder" />
+              <FormattedMessage id="connectionForm.cursor.searchPlaceholder" />
             }
             onPathChange={onCursorChange}
           />

airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.tsx

@@ -42,6 +42,15 @@ type PathProps = {
 
 export const PathPopout: React.FC<PathPopoutProps> = (props) => {
   if (props.pathType === "sourceDefined") {
+    if (props.path) {
+      const text = props.path
+        ? props.isMulti
+          ? props.path.map(pathDisplayName).join(", ")
+          : pathDisplayName(props.path)
+        : "";
+
+      return <>{text}</>;
+    }
     return <>{"<sourceDefined>"}</>;
   }
 

airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.tsx

@@ -140,7 +140,10 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
   const onFormSubmit = useCallback(
     async (values: FormikConnectionFormValues) => {
       const formValues: ConnectionFormValues = (connectionValidationSchema.cast(
-        values
+        values,
+        {
+          context: { isRequest: true },
+        }
       ) as unknown) as ConnectionFormValues;
 
       formValues.operations = mapFormPropsToOperation(

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx

@@ -98,7 +98,11 @@ const connectionValidationSchema = yup
           id: yup
             .string()
             // This is required to get rid of id fields we are using to detect stream for edition
-            .strip(true),
+            .when(
+              "$isRequest",
+              (isRequest: boolean, schema: yup.StringSchema) =>
+                isRequest ? schema.strip(true) : schema
+            ),
           stream: yup.object(),
           config: yup
             .object({

airbyte-webapp/src/views/Connection/ConnectionForm/formConfig.tsx

@@ -108,7 +108,7 @@ jest.mock("hooks/services/useWorkspace", () => ({
   }),
 }));
 
-describe.skip("Service Form", () => {
+describe("Service Form", () => {
   describe("should display json schema specs", () => {
     let container: HTMLElement;
     beforeEach(() => {

airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.test.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Formik, getIn, setIn, useFormikContext } from "formik";
 import { JSONSchema7 } from "json-schema";
 import { useToggle } from "react-use";
@@ -25,6 +31,7 @@ import {
   ConnectorDefinitionSpecification,
 } from "core/domain/connector";
 import { isDefined } from "utils/common";
+import { ConnectionConfiguration } from "../../../core/domain/connection";
 
 export type ServiceFormProps = {
   formType: "source" | "destination";
@@ -54,17 +61,20 @@ const FormikPatch: React.FC = () => {
  * @param schema
  * @constructor
  */
-const PatchInitialValuesWithWidgetConfig: React.FC<{ schema: JSONSchema7 }> = ({
-  schema,
-}) => {
+const PatchInitialValuesWithWidgetConfig: React.FC<{
+  schema: JSONSchema7;
+}> = ({ schema }) => {
   const { widgetsInfo } = useServiceForm();
-  const { values, setValues } = useFormikContext();
+  const { values, setFieldValue } = useFormikContext<ServiceFormValues>();
+
+  const valueRef = useRef<ConnectionConfiguration>();
+  valueRef.current = values.connectionConfiguration;
 
   useEffect(() => {
     // set all const fields to form field values, so we could send form
     const constPatchedValues = Object.entries(widgetsInfo)
       .filter(([_, v]) => isDefined(v.const))
-      .reduce((acc, [k, v]) => setIn(acc, k, v.const), values);
+      .reduce((acc, [k, v]) => setIn(acc, k, v.const), valueRef.current);
 
     // set default fields as current values, so values could be populated correctly
     // fix for https://github.com/airbytehq/airbyte/issues/6791
@@ -75,7 +85,7 @@ const PatchInitialValuesWithWidgetConfig: React.FC<{ schema: JSONSchema7 }> = ({
       )
       .reduce((acc, [k, v]) => setIn(acc, k, v.default), constPatchedValues);
 
-    setValues(defaultPatchedValues);
+    setFieldValue("connectionConfiguration", defaultPatchedValues);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schema]);
@@ -92,12 +102,11 @@ const SetDefaultName: React.FC = () => {
   const { selectedService } = useServiceForm();
 
   useEffect(() => {
-    // Formik has an issue, that prevents us from setting a field value directly in code here
-    // It won't change the value at all, unless we push it one execution slot further with setTimeout
-    setTimeout(() => {
-      setFieldValue("name", selectedService?.name ?? "");
-    });
-  }, [selectedService, setFieldValue]);
+    if (selectedService) {
+      setFieldValue("name", selectedService.name);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedService]);
 
   return null;
 };