kie-issues#914: On the DMN Editor, fix rendering of TypeRefSelector o…

…n Data Type node panel for Decision Services (apache#2147)

packages/dmn-editor/src/DmnEditor.css

@@ -50,6 +50,7 @@
   top: 0;
   left: 0;
   overflow: visible;
+  z-index: 10000; /* Makes the data type node panel appear correctly, on top of the node */
 }
 .kie-dmn-editor--node:focus {
   outline: none;
@@ -589,13 +590,7 @@ the cursor is inside it. By making it adimensional, that never happens.  */
 .kie-dmn-editor--data-type-node-panel .pf-c-select__toggle.pf-m-typeahead::before {
   border: 0;
 }
-.kie-dmn-editor--data-type-node-panel > div:hover {
-  backdrop-filter: brightness(95%);
-}
-.kie-dmn-editor--data-type-node-panel > div:active {
-  backdrop-filter: brightness(90%);
-}
-/*    edit button on decision and bkm nodes */
+/* edit button on decision and bkm nodes */
 .kie-dmn-editor--edit-expression-node-panel {
   position: absolute;
   padding: 4px 8px;

packages/dmn-editor/src/dataTypes/DataTypeName.tsx

@@ -99,6 +99,7 @@ export function DataTypeName({
           name={feelQNameToDisplay.full}
           onRenamed={onRenamed}
           allUniqueNames={onGetAllUniqueNames}
+          enableAutoFocusing={enableAutoFocusing}
         />
       )}
       {editMode === "double-click" && (
@@ -115,6 +116,7 @@ export function DataTypeName({
           {/* Using this component here is not ideal, as we're not dealing with Node names, but it works well enough */}
           <EditableNodeLabel
             truncate={true}
+            enableAutoFocusing={enableAutoFocusing}
             grow={true}
             isEditing={isEditingLabel}
             setEditing={setEditingLabel}

packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx

@@ -20,7 +20,7 @@
 import { DmnBuiltInDataType, generateUuid } from "@kie-tools/boxed-expression-component/dist/api";
 import { Select, SelectGroup, SelectOption, SelectVariant } from "@patternfly/react-core/dist/js/components/Select";
 import * as React from "react";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { TypeRefLabel } from "./TypeRefLabel";
 import { ArrowUpIcon } from "@patternfly/react-icons/dist/js/icons/arrow-up-icon";
 import { DmnEditorTab } from "../store/Store";
@@ -35,26 +35,45 @@ import { useExternalModels } from "../includedModels/DmnEditorDependenciesContex
 
 export type OnTypeRefChange = (newDataType: DmnBuiltInDataType) => void;
 export type OnCreateDataType = (newDataTypeName: string) => void;
+export type OnToggle = (isExpanded: boolean) => void;
 
 export const typeRefSelectorLimitedSpaceStyle = { maxHeight: "600px", boxShadow: "none", overflowY: "scroll" };
 
-export function TypeRefSelector(props: {
+export function TypeRefSelector({
+  zoom,
+  heightRef,
+  onChange,
+  typeRef,
+  isDisabled,
+  menuAppendTo,
+  onCreate,
+  onToggle,
+}: {
   zoom?: number;
   heightRef: React.RefObject<HTMLElement>;
   isDisabled?: boolean;
   typeRef: string | undefined;
   onChange: OnTypeRefChange;
   onCreate?: OnCreateDataType;
+  onToggle?: OnToggle;
   menuAppendTo?: "parent";
 }) {
   const [isOpen, setOpen] = useState(false);
   const { externalModelsByNamespace } = useExternalModels();
   const selectedDataType = useDmnEditorStore((s) =>
-    props.typeRef
-      ? s.computed(s).getDataTypes(externalModelsByNamespace).allTopLevelDataTypesByFeelName.get(props.typeRef)
+    typeRef
+      ? s.computed(s).getDataTypes(externalModelsByNamespace).allTopLevelDataTypesByFeelName.get(typeRef)
       : undefined
   );
 
+  const _onToggle = useCallback(
+    (isExpanded: boolean) => {
+      onToggle?.(isExpanded);
+      setOpen(isExpanded);
+    },
+    [onToggle]
+  );
+
   const dmnEditorStoreApi = useDmnEditorStoreApi();
 
   const { customDataTypes, externalDataTypes } = useDmnEditorStore((state) => {
@@ -78,17 +97,13 @@ export function TypeRefSelector(props: {
     return { customDataTypes, externalDataTypes };
   });
 
-  const exists = selectedDataType || (props.typeRef && builtInFeelTypeNames.has(props.typeRef));
+  const exists = selectedDataType || (typeRef && builtInFeelTypeNames.has(typeRef));
 
   const id = generateUuid();
 
   const toggleRef = useRef<HTMLButtonElement>(null);
 
-  const { maxHeight, direction } = useInViewSelect(
-    props.heightRef ?? { current: document.body },
-    toggleRef,
-    props.zoom ?? 1
-  );
+  const { maxHeight, direction } = useInViewSelect(heightRef ?? { current: document.body }, toggleRef, zoom ?? 1);
 
   return (
     <Flex
@@ -116,23 +131,23 @@ export function TypeRefSelector(props: {
       <Select
         toggleRef={toggleRef}
         className={!exists ? "kie-dmn-editor--type-ref-selector-invalid-value" : undefined}
-        isDisabled={props.isDisabled}
+        isDisabled={isDisabled}
         variant={SelectVariant.typeahead}
         typeAheadAriaLabel={DmnBuiltInDataType.Undefined}
-        onToggle={setOpen}
+        onToggle={_onToggle}
         onSelect={(e, v) => {
-          setOpen(false);
-          props.onChange(v as DmnBuiltInDataType);
+          _onToggle(false);
+          onChange(v as DmnBuiltInDataType);
         }}
-        selections={props.typeRef}
+        selections={typeRef}
         isOpen={isOpen}
         aria-labelledby={"Data types selector"}
         placeholderText={"Select a data type..."}
-        isCreatable={!!props.onCreate}
+        isCreatable={!!onCreate}
         isCreateOptionOnTop={false}
-        onCreateOption={props.onCreate}
+        onCreateOption={onCreate}
         isGrouped={true}
-        menuAppendTo={props.menuAppendTo ?? document.body}
+        menuAppendTo={menuAppendTo ?? document.body}
         maxHeight={maxHeight}
         direction={direction}
         onWheelCapture={(e) => e.stopPropagation()} // Necessary so that Reactflow doesn't mess with this event.

packages/dmn-editor/src/diagram/Diagram.tsx

@@ -319,7 +319,7 @@ export const Diagram = React.forwardRef<DiagramRef, { container: React.RefObject
               },
             });
             state.diagram._selectedNodes = [newNodeId];
-            state.focus.consumableId = id;
+            state.focus.consumableId = newNodeId;
           });
         } else if (e.dataTransfer.getData(MIME_TYPE_FOR_DMN_EDITOR_EXTERNAL_NODES_FROM_INCLUDED_MODELS)) {
           e.stopPropagation();
@@ -503,7 +503,7 @@ export const Diagram = React.forwardRef<DiagramRef, { container: React.RefObject
           });
 
           state.diagram._selectedNodes = [newDmnObejctHref];
-          state.focus.consumableId = id;
+          state.focus.consumableId = newDmnObejctHref;
         });
 
         // Indepdent of what happens in the state mutation above, we always need to reset the `ongoingConnection` at the end here.

packages/dmn-editor/src/diagram/nodes/DataTypeNodePanel.tsx

@@ -24,7 +24,7 @@ import {
 } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
 import { DmnBuiltInDataType } from "@kie-tools/boxed-expression-component/dist/api";
 import { useDmnEditorStore } from "../../store/StoreContext";
-import { OnCreateDataType, OnTypeRefChange, TypeRefSelector } from "../../dataTypes/TypeRefSelector";
+import { OnCreateDataType, OnToggle, OnTypeRefChange, TypeRefSelector } from "../../dataTypes/TypeRefSelector";
 import { useDmnEditor } from "../../DmnEditorContext";
 import { useResolvedTypeRef } from "../../dataTypes/useResolvedTypeRef";
 
@@ -38,6 +38,7 @@ export function DataTypeNodePanel(props: {
   shape: DMNDI15__DMNShape | undefined;
   onChange: OnTypeRefChange;
   onCreate?: OnCreateDataType;
+  onToggle?: OnToggle;
   dmnObjectNamespace: string | undefined;
 }) {
   const enableDataTypesToolbarOnNodes = useDmnEditorStore((s) => s.diagram.overlays.enableDataTypesToolbarOnNodes);
@@ -70,6 +71,7 @@ export function DataTypeNodePanel(props: {
               typeRef={resolvedTypeRef}
               onChange={props.onChange}
               onCreate={props.onCreate}
+              onToggle={props.onToggle}
               menuAppendTo={"parent"}
               isDisabled={isExternalNode}
             />

packages/dmn-editor/src/diagram/nodes/EditableNodeLabel.tsx

@@ -32,8 +32,8 @@ import { generateUuid } from "@kie-tools/boxed-expression-component/dist/api";
 import { useFocusableElement } from "../../focus/useFocusableElement";
 import { flushSync } from "react-dom";
 import { NodeLabelPosition } from "./NodeSvgs";
-import "./EditableNodeLabel.css";
 import { State } from "../../store/Store";
+import "./EditableNodeLabel.css";
 
 export type OnEditableNodeLabelChange = (value: string | undefined) => void;
 
@@ -52,6 +52,7 @@ export function EditableNodeLabel({
   skipValidation,
   onGetAllUniqueNames,
   fontCssProperties,
+  enableAutoFocusing,
 }: {
   id?: string;
   shouldCommitOnBlur?: boolean;
@@ -67,6 +68,7 @@ export function EditableNodeLabel({
   skipValidation?: boolean;
   onGetAllUniqueNames: (s: State) => UniqueNameIndex;
   fontCssProperties?: React.CSSProperties;
+  enableAutoFocusing?: boolean;
 }) {
   const displayValue = useDmnEditorStore((s) => {
     if (!value) {
@@ -199,15 +201,15 @@ export function EditableNodeLabel({
 
   useFocusableElement(
     ref,
-    id ?? namedElement?.["@_id"],
+    enableAutoFocusing ?? true ? id ?? namedElement?.["@_id"] : undefined,
     useCallback(
       (cb) => {
         setTimeout(() => {
           flushSync(() => {
             setEditing(true);
           });
           cb();
-        });
+        }, 100);
       },
       [setEditing]
     )

packages/dmn-editor/src/diagram/nodes/NodeSvgs.tsx

@@ -67,7 +67,17 @@ export function normalize<T extends NodeSvgProps>(_props: T) {
 }
 
 export function InputDataNodeSvg(__props: NodeSvgProps & { isCollection?: boolean }) {
-  const { strokeWidth, x, y, width, height, fillColor, strokeColor, props } = normalize(__props);
+  const {
+    strokeWidth,
+    x,
+    y,
+    width,
+    height,
+    fillColor,
+    strokeColor,
+    props: { isCollection, ...props },
+  } = normalize(__props);
+
   const rx =
     typeof height === "number"
       ? height / 2
@@ -97,13 +107,22 @@ export function InputDataNodeSvg(__props: NodeSvgProps & { isCollection?: boolea
         rx={rx}
         ry={ry}
       />
-      {props.isCollection && <NodeCollectionMarker {...__props} anchor={"bottom"} />}
+      {isCollection && <NodeCollectionMarker {...__props} anchor={"bottom"} />}
     </>
   );
 }
 
 export function DecisionNodeSvg(__props: NodeSvgProps & { isCollection?: boolean }) {
-  const { strokeWidth, x, y, width, height, fillColor, strokeColor, props } = normalize(__props);
+  const {
+    strokeWidth,
+    x,
+    y,
+    width,
+    height,
+    fillColor,
+    strokeColor,
+    props: { isCollection, ...props },
+  } = normalize(__props);
 
   return (
     <>
@@ -118,7 +137,7 @@ export function DecisionNodeSvg(__props: NodeSvgProps & { isCollection?: boolean
         strokeLinejoin={"round"}
         {...props}
       />
-      {props.isCollection && <NodeCollectionMarker {...__props} anchor="top" />}
+      {isCollection && <NodeCollectionMarker {...__props} anchor="top" />}
     </>
   );
 }