@itwin/grouping-mapping-widget 0.7.0 → 0.8.0

package/lib/esm/widget/components/GroupPropertyAction.js

@@ -1,16 +1,26 @@
-import { ContentSpecificationTypes, DefaultContentDisplayTypes, PropertyValueFormat, RelationshipMeaning, RuleTypes, } from "@itwin/presentation-common";
-import { Presentation } from "@itwin/presentation-frontend";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { renderToStaticMarkup } from "react-dom/server";
+import { PropertyValueFormat } from "@itwin/presentation-common";
 import { useActiveIModelConnection } from "@itwin/appui-react";
-import { SvgChevronDown, SvgChevronUp, SvgRemove, } from "@itwin/itwinui-icons-react";
-import { Alert, Fieldset, IconButton, LabeledInput, LabeledSelect, Select, Small, Text, } from "@itwin/itwinui-react";
+import { Alert, Button, Fieldset, IconButton, Label, LabeledInput, LabeledSelect, Modal, ModalButtonBar, Small, Surface, Text, } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ActionPanel from "./ActionPanel";
 import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
 import { handleError, WidgetHeader } from "./utils";
-import "./GroupPropertyAction.scss";
-import { DataType, QuantityType } from "@itwin/insights-client";
 import { useMappingClient } from "./context/MappingClientContext";
 import { useGroupingMappingApiConfig } from "./context/GroupingApiConfigContext";
+import { HorizontalTile } from "./HorizontalTile";
+import { DataType, QuantityType } from "@itwin/insights-client";
+import { SvgClose, SvgDragHandleVertical, SvgMoreVerticalSmall, SvgRemove, SvgSearch, } from "@itwin/itwinui-icons-react";
+import { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import SortableHorizontalTile from "./SortableHorizontalTile";
+import Split from "react-split";
+import "./GroupPropertyAction.scss";
+import { convertPresentationFields, convertToECProperties, fetchPresentationDescriptor, findProperties, } from "./GroupPropertyUtils";
 export const quantityTypesSelectionOptions = [
     { value: QuantityType.Area, label: "Area" },
     { value: QuantityType.Distance, label: "Distance" },
@@ -21,130 +31,6 @@ export const quantityTypesSelectionOptions = [
     { value: QuantityType.Volume, label: "Volume" },
     { value: QuantityType.Undefined, label: "No Quantity Type" },
 ];
-const extractPrimitive = (propertiesField, classToPropertiesMapping, navigation) => {
-    var _a, _b;
-    // There are rare cases which only happens in multiple selections where it returns more than one.
-    // This also checks if this property comes from a navigation property
-    const className = (_a = navigation === null || navigation === void 0 ? void 0 : navigation.rootClassName) !== null && _a !== void 0 ? _a : propertiesField.properties[0].property.classInfo.name;
-    // Sometimes class names are not defined. Type error. Not guaranteed.
-    if (!className) {
-        return;
-    }
-    if (!classToPropertiesMapping.has(className)) {
-        classToPropertiesMapping.set(className, []);
-    }
-    // Gets property name. Appends path if from navigation.
-    const propertyName = navigation
-        ? `${navigation.navigationName}.${propertiesField.properties[0].property.name}`
-        : propertiesField.properties[0].property.name;
-    const label = navigation
-        ? `${propertiesField.label} (${navigation === null || navigation === void 0 ? void 0 : navigation.navigationName})`
-        : propertiesField.label;
-    // Ignore hardcoded BisCore navigation properties
-    if (propertiesField.type.typeName === "navigation") {
-        return;
-    }
-    else {
-        (_b = classToPropertiesMapping.get(className)) === null || _b === void 0 ? void 0 : _b.push({
-            name: propertyName,
-            label,
-            type: propertiesField.properties[0].property.type,
-        });
-    }
-};
-const extractStructProperties = (name, className, classToPropertiesMapping, members) => {
-    var _a;
-    for (const member of members) {
-        if (member.type.valueFormat === PropertyValueFormat.Primitive) {
-            if (!classToPropertiesMapping.has(className)) {
-                classToPropertiesMapping.set(className, []);
-            }
-            (_a = classToPropertiesMapping.get(className)) === null || _a === void 0 ? void 0 : _a.push({
-                name: `${name}.${member.name}`,
-                label: member.label,
-                type: member.type.typeName,
-            });
-        }
-        else if (member.type.valueFormat === PropertyValueFormat.Struct) {
-            extractStructProperties(`${name}.${member.name}`, className, classToPropertiesMapping, member.type.members);
-        }
-    }
-};
-const extractProperties = (properties, classToPropertiesMapping, navigation) => {
-    var _a, _b;
-    for (const property of properties) {
-        switch (property.type.valueFormat) {
-            case PropertyValueFormat.Primitive: {
-                extractPrimitive(property, classToPropertiesMapping, navigation);
-                break;
-            }
-            // Get structs
-            case PropertyValueFormat.Struct: {
-                const nestedContentField = property;
-                // Only handling single path and not handling nested content fields within navigations
-                if (nestedContentField.pathToPrimaryClass &&
-                    nestedContentField.pathToPrimaryClass.length > 1) {
-                    break;
-                }
-                switch (nestedContentField.relationshipMeaning) {
-                    case RelationshipMeaning.SameInstance: {
-                        // Check for aspects. Ignore them if coming from navigation.
-                        if (!navigation &&
-                            (nestedContentField.pathToPrimaryClass[0].relationshipInfo
-                                .name === "BisCore:ElementOwnsUniqueAspect" ||
-                                nestedContentField.pathToPrimaryClass[0].relationshipInfo
-                                    .name === "BisCore:ElementOwnsMultiAspects")) {
-                            const className = nestedContentField.contentClassInfo.name;
-                            if (!classToPropertiesMapping.has(className)) {
-                                classToPropertiesMapping.set(className, []);
-                            }
-                            extractProperties(nestedContentField.nestedFields, classToPropertiesMapping, navigation);
-                        }
-                        break;
-                    }
-                    // Navigation properties
-                    case RelationshipMeaning.RelatedInstance: {
-                        if (
-                        // Deal with a TypeDefinition
-                        nestedContentField.pathToPrimaryClass[0].relationshipInfo.name ===
-                            "BisCore:GeometricElement3dHasTypeDefinition") {
-                            const className = nestedContentField.pathToPrimaryClass[0].targetClassInfo.name;
-                            extractProperties(nestedContentField.nestedFields, classToPropertiesMapping, {
-                                navigationName: "TypeDefinition",
-                                rootClassName: className,
-                            });
-                            // Hardcoded BisCore navigation properties for the type definition.
-                            (_a = classToPropertiesMapping.get(className)) === null || _a === void 0 ? void 0 : _a.push({
-                                name: "TypeDefinition.Model.ModeledElement.UserLabel",
-                                label: "Model UserLabel (TypeDefinition)",
-                                type: "string",
-                            });
-                            (_b = classToPropertiesMapping.get(className)) === null || _b === void 0 ? void 0 : _b.push({
-                                name: "TypeDefinition.Model.ModeledElement.CodeValue",
-                                label: "Model CodeValue (TypeDefinition)",
-                                type: "string",
-                            });
-                        }
-                        break;
-                    }
-                    default: {
-                        // Some elements don't have a path to primary class or relationship meaning..
-                        // Most likely a simple struct property
-                        if (!nestedContentField.pathToPrimaryClass) {
-                            const columnName = property.properties[0]
-                                .property.name;
-                            const className = property.properties[0]
-                                .property.classInfo.name;
-                            extractStructProperties(navigation
-                                ? `${navigation.navigationName}.${columnName}`
-                                : columnName, navigation ? navigation.rootClassName : className, classToPropertiesMapping, property.type.members);
-                        }
-                    }
-                }
-            }
-        }
-    }
-};
 const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, groupPropertyName, keySet, returnFn, }) => {
     const iModelConnection = useActiveIModelConnection();
     const { getAccessToken } = useGroupingMappingApiConfig();
@@ -152,117 +38,75 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
     const [propertyName, setPropertyName] = useState("");
     const [dataType, setDataType] = useState(DataType.Undefined);
     const [quantityType, setQuantityType] = useState(QuantityType.Undefined);
-    const [classToPropertiesMapping, setClassToPropertiesMapping] = useState();
-    const [ecProperties, setEcProperties] = useState([]);
+    const [selectedProperties, setSelectedProperties] = useState([]);
+    const [propertiesMetaData, setPropertiesMetaData] = useState([]);
+    const [propertiesNotFoundAlert, setPropertiesNotFoundAlert] = useState(false);
     const [validator, showValidationMessage] = useValidator();
-    const [propertyAlert, setPropertyAlert] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
+    const [searchInput, setSearchInput] = useState("");
+    const [activeSearchInput, setActiveSearchInput] = useState("");
+    const [searched, setSearched] = useState(false);
+    const [activeDragProperty, setActiveDragProperty] = useState();
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const [showModal, setShowModal] = useState(false);
+    const handleDragStart = useCallback((event) => {
+        const { active } = event;
+        const activeProperty = selectedProperties.find((p) => active.id === p.key);
+        setActiveDragProperty(activeProperty);
+    }, [selectedProperties]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (over && (active.id !== over.id)) {
+            setSelectedProperties((items) => {
+                const oldIndex = selectedProperties.findIndex((p) => active.id === p.key);
+                const newIndex = selectedProperties.findIndex((p) => over.id === p.key);
+                return arrayMove(items, oldIndex, newIndex);
+            });
+        }
+        setActiveDragProperty(undefined);
+    }, [selectedProperties]);
+    const filteredProperties = useMemo(() => propertiesMetaData.filter((p) => [p.displayLabel, p.categoryLabel, p.actualECClassName]
+        .map((l) => l.toLowerCase())
+        .some((l) => l.includes(activeSearchInput.toLowerCase()))), [activeSearchInput, propertiesMetaData]);
     useEffect(() => {
-        const getContent = async () => {
-            var _a, _b, _c, _d, _e;
+        const generateProperties = async () => {
+            var _a;
             setIsLoading(true);
-            const ruleSet = {
-                id: "element-properties",
-                rules: [
-                    {
-                        ruleType: RuleTypes.Content,
-                        specifications: [
-                            {
-                                specType: ContentSpecificationTypes.SelectedNodeInstances,
-                            },
-                        ],
-                    }
-                ],
-            };
-            const requestOptions = {
-                imodel: iModelConnection,
-                keys: keySet,
-                rulesetOrId: ruleSet,
-                displayType: DefaultContentDisplayTypes.PropertyPane,
-            };
-            const content = await Presentation.presentation.getContentDescriptor(requestOptions);
-            // Only primitives and structs for now
-            const properties = (_a = content === null || content === void 0 ? void 0 : content.fields.filter((field) => field.type.valueFormat === PropertyValueFormat.Primitive ||
+            if (!iModelConnection)
+                return;
+            const descriptor = await fetchPresentationDescriptor(iModelConnection, keySet);
+            // Only allow primitives and structs
+            const propertyFields = (_a = descriptor === null || descriptor === void 0 ? void 0 : descriptor.fields.filter((field) => field.type.valueFormat === PropertyValueFormat.Primitive ||
                 field.type.valueFormat === PropertyValueFormat.Struct)) !== null && _a !== void 0 ? _a : [];
-            // Map properties to their classes
-            const classToPropertiesMapping = new Map();
-            extractProperties(properties, classToPropertiesMapping);
-            const rootClassName = keySet.instanceKeys.keys().next().value;
-            // Hardcoded BisCore navigation properties.
-            (_b = classToPropertiesMapping.get(rootClassName)) === null || _b === void 0 ? void 0 : _b.push({
-                name: "Model.ModeledElement.UserLabel",
-                label: "Model UserLabel",
-                type: "string",
-            });
-            (_c = classToPropertiesMapping.get(rootClassName)) === null || _c === void 0 ? void 0 : _c.push({
-                name: "Model.ModeledElement.CodeValue",
-                label: "Model CodeValue",
-                type: "string",
-            });
-            (_d = classToPropertiesMapping.get(rootClassName)) === null || _d === void 0 ? void 0 : _d.push({
-                name: "Category.CodeValue",
-                label: "Category CodeValue",
-                type: "string",
-            });
-            (_e = classToPropertiesMapping.get(rootClassName)) === null || _e === void 0 ? void 0 : _e.push({
-                name: "Category.UserLabel",
-                label: "Category UserLabel",
-                type: "string",
-            });
-            setClassToPropertiesMapping(classToPropertiesMapping);
-            let newEcProperties;
-            // Fetch already existing ec properties then add all classes from presentation
+            const propertiesMetaData = convertPresentationFields(propertyFields);
+            setPropertiesMetaData(propertiesMetaData);
             if (groupPropertyId) {
                 const accessToken = await getAccessToken();
                 let response;
                 try {
                     response = await mappingClient.getGroupProperty(accessToken, iModelId, mappingId, groupId, groupPropertyId);
+                    setPropertyName(response.propertyName);
+                    setDataType(response.dataType);
+                    setQuantityType(response.quantityType);
+                    const properties = findProperties(response.ecProperties, propertiesMetaData);
+                    if (properties.length === 0) {
+                        setPropertiesNotFoundAlert(true);
+                    }
+                    setSelectedProperties(properties);
                 }
                 catch (error) {
                     handleError(error.status);
                 }
-                if (!response) {
-                    return;
-                }
-                newEcProperties = response.ecProperties;
-                let keys = Array.from(classToPropertiesMapping.keys()).reverse();
-                for (const ecProperty of newEcProperties) {
-                    keys = keys.filter((key) => `${ecProperty.ecSchemaName}:${ecProperty.ecClassName}` !== key);
-                }
-                newEcProperties.push(...keys.map((key) => ({
-                    ecSchemaName: key.split(":")[0],
-                    ecClassName: key.split(":")[1],
-                    // Placeholders for properties
-                    ecPropertyName: "",
-                    ecPropertyType: DataType.Undefined,
-                })));
-                setPropertyName(response.propertyName);
-                setDataType(response.dataType);
-                setQuantityType(response.quantityType);
             }
-            else {
-                newEcProperties = Array.from(classToPropertiesMapping)
-                    .map(([key]) => ({
-                    ecSchemaName: key.split(":")[0],
-                    ecClassName: key.split(":")[1],
-                    // Placeholders for properties
-                    ecPropertyName: "",
-                    ecPropertyType: DataType.Undefined,
-                }))
-                    .reverse();
-            }
-            setEcProperties(newEcProperties);
             setIsLoading(false);
         };
-        void getContent();
+        void generateProperties();
     }, [getAccessToken, mappingClient, groupId, groupPropertyId, iModelConnection, iModelId, keySet, mappingId]);
     const onSave = async () => {
-        const filteredEcProperties = ecProperties.filter((ecProperty) => ecProperty.ecPropertyName && ecProperty.ecPropertyType);
-        if (!filteredEcProperties.length || !validator.allValid()) {
+        if (!validator.allValid()) {
             showValidationMessage(true);
-            if (!filteredEcProperties.length) {
-                setPropertyAlert(true);
-            }
             return;
         }
         try {
@@ -272,7 +116,7 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
                 propertyName,
                 dataType,
                 quantityType,
-                ecProperties: filteredEcProperties,
+                ecProperties: selectedProperties.map((p) => convertToECProperties(p)).flat(),
             };
             groupPropertyId
                 ? await mappingClient.updateGroupProperty(accessToken, iModelId, mappingId, groupId, groupPropertyId, groupProperty)
@@ -284,52 +128,29 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
             setIsLoading(false);
         }
     };
-    const onChange = useCallback((value, index) => {
-        setPropertyAlert(false);
-        const property = JSON.parse(value);
-        setEcProperties((ecProperties) => {
-            const updatedEcProperties = [...ecProperties];
-            updatedEcProperties[index].ecPropertyName = property.name;
-            // Unique types
-            let type = DataType.Undefined;
-            switch (property.type) {
-                case "long":
-                    type = DataType.Integer;
-                    break;
-                default:
-                    type = property.type;
-            }
-            updatedEcProperties[index].ecPropertyType = type;
-            return updatedEcProperties;
-        });
+    const startSearch = useCallback(() => {
+        if (!searchInput)
+            return;
+        setActiveSearchInput(searchInput);
+        setSearched(true);
+    }, [searchInput]);
+    const clearSearch = useCallback(() => {
+        setSearchInput("");
+        setActiveSearchInput("");
+        setSearched(false);
     }, []);
-    const propertyOptions = useMemo(() => {
-        return ecProperties.map((ecProperty) => {
-            var _a, _b;
-            return (_b = (_a = classToPropertiesMapping === null || classToPropertiesMapping === void 0 ? void 0 : classToPropertiesMapping.get(`${ecProperty.ecSchemaName}:${ecProperty.ecClassName}`)) === null || _a === void 0 ? void 0 : _a.map((property) => ({
-                value: JSON.stringify({
-                    name: property.name,
-                    type: property.type,
-                }),
-                label: property.label,
-            }))) !== null && _b !== void 0 ? _b : [];
-        });
-    }, [classToPropertiesMapping, ecProperties]);
-    const getValue = useCallback((ecProperty, index) => {
-        var _a;
-        const property = (_a = classToPropertiesMapping === null || classToPropertiesMapping === void 0 ? void 0 : classToPropertiesMapping.get(`${ecProperty.ecSchemaName}:${ecProperty.ecClassName}`)) === null || _a === void 0 ? void 0 : _a.find((property) => property.name === ecProperties[index].ecPropertyName);
-        const result = JSON.stringify({
-            name: property === null || property === void 0 ? void 0 : property.name,
-            type: property === null || property === void 0 ? void 0 : property.type,
-        });
-        return result;
-    }, [classToPropertiesMapping, ecProperties]);
-    return (React.createElement(React.Fragment, null,
+    useEffect(() => {
+        if (searchInput.length === 0) {
+            setSearched(false);
+            clearSearch();
+        }
+    }, [searchInput, setSearched, clearSearch]);
+    return (React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd },
         React.createElement(WidgetHeader, { title: groupPropertyName !== null && groupPropertyName !== void 0 ? groupPropertyName : "Add Property", returnFn: async () => returnFn(false) }),
         React.createElement("div", { className: 'gmw-group-property-action-container' },
-            React.createElement(Fieldset, { className: 'gmw-property-options', legend: 'Property Details' },
+            React.createElement(Fieldset, { disabled: isLoading, className: 'gmw-property-options', legend: 'Property Details' },
                 React.createElement(Small, { className: 'gmw-field-legend' }, "Asterisk * indicates mandatory fields."),
-                React.createElement(LabeledInput, { id: 'propertyName', label: 'Property Name', value: propertyName, required: true, disabled: isLoading, onChange: (event) => {
+                React.createElement(LabeledInput, { id: 'propertyName', label: 'Property Name', value: propertyName, required: true, onChange: (event) => {
                         setPropertyName(event.target.value);
                         validator.showMessageFor("propertyName");
                     }, message: validator.message("propertyName", propertyName, NAME_REQUIREMENTS), status: validator.message("propertyName", propertyName, NAME_REQUIREMENTS)
@@ -337,7 +158,7 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
                         : undefined, onBlur: () => {
                         validator.showMessageFor("propertyName");
                     } }),
-                React.createElement(LabeledSelect, { label: "Data Type", id: 'dataType', disabled: isLoading, options: [
+                React.createElement(LabeledSelect, { label: "Data Type", id: 'dataType', options: [
                         { value: DataType.Boolean, label: "Boolean" },
                         { value: DataType.Number, label: "Number" },
                         { value: DataType.String, label: "String" },
@@ -349,45 +170,71 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
                         : undefined, onBlur: () => {
                         validator.showMessageFor("dataType");
                     }, onShow: () => { }, onHide: () => { } }),
-                React.createElement(LabeledSelect, { label: 'Quantity Type', disabled: isLoading, options: quantityTypesSelectionOptions, value: quantityType, onChange: setQuantityType, onShow: () => { }, onHide: () => { } })),
-            React.createElement(Fieldset, { className: 'gmw-property-selection-container', legend: 'Properties' },
-                propertyAlert && (React.createElement(Alert, { type: "negative" }, "Please select at least one property.")),
-                isLoading &&
-                    Array(3)
-                        .fill(null)
-                        .map((_, index) => (React.createElement(Text, { key: index, variant: 'headline', isSkeleton: true }, "LOADING SKELETON"))),
-                ecProperties.map((ecProperty, index) => {
-                    return (React.createElement("div", { className: 'gmw-property-select-item', key: `${ecProperty.ecSchemaName}${ecProperty.ecClassName}` },
-                        React.createElement(Text, { variant: 'leading' }, ecProperty.ecClassName),
-                        React.createElement(Text, { isMuted: true, variant: 'small' }, ecProperty.ecSchemaName),
-                        React.createElement("div", { className: 'gmw-selection-and-reorder' },
-                            React.createElement(Select, { options: propertyOptions[index], value: getValue(ecProperty, index), onChange: (value) => { value && onChange(value, index); }, placeholder: "<No Property Mapped>", style: { width: "100%" }, onShow: () => { }, onHide: () => { } }),
-                            React.createElement(IconButton, { onClick: () => {
-                                    const updatedEcPropertyList = [...ecProperties];
-                                    updatedEcPropertyList[index] = {
-                                        ...updatedEcPropertyList[index],
-                                        ecPropertyName: "",
-                                        ecPropertyType: DataType.Undefined,
-                                    };
-                                    setEcProperties(updatedEcPropertyList);
-                                }, disabled: !ecProperty.ecPropertyName && !ecProperty.ecPropertyType },
-                                React.createElement(SvgRemove, null)),
-                            React.createElement(IconButton, { onClick: () => {
-                                    const tab = [...ecProperties];
-                                    const item = tab.splice(index, 1);
-                                    tab.splice(index - 1, 0, item[0]);
-                                    setEcProperties(tab);
-                                }, disabled: index === 0 },
-                                React.createElement(SvgChevronUp, null)),
-                            React.createElement(IconButton, { onClick: () => {
-                                    const tab = [...ecProperties];
-                                    const item = tab.splice(index, 1);
-                                    tab.splice(index + 1, 0, item[0]);
-                                    setEcProperties(tab);
-                                }, disabled: index === ecProperties.length - 1 },
-                                React.createElement(SvgChevronDown, null)))));
-                }))),
-        React.createElement(ActionPanel, { onSave: onSave, onCancel: async () => returnFn(false), isLoading: isLoading })));
+                React.createElement(LabeledSelect, { label: 'Quantity Type', options: quantityTypesSelectionOptions, value: quantityType, onChange: setQuantityType, onShow: () => { }, onHide: () => { } })),
+            propertiesNotFoundAlert &&
+                React.createElement(Alert, { type: "warning" }, "Warning: Could not match saved properties from the current generated list. It does not confirm or deny validity. Overwriting will occur if a new selection is made and saved."),
+            React.createElement(Fieldset, { className: 'gmw-property-view-container', legend: "Mapped Properties" },
+                React.createElement("div", { className: "gmw-property-view-button" },
+                    React.createElement(Button, { onClick: async () => setShowModal(true), disabled: isLoading }, "Select Properties")),
+                React.createElement("div", { className: "gmw-properties-list" }, selectedProperties.length === 0 && !isLoading ?
+                    React.createElement("div", { className: "gmw-empty-selection" },
+                        React.createElement(Text, null, "No properties selected."),
+                        React.createElement(Text, null, "Press the \"Select Properties\" button for options.")) :
+                    selectedProperties.map((property) => (React.createElement(HorizontalTile, { key: property.key, title: `${property.displayLabel} (${property.propertyType})`, titleTooltip: `${property.actualECClassName}`, subText: property.categoryLabel, actionGroup: null })))))),
+        React.createElement(ActionPanel, { onSave: onSave, onCancel: async () => returnFn(false), isLoading: isLoading, isSavingDisabled: selectedProperties.length === 0 || !propertyName || !dataType }),
+        React.createElement(Modal, { title: "Properties Selection", isOpen: showModal, onClose: () => {
+                setShowModal(false);
+                clearSearch();
+            }, closeOnExternalClick: false },
+            React.createElement(Split, { expandToMin: false, className: "gmw-property-selection-container", gutterAlign: "center", gutterSize: 2, gutter: () => {
+                    // Expects HTMLElement
+                    const dragHangle = renderToStaticMarkup(React.createElement("div", { className: "gmw-gutter-drag-icon" },
+                        React.createElement(SvgMoreVerticalSmall, null)));
+                    const gutter = document.createElement("div");
+                    gutter.className = `gmw-gutter`;
+                    gutter.innerHTML = dragHangle;
+                    return gutter;
+                }, direction: "horizontal" },
+                React.createElement(Surface, { className: "gmw-available-properties", elevation: 1 },
+                    React.createElement("div", { className: "gmw-available-properties-header" },
+                        React.createElement(Label, { as: "span" }, "Available Properties"),
+                        React.createElement(LabeledInput, { displayStyle: "inline", iconDisplayStyle: "inline", className: "gmw-available-prop-search", value: searchInput, size: "small", placeholder: "Search....", onChange: (event) => {
+                                const { target: { value }, } = event;
+                                setSearchInput(value);
+                            }, onKeyDown: (event) => {
+                                if (event.key === "Enter") {
+                                    startSearch();
+                                }
+                            }, svgIcon: searched ? (React.createElement(IconButton, { onClick: clearSearch, styleType: "borderless" },
+                                React.createElement(SvgClose, null))) : (React.createElement(IconButton, { onClick: startSearch, styleType: "borderless" },
+                                React.createElement(SvgSearch, null))) })),
+                    filteredProperties.length === 0 ?
+                        React.createElement("div", { className: "gmw-empty-selection" },
+                            React.createElement(Text, null, "No properties available. ")) :
+                        React.createElement("div", { className: "gmw-properties-list" }, filteredProperties.map((property) => (React.createElement(HorizontalTile, { key: property.key, title: `${property.displayLabel} (${property.propertyType})`, titleTooltip: `${property.actualECClassName}`, subText: property.categoryLabel, actionGroup: null, selected: selectedProperties.some((p) => property.key === p.key), onClick: () => setSelectedProperties((sp) => sp.some((p) => property.key === p.key)
+                                ? sp.filter((p) => property.key !== p.key)
+                                : [...sp, property]) }))))),
+                React.createElement(Surface, { className: "gmw-selected-properties", elevation: 1 },
+                    React.createElement(Label, { as: "span" }, "Selected Properties"),
+                    selectedProperties.length === 0 ?
+                        React.createElement("div", { className: "gmw-empty-selection" },
+                            React.createElement(Text, null, "No properties selected."),
+                            React.createElement(Text, null, "Add some by clicking on the properties shown left.")) :
+                        React.createElement("div", { className: "gmw-properties-list" },
+                            React.createElement(SortableContext, { items: selectedProperties.map((p) => p.key), strategy: verticalListSortingStrategy }, selectedProperties.map((property) => React.createElement(SortableHorizontalTile, { key: property.key, id: property.key, title: `${property.displayLabel} (${property.propertyType})`, titleTooltip: `${property.actualECClassName}`, subText: property.categoryLabel, actionGroup: React.createElement("div", null,
+                                    React.createElement(IconButton, { styleType: "borderless", title: "Remove", onClick: () => {
+                                            setSelectedProperties((sp) => sp.filter((p) => property.key !== p.key));
+                                        } },
+                                        React.createElement(SvgRemove, null))) })))))),
+            React.createElement(ModalButtonBar, null,
+                React.createElement(Button, { onClick: () => {
+                        setShowModal(false);
+                        clearSearch();
+                    }, styleType: "high-visibility" }, "Close"))),
+        React.createElement(DragOverlay, { zIndex: 9999 }, activeDragProperty ?
+            React.createElement(HorizontalTile, { title: `${activeDragProperty.displayLabel} (${activeDragProperty.propertyType})`, titleTooltip: `${activeDragProperty.actualECClassName}`, subText: activeDragProperty.categoryLabel, actionGroup: React.createElement(IconButton, { styleType: "borderless" },
+                    React.createElement(SvgRemove, null)), dragHandle: React.createElement("div", { className: "gmw-drag-icon" },
+                    React.createElement(SvgDragHandleVertical, null)) }) : null)));
 };
 export default GroupPropertyAction;
 //# sourceMappingURL=GroupPropertyAction.js.map