2022-07-14 07:02:35 +00:00
|
|
|
import { Alignment } from "@blueprintjs/core";
|
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 { ColumnProperties } from "../component/Constants";
|
2023-04-11 14:23:14 +00:00
|
|
|
import { StickyType } from "../component/Constants";
|
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 { CellAlignmentTypes } from "../component/Constants";
|
|
|
|
|
import type { TableWidgetProps } from "../constants";
|
|
|
|
|
import { ColumnTypes, InlineEditingSaveOptions } from "../constants";
|
2023-02-15 11:42:46 +00:00
|
|
|
import _, { findIndex, get, isBoolean } from "lodash";
|
2022-07-14 07:02:35 +00:00
|
|
|
import { Colors } from "constants/Colors";
|
|
|
|
|
import {
|
|
|
|
|
combineDynamicBindings,
|
|
|
|
|
getDynamicBindings,
|
|
|
|
|
} from "utils/DynamicBindingUtils";
|
2023-02-15 11:42:46 +00:00
|
|
|
import {
|
|
|
|
|
createEditActionColumn,
|
|
|
|
|
generateNewColumnOrderFromStickyValue,
|
|
|
|
|
} from "./utilities";
|
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 { PropertyHookUpdates } from "constants/PropertyControlConstants";
|
2022-12-30 10:52:11 +00:00
|
|
|
import { MenuItemsSource } from "widgets/MenuButtonWidget/constants";
|
2022-07-14 07:02:35 +00:00
|
|
|
|
|
|
|
|
export function totalRecordsCountValidation(
|
|
|
|
|
value: unknown,
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
_?: any,
|
|
|
|
|
) {
|
|
|
|
|
const ERROR_MESSAGE = "This value must be a number";
|
|
|
|
|
const defaultValue = 0;
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Undefined, null and empty string
|
|
|
|
|
*/
|
|
|
|
|
if (_.isNil(value) || value === "") {
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: defaultValue,
|
2023-05-04 05:08:43 +00:00
|
|
|
messages: [],
|
2022-07-14 07:02:35 +00:00
|
|
|
};
|
|
|
|
|
} else if (
|
|
|
|
|
(!_.isFinite(value) && !_.isString(value)) ||
|
|
|
|
|
(_.isString(value) && !/^\d+\.?\d*$/.test(value as string))
|
|
|
|
|
) {
|
|
|
|
|
/*
|
|
|
|
|
* objects, array, string (but not cast-able to number type)
|
|
|
|
|
*/
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: defaultValue,
|
2023-05-04 05:08:43 +00:00
|
|
|
messages: [{ name: "ValidationError", message: ERROR_MESSAGE }],
|
2022-07-14 07:02:35 +00:00
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
/*
|
|
|
|
|
* Number or number type cast-able
|
|
|
|
|
*/
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: Number(value),
|
2023-05-04 05:08:43 +00:00
|
|
|
messages: [],
|
2022-07-14 07:02:35 +00:00
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function uniqueColumnNameValidation(
|
|
|
|
|
value: unknown,
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
_?: any,
|
|
|
|
|
) {
|
|
|
|
|
const tableColumnLabels = _.map(value, "label");
|
|
|
|
|
const duplicates = tableColumnLabels.find(
|
|
|
|
|
(val: string, index: number, arr: string[]) => arr.indexOf(val) !== index,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (value && !!duplicates) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: value,
|
|
|
|
|
messages: ["Column names should be unique."],
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: value,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function uniqueColumnAliasValidation(
|
|
|
|
|
value: unknown,
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
_?: any,
|
|
|
|
|
) {
|
|
|
|
|
const aliases = _.map(Object.values(props.primaryColumns), "alias");
|
|
|
|
|
const duplicates = aliases.find(
|
|
|
|
|
(val: string, index: number, arr: string[]) => arr.indexOf(val) !== index,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (!value) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: value,
|
|
|
|
|
messages: ["Property name should not be empty."],
|
|
|
|
|
};
|
|
|
|
|
} else if (value && !!duplicates) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: value,
|
|
|
|
|
messages: ["Property names should be unique."],
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: value,
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Hook to update all column styles, when global table styles are updated.
|
|
|
|
|
*/
|
|
|
|
|
export const updateColumnStyles = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: any,
|
|
|
|
|
): Array<{ propertyPath: string; propertyValue: any }> | undefined => {
|
|
|
|
|
const { primaryColumns = {} } = props;
|
|
|
|
|
const propertiesToUpdate: Array<{
|
|
|
|
|
propertyPath: string;
|
|
|
|
|
propertyValue: any;
|
|
|
|
|
}> = [];
|
|
|
|
|
const styleName = propertyPath.split(".").shift();
|
|
|
|
|
|
|
|
|
|
// TODO: Figure out how propertyPaths will work when a nested property control is updating another property
|
|
|
|
|
if (primaryColumns && styleName) {
|
|
|
|
|
Object.values(primaryColumns).map((column: ColumnProperties) => {
|
|
|
|
|
const propertyPath = `primaryColumns.${column.id}.${styleName}`;
|
|
|
|
|
|
|
|
|
|
const notADynamicBinding =
|
|
|
|
|
!props.dynamicBindingPathList ||
|
|
|
|
|
props.dynamicBindingPathList.findIndex(
|
|
|
|
|
(item) => item.key === propertyPath,
|
|
|
|
|
) === -1;
|
|
|
|
|
|
|
|
|
|
if (notADynamicBinding) {
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath,
|
|
|
|
|
propertyValue,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (propertiesToUpdate.length > 0) {
|
|
|
|
|
return propertiesToUpdate;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Select default Icon Alignment when an icon is chosen
|
|
|
|
|
export function updateIconAlignment(
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: string,
|
|
|
|
|
) {
|
|
|
|
|
const property = getBasePropertyPath(propertyPath);
|
|
|
|
|
const iconAlign = get(props, `${property}.iconAlign`, "");
|
|
|
|
|
const propertiesToUpdate = [{ propertyPath, propertyValue }];
|
|
|
|
|
|
|
|
|
|
if (iconAlign) {
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: "iconAlign",
|
|
|
|
|
propertyValue: Alignment.LEFT,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return propertiesToUpdate;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Hook that updates columns order when a new column
|
|
|
|
|
* gets added to the primaryColumns
|
|
|
|
|
*/
|
|
|
|
|
export const updateColumnOrderHook = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: any,
|
|
|
|
|
): Array<{ propertyPath: string; propertyValue: any }> | undefined => {
|
|
|
|
|
const propertiesToUpdate: Array<{
|
|
|
|
|
propertyPath: string;
|
|
|
|
|
propertyValue: any;
|
|
|
|
|
}> = [];
|
|
|
|
|
if (props && propertyValue && /^primaryColumns\.\w+$/.test(propertyPath)) {
|
2023-02-15 11:42:46 +00:00
|
|
|
const newColumnOrder = [...(props.columnOrder || [])];
|
|
|
|
|
|
|
|
|
|
const rightColumnIndex = findIndex(
|
|
|
|
|
newColumnOrder,
|
2023-04-11 14:23:14 +00:00
|
|
|
(colName: string) =>
|
|
|
|
|
props.primaryColumns[colName]?.sticky === StickyType.RIGHT,
|
2023-02-15 11:42:46 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (rightColumnIndex !== -1) {
|
|
|
|
|
newColumnOrder.splice(rightColumnIndex, 0, propertyValue.id);
|
|
|
|
|
} else {
|
|
|
|
|
newColumnOrder.splice(newColumnOrder.length, 0, propertyValue.id);
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-14 07:02:35 +00:00
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: "columnOrder",
|
|
|
|
|
propertyValue: newColumnOrder,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const newId = propertyValue.id;
|
|
|
|
|
if (newId) {
|
|
|
|
|
// sets default value for some properties
|
|
|
|
|
propertyValue.labelColor = Colors.WHITE;
|
|
|
|
|
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: `primaryColumns.${newId}`,
|
|
|
|
|
propertyValue,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (propertiesToUpdate.length > 0) {
|
|
|
|
|
return propertiesToUpdate;
|
|
|
|
|
} else {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const EDITABLITY_PATH_REGEX = /^primaryColumns\.(\w+)\.isEditable$/;
|
|
|
|
|
|
|
|
|
|
function isMatchingEditablePath(propertyPath: string) {
|
|
|
|
|
return (
|
|
|
|
|
EDITABLITY_PATH_REGEX.test(propertyPath) ||
|
|
|
|
|
CELL_EDITABLITY_PATH_REGEX.test(propertyPath)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const updateInlineEditingOptionDropdownVisibilityHook = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: any,
|
|
|
|
|
): Array<PropertyHookUpdates> | undefined => {
|
|
|
|
|
let propertiesToUpdate = [];
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
props &&
|
|
|
|
|
!props.showInlineEditingOptionDropdown &&
|
|
|
|
|
propertyValue &&
|
|
|
|
|
isMatchingEditablePath(propertyPath)
|
|
|
|
|
) {
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: `showInlineEditingOptionDropdown`,
|
|
|
|
|
propertyValue: true,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
props &&
|
|
|
|
|
isMatchingEditablePath(propertyPath) &&
|
|
|
|
|
props.inlineEditingSaveOption === InlineEditingSaveOptions.ROW_LEVEL &&
|
|
|
|
|
isBoolean(propertyValue)
|
|
|
|
|
) {
|
|
|
|
|
if (propertyValue) {
|
|
|
|
|
const editActionsColumn = Object.values(props.primaryColumns).find(
|
|
|
|
|
(column) => column.columnType === ColumnTypes.EDIT_ACTIONS,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (!editActionsColumn) {
|
|
|
|
|
propertiesToUpdate = [
|
|
|
|
|
...propertiesToUpdate,
|
|
|
|
|
...createEditActionColumn(props),
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
const regex = /^primaryColumns\.(\w+)\.(\w+)$/;
|
|
|
|
|
const columnIdMatcher = propertyPath.match(regex);
|
|
|
|
|
const columnId = columnIdMatcher && columnIdMatcher[1];
|
|
|
|
|
const isAtleastOneColumnEditablePresent = Object.values(
|
|
|
|
|
props.primaryColumns,
|
|
|
|
|
).some((column) => column.id !== columnId && column.isEditable);
|
|
|
|
|
|
|
|
|
|
if (!isAtleastOneColumnEditablePresent) {
|
|
|
|
|
const columnsArray = Object.values(props.primaryColumns);
|
|
|
|
|
const edtiActionColumn = columnsArray.find(
|
|
|
|
|
(column) => column.columnType === ColumnTypes.EDIT_ACTIONS,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (edtiActionColumn && edtiActionColumn.id) {
|
|
|
|
|
const newColumnOrder = _.difference(props.columnOrder, [
|
|
|
|
|
edtiActionColumn.id,
|
|
|
|
|
]);
|
|
|
|
|
propertiesToUpdate = [
|
|
|
|
|
...propertiesToUpdate,
|
|
|
|
|
{
|
|
|
|
|
propertyPath: `primaryColumns.${edtiActionColumn.id}`,
|
|
|
|
|
shouldDeleteProperty: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
propertyPath: "columnOrder",
|
|
|
|
|
propertyValue: newColumnOrder,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (propertiesToUpdate.length) {
|
|
|
|
|
return propertiesToUpdate;
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const CELL_EDITABLITY_PATH_REGEX = /^primaryColumns\.(\w+)\.isCellEditable$/;
|
2023-02-15 11:42:46 +00:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Hook that updates frozen column's old indices and also adds columns to the frozen positions.
|
|
|
|
|
*/
|
|
|
|
|
export const updateColumnOrderWhenFrozen = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: string,
|
|
|
|
|
) => {
|
|
|
|
|
if (props && props.columnOrder) {
|
|
|
|
|
const newColumnOrder = generateNewColumnOrderFromStickyValue(
|
|
|
|
|
props.primaryColumns,
|
|
|
|
|
props.columnOrder,
|
|
|
|
|
propertyPath.split(".")[1],
|
|
|
|
|
propertyValue,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
propertyPath: "columnOrder",
|
|
|
|
|
propertyValue: newColumnOrder,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
};
|
2022-07-14 07:02:35 +00:00
|
|
|
/*
|
|
|
|
|
* Hook that updates column level editability when cell level editability is
|
|
|
|
|
* updaed.
|
|
|
|
|
*/
|
|
|
|
|
export const updateColumnLevelEditability = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: any,
|
|
|
|
|
): Array<{ propertyPath: string; propertyValue: any }> | undefined => {
|
|
|
|
|
if (
|
|
|
|
|
props &&
|
|
|
|
|
CELL_EDITABLITY_PATH_REGEX.test(propertyPath) &&
|
|
|
|
|
isBoolean(propertyValue)
|
|
|
|
|
) {
|
|
|
|
|
const match = CELL_EDITABLITY_PATH_REGEX.exec(propertyPath) || [];
|
|
|
|
|
const columnIdHash = match[1];
|
|
|
|
|
|
|
|
|
|
if (columnIdHash) {
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
propertyPath: `primaryColumns.${columnIdHash}.isEditable`,
|
|
|
|
|
propertyValue: propertyValue,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
} else {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Gets the base property path excluding the current property.
|
|
|
|
|
* For example, for `primaryColumns[5].computedValue` it will return
|
|
|
|
|
* `primaryColumns[5]`
|
|
|
|
|
*/
|
|
|
|
|
export const getBasePropertyPath = (
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
): string | undefined => {
|
|
|
|
|
const propertyPathRegex = /^(.*)\.\w+$/g;
|
|
|
|
|
const matches = [...propertyPath.matchAll(propertyPathRegex)][0];
|
|
|
|
|
if (matches && _.isArray(matches) && matches.length === 2) {
|
|
|
|
|
return matches[1];
|
|
|
|
|
} else {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Function to check if column should be hidden, based on
|
|
|
|
|
* the given columnTypes
|
|
|
|
|
*/
|
|
|
|
|
export const hideByColumnType = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
columnTypes: ColumnTypes[],
|
|
|
|
|
shouldUsePropertyPath?: boolean,
|
|
|
|
|
) => {
|
|
|
|
|
let baseProperty;
|
|
|
|
|
|
|
|
|
|
if (shouldUsePropertyPath) {
|
|
|
|
|
baseProperty = propertyPath;
|
|
|
|
|
} else {
|
|
|
|
|
baseProperty = getBasePropertyPath(propertyPath);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const columnType = get(props, `${baseProperty}.columnType`, "");
|
|
|
|
|
return !columnTypes.includes(columnType);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Function to check if column should be shown, based on
|
|
|
|
|
* the given columnTypes
|
|
|
|
|
*/
|
|
|
|
|
export const showByColumnType = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
columnTypes: ColumnTypes[],
|
|
|
|
|
shouldUsePropertyPath?: boolean,
|
|
|
|
|
) => {
|
|
|
|
|
let baseProperty;
|
|
|
|
|
|
|
|
|
|
if (shouldUsePropertyPath) {
|
|
|
|
|
baseProperty = propertyPath;
|
|
|
|
|
} else {
|
|
|
|
|
baseProperty = getBasePropertyPath(propertyPath);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const columnType = get(props, `${baseProperty}.columnType`, "");
|
|
|
|
|
return columnTypes.includes(columnType);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const SelectColumnOptionsValidations = (
|
|
|
|
|
value: unknown,
|
|
|
|
|
props: any,
|
|
|
|
|
_?: any,
|
|
|
|
|
) => {
|
|
|
|
|
let isValid = true;
|
|
|
|
|
let parsed = value;
|
|
|
|
|
let message = "";
|
|
|
|
|
const expectedMessage = "value should be an array of string";
|
|
|
|
|
|
|
|
|
|
if (typeof value === "string" && value.trim() !== "") {
|
|
|
|
|
/*
|
|
|
|
|
* when value is a string
|
|
|
|
|
*/
|
|
|
|
|
try {
|
|
|
|
|
/*
|
|
|
|
|
* when the value is an array of string
|
|
|
|
|
*/
|
|
|
|
|
value = JSON.parse(value);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
/*
|
|
|
|
|
* when the value is an comma seperated strings
|
|
|
|
|
*/
|
|
|
|
|
value = (value as string).split(",").map((str) => str.trim());
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/*
|
|
|
|
|
* when value is null, undefined and empty string
|
|
|
|
|
*/
|
|
|
|
|
if (_.isNil(value) || value === "") {
|
|
|
|
|
isValid = true;
|
|
|
|
|
parsed = [];
|
|
|
|
|
} else if (_.isArray(value)) {
|
|
|
|
|
const hasStringOrNumber = (value as []).every(
|
|
|
|
|
(item) => _.isString(item) || _.isFinite(item),
|
|
|
|
|
);
|
|
|
|
|
isValid = hasStringOrNumber;
|
|
|
|
|
parsed = value;
|
|
|
|
|
message = hasStringOrNumber ? "" : expectedMessage;
|
|
|
|
|
} else if (typeof value === "number") {
|
|
|
|
|
isValid = true;
|
|
|
|
|
parsed = [value];
|
|
|
|
|
} else {
|
|
|
|
|
isValid = false;
|
|
|
|
|
parsed = value;
|
|
|
|
|
message = expectedMessage;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
isValid,
|
|
|
|
|
parsed,
|
|
|
|
|
messages: [message],
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Hook that updates column isDiabled binding when columnType is
|
|
|
|
|
* changed to ColumnTypes.EDIT_ACTIONS.
|
|
|
|
|
*/
|
|
|
|
|
export const updateInlineEditingSaveOptionHook = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: any,
|
|
|
|
|
): Array<PropertyHookUpdates> | undefined => {
|
|
|
|
|
if (propertyValue !== InlineEditingSaveOptions.ROW_LEVEL) {
|
|
|
|
|
const columnsArray = Object.values(props.primaryColumns);
|
|
|
|
|
const edtiActionColumn = columnsArray.find(
|
|
|
|
|
(column) => column.columnType === ColumnTypes.EDIT_ACTIONS,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (edtiActionColumn && edtiActionColumn.id) {
|
|
|
|
|
const newColumnOrder = _.difference(props.columnOrder, [
|
|
|
|
|
edtiActionColumn.id,
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
propertyPath: `primaryColumns.${edtiActionColumn.id}`,
|
|
|
|
|
shouldDeleteProperty: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
propertyPath: "columnOrder",
|
|
|
|
|
propertyValue: newColumnOrder,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
const columnIdMatcher = propertyPath.match(EDITABLITY_PATH_REGEX);
|
|
|
|
|
const columnId = columnIdMatcher && columnIdMatcher[1];
|
|
|
|
|
const isAtleastOneEditableColumnPresent = Object.values(
|
|
|
|
|
props.primaryColumns,
|
|
|
|
|
).some((column) => column.id !== columnId && column.isEditable);
|
|
|
|
|
|
|
|
|
|
if (isAtleastOneEditableColumnPresent) {
|
|
|
|
|
return createEditActionColumn(props);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const updateNumberColumnTypeTextAlignment = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: any,
|
|
|
|
|
): Array<{ propertyPath: string; propertyValue: any }> | undefined => {
|
|
|
|
|
const baseProperty = getBasePropertyPath(propertyPath);
|
|
|
|
|
|
|
|
|
|
if (propertyValue === ColumnTypes.NUMBER) {
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
propertyPath: `${baseProperty}.horizontalAlignment`,
|
|
|
|
|
propertyValue: CellAlignmentTypes.RIGHT,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
} else {
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
propertyPath: `${baseProperty}.horizontalAlignment`,
|
|
|
|
|
propertyValue: CellAlignmentTypes.LEFT,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* updates theme stylesheets
|
|
|
|
|
*
|
|
|
|
|
* @param props
|
|
|
|
|
* @param propertyPath
|
|
|
|
|
* @param propertyValue
|
|
|
|
|
*/
|
|
|
|
|
export function updateThemeStylesheetsInColumns(
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: any,
|
|
|
|
|
): Array<PropertyHookUpdates> | undefined {
|
|
|
|
|
const regex = /^primaryColumns\.(\w+)\.(.*)$/;
|
|
|
|
|
const matches = propertyPath.match(regex);
|
|
|
|
|
const columnId = matches?.[1];
|
|
|
|
|
const columnProperty = matches?.[2];
|
|
|
|
|
|
|
|
|
|
if (columnProperty === "columnType") {
|
|
|
|
|
const propertiesToUpdate: Array<PropertyHookUpdates> = [];
|
|
|
|
|
const oldColumnType = get(props, `primaryColumns.${columnId}.columnType`);
|
|
|
|
|
const newColumnType = propertyValue;
|
|
|
|
|
|
|
|
|
|
const propertiesToRemove = Object.keys(
|
|
|
|
|
props.childStylesheet[oldColumnType] || {},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const propertiesToAdd = Object.keys(
|
|
|
|
|
props.childStylesheet[newColumnType] || {},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
propertiesToRemove.forEach((propertyKey) => {
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: `primaryColumns.${columnId}.${propertyKey}`,
|
|
|
|
|
shouldDeleteProperty: true,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
propertiesToAdd.forEach((propertyKey) => {
|
|
|
|
|
const { jsSnippets, stringSegments } = getDynamicBindings(
|
|
|
|
|
props.childStylesheet[newColumnType][propertyKey],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const js = combineDynamicBindings(jsSnippets, stringSegments);
|
|
|
|
|
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: `primaryColumns.${columnId}.${propertyKey}`,
|
|
|
|
|
propertyValue: `{{${props.widgetName}.processedTableData.map((currentRow, currentIndex) => ( ${js}))}}`,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (propertiesToUpdate.length) {
|
|
|
|
|
/*
|
|
|
|
|
* Temporary patch to make evaluations to compute inverseDependencyMap when
|
|
|
|
|
* column type is changed.
|
|
|
|
|
* TODO(Balaji): remove once https://github.com/appsmithorg/appsmith/issues/14436 gets fixed
|
|
|
|
|
*/
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: `primaryColumns.${columnId}.customAlias`,
|
|
|
|
|
propertyValue: "",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return propertiesToUpdate;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* A function for updateHook to remove the boxShadowColor property post migration.
|
|
|
|
|
* @param props
|
|
|
|
|
* @param propertyPath
|
|
|
|
|
* @param propertyValue
|
|
|
|
|
*/
|
|
|
|
|
export const removeBoxShadowColorProp = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
) => {
|
|
|
|
|
const boxShadowColorPath = replacePropertyName(
|
|
|
|
|
propertyPath,
|
|
|
|
|
"boxShadowColor",
|
|
|
|
|
);
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
propertyPath: boxShadowColorPath,
|
|
|
|
|
propertyValue: undefined,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* This function will replace the property present at the end of the propertyPath with the targetPropertyName.
|
|
|
|
|
* e.g.
|
|
|
|
|
* propertyPath = primaryColumns.action.boxShadow
|
|
|
|
|
* Running this function will give the new propertyPath like below:
|
|
|
|
|
* propertyPath = primaryColumns.action.boxShadowColor
|
|
|
|
|
*
|
|
|
|
|
* @param propertyPath The property path inside a widget
|
|
|
|
|
* @param targetPropertyName Target property name
|
|
|
|
|
* @returns New property path with target property name at the end.
|
|
|
|
|
*/
|
|
|
|
|
export const replacePropertyName = (
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
targetPropertyName: string,
|
|
|
|
|
) => {
|
|
|
|
|
const path = propertyPath.split(".");
|
|
|
|
|
path.pop();
|
|
|
|
|
return `${path.join(".")}.${targetPropertyName}`;
|
|
|
|
|
};
|
2022-12-07 10:50:29 +00:00
|
|
|
|
|
|
|
|
export const updateCustomColumnAliasOnLabelChange = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: unknown,
|
|
|
|
|
): Array<PropertyHookUpdates> | undefined => {
|
|
|
|
|
// alias will be updated along with label change only for custom columns
|
|
|
|
|
const regex = /^primaryColumns\.(customColumn\d+)\.label$/;
|
|
|
|
|
if (propertyPath?.length && regex.test(propertyPath)) {
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
propertyPath: propertyPath.replace("label", "alias"),
|
|
|
|
|
propertyValue: propertyValue,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
};
|
2022-12-16 04:35:51 +00:00
|
|
|
|
2023-01-16 09:23:56 +00:00
|
|
|
export const allowedFirstDayOfWeekRange = (value: number) => {
|
|
|
|
|
const allowedValues = [0, 1, 2, 3, 4, 5, 6];
|
|
|
|
|
const isValid = allowedValues.includes(Number(value));
|
|
|
|
|
return {
|
|
|
|
|
isValid: isValid,
|
|
|
|
|
parsed: isValid ? Number(value) : 0,
|
|
|
|
|
messages: isValid ? [] : ["Number should be between 0-6."],
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
2022-12-30 10:52:11 +00:00
|
|
|
export const hideByMenuItemsSource = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
menuItemsSource: MenuItemsSource,
|
|
|
|
|
) => {
|
|
|
|
|
const baseProperty = getBasePropertyPath(propertyPath);
|
|
|
|
|
const currentMenuItemsSource = get(
|
|
|
|
|
props,
|
|
|
|
|
`${baseProperty}.menuItemsSource`,
|
|
|
|
|
"",
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return currentMenuItemsSource === menuItemsSource;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const hideIfMenuItemsSourceDataIsFalsy = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
) => {
|
|
|
|
|
const baseProperty = getBasePropertyPath(propertyPath);
|
|
|
|
|
const sourceData = get(props, `${baseProperty}.sourceData`, "");
|
|
|
|
|
|
|
|
|
|
return !sourceData;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const updateMenuItemsSource = (
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
propertyPath: string,
|
|
|
|
|
propertyValue: unknown,
|
|
|
|
|
): Array<{ propertyPath: string; propertyValue: unknown }> | undefined => {
|
|
|
|
|
const propertiesToUpdate: Array<{
|
|
|
|
|
propertyPath: string;
|
|
|
|
|
propertyValue: unknown;
|
|
|
|
|
}> = [];
|
|
|
|
|
const baseProperty = getBasePropertyPath(propertyPath);
|
|
|
|
|
const menuItemsSource = get(props, `${baseProperty}.menuItemsSource`);
|
|
|
|
|
|
|
|
|
|
if (propertyValue === ColumnTypes.MENU_BUTTON && !menuItemsSource) {
|
|
|
|
|
// Sets the default value for menuItemsSource to static when
|
|
|
|
|
// selecting the menu button column type for the first time
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: `${baseProperty}.menuItemsSource`,
|
|
|
|
|
propertyValue: MenuItemsSource.STATIC,
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
const sourceData = get(props, `${baseProperty}.sourceData`);
|
|
|
|
|
const configureMenuItems = get(props, `${baseProperty}.configureMenuItems`);
|
|
|
|
|
const isMenuItemsSourceChangedFromStaticToDynamic =
|
|
|
|
|
menuItemsSource === MenuItemsSource.STATIC &&
|
|
|
|
|
propertyValue === MenuItemsSource.DYNAMIC;
|
|
|
|
|
|
|
|
|
|
if (isMenuItemsSourceChangedFromStaticToDynamic) {
|
|
|
|
|
if (!sourceData) {
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: `${baseProperty}.sourceData`,
|
|
|
|
|
propertyValue: [],
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!configureMenuItems) {
|
|
|
|
|
propertiesToUpdate.push({
|
|
|
|
|
propertyPath: `${baseProperty}.configureMenuItems`,
|
|
|
|
|
propertyValue: {
|
2023-05-19 18:37:06 +00:00
|
|
|
label: "Configure menu items",
|
2022-12-30 10:52:11 +00:00
|
|
|
id: "config",
|
|
|
|
|
config: {
|
|
|
|
|
id: "config",
|
|
|
|
|
label: "Menu Item",
|
|
|
|
|
isVisible: true,
|
|
|
|
|
isDisabled: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return propertiesToUpdate?.length ? propertiesToUpdate : undefined;
|
|
|
|
|
};
|
|
|
|
|
|
2022-12-16 04:35:51 +00:00
|
|
|
export function selectColumnOptionsValidation(
|
|
|
|
|
value: unknown,
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
_?: any,
|
|
|
|
|
) {
|
|
|
|
|
let _isValid = true,
|
|
|
|
|
_parsed,
|
|
|
|
|
_message = "";
|
|
|
|
|
let uniqueValues: Set<unknown>;
|
2023-06-29 07:07:41 +00:00
|
|
|
const invalidArrayValueMessage = `This value does not evaluate to type: { "label": string | number, "value": string | number | boolean }`;
|
2022-12-16 04:35:51 +00:00
|
|
|
const invalidMessage = `This value does not evaluate to type Array<{ "label": string | number, "value": string | number | boolean }>`;
|
|
|
|
|
const allowedValueTypes = ["string", "number", "boolean"];
|
|
|
|
|
const allowedLabelTypes = ["string", "number"];
|
|
|
|
|
|
|
|
|
|
const generateErrorMessagePrefix = (
|
|
|
|
|
rowIndex: number | null,
|
|
|
|
|
optionIndex: number,
|
|
|
|
|
) => {
|
|
|
|
|
return `Invalid entry at${
|
|
|
|
|
rowIndex !== null ? ` Row: ${rowIndex}` : ""
|
|
|
|
|
} index: ${optionIndex}.`;
|
|
|
|
|
};
|
|
|
|
|
|
2023-06-29 07:07:41 +00:00
|
|
|
const generateInvalidArrayValueMessage = (
|
|
|
|
|
rowIndex: number | null,
|
|
|
|
|
optionIndex: number,
|
|
|
|
|
) =>
|
|
|
|
|
`${generateErrorMessagePrefix(
|
|
|
|
|
rowIndex,
|
|
|
|
|
optionIndex,
|
|
|
|
|
)} ${invalidArrayValueMessage}`;
|
|
|
|
|
|
2022-12-16 04:35:51 +00:00
|
|
|
const validateOption = (
|
|
|
|
|
option: any,
|
|
|
|
|
rowIndex: number | null,
|
|
|
|
|
optionIndex: number,
|
|
|
|
|
) => {
|
|
|
|
|
/*
|
|
|
|
|
* Option should
|
|
|
|
|
* 1. be an object
|
|
|
|
|
* 2. have label property
|
|
|
|
|
* 3. label should be of type string | number
|
|
|
|
|
* 4. have value property
|
|
|
|
|
* 5. value should be of type string | number | boolean
|
|
|
|
|
* 6. value should be unique amoig the options array
|
|
|
|
|
*/
|
|
|
|
|
if (!_.isObject(option)) {
|
|
|
|
|
// 1
|
|
|
|
|
return `${generateErrorMessagePrefix(
|
|
|
|
|
rowIndex,
|
|
|
|
|
optionIndex,
|
|
|
|
|
)} This value does not evaluate to type: { "label": string | number, "value": string | number | boolean }`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!option.hasOwnProperty("label")) {
|
|
|
|
|
// 2
|
|
|
|
|
return `${generateErrorMessagePrefix(
|
|
|
|
|
rowIndex,
|
|
|
|
|
optionIndex,
|
|
|
|
|
)} Missing required key: label`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!allowedLabelTypes.includes(typeof option.label)) {
|
|
|
|
|
// 3
|
|
|
|
|
return `${generateErrorMessagePrefix(
|
|
|
|
|
rowIndex,
|
|
|
|
|
optionIndex,
|
|
|
|
|
)} label does not evaluate to type ${allowedLabelTypes.join(" | ")}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!option.hasOwnProperty("value")) {
|
|
|
|
|
// 4
|
|
|
|
|
return `${generateErrorMessagePrefix(
|
|
|
|
|
rowIndex,
|
|
|
|
|
optionIndex,
|
|
|
|
|
)} Missing required key: value`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!allowedValueTypes.includes(typeof option.value)) {
|
|
|
|
|
// 5
|
|
|
|
|
return `${generateErrorMessagePrefix(
|
|
|
|
|
rowIndex,
|
|
|
|
|
optionIndex,
|
|
|
|
|
)} value does not evaluate to type ${allowedValueTypes.join(" | ")}`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (uniqueValues.has(option.value)) {
|
|
|
|
|
// 6
|
|
|
|
|
return `Duplicate values found for the following properties, in the array entries, that must be unique -- value.`;
|
|
|
|
|
} else {
|
|
|
|
|
uniqueValues.add(option.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return "";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
if (value === "" || _.isNil(value)) {
|
|
|
|
|
// empty values
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: [],
|
|
|
|
|
messages: [""],
|
|
|
|
|
};
|
|
|
|
|
} else if (typeof value === "string") {
|
|
|
|
|
// json string
|
|
|
|
|
const _value = JSON.parse(value);
|
|
|
|
|
if (Array.isArray(_value)) {
|
|
|
|
|
value = _value;
|
|
|
|
|
} else {
|
|
|
|
|
_isValid = false;
|
|
|
|
|
_message = invalidMessage;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (Array.isArray(value)) {
|
|
|
|
|
if (value.length) {
|
|
|
|
|
//when value is array of option json string
|
|
|
|
|
if (value.every((d) => _.isString(d))) {
|
|
|
|
|
value = value.map((d) => JSON.parse(d));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (Array.isArray(value) && Array.isArray(value[0])) {
|
|
|
|
|
// value is array of array of label, value
|
|
|
|
|
//Value should be an array of array
|
|
|
|
|
if (!value.every((d) => Array.isArray(d))) {
|
|
|
|
|
_parsed = [];
|
|
|
|
|
_isValid = false;
|
|
|
|
|
_message = invalidMessage;
|
|
|
|
|
} else {
|
|
|
|
|
_parsed = value;
|
|
|
|
|
_isValid = true;
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < value.length; i++) {
|
|
|
|
|
uniqueValues = new Set();
|
|
|
|
|
|
|
|
|
|
for (let j = 0; j < value[i].length; j++) {
|
2023-06-29 07:07:41 +00:00
|
|
|
if (_.isNil(value[i][j])) {
|
|
|
|
|
_isValid = false;
|
|
|
|
|
_message = generateInvalidArrayValueMessage(i, j);
|
|
|
|
|
_parsed = [];
|
|
|
|
|
break;
|
|
|
|
|
}
|
2022-12-16 04:35:51 +00:00
|
|
|
if ((_message = validateOption(value[i][j], i, j))) {
|
|
|
|
|
_isValid = false;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!_isValid) {
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
uniqueValues = new Set();
|
|
|
|
|
_parsed = value;
|
|
|
|
|
_isValid = true;
|
|
|
|
|
for (let i = 0; i < (value as Array<unknown>).length; i++) {
|
2023-06-29 07:07:41 +00:00
|
|
|
if (_.isNil((value as Array<unknown>)[i])) {
|
|
|
|
|
_isValid = false;
|
|
|
|
|
_message = generateInvalidArrayValueMessage(null, i);
|
|
|
|
|
_parsed = [];
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-16 04:35:51 +00:00
|
|
|
if (
|
|
|
|
|
(_message = validateOption((value as Array<unknown>)[i], null, i))
|
|
|
|
|
) {
|
|
|
|
|
_isValid = false;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
_isValid = true;
|
|
|
|
|
_parsed = [];
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
_parsed = [];
|
|
|
|
|
_isValid = false;
|
|
|
|
|
_message = invalidMessage;
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
_parsed = [];
|
|
|
|
|
_isValid = false;
|
|
|
|
|
_message = invalidMessage;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
isValid: _isValid,
|
|
|
|
|
parsed: _parsed,
|
|
|
|
|
messages: [_message],
|
|
|
|
|
};
|
|
|
|
|
}
|
2023-01-16 09:23:56 +00:00
|
|
|
|
|
|
|
|
export const getColumnPath = (propPath: string) =>
|
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
|
|
|
propPath.split(".").slice(0, 2).join(".");
|
2023-06-29 13:53:25 +00:00
|
|
|
|
|
|
|
|
export const tableDataValidation = (
|
|
|
|
|
value: unknown,
|
|
|
|
|
props: TableWidgetProps,
|
|
|
|
|
_?: any,
|
|
|
|
|
) => {
|
|
|
|
|
const invalidResponse = {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: [],
|
|
|
|
|
messages: [
|
|
|
|
|
{
|
|
|
|
|
name: "TypeError",
|
|
|
|
|
message: `This value does not evaluate to type Array<Object>}`,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (value === "") {
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: [],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (value === undefined || value === null) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: [],
|
|
|
|
|
messages: [
|
|
|
|
|
{
|
|
|
|
|
name: "ValidationError",
|
|
|
|
|
message: "Data is undefined, re-run your query or fix the data",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!_.isString(value) && !Array.isArray(value)) {
|
|
|
|
|
return invalidResponse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let parsed = value;
|
|
|
|
|
|
|
|
|
|
if (_.isString(value)) {
|
|
|
|
|
try {
|
|
|
|
|
parsed = JSON.parse(value as string);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
return invalidResponse;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (Array.isArray(parsed)) {
|
|
|
|
|
if (parsed.length === 0) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: true,
|
|
|
|
|
parsed: [],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < parsed.length; i++) {
|
|
|
|
|
if (!_.isPlainObject(parsed[i])) {
|
|
|
|
|
return {
|
|
|
|
|
isValid: false,
|
|
|
|
|
parsed: [],
|
|
|
|
|
messages: [
|
|
|
|
|
{
|
|
|
|
|
name: "ValidationError",
|
|
|
|
|
message: `Invalid object at index ${i}`,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return { isValid: true, parsed };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return invalidResponse;
|
|
|
|
|
};
|