Fix error highlighting (#11469)

Author: jamakase

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/views/Connection/ConnectionForm/ConnectionForm.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/formConfig.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({