feat: add CarbonConnect component (#37280)

## Description
> [!TIP]  
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._


Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Sanity"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11795876861>
> Commit: d5f2c7119b75cb79f51c64e0f38790cde602045e
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11795876861&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Tue, 12 Nov 2024 11:53:26 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

- **New Features**
- Introduced an optional `fallback` prop in the ErrorBoundary component
for customizable error handling.
- Added a new `datasourceId` property to enhance control configuration.
- Launched the `CarbonButton` component, expanding form control options.
- Registered the `CARBON_BUTTON` form control type, increasing available
control types.

- **Enhancements**
- Improved rendering logic in the FormControl component for better user
experience.
- Optimized performance through refined memoization in the FormControl
component.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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",
 };