The alpha version of the Custom widget that takes a user component and renders it on the app. Fixes https://github.com/appsmithorg/appsmith/issues/28601 #### Type of change - New feature (non-breaking change which adds functionality) ## Testing #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [x] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag `release_custom_widgets_enabled` #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import type { ControlType } from "constants/PropertyControlConstants";
|
|
import type {
|
|
ControlBuilder,
|
|
ControlProps,
|
|
ControlFunctions,
|
|
ControlData,
|
|
ControlMethods,
|
|
} from "components/propertyControls/BaseControl";
|
|
import type BaseControl from "components/propertyControls/BaseControl";
|
|
import { isArray } from "lodash";
|
|
import type { AdditionalDynamicDataTree } from "./autocomplete/customTreeTypeDefCreator";
|
|
class PropertyControlFactory {
|
|
static controlMap: Map<ControlType, ControlBuilder<ControlProps>> = new Map();
|
|
static controlMethods: Map<ControlType, ControlMethods> = new Map();
|
|
static inputComputedValueMap: Map<
|
|
ControlType,
|
|
typeof BaseControl.getInputComputedValue
|
|
> = new Map();
|
|
|
|
static registerControlBuilder(
|
|
controlType: ControlType,
|
|
controlBuilder: ControlBuilder<ControlProps>,
|
|
controlMethods: ControlMethods,
|
|
inputComputedValueFn: typeof BaseControl.getInputComputedValue,
|
|
) {
|
|
this.controlMap.set(controlType, controlBuilder);
|
|
this.controlMethods.set(controlType, controlMethods);
|
|
this.inputComputedValueMap.set(controlType, inputComputedValueFn);
|
|
}
|
|
|
|
static createControl(
|
|
controlData: ControlData,
|
|
controlFunctions: ControlFunctions,
|
|
preferEditor: boolean,
|
|
customEditor?: string,
|
|
additionalAutoComplete?: AdditionalDynamicDataTree,
|
|
hideEvaluatedValue?: boolean,
|
|
isSearchResult?: boolean,
|
|
): JSX.Element {
|
|
let controlBuilder;
|
|
let evaluatedValue = controlData.evaluatedValue;
|
|
|
|
if (preferEditor) {
|
|
controlBuilder = customEditor
|
|
? this.controlMap.get(customEditor)
|
|
: this.controlMap.get("CODE_EDITOR");
|
|
} else {
|
|
if (customEditor === "COMPUTE_VALUE" && isArray(evaluatedValue)) {
|
|
evaluatedValue = evaluatedValue[0];
|
|
}
|
|
controlBuilder = this.controlMap.get(controlData.controlType);
|
|
}
|
|
|
|
if (controlBuilder) {
|
|
const controlProps: ControlProps = {
|
|
...controlData,
|
|
...controlFunctions,
|
|
evaluatedValue,
|
|
key: controlData.id,
|
|
customJSControl: customEditor,
|
|
additionalAutoComplete,
|
|
hideEvaluatedValue,
|
|
isSearchResult,
|
|
};
|
|
|
|
const control = controlBuilder.buildPropertyControl(controlProps);
|
|
return control;
|
|
} else {
|
|
const ex: ControlCreationException = {
|
|
message:
|
|
"Control Builder not registered for control type " +
|
|
controlData.controlType,
|
|
};
|
|
throw ex;
|
|
}
|
|
}
|
|
|
|
static getControlTypes(): ControlType[] {
|
|
return Array.from(this.controlMap.keys());
|
|
}
|
|
}
|
|
|
|
export interface ControlCreationException {
|
|
message: string;
|
|
}
|
|
|
|
export default PropertyControlFactory;
|