Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: search functionality in tree select (#16073)

Browse Source
This commit is contained in:
Bhavin K 2022-08-18 16:00:37 +05:30 committed by GitHub
parent b79120c703
commit d48976105d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 114 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/Multi_Select_Tree_spec.js
View File

@ -101,6 +101,18 @@ describe("MultiSelectTree Widget Functionality", function() {
).should("be.visible");
cy.get(publish.backToEditor).click();
});
it("7. To Check Option Not Found", function() {
cy.get(formWidgetsPage.treeSelectInput)
.first()
.click({ force: true });
cy.get(formWidgetsPage.multiTreeSelectFilterInput)
.click()
.type("ABCD");
cy.get(".tree-multiselect-dropdown .rc-tree-select-empty").contains(
"No Results Found",
);
});
});
afterEach(() => {
// put your clean up code if any

12
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js
View File

@ -99,6 +99,18 @@ describe("Single Select Widget Functionality", function() {
).should("be.visible");
cy.get(publish.backToEditor).click();
});
it("7. To Check Option Not Found", function() {
cy.get(formWidgetsPage.treeSelectInput)
.last()
.click({ force: true });
cy.get(formWidgetsPage.treeSelectFilterInput)
.click()
.type("ABCD");
cy.get(".tree-select-dropdown .rc-tree-select-empty").contains(
"No Results Found",
);
});
});
afterEach(() => {
// put your clean up code if any

4
app/client/package.json
View File

@ -93,8 +93,8 @@
"prismjs": "^1.27.0",
"punycode": "^2.1.1",
"rc-pagination": "^3.1.3",
"rc-select": "13.2.1",
"rc-tree-select": "^4.4.0-alpha.2",
"rc-select": "^14.1.9",
"rc-tree-select": "^5.4.0",
"re-reselect": "^3.4.0",
"react": "^16.12.0",
"react-base-table": "^1.9.1",

26
app/client/src/widgets/JSONFormWidget/fields/MultiSelectField.tsx
View File

@ -1,9 +1,6 @@
import React, { useCallback, useContext, useMemo, useRef } from "react";
import styled from "styled-components";
import {
DefaultValueType,
LabelValueType,
} from "rc-select/lib/interface/generator";
import { LabelInValueType, DraftValueType } from "rc-select/lib/Select";
import { useController } from "react-hook-form";
import { isNil } from "lodash";
@ -78,8 +75,8 @@ const DEFAULT_DROPDOWN_STYLES = {
};
const fieldValuesToComponentValues = (
values: LabelValueType["value"][],
options: LabelValueType[] = [],
values: LabelInValueType["value"][],
options: LabelInValueType[] = [],
) => {
return values.map((value) => {
const option = options.find((option) => option.value === value);
@ -88,8 +85,9 @@ const fieldValuesToComponentValues = (
});
};
const componentValuesToFieldValues = (componentValues: LabelValueType[] = []) =>
componentValues.map(({ value }) => value);
const componentValuesToFieldValues = (
componentValues: LabelInValueType[] = [],
) => componentValues.map(({ value }) => value);
function MultiSelectField({
fieldClassName,
@ -113,7 +111,7 @@ function MultiSelectField({
name,
});
const inputValue: LabelValueType["value"][] =
const inputValue: LabelInValueType["value"][] =
(Array.isArray(value) && value) || [];
const { onBlurHandler, onFocusHandler } = useEvents<HTMLInputElement>({
@ -135,7 +133,7 @@ function MultiSelectField({
});
const fieldDefaultValue = useMemo(() => {
const values: LabelValueType["value"][] | LabelValueType[] = (() => {
const values: LabelInValueType["value"][] | LabelInValueType[] = (() => {
if (!isNil(passedDefaultValue) && validateOptions(passedDefaultValue)) {
return passedDefaultValue;
}
@ -151,9 +149,9 @@ function MultiSelectField({
})();
if (values.length && isPrimitive(values[0])) {
return values as LabelValueType["value"][];
return values as LabelInValueType["value"][];
} else {
return componentValuesToFieldValues(values as LabelValueType[]);
return componentValuesToFieldValues(values as LabelInValueType[]);
}
}, [schemaItem.defaultValue, passedDefaultValue]);
@ -180,8 +178,8 @@ function MultiSelectField({
);
const onOptionChange = useCallback(
(values: DefaultValueType) => {
onChange(componentValuesToFieldValues(values as LabelValueType[]));
(values: DraftValueType) => {
onChange(componentValuesToFieldValues(values as LabelInValueType[]));
if (schemaItem.onOptionChange && executeAction) {
executeAction({

4
app/client/src/widgets/JSONFormWidget/helper.ts
View File

@ -1,5 +1,5 @@
import { isNil, isPlainObject, merge } from "lodash";
import { LabelValueType } from "rc-select/lib/interface/generator";
import { LabelInValueType } from "rc-select/lib/Select";
import {
isDynamicValue,
@ -287,7 +287,7 @@ export function isPrimitive(val: unknown): val is number | string | boolean {
export const validateOptions = (
values: unknown,
): values is LabelValueType["value"][] | LabelValueType[] => {
): values is LabelInValueType["value"][] | LabelInValueType[] => {
if (!Array.isArray(values)) return false;
let hasPrimitive = false;

18
app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx
View File

@ -18,6 +18,8 @@ import "rc-tree-select/assets/index.less";
import { DefaultValueType } from "rc-tree-select/lib/interface";
import { TreeNodeProps } from "rc-tree-select/lib/TreeNode";
import { CheckedStrategy } from "rc-tree-select/lib/utils/strategyUtil";
import { DefaultOptionType } from "rc-tree-select/lib/TreeSelect";
import styled from "styled-components";
import { RenderMode, TextSize } from "constants/WidgetConstants";
import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
import { labelMargin, WidgetContainerDiff } from "widgets/WidgetUtils";
@ -31,12 +33,7 @@ export interface TreeSelectProps
extends Required<
Pick<
SelectProps,
| "disabled"
| "placeholder"
| "loading"
| "dropdownStyle"
| "allowClear"
| "options"
"disabled" | "placeholder" | "loading" | "dropdownStyle" | "allowClear"
>
> {
value?: DefaultValueType;
@ -61,8 +58,13 @@ export interface TreeSelectProps
filterText?: string;
isFilterable: boolean;
renderMode?: RenderMode;
options?: DefaultOptionType[];
}
export const NoDataFoundContainer = styled.div`
text-align: center;
`;
const getSvg = (expanded: boolean) => (
<i
style={{
@ -281,7 +283,9 @@ function MultiTreeSelectComponent({
maxTagCount={"responsive"}
maxTagPlaceholder={(e) => `+${e.length} more`}
multiple
notFoundContent="No Results Found"
notFoundContent={
<NoDataFoundContainer>No Results Found</NoDataFoundContainer>
}
onChange={onChange}
onClear={onClear}
onDropdownVisibleChange={onDropdownVisibleChange}

2
app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx
View File

@ -8,7 +8,7 @@ import {
ValidationTypes,
} from "constants/WidgetValidation";
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
import { DefaultValueType } from "rc-select/lib/interface/generator";
import { DefaultValueType } from "rc-tree-select/lib/interface";
import { Layers } from "constants/Layers";
import { CheckedStrategy } from "rc-tree-select/lib/utils/strategyUtil";
import { GRID_DENSITY_MIGRATION_V1, MinimumPopupRows } from "widgets/constants";

6
app/client/src/widgets/MultiSelectWidget/component/index.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable no-console */
import React, { useEffect, useState, useCallback, useRef } from "react";
import Select, { SelectProps } from "rc-select";
import { DefaultValueType } from "rc-select/lib/interface/generator";
import { DraftValueType } from "rc-select/lib/Select";
import {
DropdownStyles,
MultiSelectContainer,
@ -34,7 +34,7 @@ export interface MultiSelectProps
> {
mode?: "multiple" | "tags";
value: string[];
onChange: (value: DefaultValueType) => void;
onChange: (value: DraftValueType) => void;
serverSideFiltering: boolean;
onFilterChange: (text: string) => void;
dropDownWidth: number;
@ -114,7 +114,7 @@ function MultiSelectComponent({
const handleSelectAll = () => {
if (!isSelectAll) {
const allOption: string[] = options.map((option) => option.value);
const allOption = options.map((option) => option.value) as string[];
onChange(allOption);
return;
}

4
app/client/src/widgets/MultiSelectWidget/widget/index.tsx
View File

@ -10,12 +10,12 @@ import {
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
import MultiSelectComponent from "../component";
import { DefaultValueType } from "rc-select/lib/interface/generator";
import { Layers } from "constants/Layers";
import { AutocompleteDataType } from "utils/autocomplete/TernServer";
import { MinimumPopupRows, GRID_DENSITY_MIGRATION_V1 } from "widgets/constants";
import { LabelPosition } from "components/constants";
import { Alignment } from "@blueprintjs/core";
import { DraftValueType } from "rc-select/lib/Select";
function defaultOptionValueValidation(value: unknown): ValidationResponse {
let values: string[] = [];
@ -456,7 +456,7 @@ class MultiSelectWidget extends BaseWidget<
);
}
onOptionChange = (value: DefaultValueType) => {
onOptionChange = (value: DraftValueType) => {
this.props.updateWidgetMetaProperty("selectedOptionValueArr", value, {
triggerPropertyName: "onOptionChange",
dynamicString: this.props.onOptionChange,

13
app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx
View File

@ -8,10 +8,7 @@ import React, {
useMemo,
} from "react";
import Select, { SelectProps } from "rc-select";
import {
DefaultValueType,
LabelValueType,
} from "rc-select/lib/interface/generator";
import { DraftValueType, LabelInValueType } from "rc-select/lib/Select";
import MenuItemCheckBox, {
DropdownStyles,
MultiSelectContainer,
@ -40,8 +37,8 @@ export interface MultiSelectProps
>
> {
mode?: "multiple" | "tags";
value: LabelValueType[];
onChange: (value: DefaultValueType) => void;
value: LabelInValueType[];
onChange: (value: DraftValueType) => void;
serverSideFiltering: boolean;
onFilterChange: (text: string) => void;
dropDownWidth: number;
@ -178,9 +175,9 @@ function MultiSelectComponent({
const handleSelectAll = () => {
if (!isSelectAll) {
// Get all options
const allOption: LabelValueType[] = filteredOptions.map(
const allOption: LabelInValueType[] = filteredOptions.map(
({ label, value }) => ({
value,
value: value || "",
label,
}),
);

11
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx
View File

@ -17,10 +17,7 @@ import {
} from "constants/WidgetValidation";
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
import MultiSelectComponent from "../component";
import {
DefaultValueType,
LabelValueType,
} from "rc-select/lib/interface/generator";
import { DraftValueType, LabelInValueType } from "rc-select/lib/Select";
import { Layers } from "constants/Layers";
import { MinimumPopupRows, GRID_DENSITY_MIGRATION_V1 } from "widgets/constants";
import { LabelPosition } from "components/constants";
@ -1040,7 +1037,7 @@ class MultiSelectWidget extends BaseWidget<
);
}
onOptionChange = (value: DefaultValueType) => {
onOptionChange = (value: DraftValueType) => {
this.props.updateWidgetMetaProperty("selectedOptions", value, {
triggerPropertyName: "onOptionChange",
dynamicString: this.props.onOptionChange,
@ -1054,7 +1051,7 @@ class MultiSelectWidget extends BaseWidget<
};
// { label , value } is needed in the widget
mergeLabelAndValue = (): LabelValueType[] => {
mergeLabelAndValue = (): LabelInValueType[] => {
const labels = [...this.props.selectedOptionLabels];
const values = [...this.props.selectedOptionValues];
return values.map((value, index) => ({
@ -1100,7 +1097,7 @@ export interface MultiSelectWidgetProps extends WidgetProps {
defaultOptionValue: string[] | OptionValue[];
isRequired: boolean;
isLoading: boolean;
selectedOptions: LabelValueType[];
selectedOptions: LabelInValueType[];
filterText: string;
selectedOptionValues: string[];
selectedOptionLabels: string[];

18
app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
View File

@ -17,6 +17,8 @@ import {
import "rc-tree-select/assets/index.less";
import { DefaultValueType } from "rc-tree-select/lib/interface";
import { TreeNodeProps } from "rc-tree-select/lib/TreeNode";
import { DefaultOptionType } from "rc-tree-select/lib/TreeSelect";
import styled from "styled-components";
import { RenderMode, TextSize } from "constants/WidgetConstants";
import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
import { labelMargin, WidgetContainerDiff } from "widgets/WidgetUtils";
@ -30,12 +32,7 @@ export interface TreeSelectProps
extends Required<
Pick<
SelectProps,
| "disabled"
| "placeholder"
| "loading"
| "dropdownStyle"
| "allowClear"
| "options"
"disabled" | "placeholder" | "loading" | "dropdownStyle" | "allowClear"
>
> {
value?: DefaultValueType;
@ -59,8 +56,13 @@ export interface TreeSelectProps
filterText?: string;
isFilterable: boolean;
renderMode?: RenderMode;
options?: DefaultOptionType[];
}
export const NoDataFoundContainer = styled.div`
text-align: center;
`;
const getSvg = (expanded: boolean) => (
<i
style={{
@ -281,7 +283,9 @@ function SingleSelectTreeComponent({
loading={loading}
maxTagCount={"responsive"}
maxTagPlaceholder={(e) => `+${e.length} more`}
notFoundContent="No Results Found"
notFoundContent={
<NoDataFoundContainer>No Results Found</NoDataFoundContainer>
}
onChange={onSelectionChange}
onClear={onClear}
onDropdownVisibleChange={onDropdownVisibleChange}

2
app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx
View File

@ -8,7 +8,7 @@ import {
ValidationTypes,
} from "constants/WidgetValidation";
import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
import { DefaultValueType } from "rc-select/lib/interface/generator";
import { DefaultValueType } from "rc-tree-select/lib/interface";
import { Layers } from "constants/Layers";
import { isString } from "../../../utils/helpers";
import { AutocompleteDataType } from "utils/autocomplete/TernServer";

5
app/client/src/widgets/useDropdown.tsx
View File

@ -1,8 +1,7 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import { getMainCanvas } from "./WidgetUtils";
import styled from "styled-components";
import Select from "rc-select";
import { LabelValueType } from "rc-select/lib/interface/generator";
import { BaseSelectRef } from "rc-select";
import { RenderMode, RenderModes } from "constants/WidgetConstants";
const BackDropContainer = styled.div`
@ -25,7 +24,7 @@ const useDropdown = ({ inputRef, renderMode }: useDropdownProps) => {
// This is to make the dropdown controlled
const [isOpen, setIsOpen] = useState(false);
const popupContainer = useRef<HTMLElement>(getMainCanvas());
const selectRef = useRef<Select<LabelValueType[]> | null>(null);
const selectRef = useRef<BaseSelectRef | null>(null);
useEffect(() => {
if (!popupContainer.current) {

59
app/client/yarn.lock
View File

@ -1262,7 +1262,7 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.2.0", "@babel/runtime@^7.7.6":
"@babel/runtime@^7.18.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.7.6":
version "7.18.9"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@ -12365,40 +12365,40 @@ rc-resize-observer@^1.0.0:
rc-util "^5.0.0"
resize-observer-polyfill "^1.5.1"
rc-select@13.2.1, rc-select@~13.2.1:
version "13.2.1"
resolved "https://registry.npmjs.org/rc-select/-/rc-select-13.2.1.tgz"
integrity sha512-L2cJFAjVEeDiNVa/dlOVKE79OUb0J7sUBvWN3Viav3XHcjvv9Ovn4D8J9QhBSlDXeGuczZ81CZI3BbdHD25+Gg==
rc-select@^14.1.9, rc-select@~14.1.0:
version "14.1.9"
resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.1.9.tgz#9c9eceff00920ad8a0a53b77b76afc177ffe5ab4"
integrity sha512-DK01+Q7oCWr5jVPiEp/BTQ8xCB4rI4LfXzZtSmBWJhOMuibyZD1Vlz/DlVKCUFmtBM4SzG4/SltGHoGlcbCqiw==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
rc-motion "^2.0.1"
rc-overflow "^1.0.0"
rc-trigger "^5.0.4"
rc-util "^5.9.8"
rc-util "^5.16.1"
rc-virtual-list "^3.2.0"
rc-tree-select@^4.4.0-alpha.2:
version "4.8.0"
resolved "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-4.8.0.tgz"
integrity sha512-evuVIF7GHCGDdvISdBWl4ZYmG/8foof/RDtzCu/WFLA1tFKZD77RRC3khEsjh4WgsB0vllLe7j+ODJ7jHRcDRQ==
rc-tree-select@^5.4.0:
version "5.4.0"
resolved "https://registry.yarnpkg.com/rc-tree-select/-/rc-tree-select-5.4.0.tgz#c94b961aca68689f5ee3a43e33881cf693d195ef"
integrity sha512-reRbOqC7Ic/nQocJAJeCl4n6nJUY3NoqiwRXKvhjgZJU7NGr9vIccXEsY+Lghkw5UMpPoxGsIJB0jiAvM18XYA==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
rc-select "~13.2.1"
rc-tree "~5.3.0"
rc-util "^5.7.0"
rc-select "~14.1.0"
rc-tree "~5.6.1"
rc-util "^5.16.1"
rc-tree@~5.3.0:
version "5.3.8"
resolved "https://registry.npmjs.org/rc-tree/-/rc-tree-5.3.8.tgz"
integrity sha512-YuobEryPymqPmHFUOvsoOrYdm24psaj0CrGEUuDUQUeG/nNcTGw6FA2YmF4NsEaNBvNSJUSzwfZnFHrKa/xv0A==
rc-tree@~5.6.1:
version "5.6.6"
resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-5.6.6.tgz#c04253d8f8345ec52fc196dec2be06c7e708125b"
integrity sha512-HI/q4D4AHOp48OZcBUvJFWkI5OfnZivvGYI0xzI0dy0Mita2KcTGZv7/Yl6Aq3bL3od3x5AqAXq/7qxR3x4Kkg==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
rc-motion "^2.0.1"
rc-util "^5.16.1"
rc-virtual-list "^3.4.1"
rc-virtual-list "^3.4.8"
rc-trigger@^5.0.4:
version "5.2.9"
@ -12410,7 +12410,7 @@ rc-trigger@^5.0.4:
rc-motion "^2.0.0"
rc-util "^5.5.0"
rc-util@^5.0.0, rc-util@^5.0.7, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0, rc-util@^5.5.1, rc-util@^5.9.8:
rc-util@^5.0.0, rc-util@^5.0.7, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0, rc-util@^5.5.1:
version "5.13.2"
resolved "https://registry.npmjs.org/rc-util/-/rc-util-5.13.2.tgz"
dependencies:
@ -12418,7 +12418,16 @@ rc-util@^5.0.0, rc-util@^5.0.7, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0,
react-is "^16.12.0"
shallowequal "^1.1.0"
rc-util@^5.16.1, rc-util@^5.7.0:
rc-util@^5.15.0:
version "5.23.0"
resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.23.0.tgz#a583b1ec3e1832a80eced7a700a494af0b590743"
integrity sha512-lgm6diJ/pLgyfoZY59Vz7sW4mSoQCgozqbBye9IJ7/mb5w5h4T7h+i2JpXAx/UBQxscBZe68q0sP7EW+qfkKUg==
dependencies:
"@babel/runtime" "^7.18.3"
react-is "^16.12.0"
shallowequal "^1.1.0"
rc-util@^5.16.1:
version "5.18.1"
resolved "https://registry.npmjs.org/rc-util/-/rc-util-5.18.1.tgz"
integrity sha512-24xaSrMZUEKh1+suDOtJWfPe9E6YrwryViZcoPO0miJTKzP4qhUlV5AAlKQ82AJilz/AOHfi3l6HoX8qa1ye8w==
@ -12435,14 +12444,14 @@ rc-virtual-list@^3.2.0:
rc-resize-observer "^1.0.0"
rc-util "^5.0.7"
rc-virtual-list@^3.4.1:
version "3.4.2"
resolved "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.2.tgz"
integrity sha512-OyVrrPvvFcHvV0ssz5EDZ+7Rf5qLat/+mmujjchNw5FfbJWNDwkpQ99EcVE6+FtNRmX9wFa1LGNpZLUTvp/4GQ==
rc-virtual-list@^3.4.8:
version "3.4.8"
resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.8.tgz#c24c10c6940546b7e2a5e9809402c6716adfd26c"
integrity sha512-qSN+Rv4i/E7RCTvTMr1uZo7f3crJJg/5DekoCagydo9zsXrxj07zsFSxqizqW+ldGA16lwa8So/bIbV9Ofjddg==
dependencies:
classnames "^2.2.6"
rc-resize-observer "^1.0.0"
rc-util "^5.0.7"
rc-util "^5.15.0"
re-reselect@^3.4.0:
version "3.4.0"