feat: add CarbonConnect component

app/client/src/components/editorComponents/ErrorBoundry.tsx

@@ -8,6 +8,7 @@ import type { ReactNode, CSSProperties } from "react";
 interface Props {
   children: ReactNode;
   style?: CSSProperties;
+  fallback?: ReactNode;
 }
 interface State {
   hasError: boolean;
@@ -47,17 +48,17 @@ class ErrorBoundary extends React.Component<Props, State> {
         className="error-boundary"
         style={this.props.style}
       >
-        {this.state.hasError ? (
-          <p>
-            Oops, Something went wrong.
-            <br />
-            <RetryLink onClick={() => this.setState({ hasError: false })}>
-              Click here to retry
-            </RetryLink>
-          </p>
-        ) : (
-          this.props.children
-        )}
+        {this.state.hasError
+          ? this.props.fallback || (
+              <p>
+                Oops, Something went wrong.
+                <br />
+                <RetryLink onClick={() => this.setState({ hasError: false })}>
+                  Click here to retry
+                </RetryLink>
+              </p>
+            )
+          : this.props.children}
       </ErrorBoundaryContainer>
     );
   }

app/client/src/components/formControls/BaseControl.tsx

@@ -108,6 +108,7 @@ export interface ControlData {
   validator?: (value: string) => { isValid: boolean; message: string };
   isSecretExistsPath?: string;
   addMoreButtonLabel?: string;
+  datasourceId?: string;
 }
 export type FormConfigType = Omit<ControlData, "configProperty"> & {
   configProperty?: string;

app/client/src/ee/components/formControls/CarbonButton/CarbonButton.tsx

@@ -0,0 +1,7 @@
+import type { ControlProps } from "../../../../components/formControls/BaseControl";
+
+export interface CarbonButtonProps extends ControlProps {}
+
+export const CarbonButton = () => {
+  return null;
+};

app/client/src/ee/components/formControls/CarbonButton/index.ts

@@ -0,0 +1 @@
+export * from "./CarbonButton";

app/client/src/pages/Editor/FormControl.tsx

@@ -178,7 +178,10 @@ function FormControl(props: FormControlProps) {
 
   const FormControlRenderMethod = (config = props.config) => {
     return FormControlFactory.createControl(
-      config,
+      {
+        ...config,
+        datasourceId: dsId,
+      },
       props.formName,
       props?.multipleConfig,
     );

app/client/src/utils/formControl/FormControlRegistry.tsx

@@ -37,6 +37,8 @@ import MultiFilePickerControl from "components/formControls/MultiFilePickerContr
 import type { MultipleFilePickerControlProps } from "components/formControls/MultiFilePickerControl";
 import type { RadioButtonControlProps } from "components/formControls/RadioButtonControl";
 import RadioButtonControl from "components/formControls/RadioButtonControl";
+import type { CarbonButtonProps } from "ee/components/formControls/CarbonButton";
+import { CarbonButton } from "ee/components/formControls/CarbonButton";
 
 /**
  * NOTE: If you are adding a component that uses FormControl
@@ -190,6 +192,11 @@ class FormControlRegistry {
         return <RadioButtonControl {...controlProps} />;
       },
     });
+    FormControlFactory.registerControlBuilder(formControlTypes.CARBON_BUTTON, {
+      buildPropertyControl(controlProps: CarbonButtonProps): JSX.Element {
+        return <CarbonButton {...controlProps} />;
+      },
+    });
   }
 }
 

app/client/src/utils/formControl/formControlTypes.ts

@@ -19,4 +19,5 @@ export default {
   FORM_TEMPLATE: "FORM_TEMPLATE",
   MULTIPLE_FILE_PICKER: "MULTIPLE_FILE_PICKER",
   RADIO_BUTTON: "RADIO_BUTTON",
+  CARBON_BUTTON: "CARBON_BUTTON",
 };