@itwin/grouping-mapping-widget 0.2.0

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

@@ -0,0 +1,166 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const presentation_frontend_1 = require("@itwin/presentation-frontend");
+const appui_react_1 = require("@itwin/appui-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const react_1 = __importStar(require("react"));
+const reportingClient_1 = require("../../api/reportingClient");
+const utils_1 = require("./utils");
+require("./GroupAction.scss");
+const ActionPanel_1 = __importDefault(require("./ActionPanel"));
+const useValidator_1 = __importStar(require("../hooks/useValidator"));
+const GroupQueryBuilderContainer_1 = require("./GroupQueryBuilderContainer");
+const GroupQueryBuilderContext_1 = require("./GroupQueryBuilderContext");
+const QueryBuilder_1 = require("./QueryBuilder");
+const viewerUtils_1 = require("./viewerUtils");
+const GroupAction = ({ iModelId, mappingId, group, goBack, }) => {
+    var _a, _b, _c;
+    const iModelConnection = appui_react_1.useActiveIModelConnection();
+    const [details, setDetails] = react_1.useState({
+        groupName: (_a = group === null || group === void 0 ? void 0 : group.groupName) !== null && _a !== void 0 ? _a : "",
+        description: (_b = group === null || group === void 0 ? void 0 : group.description) !== null && _b !== void 0 ? _b : "",
+    });
+    const [query, setQuery] = react_1.useState("");
+    const [simpleQuery, setSimpleQuery] = react_1.useState("");
+    const [validator, showValidationMessage] = useValidator_1.default();
+    const [isLoading, setIsLoading] = react_1.useState(false);
+    const [currentPropertyList, setCurrentPropertyList] = react_1.default.useState([]);
+    const [queryBuilder, setQueryBuilder] = react_1.default.useState(new QueryBuilder_1.QueryBuilder(undefined));
+    react_1.useEffect(() => {
+        const removeListener = presentation_frontend_1.Presentation.selection.selectionChange.addListener(async (evt, selectionProvider) => {
+            const selection = selectionProvider.getSelection(evt.imodel, evt.level);
+            const query = `SELECT ECInstanceId FROM ${selection.instanceKeys.keys().next().value}`;
+            // Selects all instances of the class
+            // const ids = await fetchIdsFromQuery(query, iModelConnection);
+            // const keySet = await manufactureKeys(ids, iModelConnection);
+            // Presentation.selection.replaceSelection(
+            //   "GroupingMappingWidget",
+            //   iModelConnection,
+            //   keySet
+            // );
+            // setSelectionInstanceKeys(selection.instanceKeys);
+            setSimpleQuery(query);
+        });
+        return () => {
+            removeListener();
+        };
+    }, [iModelConnection]);
+    react_1.useEffect(() => {
+        const reemphasize = async () => {
+            viewerUtils_1.clearEmphasizedElements();
+            if (!query || query === "") {
+                return;
+            }
+            const ids = await utils_1.fetchIdsFromQuery(query !== null && query !== void 0 ? query : "", iModelConnection);
+            const resolvedHiliteIds = await viewerUtils_1.visualizeElementsById(ids, "red", iModelConnection);
+            await viewerUtils_1.zoomToElements(resolvedHiliteIds);
+        };
+        void reemphasize();
+    }, [iModelConnection, query]);
+    react_1.useEffect(() => {
+        presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+    }, [iModelConnection]);
+    const save = react_1.useCallback(async () => {
+        var _a;
+        if (!validator.allValid()) {
+            showValidationMessage(true);
+            return;
+        }
+        try {
+            setIsLoading(true);
+            const currentQuery = query || simpleQuery;
+            group
+                ? await reportingClient_1.reportingClientApi.updateGroup(iModelId, mappingId, (_a = group.id) !== null && _a !== void 0 ? _a : "", { ...details, query: currentQuery })
+                : await reportingClient_1.reportingClientApi.createGroup(iModelId, mappingId, {
+                    ...details,
+                    query: currentQuery,
+                });
+            presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+            await goBack();
+        }
+        catch {
+            setIsLoading(false);
+        }
+    }, [
+        details,
+        goBack,
+        group,
+        iModelConnection,
+        iModelId,
+        mappingId,
+        query,
+        showValidationMessage,
+        simpleQuery,
+        validator,
+    ]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(utils_1.WidgetHeader, { title: group ? (_c = group.groupName) !== null && _c !== void 0 ? _c : "" : "Add Group", returnFn: async () => {
+                presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+                await goBack();
+            } }),
+        react_1.default.createElement("div", { className: 'group-add-modify-container' },
+            react_1.default.createElement(itwinui_react_1.Fieldset, { legend: 'Group Details', className: 'group-details' },
+                react_1.default.createElement(itwinui_react_1.Small, { className: 'field-legend' }, "Asterisk * indicates mandatory fields."),
+                react_1.default.createElement(itwinui_react_1.LabeledInput, { id: 'groupName', name: 'groupName', label: 'Name', value: details.groupName, required: true, onChange: (event) => {
+                        utils_1.handleInputChange(event, details, setDetails);
+                        validator.showMessageFor("groupName");
+                    }, message: validator.message("groupName", details.groupName, useValidator_1.NAME_REQUIREMENTS), status: validator.message("groupName", details.groupName, useValidator_1.NAME_REQUIREMENTS)
+                        ? "negative"
+                        : undefined, onBlur: () => {
+                        validator.showMessageFor("groupName");
+                    }, onBlurCapture: (event) => {
+                        utils_1.handleInputChange(event, details, setDetails);
+                        validator.showMessageFor("groupName");
+                    } }),
+                react_1.default.createElement(itwinui_react_1.LabeledInput, { id: 'description', required: true, name: 'description', label: 'Description', value: details.description, onChange: (event) => {
+                        utils_1.handleInputChange(event, details, setDetails);
+                        validator.showMessageFor("description");
+                    }, message: validator.message("description", details.description, "required"), status: validator.message("description", details.description, "required")
+                        ? "negative"
+                        : undefined, onBlur: () => {
+                        validator.showMessageFor("description");
+                    }, onBlurCapture: (event) => {
+                        utils_1.handleInputChange(event, details, setDetails);
+                        validator.showMessageFor("description");
+                    } })),
+            react_1.default.createElement(itwinui_react_1.Fieldset, { legend: 'Group By', className: 'find-similar' },
+                react_1.default.createElement(GroupQueryBuilderContext_1.GroupQueryBuilderContext.Provider, { value: {
+                        currentPropertyList,
+                        setCurrentPropertyList,
+                        query,
+                        setQuery,
+                        queryBuilder,
+                        setQueryBuilder,
+                    } },
+                    react_1.default.createElement(GroupQueryBuilderContainer_1.GroupQueryBuilderContainer, null)))),
+        react_1.default.createElement(ActionPanel_1.default, { onSave: async () => {
+                await save();
+            }, onCancel: async () => {
+                presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+                await goBack();
+            }, disabled: !(details.groupName && details.description && (query || simpleQuery)), isLoading: isLoading })));
+};
+exports.default = GroupAction;
+//# sourceMappingURL=GroupAction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupAction.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupAction.tsx"],"names":[],"mappings":"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","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 type { IModelConnection } from \"@itwin/core-frontend\";\nimport type {\n  ISelectionProvider,\n  SelectionChangeEventArgs} from \"@itwin/presentation-frontend\";\nimport {\n  Presentation,\n} from \"@itwin/presentation-frontend\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Fieldset, LabeledInput, Small } from \"@itwin/itwinui-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { reportingClientApi } from \"../../api/reportingClient\";\nimport { fetchIdsFromQuery, handleInputChange, WidgetHeader } from \"./utils\";\nimport type { Group } from \"./Grouping\";\nimport \"./GroupAction.scss\";\nimport ActionPanel from \"./ActionPanel\";\nimport useValidator, { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { GroupQueryBuilderContainer } from \"./GroupQueryBuilderContainer\";\nimport { GroupQueryBuilderContext } from \"./GroupQueryBuilderContext\";\nimport { QueryBuilder } from \"./QueryBuilder\";\nimport {\n  clearEmphasizedElements,\n  visualizeElementsById,\n  zoomToElements,\n} from \"./viewerUtils\";\n\ninterface GroupActionProps {\n  iModelId: string;\n  mappingId: string;\n  group?: Group;\n  goBack: () => Promise<void>;\n}\n\nconst GroupAction = ({\n  iModelId,\n  mappingId,\n  group,\n  goBack,\n}: GroupActionProps) => {\n  const iModelConnection = useActiveIModelConnection() as IModelConnection;\n  const [details, setDetails] = useState({\n    groupName: group?.groupName ?? \"\",\n    description: group?.description ?? \"\",\n  });\n  const [query, setQuery] = useState<string>(\"\");\n  const [simpleQuery, setSimpleQuery] = useState<string>(\"\");\n  const [validator, showValidationMessage] = useValidator();\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const [currentPropertyList, setCurrentPropertyList] = React.useState<\n  PropertyRecord[]\n  >([]);\n  const [queryBuilder, setQueryBuilder] = React.useState<QueryBuilder>(\n    new QueryBuilder(undefined),\n  );\n\n  useEffect(() => {\n    const removeListener = Presentation.selection.selectionChange.addListener(\n      async (\n        evt: SelectionChangeEventArgs,\n        selectionProvider: ISelectionProvider,\n      ) => {\n        const selection = selectionProvider.getSelection(evt.imodel, evt.level);\n        const query = `SELECT ECInstanceId FROM ${selection.instanceKeys.keys().next().value\n        }`;\n        // Selects all instances of the class\n        // const ids = await fetchIdsFromQuery(query, iModelConnection);\n        // const keySet = await manufactureKeys(ids, iModelConnection);\n        // Presentation.selection.replaceSelection(\n        //   \"GroupingMappingWidget\",\n        //   iModelConnection,\n        //   keySet\n        // );\n        // setSelectionInstanceKeys(selection.instanceKeys);\n        setSimpleQuery(query);\n      },\n    );\n    return () => {\n      removeListener();\n    };\n  }, [iModelConnection]);\n\n  useEffect(() => {\n    const reemphasize = async () => {\n      clearEmphasizedElements();\n      if (!query || query === \"\") {\n        return;\n      }\n      const ids = await fetchIdsFromQuery(query ?? \"\", iModelConnection);\n      const resolvedHiliteIds = await visualizeElementsById(\n        ids,\n        \"red\",\n        iModelConnection,\n      );\n      await zoomToElements(resolvedHiliteIds);\n    };\n\n    void reemphasize();\n  }, [iModelConnection, query]);\n\n  useEffect(() => {\n    Presentation.selection.clearSelection(\n      \"GroupingMappingWidget\",\n      iModelConnection,\n    );\n  }, [iModelConnection]);\n\n  const save = useCallback(async () => {\n    if (!validator.allValid()) {\n      showValidationMessage(true);\n      return;\n    }\n    try {\n      setIsLoading(true);\n      const currentQuery = query || simpleQuery;\n\n      group\n        ? await reportingClientApi.updateGroup(\n          iModelId,\n          mappingId,\n          group.id ?? \"\",\n          { ...details, query: currentQuery },\n        )\n        : await reportingClientApi.createGroup(iModelId, mappingId, {\n          ...details,\n          query: currentQuery,\n        });\n      Presentation.selection.clearSelection(\n        \"GroupingMappingWidget\",\n        iModelConnection,\n      );\n      await goBack();\n    } catch {\n      setIsLoading(false);\n    }\n  }, [\n    details,\n    goBack,\n    group,\n    iModelConnection,\n    iModelId,\n    mappingId,\n    query,\n    showValidationMessage,\n    simpleQuery,\n    validator,\n  ]);\n\n  return (\n    <>\n      <WidgetHeader\n        title={group ? group.groupName ?? \"\" : \"Add Group\"}\n        returnFn={async () => {\n          Presentation.selection.clearSelection(\n            \"GroupingMappingWidget\",\n            iModelConnection,\n          );\n          await goBack();\n        }}\n      />\n      <div className='group-add-modify-container'>\n        <Fieldset legend='Group Details' className='group-details'>\n          <Small className='field-legend'>\n            Asterisk * indicates mandatory fields.\n          </Small>\n          <LabeledInput\n            id='groupName'\n            name='groupName'\n            label='Name'\n            value={details.groupName}\n            required\n            onChange={(event) => {\n              handleInputChange(event, details, setDetails);\n              validator.showMessageFor(\"groupName\");\n            }}\n            message={validator.message(\n              \"groupName\",\n              details.groupName,\n              NAME_REQUIREMENTS,\n            )}\n            status={\n              validator.message(\n                \"groupName\",\n                details.groupName,\n                NAME_REQUIREMENTS,\n              )\n                ? \"negative\"\n                : undefined\n            }\n            onBlur={() => {\n              validator.showMessageFor(\"groupName\");\n            }}\n            onBlurCapture={(event) => {\n              handleInputChange(event, details, setDetails);\n              validator.showMessageFor(\"groupName\");\n            }}\n          />\n          <LabeledInput\n            id='description'\n            required\n            name='description'\n            label='Description'\n            value={details.description}\n            onChange={(event) => {\n              handleInputChange(event, details, setDetails);\n              validator.showMessageFor(\"description\");\n            }}\n            message={validator.message(\n              \"description\",\n              details.description,\n              \"required\",\n            )}\n            status={\n              validator.message(\"description\", details.description, \"required\")\n                ? \"negative\"\n                : undefined\n            }\n            onBlur={() => {\n              validator.showMessageFor(\"description\");\n            }}\n            onBlurCapture={(event) => {\n              handleInputChange(event, details, setDetails);\n              validator.showMessageFor(\"description\");\n            }}\n          />\n        </Fieldset>\n\n        <Fieldset legend='Group By' className='find-similar'>\n          <GroupQueryBuilderContext.Provider\n            value={{\n              currentPropertyList,\n              setCurrentPropertyList,\n              query,\n              setQuery,\n              queryBuilder,\n              setQueryBuilder,\n            }}\n          >\n            <GroupQueryBuilderContainer />\n          </GroupQueryBuilderContext.Provider>\n        </Fieldset>\n      </div>\n      <ActionPanel\n        onSave={async () => {\n          await save();\n        }}\n        onCancel={async () => {\n          Presentation.selection.clearSelection(\n            \"GroupingMappingWidget\",\n            iModelConnection,\n          );\n          await goBack();\n        }}\n        disabled={\n          !(details.groupName && details.description && (query || simpleQuery))\n        }\n        isLoading={isLoading}\n      />\n    </>\n  );\n};\n\nexport default GroupAction;\n"]}

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

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+* 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';
+
+.group-add-modify-container {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+  overflow-x: auto;
+  height: 100%;
+
+  .group-details {
+    display: flex;
+    flex-direction: column;
+    gap: $iui-baseline;
+  }
+}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { KeySet } from "@itwin/presentation-common";
+import type { SelectOption } from "@itwin/itwinui-react";
+import "./GroupPropertyAction.scss";
+interface GroupPropertyActionProps {
+    iModelId: string;
+    mappingId: string;
+    groupId: string;
+    groupPropertyId?: string;
+    groupPropertyName?: string;
+    keySet: KeySet;
+    returnFn: () => Promise<void>;
+}
+export declare const quantityTypesSelectionOptions: SelectOption<string>[];
+declare const GroupPropertyAction: ({ iModelId, mappingId, groupId, groupPropertyId, groupPropertyName, keySet, returnFn, }: GroupPropertyActionProps) => JSX.Element;
+export default GroupPropertyAction;
+//# sourceMappingURL=GroupPropertyAction.d.ts.map

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

@@ -0,0 +1,372 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.quantityTypesSelectionOptions = void 0;
+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 reportingClient_1 = require("../../api/reportingClient");
+const ActionPanel_1 = __importDefault(require("./ActionPanel"));
+const useValidator_1 = __importStar(require("../hooks/useValidator"));
+const utils_1 = require("./utils");
+require("./GroupPropertyAction.scss");
+exports.quantityTypesSelectionOptions = [
+    { value: "Area", label: "Area" },
+    { value: "Distance", label: "Distance" },
+    { value: "Force", label: "Force" },
+    { value: "Mass", label: "Mass" },
+    { value: "Monetary", label: "Monetary" },
+    { value: "Time", label: "Time" },
+    { value: "Volume", label: "Volume" },
+    { value: "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;
+    (_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) => {
+    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: {
+                        // Some elements don't have a path to primary class..
+                        // 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);
+                            // Check for aspects. Ignore them if coming from navigation.
+                        }
+                        else 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,
+                            });
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+    }
+};
+const GroupPropertyAction = ({ iModelId, mappingId, groupId, groupPropertyId, groupPropertyName, keySet, returnFn, }) => {
+    const iModelConnection = appui_react_1.useActiveIModelConnection();
+    const [propertyName, setPropertyName] = react_1.useState("");
+    const [dataType, setDataType] = react_1.useState();
+    const [quantityType, setQuantityType] = react_1.useState("Undefined");
+    const [classToPropertiesMapping, setClassToPropertiesMapping] = react_1.useState();
+    const [ecProperties, setEcProperties] = react_1.useState([]);
+    const [validator, showValidationMessage] = useValidator_1.default();
+    const [propertyAlert, setPropertyAlert] = react_1.useState(false);
+    const [isLoading, setIsLoading] = react_1.useState(false);
+    react_1.useEffect(() => {
+        const getContent = async () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            setIsLoading(true);
+            const ruleSet = {
+                id: "element-properties",
+                rules: [
+                    {
+                        ruleType: presentation_common_1.RuleTypes.Content,
+                        specifications: [
+                            {
+                                specType: presentation_common_1.ContentSpecificationTypes.SelectedNodeInstances,
+                                // relationshipPaths: [
+                                //   {
+                                //     relationship: {
+                                //       schemaName: "BisCore",
+                                //       className: "ElementMultiAspect",
+                                //     },
+                                //     direction: RelationshipDirection.Forward,
+                                //   },
+                                // ],
+                            },
+                        ],
+                    },
+                ],
+            };
+            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 ||
+                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);
+            setClassToPropertiesMapping(classToPropertiesMapping);
+            let newEcProperties;
+            // Fetch already existing ec properties then add all classes from presentation
+            if (groupPropertyId) {
+                // TODO Error handling
+                const response = await reportingClient_1.reportingClientApi.getGroupProperty(iModelId, mappingId, groupId, groupPropertyId);
+                newEcProperties = (_c = (_b = response.property) === null || _b === void 0 ? void 0 : _b.ecProperties) !== null && _c !== void 0 ? _c : [];
+                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: "",
+                })));
+                setPropertyName((_e = (_d = response.property) === null || _d === void 0 ? void 0 : _d.propertyName) !== null && _e !== void 0 ? _e : "");
+                setDataType((_g = (_f = response.property) === null || _f === void 0 ? void 0 : _f.dataType) !== null && _g !== void 0 ? _g : "");
+                setQuantityType((_j = (_h = response.property) === null || _h === void 0 ? void 0 : _h.quantityType) !== null && _j !== void 0 ? _j : "");
+            }
+            else {
+                newEcProperties = Array.from(classToPropertiesMapping)
+                    .map(([key]) => ({
+                    ecSchemaName: key.split(":")[0],
+                    ecClassName: key.split(":")[1],
+                    // Placeholders for properties
+                    ecPropertyName: "",
+                    ecPropertyType: "",
+                }))
+                    .reverse();
+            }
+            setEcProperties(newEcProperties);
+            setIsLoading(false);
+        };
+        void getContent();
+    }, [groupId, groupPropertyId, iModelConnection, iModelId, keySet, mappingId]);
+    const onSave = async () => {
+        const filteredEcProperties = ecProperties.filter((ecProperty) => ecProperty.ecPropertyName && ecProperty.ecPropertyType);
+        if (!(filteredEcProperties === null || filteredEcProperties === void 0 ? void 0 : filteredEcProperties.length) || !validator.allValid()) {
+            showValidationMessage(true);
+            if (!(filteredEcProperties === null || filteredEcProperties === void 0 ? void 0 : filteredEcProperties.length)) {
+                setPropertyAlert(true);
+            }
+            return;
+        }
+        try {
+            setIsLoading(true);
+            const groupProperty = {
+                propertyName,
+                dataType,
+                quantityType,
+                ecProperties: filteredEcProperties,
+            };
+            groupPropertyId
+                ? await reportingClient_1.reportingClientApi.updateGroupProperty(iModelId, mappingId, groupId, groupPropertyId, groupProperty)
+                : await reportingClient_1.reportingClientApi.createGroupProperty(iModelId, mappingId, groupId, groupProperty);
+            await returnFn();
+        }
+        catch {
+            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 = "";
+            switch (property.type) {
+                case "long":
+                    type = "integer";
+                    break;
+                default:
+                    type = property.type;
+            }
+            updatedEcProperties[index].ecPropertyType = type;
+            return updatedEcProperties;
+        });
+    }, []);
+    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.default.createElement(utils_1.WidgetHeader, { title: groupPropertyName !== null && groupPropertyName !== void 0 ? groupPropertyName : "Add Property", returnFn: returnFn }),
+        react_1.default.createElement("div", { className: 'group-property-action-container' },
+            react_1.default.createElement(itwinui_react_1.Fieldset, { className: 'property-options', legend: 'Property Details' },
+                react_1.default.createElement(itwinui_react_1.Small, { className: '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) => {
+                        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)
+                        ? "negative"
+                        : undefined, onBlur: () => {
+                        validator.showMessageFor("propertyName");
+                    } }),
+                react_1.default.createElement(itwinui_react_1.LabeledSelect, { label: "Data Type", id: 'dataType', disabled: isLoading, options: [
+                        { value: "Boolean", label: "Boolean" },
+                        { value: "Number", label: "Number" },
+                        { value: "String", label: "String" },
+                    ], required: true, value: dataType, onChange: (value) => {
+                        validator.showMessageFor("dataType");
+                        setDataType(value);
+                    }, message: validator.message("dataType", propertyName, "required"), status: validator.message("dataType", propertyName, "required")
+                        ? "negative"
+                        : 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: '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 === null || ecProperties === void 0 ? void 0 :
+                ecProperties.map((ecProperty, index) => {
+                    return (react_1.default.createElement("div", { className: '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: 'selection-and-reorder' },
+                            react_1.default.createElement(itwinui_react_1.ComboBox, { options: propertyOptions[index], value: getValue(ecProperty, index), onChange: (value) => onChange(value, index), inputProps: {
+                                    placeholder: "<No Property Mapped>",
+                                }, style: { width: "100%" } }),
+                            react_1.default.createElement(itwinui_react_1.IconButton, { onClick: () => {
+                                    const updatedEcPropertyList = [...ecProperties];
+                                    updatedEcPropertyList[index] = {
+                                        ...updatedEcPropertyList[index],
+                                        ecPropertyName: "",
+                                        ecPropertyType: "",
+                                    };
+                                    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: returnFn, isLoading: isLoading })));
+};
+exports.default = GroupPropertyAction;
+//# sourceMappingURL=GroupPropertyAction.js.map