This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new 082fda209c4 kie-issues#1142: DMN Editor: Data Type searching mechanism
should not be startsWith only (#3033)
082fda209c4 is described below
commit 082fda209c4bc3b1117bc21892dbca96583cb752
Author: Kusuma04-dev <[email protected]>
AuthorDate: Thu May 8 18:25:35 2025 +0530
kie-issues#1142: DMN Editor: Data Type searching mechanism should not be
startsWith only (#3033)
Co-authored-by: chinnamatli kusumalatha
<[email protected]>
---
packages/dmn-editor/src/dataTypes/DataTypes.tsx | 5 +-
.../dmn-editor/src/dataTypes/TypeRefSelector.tsx | 125 +++++++++++++++------
2 files changed, 89 insertions(+), 41 deletions(-)
diff --git a/packages/dmn-editor/src/dataTypes/DataTypes.tsx
b/packages/dmn-editor/src/dataTypes/DataTypes.tsx
index 3af7e718c4c..0ffa364bc70 100644
--- a/packages/dmn-editor/src/dataTypes/DataTypes.tsx
+++ b/packages/dmn-editor/src/dataTypes/DataTypes.tsx
@@ -123,10 +123,7 @@ export function DataTypes() {
}, [activeItemDefinitionId, allDataTypesById]);
const filteredTree = useMemo(
- () =>
- dataTypesTree.filter(({ itemDefinition: dataType }) =>
- dataType["@_name"].toLowerCase().includes(filter.toLowerCase())
- ),
+ () => dataTypesTree.filter(({ feelName: dataType }) =>
dataType.toLowerCase().includes(filter.toLowerCase())),
[filter, dataTypesTree]
);
diff --git a/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
b/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
index 86f593b169f..6a42236008d 100644
--- a/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
+++ b/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
@@ -17,10 +17,10 @@
* under the License.
*/
-import { DmnBuiltInDataType, generateUuid } from
"@kie-tools/boxed-expression-component/dist/api";
+import { DmnBuiltInDataType, DmnDataType, generateUuid } from
"@kie-tools/boxed-expression-component/dist/api";
import { Select, SelectGroup, SelectOption, SelectVariant } from
"@patternfly/react-core/deprecated";
import * as React from "react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState, useMemo } from "react";
import { TypeRefLabel } from "./TypeRefLabel";
import { ArrowUpIcon } from
"@patternfly/react-icons/dist/js/icons/arrow-up-icon";
import { DmnEditorTab } from "../store/Store";
@@ -106,6 +106,90 @@ export function TypeRefSelector({
const { maxHeight, direction } = useInViewSelect(heightRef ?? { current:
document.body }, toggleRef, zoom ?? 1);
+ const buildSelectGroups = useMemo(
+ () =>
+ (
+ builtInFeelTypes: DmnDataType[],
+ customDataTypes: DataType[],
+ externalDataTypes: DataType[],
+ searchText = ""
+ ): React.ReactElement[] => {
+ const filteredBuiltInFeelTypes = builtInFeelTypes.filter(
+ (dt) => !searchText || (dt.name ||
"").toLowerCase().includes(searchText.toLowerCase())
+ );
+ const filteredCustomDataTypes = customDataTypes.filter(
+ (dt) => !searchText || (dt.feelName ||
"").toLowerCase().includes(searchText.toLowerCase())
+ );
+ const filteredExternalDataTypes = externalDataTypes.filter(
+ (dt) => !searchText || (dt.feelName ||
"").toLowerCase().includes(searchText.toLowerCase())
+ );
+
+ const selectGroups = [];
+ if (filteredBuiltInFeelTypes.length > 0 || !searchText) {
+ selectGroups.push(
+ <SelectGroup label="Built-in" key="builtin" style={{ minWidth:
"300px" }}>
+ {filteredBuiltInFeelTypes.map((dt) => (
+ <SelectOption key={dt.name} value={dt.name}>
+ {dt.name}
+ </SelectOption>
+ ))}
+ </SelectGroup>
+ );
+ }
+ if (filteredCustomDataTypes.length > 0 || !searchText) {
+ selectGroups.push(
+ <SelectGroup label="Custom" key="custom" style={{ minWidth:
"300px" }}>
+ {filteredCustomDataTypes.length > 0 ? (
+ filteredCustomDataTypes.map((dt) => (
+ <SelectOption key={dt.feelName} value={dt.feelName}>
+ {dt.feelName}
+
+ <TypeRefLabel
+ typeRef={dt.itemDefinition.typeRef?.__$$text}
+ relativeToNamespace={dt.namespace}
+ isCollection={dt.itemDefinition?.["@_isCollection"]}
+ />
+ </SelectOption>
+ ))
+ ) : (
+ <SelectOption key={"None"} value={"None"} isDisabled={true} />
+ )}
+ </SelectGroup>
+ );
+ }
+ if (filteredExternalDataTypes.length > 0 || !searchText) {
+ selectGroups.push(
+ <SelectGroup label="External" key="external" style={{ minWidth:
"300px" }}>
+ {filteredExternalDataTypes.length > 0 ? (
+ filteredExternalDataTypes.map((dt) => (
+ <SelectOption key={dt.feelName} value={dt.feelName}>
+ {dt.feelName}
+
+ <TypeRefLabel
+ typeRef={dt.itemDefinition.typeRef?.__$$text}
+ relativeToNamespace={dt.namespace}
+ isCollection={dt.itemDefinition?.["@_isCollection"]}
+ />
+ </SelectOption>
+ ))
+ ) : (
+ <SelectOption key={"None"} value={"None"} isDisabled={true} />
+ )}
+ </SelectGroup>
+ );
+ }
+ return selectGroups;
+ },
+ []
+ );
+
+ const onFilter = useCallback(
+ (_event: React.ChangeEvent<HTMLInputElement> | null, textInput: string) =>
{
+ return buildSelectGroups(builtInFeelTypes, customDataTypes,
externalDataTypes, textInput);
+ },
+ [buildSelectGroups, customDataTypes, externalDataTypes]
+ );
+
return (
<Flex
id={id}
@@ -135,6 +219,7 @@ export function TypeRefSelector({
variant={SelectVariant.typeahead}
typeAheadAriaLabel={DmnBuiltInDataType.Undefined}
onToggle={(_event, val) => _onToggle(val)}
+ onFilter={onFilter}
onSelect={(e, v) => {
_onToggle(false);
onChange(v === DmnBuiltInDataType.Undefined ? undefined : (v as
string));
@@ -152,41 +237,7 @@ export function TypeRefSelector({
direction={direction}
onWheelCapture={(e) => e.stopPropagation()} // Necessary so that
Reactflow doesn't mess with this event.
>
- <SelectGroup label="Built-in" key="builtin" style={{ minWidth: "300px"
}}>
- {builtInFeelTypes.map((dt) => (
- <SelectOption key={dt.name} value={dt.name}>
- {dt.name}
- </SelectOption>
- ))}
- </SelectGroup>
- <SelectGroup label="Custom" key="custom" style={{ minWidth: "300px" }}>
- {(customDataTypes.length > 0 &&
- customDataTypes.map((dt) => (
- <SelectOption key={dt.feelName} value={dt.feelName}>
- {dt.feelName}
-
- <TypeRefLabel
- typeRef={dt.itemDefinition.typeRef?.__$$text}
- relativeToNamespace={dt.namespace}
- isCollection={dt.itemDefinition?.["@_isCollection"]}
- />
- </SelectOption>
- ))) || <SelectOption key={"None"} value={"None"} isDisabled={true}
/>}
- </SelectGroup>
- <SelectGroup label="External" key="external" style={{ minWidth:
"300px" }}>
- {(externalDataTypes.length > 0 &&
- externalDataTypes.map((dt) => (
- <SelectOption key={dt.feelName} value={dt.feelName}>
- {dt.feelName}
-
- <TypeRefLabel
- typeRef={dt.itemDefinition.typeRef?.__$$text}
- relativeToNamespace={dt.namespace}
- isCollection={dt.itemDefinition?.["@_isCollection"]}
- />
- </SelectOption>
- ))) || <SelectOption key={"None"} value={"None"} isDisabled={true}
/>}
- </SelectGroup>
+ {buildSelectGroups(builtInFeelTypes, customDataTypes,
externalDataTypes)}
</Select>
</Flex>
);
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
