Use enableDebugging flag instead of environment

Author: bzwrk

packages/connect-react/examples/nextjs/src/app/page.tsx

@@ -45,7 +45,7 @@ export default function Home() {
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
           sdkErrors={sdkErrors}
-          environment={client.getEnvironment()}
+          enableDebugging={true}
           onSubmit={async () => {
             try {
               const result = await client.runAction({

packages/connect-react/src/components/ComponentForm.tsx

@@ -21,7 +21,7 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
   onUpdateDynamicProps?: (dp: DynamicProps<T>) => void;
   hideOptionalProps?: boolean;
   sdkErrors?: unknown[] | unknown | undefined;
-  environment?: string;
+  enableDebugging?: string;
 };
 
 export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {

packages/connect-react/src/components/Field.tsx

@@ -22,7 +22,7 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
     form, field,
   } = props;
   const {
-    prop, isDevelopment,
+    prop, enableDebugging,
   } = field;
   const {
     getProps, getComponents,
@@ -65,7 +65,7 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
       <Label text={labelText} field={field} form={form} />
       <Control field={field} form={form} />
       <Description markdown={prop.description} field={field} form={form} />
-      { isDevelopment && <Errors field={field} form={form} /> }
+      { enableDebugging && <Errors field={field} form={form} /> }
     </div>
   );
 }

packages/connect-react/src/components/InternalComponentForm.tsx

@@ -27,7 +27,7 @@ export function InternalComponentForm() {
     setSubmitting,
     sdkErrors: __sdkErrors,
     submitting,
-    isDevelopment,
+    enableDebugging,
   } = formContext;
 
   const {
@@ -159,7 +159,7 @@ export function InternalComponentForm() {
               </div>
             </div>
             : null}
-          { isDevelopment && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
+          { enableDebugging && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
           {onSubmit && <ControlSubmit form={formContext} />}
         </form>
       </Suspense>

packages/connect-react/src/components/InternalField.tsx

@@ -15,7 +15,7 @@ export function InternalField<T extends ConfigurableProp>({
 }: FieldInternalProps<T>) {
   const formCtx = useFormContext();
   const {
-    id: formId, configuredProps, registerField, setConfiguredProp, errors, isDevelopment,
+    id: formId, configuredProps, registerField, setConfiguredProp, errors, enableDebugging,
   } = formCtx;
 
   const appSlug = prop.type === "app" && "app" in prop
@@ -45,7 +45,7 @@ export function InternalField<T extends ConfigurableProp>({
       app, // XXX fix ts
     },
     errors,
-    isDevelopment,
+    enableDebugging,
   };
   useEffect(() => registerField(fieldCtx), [
     fieldCtx,

packages/connect-react/src/hooks/form-context.tsx

@@ -38,7 +38,7 @@ export type FormContext<T extends ConfigurableProps> = {
   setSubmitting: (submitting: boolean) => void;
   submitting: boolean;
   userId: string;
-  isDevelopment: boolean;
+  enableDebugging: boolean;
 };
 
 export const skippablePropTypes = [
@@ -75,7 +75,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors, environment,
+    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors, enableDebugging: __enableDebugging,
   } = formProps;
   const componentId = component.key;
 
@@ -102,9 +102,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   ] = useState<Record<string, string>[]>([])
 
   const [
-    isDevelopment,
-    setIsDevelopment,
-  ] = useState<boolean>(environment === "development")
+    enableDebugging,
+    setEnableDebugging,
+  ] = useState<boolean>(__enableDebugging === true)
 
   const [
     enabledOptionalProps,
@@ -159,16 +159,14 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       const {
         dynamicProps, observations, errors: __errors,
       } = result
-      const errorsAndObservations = []
-      if (observations) {
-        errorsAndObservations.push(...observations)
-      }
-      if (__errors) {
-        errorsAndObservations.push(...__errors)
-      }
-      if (errorsAndObservations) {
-        handleSdkErrors(errorsAndObservations)
+
+      // Prioritize errors from observations over the errors array
+      if (observations && observations.filter((o) => o.k === "error").length > 0) {
+        handleSdkErrors(observations)
+      } else {
+        handleSdkErrors(__errors)
       }
+
       // XXX what about if null?
       // TODO observation errors, etc.
       if (dynamicProps) {
@@ -549,7 +547,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setSubmitting,
     submitting,
     sdkErrors,
-    isDevelopment,
+    enableDebugging,
   };
   return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
 };

packages/connect-react/src/hooks/form-field-context.tsx

@@ -17,7 +17,7 @@ export type FormFieldContext<T extends ConfigurableProp> = {
   onChange: (value: PropValue<T["type"]> | undefined) => void;
   extra: FormFieldContextExtra<T>;
   errors: Record<string, string[]>;
-  isDevelopment: boolean;
+  enableDebugging: boolean;
 };
 
 export const FormFieldContext = createContext<FormFieldContext<any /* XXX fix */> | undefined>(undefined); // eslint-disable-line @typescript-eslint/no-explicit-any