Fix service form tests (#11433)

* Fix service form tests

* Add lint comment

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/utils/testutils.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/views/Connector/ServiceForm/ServiceForm.test.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.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;
 };