2020-04-14 05:35:16 +00:00
|
|
|
import { getPropertyControlTypes } from "components/propertyControls";
|
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## Description
This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.
As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes
This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)
### Why is this needed?
This PR is needed because, for the Lodash optimization from
https://github.com/appsmithorg/appsmith/commit/7cbb12af886621256224be0c93e6a465dd710ad3,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.
However, just using `import type` in the current codebase will give you
this:
<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">
That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.
### Why enforce `import type`?
Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)
I’m doing this because I believe `import type` improves DX and makes
refactorings easier.
Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)
```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
It’s pretty hard, right?
What about now?
```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
Now, it’s clear that only `lodash` will be bundled.
This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.
This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.
## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
This was tested to not break the build.
### 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
- [ ] 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 11:41:47 +00:00
|
|
|
import type {
|
2021-07-26 05:50:46 +00:00
|
|
|
ValidationResponse,
|
|
|
|
|
ValidationTypes,
|
|
|
|
|
} from "constants/WidgetValidation";
|
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## Description
This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.
As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes
This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)
### Why is this needed?
This PR is needed because, for the Lodash optimization from
https://github.com/appsmithorg/appsmith/commit/7cbb12af886621256224be0c93e6a465dd710ad3,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.
However, just using `import type` in the current codebase will give you
this:
<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">
That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.
### Why enforce `import type`?
Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)
I’m doing this because I believe `import type` improves DX and makes
refactorings easier.
Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)
```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
It’s pretty hard, right?
What about now?
```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
Now, it’s clear that only `lodash` will be bundled.
This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.
This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.
## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
This was tested to not break the build.
### 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
- [ ] 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 11:41:47 +00:00
|
|
|
import type { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
|
|
|
|
|
import type { CodeEditorExpected } from "components/editorComponents/CodeEditor";
|
|
|
|
|
import type { UpdateWidgetPropertyPayload } from "actions/controlActions";
|
|
|
|
|
import type { AdditionalDynamicDataTree } from "utils/autocomplete/customTreeTypeDefCreator";
|
|
|
|
|
import type { Stylesheet } from "entities/AppTheming";
|
|
|
|
|
import type { ReduxActionType } from "@appsmith/constants/ReduxActionConstants";
|
2023-09-06 12:15:04 +00:00
|
|
|
import type { PropertyUpdates } from "WidgetProvider/constants";
|
feat: JSON Form widget (#8472)
* initial layout
* updated parser to support nested array
* array field rendering
* changes
* ts fix
* minor revert FormWidget
* modified schema structure
* select and switch fields
* added checkbox field
* added RadioGroupField
* partial DateField and defaults, typing refactoring
* added label and field type change
* minor ts changes
* changes
* modified widget/utils for nested panelConfig, modified schema to object approach
* array/object label support
* hide field configuration when children not present
* added tooltip
* field visibility option
* disabled state
* upgraded tslib, form initial values
* custom field configuration - add/hide/edit
* field configuration - label change
* return input when field configuration reaches max depth
* minor changes
* form - scroll, fixedfooter, enitity defn and other minior changes
* form title
* unregister on unmount
* fixes
* zero state
* fix field padding
* patched updating form values, removed linting warnings
* configured action buttons
* minor fix
* minor change
* property pane - sort fields in field configuration
* refactor include all properties
* checkbox properties
* date properties
* refactor typings and radio group properties
* switch, multselect, select, array, object properties
* minor changes
* default value
* ts fixes
* checkbox field properties implementation
* date field prop implementation
* switch field
* select field and fix deep nested meta properties
* multiselect implementation
* minor change
* input field implementation
* fix position jump on field type change
* initial accordian
* field state property and auto-complete of JSONFormComputeControl
* merge fixes
* renamed FormBuilder to JSONForm
* source data validation minor change
* custom field default value fix
* Editable keys for custom field
* minor fixes
* replaced useFieldArray with custom logic, added widget icon
* array and object accordian with border/background styling
* minor change
* disabled states for array and objects
* default value minor fix
* form level styles
* modified logic for isDisabled for array and object, added disabledWhenInvalid, exposed isValid to fieldState for text input, removed useDisableChildren
* added isValid for all field types
* fixed reset to default values
* debounce form values update
* minor change
* minor change
* fix crash - source data change multi-select to array, fix crash - change of options
* fix positioning
* detect date type in source data
* fix crash - when object is passed to regex input field
* fixed default sourceData path for fields
* accodion keep children mounted on collapse
* jest test for schemaParser
* widget/helper and useRegisterFieldInvalid test
* tests for property config helper and generatePanelPropertyConfig
* fix input field validation not appearing
* fix date field type detection
* rename data -> formData
* handle null/undefined field value change in sourceData
* added null/undefined as valid values for defaultValue text field
* auto detect email field
* set formData default value on initial load
* switch field inline positioning
* field margin fix for row direction
* select full width
* fiex date field default value - out of range
* fix any field type to array
* array default value logic change
* base cypress test changes
* initial json form render cy test
* key sanitization
* fix fieldState update logic
* required design, object/array background color, accordion changes, fix - add new custom field
* minor change
* cypress tests
* fix date formatted value, field state cypress test
* cypress - field properties test and fixes
* rename test file
* fix accessort change to blank value, cypress tests
* fix array field default value for modified accessor
* minor fix
* added animate loading
* fix empty state, add new custom field
* test data fix
* fix warnings
* fix timePrecision visibility
* button styling
* ported input v2
* fix jest tests
* fix cypress tests
* perf changes
* perf improvement
* added comments
* multiselect changes
* input field perf refactor
* array field, object field refactor performance
* checkbox field refactor
* refectored date, radio, select and switch
* fixes
* test fixes
* fixes
* minor fix
* rename field renderer
* remove tracked fieldRenderer field
* cypress test fixes
* cypress changes
* array default value fixes
* arrayfield passedDefaultValue
* auto enabled JS mode for few properties, reverted swith and date property controls
* cypress changes
* added widget sniping mode and fixed object passedDefaultValue
* multiselect v2
* select v2
* fix jest tests
* test fixes
* field limit
* rename field type dropdown texts
* field type changes fixes
* jest fixes
* loading state submit button
* default source data for new widget
* modify limit message
* multiseelct default value changes and cypress fix
* select default value
* keep default value intact on field type change
* TextTable cypress text fix
* review changes
* fixed footer changes
* collapse styles section by default
* fixed footer changes
* form modes
* custom field key rentention
* fixed footer fix in view mode
* non ascii characters
* fix meta merge in dataTreeWidget
* minor fixes
* rename useRegisterFieldInvalid.ts -> useRegisterFieldValidity.ts
* modified dependency injection into evaluated values
* refactored fixedfooter logic
* minor change
* accessor update
* minor change
* fixes
* QA fixes date field, scroll content
* fix phone number field, removed visiblity option from array item
* fix sourceData autocomplete
* reset logic
* fix multiselect reset
* form values hydration on widget drag
* code review changes
* reverted order of merge dataTreeWidget
* fixes
* added button titles, fixed hydration issue
* default value fixes
* upgraded react hook form, modified array-level/field-level default value logic
* fixed select validation
* added icon entity explorer, modified icon align control
* modify accessor validation for mongo db _id
* update email field regex
* review changes
* explicitly handle empty source data validation
2022-03-24 07:13:25 +00:00
|
|
|
|
2020-04-14 05:35:16 +00:00
|
|
|
const ControlTypes = getPropertyControlTypes();
|
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## Description
This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.
As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes
This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)
### Why is this needed?
This PR is needed because, for the Lodash optimization from
https://github.com/appsmithorg/appsmith/commit/7cbb12af886621256224be0c93e6a465dd710ad3,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.
However, just using `import type` in the current codebase will give you
this:
<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">
That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.
### Why enforce `import type`?
Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)
I’m doing this because I believe `import type` improves DX and makes
refactorings easier.
Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)
```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
It’s pretty hard, right?
What about now?
```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
Now, it’s clear that only `lodash` will be bundled.
This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.
This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.
## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
This was tested to not break the build.
### 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
- [ ] 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 11:41:47 +00:00
|
|
|
export type ControlType = (typeof ControlTypes)[keyof typeof ControlTypes];
|
2021-02-16 10:29:08 +00:00
|
|
|
|
|
|
|
|
export type PropertyPaneSectionConfig = {
|
2022-12-11 14:42:32 +00:00
|
|
|
sectionName: string;
|
2021-02-16 10:29:08 +00:00
|
|
|
id?: string;
|
|
|
|
|
children: PropertyPaneConfig[];
|
2022-12-11 14:42:32 +00:00
|
|
|
collapsible?: boolean; // Indicates whether the section could be collapsed or not
|
|
|
|
|
childrenId?: string; // A unique id generated by combining the ids of all the children
|
2022-09-01 09:38:41 +00:00
|
|
|
hidden?: (props: any, propertyPath: string) => boolean;
|
feat: JSON Form widget (#8472)
* initial layout
* updated parser to support nested array
* array field rendering
* changes
* ts fix
* minor revert FormWidget
* modified schema structure
* select and switch fields
* added checkbox field
* added RadioGroupField
* partial DateField and defaults, typing refactoring
* added label and field type change
* minor ts changes
* changes
* modified widget/utils for nested panelConfig, modified schema to object approach
* array/object label support
* hide field configuration when children not present
* added tooltip
* field visibility option
* disabled state
* upgraded tslib, form initial values
* custom field configuration - add/hide/edit
* field configuration - label change
* return input when field configuration reaches max depth
* minor changes
* form - scroll, fixedfooter, enitity defn and other minior changes
* form title
* unregister on unmount
* fixes
* zero state
* fix field padding
* patched updating form values, removed linting warnings
* configured action buttons
* minor fix
* minor change
* property pane - sort fields in field configuration
* refactor include all properties
* checkbox properties
* date properties
* refactor typings and radio group properties
* switch, multselect, select, array, object properties
* minor changes
* default value
* ts fixes
* checkbox field properties implementation
* date field prop implementation
* switch field
* select field and fix deep nested meta properties
* multiselect implementation
* minor change
* input field implementation
* fix position jump on field type change
* initial accordian
* field state property and auto-complete of JSONFormComputeControl
* merge fixes
* renamed FormBuilder to JSONForm
* source data validation minor change
* custom field default value fix
* Editable keys for custom field
* minor fixes
* replaced useFieldArray with custom logic, added widget icon
* array and object accordian with border/background styling
* minor change
* disabled states for array and objects
* default value minor fix
* form level styles
* modified logic for isDisabled for array and object, added disabledWhenInvalid, exposed isValid to fieldState for text input, removed useDisableChildren
* added isValid for all field types
* fixed reset to default values
* debounce form values update
* minor change
* minor change
* fix crash - source data change multi-select to array, fix crash - change of options
* fix positioning
* detect date type in source data
* fix crash - when object is passed to regex input field
* fixed default sourceData path for fields
* accodion keep children mounted on collapse
* jest test for schemaParser
* widget/helper and useRegisterFieldInvalid test
* tests for property config helper and generatePanelPropertyConfig
* fix input field validation not appearing
* fix date field type detection
* rename data -> formData
* handle null/undefined field value change in sourceData
* added null/undefined as valid values for defaultValue text field
* auto detect email field
* set formData default value on initial load
* switch field inline positioning
* field margin fix for row direction
* select full width
* fiex date field default value - out of range
* fix any field type to array
* array default value logic change
* base cypress test changes
* initial json form render cy test
* key sanitization
* fix fieldState update logic
* required design, object/array background color, accordion changes, fix - add new custom field
* minor change
* cypress tests
* fix date formatted value, field state cypress test
* cypress - field properties test and fixes
* rename test file
* fix accessort change to blank value, cypress tests
* fix array field default value for modified accessor
* minor fix
* added animate loading
* fix empty state, add new custom field
* test data fix
* fix warnings
* fix timePrecision visibility
* button styling
* ported input v2
* fix jest tests
* fix cypress tests
* perf changes
* perf improvement
* added comments
* multiselect changes
* input field perf refactor
* array field, object field refactor performance
* checkbox field refactor
* refectored date, radio, select and switch
* fixes
* test fixes
* fixes
* minor fix
* rename field renderer
* remove tracked fieldRenderer field
* cypress test fixes
* cypress changes
* array default value fixes
* arrayfield passedDefaultValue
* auto enabled JS mode for few properties, reverted swith and date property controls
* cypress changes
* added widget sniping mode and fixed object passedDefaultValue
* multiselect v2
* select v2
* fix jest tests
* test fixes
* field limit
* rename field type dropdown texts
* field type changes fixes
* jest fixes
* loading state submit button
* default source data for new widget
* modify limit message
* multiseelct default value changes and cypress fix
* select default value
* keep default value intact on field type change
* TextTable cypress text fix
* review changes
* fixed footer changes
* collapse styles section by default
* fixed footer changes
* form modes
* custom field key rentention
* fixed footer fix in view mode
* non ascii characters
* fix meta merge in dataTreeWidget
* minor fixes
* rename useRegisterFieldInvalid.ts -> useRegisterFieldValidity.ts
* modified dependency injection into evaluated values
* refactored fixedfooter logic
* minor change
* accessor update
* minor change
* fixes
* QA fixes date field, scroll content
* fix phone number field, removed visiblity option from array item
* fix sourceData autocomplete
* reset logic
* fix multiselect reset
* form values hydration on widget drag
* code review changes
* reverted order of merge dataTreeWidget
* fixes
* added button titles, fixed hydration issue
* default value fixes
* upgraded react hook form, modified array-level/field-level default value logic
* fixed select validation
* added icon entity explorer, modified icon align control
* modify accessor validation for mongo db _id
* update email field regex
* review changes
* explicitly handle empty source data validation
2022-03-24 07:13:25 +00:00
|
|
|
isDefaultOpen?: boolean;
|
2021-02-16 10:29:08 +00:00
|
|
|
propertySectionPath?: string;
|
2022-12-11 14:42:32 +00:00
|
|
|
tag?: string; // Used to show a tag right after the section name (only in the search results)
|
2021-02-16 10:29:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export type PanelConfig = {
|
|
|
|
|
editableTitle: boolean;
|
|
|
|
|
titlePropertyName: string;
|
|
|
|
|
panelIdPropertyName: string;
|
2022-09-29 05:24:49 +00:00
|
|
|
children?: PropertyPaneConfig[];
|
2022-08-04 05:31:05 +00:00
|
|
|
contentChildren?: PropertyPaneConfig[];
|
|
|
|
|
styleChildren?: PropertyPaneConfig[];
|
2022-12-11 14:42:32 +00:00
|
|
|
searchConfig?: PropertyPaneConfig[]; // A combination of contentChildren and contentChildren which will be used to display search results
|
2021-02-16 10:29:08 +00:00
|
|
|
updateHook: (
|
|
|
|
|
props: any,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: any,
|
2023-07-26 05:38:11 +00:00
|
|
|
) => Array<PropertyUpdates> | undefined;
|
2021-02-16 10:29:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export type PropertyPaneControlConfig = {
|
|
|
|
|
id?: string;
|
2022-12-11 14:42:32 +00:00
|
|
|
label: string;
|
2021-02-16 10:29:08 +00:00
|
|
|
propertyName: string;
|
2022-09-21 12:59:17 +00:00
|
|
|
// Serves in the tooltip
|
2021-02-16 10:29:08 +00:00
|
|
|
helpText?: string;
|
2022-09-21 12:59:17 +00:00
|
|
|
//Dynamic text serves below the property pane inputs
|
2022-09-29 05:24:49 +00:00
|
|
|
helperText?: ((props: any) => string) | string;
|
2021-02-16 10:29:08 +00:00
|
|
|
isJSConvertible?: boolean;
|
|
|
|
|
customJSControl?: string;
|
|
|
|
|
controlType: ControlType;
|
|
|
|
|
validationMessage?: string;
|
|
|
|
|
dataTreePath?: string;
|
|
|
|
|
children?: PropertyPaneConfig[];
|
|
|
|
|
panelConfig?: PanelConfig;
|
2021-09-21 07:55:56 +00:00
|
|
|
updateRelatedWidgetProperties?: (
|
|
|
|
|
propertyName: string,
|
|
|
|
|
propertyValue: any,
|
|
|
|
|
props: any,
|
|
|
|
|
) => UpdateWidgetPropertyPayload[];
|
2021-02-16 10:29:08 +00:00
|
|
|
updateHook?: (
|
|
|
|
|
props: any,
|
|
|
|
|
propertyName: string,
|
|
|
|
|
propertyValue: any,
|
2023-07-26 05:38:11 +00:00
|
|
|
) => Array<PropertyUpdates> | undefined;
|
2022-09-01 09:38:41 +00:00
|
|
|
hidden?: (props: any, propertyPath: string) => boolean;
|
2022-05-04 09:45:57 +00:00
|
|
|
invisible?: boolean;
|
2021-02-16 10:29:08 +00:00
|
|
|
isBindProperty: boolean;
|
|
|
|
|
isTriggerProperty: boolean;
|
2021-07-26 05:50:46 +00:00
|
|
|
validation?: ValidationConfig;
|
2021-03-24 12:12:24 +00:00
|
|
|
useValidationMessage?: boolean;
|
2023-02-14 16:07:31 +00:00
|
|
|
additionalAutoComplete?: (props: any) => AdditionalDynamicDataTree;
|
2021-06-01 04:59:45 +00:00
|
|
|
evaluationSubstitutionType?: EvaluationSubstitutionType;
|
2021-08-02 13:06:22 +00:00
|
|
|
dependencies?: string[];
|
feat: JSON Form widget (#8472)
* initial layout
* updated parser to support nested array
* array field rendering
* changes
* ts fix
* minor revert FormWidget
* modified schema structure
* select and switch fields
* added checkbox field
* added RadioGroupField
* partial DateField and defaults, typing refactoring
* added label and field type change
* minor ts changes
* changes
* modified widget/utils for nested panelConfig, modified schema to object approach
* array/object label support
* hide field configuration when children not present
* added tooltip
* field visibility option
* disabled state
* upgraded tslib, form initial values
* custom field configuration - add/hide/edit
* field configuration - label change
* return input when field configuration reaches max depth
* minor changes
* form - scroll, fixedfooter, enitity defn and other minior changes
* form title
* unregister on unmount
* fixes
* zero state
* fix field padding
* patched updating form values, removed linting warnings
* configured action buttons
* minor fix
* minor change
* property pane - sort fields in field configuration
* refactor include all properties
* checkbox properties
* date properties
* refactor typings and radio group properties
* switch, multselect, select, array, object properties
* minor changes
* default value
* ts fixes
* checkbox field properties implementation
* date field prop implementation
* switch field
* select field and fix deep nested meta properties
* multiselect implementation
* minor change
* input field implementation
* fix position jump on field type change
* initial accordian
* field state property and auto-complete of JSONFormComputeControl
* merge fixes
* renamed FormBuilder to JSONForm
* source data validation minor change
* custom field default value fix
* Editable keys for custom field
* minor fixes
* replaced useFieldArray with custom logic, added widget icon
* array and object accordian with border/background styling
* minor change
* disabled states for array and objects
* default value minor fix
* form level styles
* modified logic for isDisabled for array and object, added disabledWhenInvalid, exposed isValid to fieldState for text input, removed useDisableChildren
* added isValid for all field types
* fixed reset to default values
* debounce form values update
* minor change
* minor change
* fix crash - source data change multi-select to array, fix crash - change of options
* fix positioning
* detect date type in source data
* fix crash - when object is passed to regex input field
* fixed default sourceData path for fields
* accodion keep children mounted on collapse
* jest test for schemaParser
* widget/helper and useRegisterFieldInvalid test
* tests for property config helper and generatePanelPropertyConfig
* fix input field validation not appearing
* fix date field type detection
* rename data -> formData
* handle null/undefined field value change in sourceData
* added null/undefined as valid values for defaultValue text field
* auto detect email field
* set formData default value on initial load
* switch field inline positioning
* field margin fix for row direction
* select full width
* fiex date field default value - out of range
* fix any field type to array
* array default value logic change
* base cypress test changes
* initial json form render cy test
* key sanitization
* fix fieldState update logic
* required design, object/array background color, accordion changes, fix - add new custom field
* minor change
* cypress tests
* fix date formatted value, field state cypress test
* cypress - field properties test and fixes
* rename test file
* fix accessort change to blank value, cypress tests
* fix array field default value for modified accessor
* minor fix
* added animate loading
* fix empty state, add new custom field
* test data fix
* fix warnings
* fix timePrecision visibility
* button styling
* ported input v2
* fix jest tests
* fix cypress tests
* perf changes
* perf improvement
* added comments
* multiselect changes
* input field perf refactor
* array field, object field refactor performance
* checkbox field refactor
* refectored date, radio, select and switch
* fixes
* test fixes
* fixes
* minor fix
* rename field renderer
* remove tracked fieldRenderer field
* cypress test fixes
* cypress changes
* array default value fixes
* arrayfield passedDefaultValue
* auto enabled JS mode for few properties, reverted swith and date property controls
* cypress changes
* added widget sniping mode and fixed object passedDefaultValue
* multiselect v2
* select v2
* fix jest tests
* test fixes
* field limit
* rename field type dropdown texts
* field type changes fixes
* jest fixes
* loading state submit button
* default source data for new widget
* modify limit message
* multiseelct default value changes and cypress fix
* select default value
* keep default value intact on field type change
* TextTable cypress text fix
* review changes
* fixed footer changes
* collapse styles section by default
* fixed footer changes
* form modes
* custom field key rentention
* fixed footer fix in view mode
* non ascii characters
* fix meta merge in dataTreeWidget
* minor fixes
* rename useRegisterFieldInvalid.ts -> useRegisterFieldValidity.ts
* modified dependency injection into evaluated values
* refactored fixedfooter logic
* minor change
* accessor update
* minor change
* fixes
* QA fixes date field, scroll content
* fix phone number field, removed visiblity option from array item
* fix sourceData autocomplete
* reset logic
* fix multiselect reset
* form values hydration on widget drag
* code review changes
* reverted order of merge dataTreeWidget
* fixes
* added button titles, fixed hydration issue
* default value fixes
* upgraded react hook form, modified array-level/field-level default value logic
* fixed select validation
* added icon entity explorer, modified icon align control
* modify accessor validation for mongo db _id
* update email field regex
* review changes
* explicitly handle empty source data validation
2022-03-24 07:13:25 +00:00
|
|
|
evaluatedDependencies?: string[]; // dependencies to be picked from the __evaluated__ object
|
2021-08-04 05:34:44 +00:00
|
|
|
expected?: CodeEditorExpected;
|
2022-05-04 09:45:57 +00:00
|
|
|
getStylesheetValue?: (
|
|
|
|
|
props: any,
|
|
|
|
|
propertyPath: string,
|
2022-11-28 04:44:31 +00:00
|
|
|
stylesheet?: Stylesheet,
|
|
|
|
|
) => Stylesheet[string];
|
2022-04-22 09:44:22 +00:00
|
|
|
// TODO(abhinav): To fix this, rename the options property of the controls which use this
|
|
|
|
|
// Alternatively, create a new structure
|
|
|
|
|
options?: any;
|
2022-11-23 09:48:23 +00:00
|
|
|
// The following should ideally be used internally
|
|
|
|
|
postUpdateAction?: ReduxActionType;
|
|
|
|
|
onBlur?: () => void;
|
|
|
|
|
onFocus?: () => void;
|
2022-12-10 18:29:36 +00:00
|
|
|
isPanelProperty?: boolean;
|
2022-11-23 09:48:23 +00:00
|
|
|
// Numeric Input Control
|
|
|
|
|
min?: number;
|
2023-07-20 14:03:46 +00:00
|
|
|
// Switch mode ( JS -> Text )
|
|
|
|
|
shouldSwitchToNormalMode?: (
|
|
|
|
|
isDynamic: boolean,
|
|
|
|
|
isToggleDisabled: boolean,
|
|
|
|
|
triggerFlag?: boolean,
|
|
|
|
|
) => boolean;
|
2021-07-26 05:50:46 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type ValidationConfigParams = {
|
|
|
|
|
min?: number; // min allowed for a number
|
|
|
|
|
max?: number; // max allowed for a number
|
|
|
|
|
natural?: boolean; // is a positive integer
|
|
|
|
|
default?: unknown; // default for any type
|
2021-08-03 06:38:01 +00:00
|
|
|
unique?: boolean | string[]; // unique in an array (string if a particular path is unique)
|
2021-07-26 05:50:46 +00:00
|
|
|
required?: boolean; // required type
|
2022-02-02 14:15:07 +00:00
|
|
|
// required is now used to check if value is an empty string.
|
|
|
|
|
requiredKey?: boolean; //required key
|
2021-07-26 05:50:46 +00:00
|
|
|
regex?: RegExp; // validator regex for text type
|
|
|
|
|
allowedKeys?: Array<{
|
|
|
|
|
// Allowed keys in an object type
|
|
|
|
|
name: string;
|
|
|
|
|
type: ValidationTypes;
|
|
|
|
|
params?: ValidationConfigParams;
|
|
|
|
|
}>;
|
|
|
|
|
allowedValues?: unknown[]; // Allowed values in a string and array type
|
|
|
|
|
children?: ValidationConfig; // Children configurations in an ARRAY or OBJECT_ARRAY type
|
|
|
|
|
fn?: (
|
|
|
|
|
value: unknown,
|
|
|
|
|
props: any,
|
|
|
|
|
_?: any,
|
|
|
|
|
moment?: any,
|
|
|
|
|
) => ValidationResponse; // Function in a FUNCTION type
|
|
|
|
|
fnString?: string; // AUTO GENERATED, SHOULD NOT BE SET BY WIDGET DEVELOPER
|
2021-08-04 05:34:44 +00:00
|
|
|
expected?: CodeEditorExpected; // FUNCTION type expected type and example
|
2021-09-23 12:42:34 +00:00
|
|
|
strict?: boolean; //for strict string validation of TEXT type
|
|
|
|
|
ignoreCase?: boolean; //to ignore the case of key
|
2022-12-01 04:55:57 +00:00
|
|
|
type?: ValidationTypes; // Used for ValidationType.ARRAY_OF_TYPE_OR_TYPE to define sub type
|
2023-07-25 04:56:33 +00:00
|
|
|
types?: ValidationConfig[]; // Used for ValidationType.UNION to define sub type
|
2022-12-01 04:55:57 +00:00
|
|
|
params?: ValidationConfigParams; // Used for ValidationType.ARRAY_OF_TYPE_OR_TYPE to define sub type params
|
2022-11-01 12:47:07 +00:00
|
|
|
passThroughOnZero?: boolean; // Used for ValidationType.NUMBER to allow 0 to be passed through. Deafults value is true
|
2022-03-12 05:42:56 +00:00
|
|
|
limitLineBreaks?: boolean; // Used for ValidationType.TEXT to limit line breaks in a large json object.
|
2023-07-25 04:56:33 +00:00
|
|
|
defaultValue?: unknown; // used for ValidationType.UNION when none the union type validation is success
|
|
|
|
|
defaultErrorMessage?: string; // used for ValidationType.UNION when none the union type validation is success
|
2021-07-26 05:50:46 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export type ValidationConfig = {
|
|
|
|
|
type: ValidationTypes;
|
|
|
|
|
params?: ValidationConfigParams;
|
feat: Add validation dependency (#17138)
## Problem
**Why do we need validation dependency?**
- When on change of particular property value if other property needs revalidation then current evaluation architecture do not support such validation run.
https://www.notion.so/appsmith/Validation-Dependency-d7623a5625bd4aa187a3ae2372d3ac07
**Issues to resolve**
Fixes #15303
Fixes #17159
Fixes https://github.com/appsmithorg/appsmith/issues/16170
## Solution
**New Validation Flow**
validate a property after its evaluation and check if there are other properties that need to revalidate on a change of this value.
- if yes run validation for those properties.
How does validation dependency get created?
- every widget’s property will keep static `dependencies` array in `validation` property like shown below.
```jsx
{
validation: {
type: ValidationTypes.FUNCTION,
params: {
fn: defaultOptionValueValidation,
expected: {
type: 'value1 or { "label": "label1", "value": "value1" }',
example: `value1 | { "label": "label1", "value": "value1" }`,
autocompleteDataType: AutocompleteDataType.STRING,
},
dependentPaths: ["serverSideFiltering", "options"],
},
dependencies: ["serverSideFiltering", "options"],
}
}
```
This `dependentPaths` array will be used to form validationDependencyMap.
#### Changes
- The code editor component wasn't re-rendering for a few cases. Due to this updates were not shown until the component state was changed.
- In CreateFirstTree, After evaluateTree we run `validateTree`. In `validateTree`, we validate all the properties in `validationPaths`. Here, if the errors were resolved on revalidation, it didn't reset the validation errors stored in data tree before. Now, this PR adds the reset logic.
- Created `validationDependencyMap` to re-validate properties on change of the property their validation depends upon.
- After each property evaluates in `updateDataTree`, we check if re-validation is needed, if yes then we re-validate dependent properties.
## Type of change
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
## How Has This Been Tested?
- jest test
**Test Plan**
https://github.com/appsmithorg/TestSmith/issues/2078
## Checklist:
- [x] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] 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
2022-10-21 05:20:57 +00:00
|
|
|
dependentPaths?: string[];
|
2021-02-16 10:29:08 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export type PropertyPaneConfig =
|
|
|
|
|
| PropertyPaneSectionConfig
|
|
|
|
|
| PropertyPaneControlConfig;
|
2022-01-27 09:50:05 +00:00
|
|
|
|
|
|
|
|
export interface ActionValidationConfigMap {
|
2023-02-14 16:07:31 +00:00
|
|
|
[configProperty: string]: ValidationConfig;
|
2022-01-27 09:50:05 +00:00
|
|
|
}
|