@itwin/grouping-mapping-widget 0.7.0 → 0.8.1

package/lib/cjs/widget/components/BlockingOverlay.js

@@ -14,8 +14,7 @@ const utils_1 = require("./utils");
 require("./BlockingOverlay.scss");
 const BlockingOverlay = ({ isVisible }) => {
     return (react_1.default.createElement("div", { className: classnames_1.default("gmw-group-mapping-blocking-overlay", isVisible && "gmw-visible") },
-        react_1.default.createElement("div", { className: "gmw-group-mapping-blocking-overlay-spinner" },
-            react_1.default.createElement(utils_1.LoadingSpinner, null))));
+        react_1.default.createElement(utils_1.LoadingSpinner, null)));
 };
 exports.BlockingOverlay = BlockingOverlay;
 //# sourceMappingURL=BlockingOverlay.js.map

package/lib/cjs/widget/components/BlockingOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockingOverlay.js","sourceRoot":"","sources":["../../../../src/widget/components/BlockingOverlay.tsx"],"names":[],"mappings":";;;;;;AAAA;;;+FAG+F;AAC/F,4DAAoC;AACpC,kDAA0B;AAC1B,mCAAyC;AACzC,kCAAgC;AAMzB,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAwB,EAAE,EAAE;IACrE,OAAO,CACL,uCAAK,SAAS,EAAE,oBAAU,CAAC,oCAAoC,EAAE,SAAS,IAAI,aAAa,CAAC;QAC1F,uCAAK,SAAS,EAAC,4CAA4C;YACzD,8BAAC,sBAAc,OAAG,CACd,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,eAAe,mBAQ1B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport classnames from \"classnames\";\nimport React from \"react\";\nimport { LoadingSpinner } from \"./utils\";\nimport \"./BlockingOverlay.scss\";\n\nexport interface BlockingOverlayProps {\n  isVisible: boolean;\n}\n\nexport const BlockingOverlay = ({ isVisible }: BlockingOverlayProps) => {\n  return (\n    <div className={classnames(\"gmw-group-mapping-blocking-overlay\", isVisible && \"gmw-visible\")}>\n      <div className=\"gmw-group-mapping-blocking-overlay-spinner\">\n        <LoadingSpinner />\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"BlockingOverlay.js","sourceRoot":"","sources":["../../../../src/widget/components/BlockingOverlay.tsx"],"names":[],"mappings":";;;;;;AAAA;;;+FAG+F;AAC/F,4DAAoC;AACpC,kDAA0B;AAC1B,mCAAyC;AACzC,kCAAgC;AAMzB,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAwB,EAAE,EAAE;IACrE,OAAO,CACL,uCAAK,SAAS,EAAE,oBAAU,CAAC,oCAAoC,EAAE,SAAS,IAAI,aAAa,CAAC;QAC1F,8BAAC,sBAAc,OAAG,CACd,CACP,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,eAAe,mBAM1B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport classnames from \"classnames\";\nimport React from \"react\";\nimport { LoadingSpinner } from \"./utils\";\nimport \"./BlockingOverlay.scss\";\n\nexport interface BlockingOverlayProps {\n  isVisible: boolean;\n}\n\nexport const BlockingOverlay = ({ isVisible }: BlockingOverlayProps) => {\n  return (\n    <div className={classnames(\"gmw-group-mapping-blocking-overlay\", isVisible && \"gmw-visible\")}>\n      <LoadingSpinner />\n    </div>\n  );\n};\n"]}

package/lib/cjs/widget/components/BlockingOverlay.scss

@@ -2,14 +2,18 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import '~@itwin/itwinui-css/scss/variables';
+@import "~@itwin/itwinui-css/scss/variables";
 
 .gmw-group-mapping-blocking-overlay {
   background-color: black;
   position: absolute;
-  height: inherit;
-  right: 6px;
-  left: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: $iui-baseline;
+  bottom: $iui-baseline;
+  right: $iui-s;
+  left: $iui-s;
   opacity: 60%;
   z-index: 9999;
   visibility: hidden;
@@ -18,9 +22,3 @@
     visibility: visible;
   }
 }
-
-.gmw-group-mapping-blocking-overlay-spinner {
-  display: flex;
-  justify-content: center;
-  height: inherit;
-}

package/lib/cjs/widget/components/GroupPropertyAction.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { KeySet } from "@itwin/presentation-common";
 import type { SelectOption } from "@itwin/itwinui-react";
-import "./GroupPropertyAction.scss";
 import { QuantityType } from "@itwin/insights-client";
+import "./GroupPropertyAction.scss";
 interface GroupPropertyActionProps {
     iModelId: string;
     mappingId: string;

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

@@ -23,19 +23,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.quantityTypesSelectionOptions = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const server_1 = require("react-dom/server");
 const presentation_common_1 = require("@itwin/presentation-common");
-const presentation_frontend_1 = require("@itwin/presentation-frontend");
 const appui_react_1 = require("@itwin/appui-react");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const react_1 = __importStar(require("react"));
 const ActionPanel_1 = __importDefault(require("./ActionPanel"));
 const useValidator_1 = __importStar(require("../hooks/useValidator"));
 const utils_1 = require("./utils");
-require("./GroupPropertyAction.scss");
-const insights_client_1 = require("@itwin/insights-client");
 const MappingClientContext_1 = require("./context/MappingClientContext");
 const GroupingApiConfigContext_1 = require("./context/GroupingApiConfigContext");
+const HorizontalTile_1 = require("./HorizontalTile");
+const insights_client_1 = require("@itwin/insights-client");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const SortableHorizontalTile_1 = __importDefault(require("./SortableHorizontalTile"));
+const react_split_1 = __importDefault(require("react-split"));
+require("./GroupPropertyAction.scss");
+const GroupPropertyUtils_1 = require("./GroupPropertyUtils");
 exports.quantityTypesSelectionOptions = [
     { value: insights_client_1.QuantityType.Area, label: "Area" },
     { value: insights_client_1.QuantityType.Distance, label: "Distance" },
@@ -46,130 +56,6 @@ exports.quantityTypesSelectionOptions = [
     { value: insights_client_1.QuantityType.Volume, label: "Volume" },
     { value: insights_client_1.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 === presentation_common_1.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 === presentation_common_1.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 presentation_common_1.PropertyValueFormat.Primitive: {
-                extractPrimitive(property, classToPropertiesMapping, navigation);
-                break;
-            }
-            // Get structs
-            case presentation_common_1.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 presentation_common_1.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 presentation_common_1.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 = appui_react_1.useActiveIModelConnection();
     const { getAccessToken } = GroupingApiConfigContext_1.useGroupingMappingApiConfig();
@@ -177,117 +63,75 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
     const [propertyName, setPropertyName] = react_1.useState("");
     const [dataType, setDataType] = react_1.useState(insights_client_1.DataType.Undefined);
     const [quantityType, setQuantityType] = react_1.useState(insights_client_1.QuantityType.Undefined);
-    const [classToPropertiesMapping, setClassToPropertiesMapping] = react_1.useState();
-    const [ecProperties, setEcProperties] = react_1.useState([]);
+    const [selectedProperties, setSelectedProperties] = react_1.useState([]);
+    const [propertiesMetaData, setPropertiesMetaData] = react_1.useState([]);
+    const [propertiesNotFoundAlert, setPropertiesNotFoundAlert] = react_1.useState(false);
     const [validator, showValidationMessage] = useValidator_1.default();
-    const [propertyAlert, setPropertyAlert] = react_1.useState(false);
     const [isLoading, setIsLoading] = react_1.useState(false);
+    const [searchInput, setSearchInput] = react_1.useState("");
+    const [activeSearchInput, setActiveSearchInput] = react_1.useState("");
+    const [searched, setSearched] = react_1.useState(false);
+    const [activeDragProperty, setActiveDragProperty] = react_1.useState();
+    const sensors = core_1.useSensors(core_1.useSensor(core_1.PointerSensor), core_1.useSensor(core_1.KeyboardSensor, {
+        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
+    }));
+    const [showModal, setShowModal] = react_1.useState(false);
+    const handleDragStart = react_1.useCallback((event) => {
+        const { active } = event;
+        const activeProperty = selectedProperties.find((p) => active.id === p.key);
+        setActiveDragProperty(activeProperty);
+    }, [selectedProperties]);
+    const handleDragEnd = react_1.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 sortable_1.arrayMove(items, oldIndex, newIndex);
+            });
+        }
+        setActiveDragProperty(undefined);
+    }, [selectedProperties]);
+    const filteredProperties = react_1.useMemo(() => propertiesMetaData.filter((p) => [p.displayLabel, p.categoryLabel, p.actualECClassName]
+        .map((l) => l.toLowerCase())
+        .some((l) => l.includes(activeSearchInput.toLowerCase()))), [activeSearchInput, propertiesMetaData]);
     react_1.useEffect(() => {
-        const getContent = async () => {
-            var _a, _b, _c, _d, _e;
+        const generateProperties = async () => {
+            var _a;
             setIsLoading(true);
-            const ruleSet = {
-                id: "element-properties",
-                rules: [
-                    {
-                        ruleType: presentation_common_1.RuleTypes.Content,
-                        specifications: [
-                            {
-                                specType: presentation_common_1.ContentSpecificationTypes.SelectedNodeInstances,
-                            },
-                        ],
-                    }
-                ],
-            };
-            const requestOptions = {
-                imodel: iModelConnection,
-                keys: keySet,
-                rulesetOrId: ruleSet,
-                displayType: presentation_common_1.DefaultContentDisplayTypes.PropertyPane,
-            };
-            const content = await presentation_frontend_1.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 === presentation_common_1.PropertyValueFormat.Primitive ||
+            if (!iModelConnection)
+                return;
+            const descriptor = await GroupPropertyUtils_1.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 === presentation_common_1.PropertyValueFormat.Primitive ||
                 field.type.valueFormat === presentation_common_1.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 = GroupPropertyUtils_1.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 = GroupPropertyUtils_1.findProperties(response.ecProperties, propertiesMetaData);
+                    if (properties.length === 0) {
+                        setPropertiesNotFoundAlert(true);
+                    }
+                    setSelectedProperties(properties);
                 }
                 catch (error) {
                     utils_1.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: insights_client_1.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: insights_client_1.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 {
@@ -297,7 +141,7 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
                 propertyName,
                 dataType,
                 quantityType,
-                ecProperties: filteredEcProperties,
+                ecProperties: selectedProperties.map((p) => GroupPropertyUtils_1.convertToECProperties(p)).flat(),
             };
             groupPropertyId
                 ? await mappingClient.updateGroupProperty(accessToken, iModelId, mappingId, groupId, groupPropertyId, groupProperty)
@@ -309,52 +153,29 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
             setIsLoading(false);
         }
     };
-    const onChange = react_1.useCallback((value, index) => {
-        setPropertyAlert(false);
-        const property = JSON.parse(value);
-        setEcProperties((ecProperties) => {
-            const updatedEcProperties = [...ecProperties];
-            updatedEcProperties[index].ecPropertyName = property.name;
-            // Unique types
-            let type = insights_client_1.DataType.Undefined;
-            switch (property.type) {
-                case "long":
-                    type = insights_client_1.DataType.Integer;
-                    break;
-                default:
-                    type = property.type;
-            }
-            updatedEcProperties[index].ecPropertyType = type;
-            return updatedEcProperties;
-        });
+    const startSearch = react_1.useCallback(() => {
+        if (!searchInput)
+            return;
+        setActiveSearchInput(searchInput);
+        setSearched(true);
+    }, [searchInput]);
+    const clearSearch = react_1.useCallback(() => {
+        setSearchInput("");
+        setActiveSearchInput("");
+        setSearched(false);
     }, []);
-    const propertyOptions = react_1.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 = react_1.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_1.default.createElement(react_1.default.Fragment, null,
+    react_1.useEffect(() => {
+        if (searchInput.length === 0) {
+            setSearched(false);
+            clearSearch();
+        }
+    }, [searchInput, setSearched, clearSearch]);
+    return (react_1.default.createElement(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd },
         react_1.default.createElement(utils_1.WidgetHeader, { title: groupPropertyName !== null && groupPropertyName !== void 0 ? groupPropertyName : "Add Property", returnFn: async () => returnFn(false) }),
         react_1.default.createElement("div", { className: 'gmw-group-property-action-container' },
-            react_1.default.createElement(itwinui_react_1.Fieldset, { className: 'gmw-property-options', legend: 'Property Details' },
+            react_1.default.createElement(itwinui_react_1.Fieldset, { disabled: isLoading, className: 'gmw-property-options', legend: 'Property Details' },
                 react_1.default.createElement(itwinui_react_1.Small, { className: 'gmw-field-legend' }, "Asterisk * indicates mandatory fields."),
-                react_1.default.createElement(itwinui_react_1.LabeledInput, { id: 'propertyName', label: 'Property Name', value: propertyName, required: true, disabled: isLoading, onChange: (event) => {
+                react_1.default.createElement(itwinui_react_1.LabeledInput, { id: 'propertyName', label: 'Property Name', value: propertyName, required: true, onChange: (event) => {
                         setPropertyName(event.target.value);
                         validator.showMessageFor("propertyName");
                     }, message: validator.message("propertyName", propertyName, useValidator_1.NAME_REQUIREMENTS), status: validator.message("propertyName", propertyName, useValidator_1.NAME_REQUIREMENTS)
@@ -362,7 +183,7 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
                         : undefined, onBlur: () => {
                         validator.showMessageFor("propertyName");
                     } }),
-                react_1.default.createElement(itwinui_react_1.LabeledSelect, { label: "Data Type", id: 'dataType', disabled: isLoading, options: [
+                react_1.default.createElement(itwinui_react_1.LabeledSelect, { label: "Data Type", id: 'dataType', options: [
                         { value: insights_client_1.DataType.Boolean, label: "Boolean" },
                         { value: insights_client_1.DataType.Number, label: "Number" },
                         { value: insights_client_1.DataType.String, label: "String" },
@@ -374,45 +195,71 @@ const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, gr
                         : undefined, onBlur: () => {
                         validator.showMessageFor("dataType");
                     }, onShow: () => { }, onHide: () => { } }),
-                react_1.default.createElement(itwinui_react_1.LabeledSelect, { label: 'Quantity Type', disabled: isLoading, options: exports.quantityTypesSelectionOptions, value: quantityType, onChange: setQuantityType, onShow: () => { }, onHide: () => { } })),
-            react_1.default.createElement(itwinui_react_1.Fieldset, { className: 'gmw-property-selection-container', legend: 'Properties' },
-                propertyAlert && (react_1.default.createElement(itwinui_react_1.Alert, { type: "negative" }, "Please select at least one property.")),
-                isLoading &&
-                    Array(3)
-                        .fill(null)
-                        .map((_, index) => (react_1.default.createElement(itwinui_react_1.Text, { key: index, variant: 'headline', isSkeleton: true }, "LOADING SKELETON"))),
-                ecProperties.map((ecProperty, index) => {
-                    return (react_1.default.createElement("div", { className: 'gmw-property-select-item', key: `${ecProperty.ecSchemaName}${ecProperty.ecClassName}` },
-                        react_1.default.createElement(itwinui_react_1.Text, { variant: 'leading' }, ecProperty.ecClassName),
-                        react_1.default.createElement(itwinui_react_1.Text, { isMuted: true, variant: 'small' }, ecProperty.ecSchemaName),
-                        react_1.default.createElement("div", { className: 'gmw-selection-and-reorder' },
-                            react_1.default.createElement(itwinui_react_1.Select, { options: propertyOptions[index], value: getValue(ecProperty, index), onChange: (value) => { value && onChange(value, index); }, placeholder: "<No Property Mapped>", style: { width: "100%" }, onShow: () => { }, onHide: () => { } }),
-                            react_1.default.createElement(itwinui_react_1.IconButton, { onClick: () => {
-                                    const updatedEcPropertyList = [...ecProperties];
-                                    updatedEcPropertyList[index] = {
-                                        ...updatedEcPropertyList[index],
-                                        ecPropertyName: "",
-                                        ecPropertyType: insights_client_1.DataType.Undefined,
-                                    };
-                                    setEcProperties(updatedEcPropertyList);
-                                }, disabled: !ecProperty.ecPropertyName && !ecProperty.ecPropertyType },
-                                react_1.default.createElement(itwinui_icons_react_1.SvgRemove, null)),
-                            react_1.default.createElement(itwinui_react_1.IconButton, { onClick: () => {
-                                    const tab = [...ecProperties];
-                                    const item = tab.splice(index, 1);
-                                    tab.splice(index - 1, 0, item[0]);
-                                    setEcProperties(tab);
-                                }, disabled: index === 0 },
-                                react_1.default.createElement(itwinui_icons_react_1.SvgChevronUp, null)),
-                            react_1.default.createElement(itwinui_react_1.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_1.default.createElement(itwinui_icons_react_1.SvgChevronDown, null)))));
-                }))),
-        react_1.default.createElement(ActionPanel_1.default, { onSave: onSave, onCancel: async () => returnFn(false), isLoading: isLoading })));
+                react_1.default.createElement(itwinui_react_1.LabeledSelect, { label: 'Quantity Type', options: exports.quantityTypesSelectionOptions, value: quantityType, onChange: setQuantityType, onShow: () => { }, onHide: () => { } })),
+            propertiesNotFoundAlert &&
+                react_1.default.createElement(itwinui_react_1.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_1.default.createElement(itwinui_react_1.Fieldset, { className: 'gmw-property-view-container', legend: "Mapped Properties" },
+                react_1.default.createElement("div", { className: "gmw-property-view-button" },
+                    react_1.default.createElement(itwinui_react_1.Button, { onClick: async () => setShowModal(true), disabled: isLoading }, "Select Properties")),
+                react_1.default.createElement("div", { className: "gmw-properties-list" }, selectedProperties.length === 0 && !isLoading ?
+                    react_1.default.createElement("div", { className: "gmw-empty-selection" },
+                        react_1.default.createElement(itwinui_react_1.Text, null, "No properties selected."),
+                        react_1.default.createElement(itwinui_react_1.Text, null, "Press the \"Select Properties\" button for options.")) :
+                    selectedProperties.map((property) => (react_1.default.createElement(HorizontalTile_1.HorizontalTile, { key: property.key, title: `${property.displayLabel} (${property.propertyType})`, titleTooltip: `${property.actualECClassName}`, subText: property.categoryLabel, actionGroup: null })))))),
+        react_1.default.createElement(ActionPanel_1.default, { onSave: onSave, onCancel: async () => returnFn(false), isLoading: isLoading, isSavingDisabled: selectedProperties.length === 0 || !propertyName || !dataType }),
+        react_1.default.createElement(itwinui_react_1.Modal, { title: "Properties Selection", isOpen: showModal, onClose: () => {
+                setShowModal(false);
+                clearSearch();
+            }, closeOnExternalClick: false },
+            react_1.default.createElement(react_split_1.default, { expandToMin: false, className: "gmw-property-selection-container", gutterAlign: "center", gutterSize: 2, gutter: () => {
+                    // Expects HTMLElement
+                    const dragHangle = server_1.renderToStaticMarkup(react_1.default.createElement("div", { className: "gmw-gutter-drag-icon" },
+                        react_1.default.createElement(itwinui_icons_react_1.SvgMoreVerticalSmall, null)));
+                    const gutter = document.createElement("div");
+                    gutter.className = `gmw-gutter`;
+                    gutter.innerHTML = dragHangle;
+                    return gutter;
+                }, direction: "horizontal" },
+                react_1.default.createElement(itwinui_react_1.Surface, { className: "gmw-available-properties", elevation: 1 },
+                    react_1.default.createElement("div", { className: "gmw-available-properties-header" },
+                        react_1.default.createElement(itwinui_react_1.Label, { as: "span" }, "Available Properties"),
+                        react_1.default.createElement(itwinui_react_1.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_1.default.createElement(itwinui_react_1.IconButton, { onClick: clearSearch, styleType: "borderless" },
+                                react_1.default.createElement(itwinui_icons_react_1.SvgClose, null))) : (react_1.default.createElement(itwinui_react_1.IconButton, { onClick: startSearch, styleType: "borderless" },
+                                react_1.default.createElement(itwinui_icons_react_1.SvgSearch, null))) })),
+                    filteredProperties.length === 0 ?
+                        react_1.default.createElement("div", { className: "gmw-empty-selection" },
+                            react_1.default.createElement(itwinui_react_1.Text, null, "No properties available. ")) :
+                        react_1.default.createElement("div", { className: "gmw-properties-list" }, filteredProperties.map((property) => (react_1.default.createElement(HorizontalTile_1.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_1.default.createElement(itwinui_react_1.Surface, { className: "gmw-selected-properties", elevation: 1 },
+                    react_1.default.createElement(itwinui_react_1.Label, { as: "span" }, "Selected Properties"),
+                    selectedProperties.length === 0 ?
+                        react_1.default.createElement("div", { className: "gmw-empty-selection" },
+                            react_1.default.createElement(itwinui_react_1.Text, null, "No properties selected."),
+                            react_1.default.createElement(itwinui_react_1.Text, null, "Add some by clicking on the properties shown left.")) :
+                        react_1.default.createElement("div", { className: "gmw-properties-list" },
+                            react_1.default.createElement(sortable_1.SortableContext, { items: selectedProperties.map((p) => p.key), strategy: sortable_1.verticalListSortingStrategy }, selectedProperties.map((property) => react_1.default.createElement(SortableHorizontalTile_1.default, { key: property.key, id: property.key, title: `${property.displayLabel} (${property.propertyType})`, titleTooltip: `${property.actualECClassName}`, subText: property.categoryLabel, actionGroup: react_1.default.createElement("div", null,
+                                    react_1.default.createElement(itwinui_react_1.IconButton, { styleType: "borderless", title: "Remove", onClick: () => {
+                                            setSelectedProperties((sp) => sp.filter((p) => property.key !== p.key));
+                                        } },
+                                        react_1.default.createElement(itwinui_icons_react_1.SvgRemove, null))) })))))),
+            react_1.default.createElement(itwinui_react_1.ModalButtonBar, null,
+                react_1.default.createElement(itwinui_react_1.Button, { onClick: () => {
+                        setShowModal(false);
+                        clearSearch();
+                    }, styleType: "high-visibility" }, "Close"))),
+        react_1.default.createElement(core_1.DragOverlay, { zIndex: 9999 }, activeDragProperty ?
+            react_1.default.createElement(HorizontalTile_1.HorizontalTile, { title: `${activeDragProperty.displayLabel} (${activeDragProperty.propertyType})`, titleTooltip: `${activeDragProperty.actualECClassName}`, subText: activeDragProperty.categoryLabel, actionGroup: react_1.default.createElement(itwinui_react_1.IconButton, { styleType: "borderless" },
+                    react_1.default.createElement(itwinui_icons_react_1.SvgRemove, null)), dragHandle: react_1.default.createElement("div", { className: "gmw-drag-icon" },
+                    react_1.default.createElement(itwinui_icons_react_1.SvgDragHandleVertical, null)) }) : null)));
 };
 exports.default = GroupPropertyAction;
 //# sourceMappingURL=GroupPropertyAction.js.map