## Description TL;DR This is a complete architectural change of of List widget works to support all widgets we currently have and should automatically support any future widgets. It also introduces nested List widgets i.e a list widget can have a another list widget which in turn can have another list widget. Fixes #18206 Fixes #6775 Fixes #13211 Fixes #16582 Fixes #11739 Fixes #15094 Fixes #6840 Fixes #10841 Fixes #17386 Fixes #18340 Fixes #16898 Fixes #17555 Fixes #6858 Fixes #9568 Fixes #17480 Fixes #18523 Fixes #18206 Fixes #16586 Fixes #18106 Fixes #16576 Fixes #14697 Fixes #9607 Fixes #19648 Fixes #19739 Fixes #19652 Fixes #18730 Fixes #19503 Fixes #19498 Fixes #19437 Fixes #5245 Fixes #19150 Fixes #18638 Fixes #11332 Fixes #17901 Fixes #19043 Fixes #17777 Fixes #8237 Fixes #15487 Fixes #15988 Fixes #18621 Fixes #16788 Fixes #18110 Fixes #18382 Fixes #17427 Fixes #18105 Fixes #18287 Fixes #19808 Fixes #14655 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Cypress - Jest - Manual ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [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 --------- Co-authored-by: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Co-authored-by: Favour Ohanekwu <fohanekwu@gmail.com>
192 lines
6.3 KiB
TypeScript
192 lines
6.3 KiB
TypeScript
import {
|
|
PropertyPaneConfig,
|
|
PropertyPaneControlConfig,
|
|
PropertyPaneSectionConfig,
|
|
ValidationConfig,
|
|
} from "constants/PropertyControlConstants";
|
|
import { ValidationTypes } from "constants/WidgetValidation";
|
|
import { isFunction } from "lodash";
|
|
import WidgetFactory from "utils/WidgetFactory";
|
|
import { ALL_WIDGETS_AND_CONFIG, registerWidgets } from "./WidgetRegistry";
|
|
|
|
function validatePropertyPaneConfig(
|
|
config: PropertyPaneConfig[],
|
|
isWidgetHidden: boolean,
|
|
) {
|
|
for (const sectionOrControlConfig of config) {
|
|
const sectionConfig = sectionOrControlConfig as PropertyPaneSectionConfig;
|
|
if (sectionConfig.sectionName && isFunction(sectionConfig.sectionName)) {
|
|
return ` SectionName should be a string and not a function. Search won't work for functions at the moment`;
|
|
}
|
|
if (sectionOrControlConfig.children) {
|
|
for (const propertyControlConfig of sectionOrControlConfig.children) {
|
|
const propertyControlValidation = validatePropertyControl(
|
|
propertyControlConfig,
|
|
isWidgetHidden,
|
|
);
|
|
if (propertyControlValidation !== true)
|
|
return propertyControlValidation;
|
|
}
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function validatePropertyControl(
|
|
config: PropertyPaneConfig,
|
|
isWidgetHidden: boolean,
|
|
): boolean | string {
|
|
const _config = config as PropertyPaneControlConfig;
|
|
const controls = ["INPUT_TEXT"];
|
|
|
|
if (_config.label && isFunction(_config.label)) {
|
|
return `${_config.propertyName}: Label should be a string and not a function. Search won't work for functions at the moment`;
|
|
}
|
|
|
|
if (
|
|
!isWidgetHidden &&
|
|
_config.label &&
|
|
!_config.invisible &&
|
|
!(_config.helpText || _config.helperText)
|
|
) {
|
|
return `${_config.propertyName} (${_config.label}): Help text or Helper textis mandatory for property controls`;
|
|
}
|
|
|
|
if (
|
|
(_config.isJSConvertible || controls.includes(_config.controlType)) &&
|
|
!_config.isTriggerProperty
|
|
) {
|
|
if (!_config.isBindProperty)
|
|
return `${
|
|
_config.propertyName
|
|
}: isBindProperty should be true if isJSConvertible is true or when control type is [${controls.join(
|
|
" | ",
|
|
)}]`;
|
|
if (!_config.validation)
|
|
return `${
|
|
_config.propertyName
|
|
}: validation should be defined if isJSConvertible is true or when control type is [${controls.join(
|
|
" | ",
|
|
)}]`;
|
|
}
|
|
|
|
if (controls.includes(_config.controlType) && _config.isJSConvertible) {
|
|
return `${
|
|
_config.propertyName
|
|
}: No need of setting isJSConvertible since users can write JS inside [${controls.join(
|
|
" | ",
|
|
)}]`;
|
|
}
|
|
|
|
if (_config.validation !== undefined) {
|
|
const res = validateValidationStructure(_config.validation);
|
|
if (res !== true) return `${_config.propertyName}: ${res}`;
|
|
}
|
|
if (_config.children) {
|
|
for (const child of _config.children) {
|
|
const res = validatePropertyControl(child, isWidgetHidden);
|
|
if (res !== true) return `${_config.propertyName}.${res}`;
|
|
}
|
|
}
|
|
if (_config.panelConfig) {
|
|
if (_config.panelConfig.children) {
|
|
const res = validatePropertyPaneConfig(
|
|
_config.panelConfig.children,
|
|
isWidgetHidden,
|
|
);
|
|
if (res !== true) return `${_config.propertyName}.${res}`;
|
|
}
|
|
if (_config.panelConfig.contentChildren) {
|
|
const res = validatePropertyPaneConfig(
|
|
_config.panelConfig.contentChildren,
|
|
isWidgetHidden,
|
|
);
|
|
if (res !== true) return `${_config.propertyName}.${res}`;
|
|
}
|
|
if (_config.panelConfig.styleChildren) {
|
|
const res = validatePropertyPaneConfig(
|
|
_config.panelConfig.styleChildren,
|
|
isWidgetHidden,
|
|
);
|
|
if (res !== true) return `${_config.propertyName}.${res}`;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function validateValidationStructure(
|
|
config: ValidationConfig,
|
|
): boolean | string {
|
|
if (
|
|
config.type === ValidationTypes.FUNCTION &&
|
|
config.params &&
|
|
config.params.fn
|
|
) {
|
|
if (!config.params.expected)
|
|
return `For a ${ValidationTypes.FUNCTION} type validation, expected type and example are mandatory`;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
const isNotFloat = (n: any) => {
|
|
return Number(n) === n && n % 1 === 0;
|
|
};
|
|
|
|
describe("Tests all widget's propertyPane config", () => {
|
|
beforeAll(() => {
|
|
registerWidgets();
|
|
});
|
|
ALL_WIDGETS_AND_CONFIG.forEach((widgetAndConfig) => {
|
|
const [widget, config]: any = widgetAndConfig;
|
|
it(`Checks ${widget.getWidgetType()}'s propertyPaneConfig`, () => {
|
|
const propertyPaneConfig = widget.getPropertyPaneConfig();
|
|
expect(
|
|
validatePropertyPaneConfig(propertyPaneConfig, config.hideCard),
|
|
).toStrictEqual(true);
|
|
const propertyPaneContentConfig = widget.getPropertyPaneContentConfig();
|
|
expect(
|
|
validatePropertyPaneConfig(
|
|
propertyPaneContentConfig,
|
|
config.isDeprecated,
|
|
),
|
|
).toStrictEqual(true);
|
|
const propertyPaneStyleConfig = widget.getPropertyPaneStyleConfig();
|
|
expect(
|
|
validatePropertyPaneConfig(
|
|
propertyPaneStyleConfig,
|
|
config.isDeprecated,
|
|
),
|
|
).toStrictEqual(true);
|
|
});
|
|
it(`Check if ${widget.getWidgetType()}'s dimensions are always integers`, () => {
|
|
expect(isNotFloat(config.defaults.rows)).toBe(true);
|
|
expect(isNotFloat(config.defaults.columns)).toBe(true);
|
|
});
|
|
if (config.isDeprecated && config.replacement !== undefined) {
|
|
it(`Check if ${widget.getWidgetType()}'s deprecation config has a proper replacement Widget`, () => {
|
|
const widgetType = widget.getWidgetType();
|
|
const replacementWidgetType = config.replacement;
|
|
const replacementWidgetConfig = WidgetFactory.widgetConfigMap.get(
|
|
replacementWidgetType,
|
|
);
|
|
if (replacementWidgetConfig === undefined) {
|
|
fail(
|
|
`${widgetType}'s replacement widget ${replacementWidgetType} does not resolve to an actual widget Config`,
|
|
);
|
|
}
|
|
if (replacementWidgetConfig?.isDeprecated) {
|
|
fail(
|
|
`${widgetType}'s replacement widget ${replacementWidgetType} itself is deprecated. Cannot have a deprecated widget as a replacement for another deprecated widget`,
|
|
);
|
|
}
|
|
if (replacementWidgetConfig?.hideCard) {
|
|
fail(
|
|
`${widgetType}'s replacement widget ${replacementWidgetType} should be available in the entity Explorer`,
|
|
);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|