Always show ConfigurationError

Author: bzwrk

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

@@ -13,9 +13,13 @@ export type ErrorsProps<T extends ConfigurableProps, U extends ConfigurableProp>
 export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(props: ErrorsProps<T, U>) {
   const { field } = props;
   const {
-    errors = {}, prop = {},
+    errors = {}, prop = {}, enableDebugging,
   } = field
 
+  if (!enableDebugging) {
+    return null
+  }
+
   if (!errors[prop.name]) {
     return null
   }

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

@@ -21,9 +21,7 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
   const {
     form, field,
   } = props;
-  const {
-    prop, enableDebugging,
-  } = field;
+  const { prop } = field;
   const {
     getProps, getComponents,
   } = useCustomize();
@@ -65,7 +63,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} />
-      { enableDebugging && <Errors field={field} form={form} /> }
+      <Errors field={field} form={form} />
     </div>
   );
 }

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

@@ -17,6 +17,10 @@ import type {
   ConfigurableProp, ConfigurablePropAlert,
 } from "@pipedream/sdk";
 
+const alwaysShowSdkErrors = [
+  "ConfigurationError",
+]
+
 export function InternalComponentForm() {
   const formContext = useFormContext();
   const {
@@ -32,6 +36,8 @@ export function InternalComponentForm() {
     enableDebugging,
   } = formContext;
 
+  const showSdkErrors = enableDebugging || __sdkErrors.filter((e) => alwaysShowSdkErrors.includes(e.name)).length > 0
+
   const {
     hideOptionalProps, onSubmit,
   } = formContextProps;
@@ -161,7 +167,7 @@ export function InternalComponentForm() {
               </div>
             </div>
             : null}
-          { enableDebugging && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
+          { showSdkErrors && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
           {onSubmit && <ControlSubmit form={formContext} />}
         </form>
       </Suspense>