From 276b39b669b9a41ec7682d1428bcbcaaa1ebb717 Mon Sep 17 00:00:00 2001 From: Ilia Date: Tue, 12 Nov 2024 12:55:02 +0100 Subject: [PATCH] feat: add CarbonConnect component (#37280) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: d5f2c7119b75cb79f51c64e0f38790cde602045e > Cypress dashboard. > Tags: `@tag.Sanity` > Spec: >
Tue, 12 Nov 2024 11:53:26 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## 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. --- .../editorComponents/ErrorBoundry.tsx | 23 ++++++++++--------- .../components/formControls/BaseControl.tsx | 1 + .../CarbonButton/CarbonButton.tsx | 7 ++++++ .../formControls/CarbonButton/index.ts | 1 + app/client/src/pages/Editor/FormControl.tsx | 5 +++- .../utils/formControl/FormControlRegistry.tsx | 7 ++++++ .../src/utils/formControl/formControlTypes.ts | 1 + 7 files changed, 33 insertions(+), 12 deletions(-) create mode 100644 app/client/src/ee/components/formControls/CarbonButton/CarbonButton.tsx create mode 100644 app/client/src/ee/components/formControls/CarbonButton/index.ts diff --git a/app/client/src/components/editorComponents/ErrorBoundry.tsx b/app/client/src/components/editorComponents/ErrorBoundry.tsx index 788b7ff2c2..44bf4bfb63 100644 --- a/app/client/src/components/editorComponents/ErrorBoundry.tsx +++ b/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 { className="error-boundary" style={this.props.style} > - {this.state.hasError ? ( -

- Oops, Something went wrong. -
- this.setState({ hasError: false })}> - Click here to retry - -

- ) : ( - this.props.children - )} + {this.state.hasError + ? this.props.fallback || ( +

+ Oops, Something went wrong. +
+ this.setState({ hasError: false })}> + Click here to retry + +

+ ) + : this.props.children} ); } diff --git a/app/client/src/components/formControls/BaseControl.tsx b/app/client/src/components/formControls/BaseControl.tsx index 400dff4a64..89dd371339 100644 --- a/app/client/src/components/formControls/BaseControl.tsx +++ b/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 & { configProperty?: string; diff --git a/app/client/src/ee/components/formControls/CarbonButton/CarbonButton.tsx b/app/client/src/ee/components/formControls/CarbonButton/CarbonButton.tsx new file mode 100644 index 0000000000..e98751ee4d --- /dev/null +++ b/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; +}; diff --git a/app/client/src/ee/components/formControls/CarbonButton/index.ts b/app/client/src/ee/components/formControls/CarbonButton/index.ts new file mode 100644 index 0000000000..a0c07b92bb --- /dev/null +++ b/app/client/src/ee/components/formControls/CarbonButton/index.ts @@ -0,0 +1 @@ +export * from "./CarbonButton"; diff --git a/app/client/src/pages/Editor/FormControl.tsx b/app/client/src/pages/Editor/FormControl.tsx index 0360530c3d..cf6af57495 100644 --- a/app/client/src/pages/Editor/FormControl.tsx +++ b/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, ); diff --git a/app/client/src/utils/formControl/FormControlRegistry.tsx b/app/client/src/utils/formControl/FormControlRegistry.tsx index 0779695fbd..3d174d27ad 100644 --- a/app/client/src/utils/formControl/FormControlRegistry.tsx +++ b/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 ; }, }); + FormControlFactory.registerControlBuilder(formControlTypes.CARBON_BUTTON, { + buildPropertyControl(controlProps: CarbonButtonProps): JSX.Element { + return ; + }, + }); } } diff --git a/app/client/src/utils/formControl/formControlTypes.ts b/app/client/src/utils/formControl/formControlTypes.ts index 86242a50bd..ff06833938 100644 --- a/app/client/src/utils/formControl/formControlTypes.ts +++ b/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", };