@itwin/grouping-mapping-widget 0.23.0 → 0.24.0

package/lib/esm/components/Properties/CustomCalculations/CustomCalculationTable.js

@@ -9,53 +9,50 @@ import { useMappingClient } from "../../context/MappingClientContext";
 import { PropertyNameCell } from "../PropertyNameCell";
 import { PropertyTable } from "../PropertyTable";
 import { useGroupingMappingApiConfig } from "../../context/GroupingApiConfigContext";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 export const CustomCalculationTable = ({ mappingId, groupId, onClickAdd, onClickModify, isLoading, customCalculations, refresh, }) => {
     const mappingClient = useMappingClient();
     const { getAccessToken, iModelId } = useGroupingMappingApiConfig();
+    const queryClient = useQueryClient();
     const columnsFactory = useCallback((handleShowDeleteModal) => [
         {
-            Header: "Table",
-            columns: [
-                {
-                    id: "propertyName",
-                    Header: "Custom Calculation",
-                    accessor: "propertyName",
-                    Cell: (value) => (React.createElement(PropertyNameCell, { property: value.row.original, onClickModify: onClickModify })),
-                },
-                {
-                    id: "formula",
-                    Header: "Formula",
-                    accessor: "formula",
-                },
-                {
-                    id: "dropdown",
-                    Header: "",
-                    width: 80,
-                    Cell: (value) => {
-                        return (React.createElement(DropdownMenu, { menuItems: (close) => [onClickModify ? [
-                                    React.createElement(MenuItem, { key: 0, onClick: () => {
-                                            onClickModify(value.row.original);
-                                            close();
-                                        }, icon: React.createElement(SvgEdit, null) }, "Modify")
-                                ] : [], React.createElement(MenuItem, { key: 1, onClick: () => {
-                                        handleShowDeleteModal(value.row.original);
-                                        close();
-                                    }, icon: React.createElement(SvgDelete, null) }, "Remove"),
-                            ].flatMap((p) => p) },
-                            React.createElement(IconButton, { styleType: 'borderless' },
-                                React.createElement(SvgMore, { style: {
-                                        width: "16px",
-                                        height: "16px",
-                                    } }))));
-                    },
-                },
-            ],
+            id: "propertyName",
+            Header: "Custom Calculation",
+            accessor: "propertyName",
+            Cell: (value) => (React.createElement(PropertyNameCell, { property: value.row.original, onClickModify: onClickModify })),
+        },
+        {
+            id: "formula",
+            Header: "Formula",
+            accessor: "formula",
+        },
+        {
+            id: "dropdown",
+            Header: "",
+            width: 80,
+            Cell: (value) => {
+                return (React.createElement(DropdownMenu, { menuItems: (close) => [onClickModify ? [
+                            React.createElement(MenuItem, { key: 0, onClick: () => {
+                                    onClickModify(value.row.original);
+                                    close();
+                                }, icon: React.createElement(SvgEdit, null) }, "Modify")
+                        ] : [], React.createElement(MenuItem, { key: 1, onClick: () => {
+                                handleShowDeleteModal(value.row.original);
+                                close();
+                            }, icon: React.createElement(SvgDelete, null) }, "Remove"),
+                    ].flatMap((p) => p) },
+                    React.createElement(IconButton, { styleType: 'borderless' },
+                        React.createElement(SvgMore, null))));
+            },
         },
     ], [onClickModify]);
-    const deleteProperty = useCallback(async (propertyId) => {
-        const accessToken = await getAccessToken();
-        await mappingClient.deleteCustomCalculation(accessToken, iModelId, mappingId, groupId, propertyId);
-    }, [getAccessToken, groupId, iModelId, mappingClient, mappingId]);
+    const { mutateAsync: deleteProperty } = useMutation({
+        mutationFn: async (propertyId) => {
+            const accessToken = await getAccessToken();
+            await mappingClient.deleteCustomCalculation(accessToken, iModelId, mappingId, groupId, propertyId);
+        },
+        onSuccess: async () => queryClient.invalidateQueries({ queryKey: ["customCalculations", iModelId, mappingId, groupId] }),
+    });
     return (React.createElement(PropertyTable, { propertyType: "Custom Calculation", columnsFactory: columnsFactory, data: customCalculations, isLoading: isLoading, onClickAdd: onClickAdd, refreshProperties: refresh, deleteProperty: deleteProperty }));
 };
 //# sourceMappingURL=CustomCalculationTable.js.map

package/lib/esm/components/Properties/CustomCalculations/CustomCalculationTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomCalculationTable.js","sourceRoot":"","sources":["../../../../../src/components/Properties/CustomCalculations/CustomCalculationTable.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 {\n  SvgDelete,\n  SvgEdit,\n  SvgMore,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback } from \"react\";\nimport type { CellProps } from \"react-table\";\nimport type { CustomCalculation } from \"@itwin/insights-client\";\nimport { useMappingClient } from \"../../context/MappingClientContext\";\nimport { PropertyNameCell } from \"../PropertyNameCell\";\nimport { PropertyTable } from \"../PropertyTable\";\nimport { useGroupingMappingApiConfig } from \"../../context/GroupingApiConfigContext\";\n\nexport interface CustomCalculationTableProps {\n  mappingId: string;\n  groupId: string;\n  onClickAdd?: () => void;\n  onClickModify?: (value: CustomCalculation) => void;\n  isLoading: boolean;\n  customCalculations: CustomCalculation[];\n  refresh: () => Promise<void>;\n}\n\nexport const CustomCalculationTable = ({\n  mappingId,\n  groupId,\n  onClickAdd,\n  onClickModify,\n  isLoading,\n  customCalculations,\n  refresh,\n}: CustomCalculationTableProps) => {\n  const mappingClient = useMappingClient();\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n\n  const columnsFactory = useCallback(\n    (handleShowDeleteModal: (value: CustomCalculation) => void) => [\n      {\n        Header: \"Table\",\n        columns: [\n          {\n            id: \"propertyName\",\n            Header: \"Custom Calculation\",\n            accessor: \"propertyName\",\n            Cell: (value: CellProps<CustomCalculation>) => (\n              <PropertyNameCell\n                property={value.row.original}\n                onClickModify={onClickModify}\n              />\n            ),\n          },\n          {\n            id: \"formula\",\n            Header: \"Formula\",\n            accessor: \"formula\",\n          },\n          {\n            id: \"dropdown\",\n            Header: \"\",\n            width: 80,\n            Cell: (value: CellProps<CustomCalculation>) => {\n              return (\n                <DropdownMenu\n                  menuItems={(close: () => void) => [onClickModify ? [\n                    <MenuItem\n                      key={0}\n                      onClick={() => {\n                        onClickModify(value.row.original);\n                        close();\n                      }}\n                      icon={<SvgEdit />}\n                    >\n                      Modify\n                    </MenuItem>] : [],\n                  <MenuItem\n                    key={1}\n                    onClick={() => {\n                      handleShowDeleteModal(value.row.original);\n                      close();\n                    }}\n                    icon={<SvgDelete />}\n                  >\n                    Remove\n                  </MenuItem>,\n                  ].flatMap((p) => p)}\n                >\n                  <IconButton styleType='borderless'>\n                    <SvgMore\n                      style={{\n                        width: \"16px\",\n                        height: \"16px\",\n                      }}\n                    />\n                  </IconButton>\n                </DropdownMenu>\n              );\n            },\n          },\n        ],\n      },\n    ],\n    [onClickModify],\n  );\n\n  const deleteProperty = useCallback(async (propertyId: string) => {\n    const accessToken = await getAccessToken();\n    await mappingClient.deleteCustomCalculation(\n      accessToken,\n      iModelId,\n      mappingId,\n      groupId,\n      propertyId,\n    );\n  }, [getAccessToken, groupId, iModelId, mappingClient, mappingId]);\n\n  return (\n    <PropertyTable\n      propertyType=\"Custom Calculation\"\n      columnsFactory={columnsFactory}\n      data={customCalculations}\n      isLoading={isLoading}\n      onClickAdd={onClickAdd}\n      refreshProperties={refresh}\n      deleteProperty={deleteProperty}\n    />\n  );\n};\n\n"]}
+{"version":3,"file":"CustomCalculationTable.js","sourceRoot":"","sources":["../../../../../src/components/Properties/CustomCalculations/CustomCalculationTable.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 {\n  SvgDelete,\n  SvgEdit,\n  SvgMore,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback } from \"react\";\nimport type { CellProps, Column } from \"react-table\";\nimport type { CustomCalculation } from \"@itwin/insights-client\";\nimport { useMappingClient } from \"../../context/MappingClientContext\";\nimport { PropertyNameCell } from \"../PropertyNameCell\";\nimport { PropertyTable } from \"../PropertyTable\";\nimport { useGroupingMappingApiConfig } from \"../../context/GroupingApiConfigContext\";\nimport { useMutation, useQueryClient } from \"@tanstack/react-query\";\n\nexport interface CustomCalculationTableProps {\n  mappingId: string;\n  groupId: string;\n  onClickAdd?: () => void;\n  onClickModify?: (value: CustomCalculation) => void;\n  isLoading: boolean;\n  customCalculations: CustomCalculation[];\n  refresh: () => Promise<void>;\n}\n\nexport const CustomCalculationTable = ({\n  mappingId,\n  groupId,\n  onClickAdd,\n  onClickModify,\n  isLoading,\n  customCalculations,\n  refresh,\n}: CustomCalculationTableProps) => {\n  const mappingClient = useMappingClient();\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const queryClient = useQueryClient();\n\n  const columnsFactory = useCallback(\n    (handleShowDeleteModal: (value: CustomCalculation) => void): Column<CustomCalculation>[] => [\n      {\n        id: \"propertyName\",\n        Header: \"Custom Calculation\",\n        accessor: \"propertyName\",\n        Cell: (value: CellProps<CustomCalculation>) => (\n          <PropertyNameCell\n            property={value.row.original}\n            onClickModify={onClickModify}\n          />\n        ),\n      },\n      {\n        id: \"formula\",\n        Header: \"Formula\",\n        accessor: \"formula\",\n      },\n      {\n        id: \"dropdown\",\n        Header: \"\",\n        width: 80,\n        Cell: (value: CellProps<CustomCalculation>) => {\n          return (\n            <DropdownMenu\n              menuItems={(close: () => void) => [onClickModify ? [\n                <MenuItem\n                  key={0}\n                  onClick={() => {\n                    onClickModify(value.row.original);\n                    close();\n                  }}\n                  icon={<SvgEdit />}\n                >\n                  Modify\n                </MenuItem>] : [],\n              <MenuItem\n                key={1}\n                onClick={() => {\n                  handleShowDeleteModal(value.row.original);\n                  close();\n                }}\n                icon={<SvgDelete />}\n              >\n                Remove\n              </MenuItem>,\n              ].flatMap((p) => p)}\n            >\n              <IconButton styleType='borderless'>\n                <SvgMore />\n              </IconButton>\n            </DropdownMenu>\n          );\n        },\n      },\n    ],\n    [onClickModify],\n  );\n\n  const { mutateAsync: deleteProperty } = useMutation({\n    mutationFn: async (propertyId: string) => {\n      const accessToken = await getAccessToken();\n      await mappingClient.deleteCustomCalculation(\n        accessToken,\n        iModelId,\n        mappingId,\n        groupId,\n        propertyId,\n      );\n    },\n    onSuccess: async () => queryClient.invalidateQueries({ queryKey: [\"customCalculations\", iModelId, mappingId, groupId] }),\n  });\n\n  return (\n    <PropertyTable\n      propertyType=\"Custom Calculation\"\n      columnsFactory={columnsFactory}\n      data={customCalculations}\n      isLoading={isLoading}\n      onClickAdd={onClickAdd}\n      refreshProperties={refresh}\n      deleteProperty={deleteProperty}\n    />\n  );\n};\n"]}

package/lib/esm/components/Properties/GroupColorToggle.js

@@ -2,44 +2,48 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import { toaster, ToggleSwitch } from "@itwin/itwinui-react";
-import { clearEmphasizedOverriddenElements, clearHiddenElements, visualizeElements, zoomToElements } from "../../common/viewerUtils";
+import { clearAll, visualizeElements, zoomToElements } from "../../common/viewerUtils";
 import { Presentation } from "@itwin/presentation-frontend";
 import { useGroupingMappingApiConfig } from "../context/GroupingApiConfigContext";
 import { useGroupKeySetQuery } from "../Groups/hooks/useKeySetHiliteQueries";
-import { usePropertiesContext } from "../context/PropertiesContext";
+import { usePropertiesGroupColorContext } from "../context/PropertiesGroupColorContext";
+import { useMutation } from "@tanstack/react-query";
+import { useIsMounted } from "../../common/hooks/useIsMounted";
 export const GroupColorToggle = ({ color, group, ...rest }) => {
-    const [isLoading, setIsLoading] = useState(false);
     const { iModelConnection } = useGroupingMappingApiConfig();
     if (!iModelConnection) {
         throw new Error("This component requires an active iModelConnection.");
     }
-    const { showGroupColor, setShowGroupColor } = usePropertiesContext();
-    const { data: hiliteIdsResult } = useGroupKeySetQuery(group, iModelConnection, showGroupColor);
+    const { showGroupColor, setShowGroupColor } = usePropertiesGroupColorContext();
+    const { data: hiliteIdsResult, isFetched, isFetching } = useGroupKeySetQuery(group, iModelConnection, showGroupColor);
+    const isMounted = useIsMounted();
+    const { mutate: mutateVisualization, isLoading: isVisualizing } = useMutation({
+        mutationFn: async (hiliteIds) => {
+            clearAll();
+            Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+            visualizeElements(hiliteIds.result.ids, color);
+            await zoomToElements(hiliteIds.result.ids);
+        },
+        onError: (error) => {
+            toaster.negative("There was an error visualizing group.");
+            // eslint-disable-next-line no-console
+            console.error(error);
+        },
+    });
     useEffect(() => {
-        const visualize = async () => {
-            try {
-                setIsLoading(true);
-                clearEmphasizedOverriddenElements();
-                clearHiddenElements();
-                if (showGroupColor && hiliteIdsResult) {
-                    Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
-                    visualizeElements(hiliteIdsResult.result.ids, color);
-                    await zoomToElements(hiliteIdsResult.result.ids);
-                }
+        isFetched && showGroupColor && hiliteIdsResult && isMounted() && mutateVisualization(hiliteIdsResult);
+    }, [hiliteIdsResult, isFetched, isMounted, showGroupColor, mutateVisualization]);
+    const handleToggleChange = useCallback(() => {
+        setShowGroupColor((b) => {
+            if (b) {
+                clearAll();
             }
-            catch (error) {
-                toaster.negative("There was an error visualizing group.");
-                /* eslint-disable no-console */
-                console.error(error);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        };
-        void visualize();
-    }, [color, hiliteIdsResult, iModelConnection, showGroupColor]);
-    return (React.createElement(ToggleSwitch, { label: "Color Group", disabled: isLoading, checked: showGroupColor, onChange: () => setShowGroupColor((b) => !b), ...rest }));
+            return !b;
+        });
+    }, [setShowGroupColor]);
+    const isLoading = isFetching || isVisualizing;
+    return (React.createElement(ToggleSwitch, { label: "Color Group", disabled: isLoading, checked: showGroupColor, onChange: handleToggleChange, ...rest }));
 };
 //# sourceMappingURL=GroupColorToggle.js.map

package/lib/esm/components/Properties/GroupColorToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupColorToggle.js","sourceRoot":"","sources":["../../../../src/components/Properties/GroupColorToggle.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACrI,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAClF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAOpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACe,EAAE,EAAE;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,EAAE,gBAAgB,EAAE,GAAG,2BAA2B,EAAE,CAAC;IAC3D,IAAI,CAAC,gBAAgB,EAAE;QACrB,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACrE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC;IAE/F,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,IAAI;gBACF,YAAY,CAAC,IAAI,CAAC,CAAC;gBACnB,iCAAiC,EAAE,CAAC;gBACpC,mBAAmB,EAAE,CAAC;gBACtB,IAAI,cAAc,IAAI,eAAe,EAAE;oBACrC,YAAY,CAAC,SAAS,CAAC,cAAc,CACnC,uBAAuB,EACvB,gBAAgB,CACjB,CAAC;oBACF,iBAAiB,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;oBACrD,MAAM,cAAc,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;iBAClD;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,QAAQ,CAAC,uCAAuC,CAAC,CAAC;gBAC1D,+BAA+B;gBAC/B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aACtB;oBAAS;gBACR,YAAY,CAAC,KAAK,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QACF,KAAK,SAAS,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/D,OAAO,CACL,oBAAC,YAAY,IACX,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KACxC,IAAI,GACM,CACjB,CAAC;AACJ,CAAC,CAAC","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 React, { useEffect, useState } from \"react\";\nimport type { ToggleSwitchProps } from \"@itwin/itwinui-react\";\nimport { toaster, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport type { Group } from \"@itwin/insights-client\";\nimport { clearEmphasizedOverriddenElements, clearHiddenElements, visualizeElements, zoomToElements } from \"../../common/viewerUtils\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { useGroupingMappingApiConfig } from \"../context/GroupingApiConfigContext\";\nimport { useGroupKeySetQuery } from \"../Groups/hooks/useKeySetHiliteQueries\";\nimport { usePropertiesContext } from \"../context/PropertiesContext\";\n\nexport type GroupColorToggleProps = Partial<ToggleSwitchProps> & {\n  color: string;\n  group: Group;\n};\n\nexport const GroupColorToggle = ({\n  color,\n  group,\n  ...rest\n}: GroupColorToggleProps) => {\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const { iModelConnection } = useGroupingMappingApiConfig();\n  if (!iModelConnection) {\n    throw new Error(\"This component requires an active iModelConnection.\");\n  }\n  const { showGroupColor, setShowGroupColor } = usePropertiesContext();\n  const { data: hiliteIdsResult } = useGroupKeySetQuery(group, iModelConnection, showGroupColor);\n\n  useEffect(() => {\n    const visualize = async () => {\n      try {\n        setIsLoading(true);\n        clearEmphasizedOverriddenElements();\n        clearHiddenElements();\n        if (showGroupColor && hiliteIdsResult) {\n          Presentation.selection.clearSelection(\n            \"GroupingMappingWidget\",\n            iModelConnection,\n          );\n          visualizeElements(hiliteIdsResult.result.ids, color);\n          await zoomToElements(hiliteIdsResult.result.ids);\n        }\n      } catch (error) {\n        toaster.negative(\"There was an error visualizing group.\");\n        /* eslint-disable no-console */\n        console.error(error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    void visualize();\n  }, [color, hiliteIdsResult, iModelConnection, showGroupColor]);\n\n  return (\n    <ToggleSwitch\n      label=\"Color Group\"\n      disabled={isLoading}\n      checked={showGroupColor}\n      onChange={() => setShowGroupColor((b) => !b)}\n      {...rest}\n    ></ToggleSwitch>\n  );\n};\n"]}
+{"version":3,"file":"GroupColorToggle.js","sourceRoot":"","sources":["../../../../src/components/Properties/GroupColorToggle.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAElF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAO/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACe,EAAE,EAAE;IAC1B,MAAM,EAAE,gBAAgB,EAAE,GAAG,2BAA2B,EAAE,CAAC;IAC3D,IAAI,CAAC,gBAAgB,EAAE;QACrB,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,8BAA8B,EAAE,CAAC;IAC/E,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC;IACtH,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,WAAW,CAAC;QAC5E,UAAU,EAAE,KAAK,EAAE,SAAuB,EAAE,EAAE;YAC5C,QAAQ,EAAE,CAAC;YACX,YAAY,CAAC,SAAS,CAAC,cAAc,CACnC,uBAAuB,EACvB,gBAAgB,CACjB,CAAC;YACF,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YAC/C,MAAM,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC7C,CAAC;QACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,CAAC,QAAQ,CAAC,uCAAuC,CAAC,CAAC;YAC1D,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;KACF,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,IAAI,cAAc,IAAI,eAAe,IAAI,SAAS,EAAE,IAAI,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACxG,CAAC,EAAE,CAAC,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEjF,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE;YACtB,IAAI,CAAC,EAAE;gBACL,QAAQ,EAAE,CAAC;aACZ;YACD,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,SAAS,GAAG,UAAU,IAAI,aAAa,CAAC;IAE9C,OAAO,CACL,oBAAC,YAAY,IACX,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,kBAAkB,KACxB,IAAI,GACM,CACjB,CAAC;AACJ,CAAC,CAAC","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 React, { useCallback, useEffect } from \"react\";\nimport type { ToggleSwitchProps } from \"@itwin/itwinui-react\";\nimport { toaster, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport type { Group } from \"@itwin/insights-client\";\nimport { clearAll, visualizeElements, zoomToElements } from \"../../common/viewerUtils\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { useGroupingMappingApiConfig } from \"../context/GroupingApiConfigContext\";\nimport type { QueryResults } from \"../Groups/hooks/useKeySetHiliteQueries\";\nimport { useGroupKeySetQuery } from \"../Groups/hooks/useKeySetHiliteQueries\";\nimport { usePropertiesGroupColorContext } from \"../context/PropertiesGroupColorContext\";\nimport { useMutation } from \"@tanstack/react-query\";\nimport { useIsMounted } from \"../../common/hooks/useIsMounted\";\n\nexport type GroupColorToggleProps = Partial<ToggleSwitchProps> & {\n  color: string;\n  group: Group;\n};\n\nexport const GroupColorToggle = ({\n  color,\n  group,\n  ...rest\n}: GroupColorToggleProps) => {\n  const { iModelConnection } = useGroupingMappingApiConfig();\n  if (!iModelConnection) {\n    throw new Error(\"This component requires an active iModelConnection.\");\n  }\n  const { showGroupColor, setShowGroupColor } = usePropertiesGroupColorContext();\n  const { data: hiliteIdsResult, isFetched, isFetching } = useGroupKeySetQuery(group, iModelConnection, showGroupColor);\n  const isMounted = useIsMounted();\n\n  const { mutate: mutateVisualization, isLoading: isVisualizing } = useMutation({\n    mutationFn: async (hiliteIds: QueryResults) => {\n      clearAll();\n      Presentation.selection.clearSelection(\n        \"GroupingMappingWidget\",\n        iModelConnection,\n      );\n      visualizeElements(hiliteIds.result.ids, color);\n      await zoomToElements(hiliteIds.result.ids);\n    },\n    onError: (error) => {\n      toaster.negative(\"There was an error visualizing group.\");\n      // eslint-disable-next-line no-console\n      console.error(error);\n    },\n  });\n\n  useEffect(() => {\n    isFetched && showGroupColor && hiliteIdsResult && isMounted() && mutateVisualization(hiliteIdsResult);\n  }, [hiliteIdsResult, isFetched, isMounted, showGroupColor, mutateVisualization]);\n\n  const handleToggleChange = useCallback(() => {\n    setShowGroupColor((b) => {\n      if (b) {\n        clearAll();\n      }\n      return !b;\n    });\n  }, [setShowGroupColor]);\n\n  const isLoading = isFetching || isVisualizing;\n\n  return (\n    <ToggleSwitch\n      label=\"Color Group\"\n      disabled={isLoading}\n      checked={showGroupColor}\n      onChange={handleToggleChange}\n      {...rest}\n    ></ToggleSwitch>\n  );\n};\n"]}

package/lib/esm/components/Properties/GroupProperties/GroupPropertyAction.js

@@ -2,26 +2,21 @@
 * 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 { Alert, Button, Fieldset, Icon, IconButton, Label, LabeledInput, LabeledSelect, Modal, ModalButtonBar, Surface, Text, } from "@itwin/itwinui-react";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Alert, Button, Fieldset, LabeledInput, LabeledSelect, Text, } from "@itwin/itwinui-react";
+import React, { useCallback, useEffect, useState } from "react";
 import ActionPanel from "../../SharedComponents/ActionPanel";
 import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
-import { getLocalizedStringPresentation, handleError } from "../../../common/utils";
 import { useMappingClient } from "../../context/MappingClientContext";
 import { useGroupingMappingApiConfig } from "../../context/GroupingApiConfigContext";
 import { HorizontalTile } from "../../SharedComponents/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";
 import { manufactureKeys } from "../../../common/viewerUtils";
 import { SaveModal } from "./SaveModal";
+import { GroupsPropertiesSelectionModal } from "./GroupsPropertiesSelectionModal";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 export const quantityTypesSelectionOptions = [
     { value: QuantityType.Area, label: "Area" },
     { value: QuantityType.Distance, label: "Distance" },
@@ -43,93 +38,49 @@ export const GroupPropertyAction = ({ mappingId, group, groupProperty, onSaveSuc
     const [propertiesMetaData, setPropertiesMetaData] = useState([]);
     const [propertiesNotFoundAlert, setPropertiesNotFoundAlert] = useState(false);
     const [validator, showValidationMessage] = useValidator();
-    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 [showSaveModal, setShowSaveModal] = 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]);
+    const [showPropertiesSelectionModal, setShowPropertiesSelectionModal] = useState(false);
+    const [showSaveConfirmationModal, setShowSaveConfirmationModal] = useState(false);
+    const queryClient = useQueryClient();
     const reset = useCallback(() => {
         setPropertyName("");
         setDataType(DataType.Undefined);
         setSelectedProperties([]);
     }, []);
+    const fetchPropertiesMetadata = useCallback(async () => {
+        if (!iModelConnection)
+            return;
+        const result = await manufactureKeys(group.query, iModelConnection);
+        const descriptor = await fetchPresentationDescriptor(iModelConnection, result);
+        // Only allow primitives and structs
+        const propertyFields = descriptor?.fields.filter((field) => field.type.valueFormat === PropertyValueFormat.Primitive ||
+            field.type.valueFormat === PropertyValueFormat.Struct) ?? [];
+        const propertiesMetaData = convertPresentationFields(propertyFields);
+        let groupPropertyDetails = null;
+        if (groupProperty) {
+            const accessToken = await getAccessToken();
+            groupPropertyDetails = await mappingClient.getGroupProperty(accessToken, iModelId, mappingId, group.id, groupProperty.id);
+        }
+        return { propertiesMetaData, groupPropertyDetails };
+    }, [getAccessToken, group.id, group.query, groupProperty, iModelConnection, iModelId, mappingClient, mappingId]);
+    const { data, isFetching: isLoadingProperties, isSuccess: isLoadingPropertiesSuccessful } = useQuery(["groupProperties", iModelId, mappingId, group.id, groupProperty?.id, "metadata"], fetchPropertiesMetadata);
     useEffect(() => {
-        const generateProperties = async () => {
-            setIsLoading(true);
-            if (!iModelConnection)
-                return;
-            const result = await manufactureKeys(group.query, iModelConnection);
-            const descriptor = await fetchPresentationDescriptor(iModelConnection, result);
-            // Only allow primitives and structs
-            const propertyFields = descriptor?.fields.filter((field) => field.type.valueFormat === PropertyValueFormat.Primitive ||
-                field.type.valueFormat === PropertyValueFormat.Struct) ?? [];
-            const propertiesMetaData = convertPresentationFields(propertyFields);
-            setPropertiesMetaData(propertiesMetaData);
-            if (groupProperty) {
-                const accessToken = await getAccessToken();
-                let response;
-                try {
-                    response = await mappingClient.getGroupProperty(accessToken, iModelId, mappingId, group.id, groupProperty.id);
-                    setPropertyName(response.propertyName);
-                    setOldPropertyName(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 (isLoadingPropertiesSuccessful && data?.propertiesMetaData) {
+            setPropertiesMetaData(data.propertiesMetaData);
+            if (data.groupPropertyDetails) {
+                setPropertyName(data.groupPropertyDetails.propertyName);
+                setOldPropertyName(data.groupPropertyDetails.propertyName);
+                setDataType(data.groupPropertyDetails.dataType);
+                setQuantityType(data.groupPropertyDetails.quantityType);
+                const properties = findProperties(data.groupPropertyDetails.ecProperties, data.propertiesMetaData);
+                if (properties.length === 0) {
+                    setPropertiesNotFoundAlert(true);
                 }
+                setSelectedProperties(properties);
             }
-            setIsLoading(false);
-        };
-        void generateProperties();
-    }, [getAccessToken, mappingClient, iModelConnection, iModelId, groupProperty, mappingId, group]);
-    const handleSaveClick = async () => {
-        if (!validator.allValid()) {
-            showValidationMessage(true);
-            return;
-        }
-        if (oldPropertyName !== propertyName && oldPropertyName !== "") {
-            setShowSaveModal(true);
         }
-        else {
-            await onSave();
-        }
-    };
-    const handleCloseSaveModal = () => {
-        setShowSaveModal(false);
-    };
-    const onSave = async () => {
-        try {
-            setIsLoading(true);
+    }, [data, isLoadingPropertiesSuccessful]);
+    const { mutate: onSave, isLoading: isSaving } = useMutation({
+        mutationFn: async () => {
             const accessToken = await getAccessToken();
             const newGroupProperty = {
                 propertyName,
@@ -137,37 +88,33 @@ export const GroupPropertyAction = ({ mappingId, group, groupProperty, onSaveSuc
                 quantityType,
                 ecProperties: selectedProperties.map((p) => convertToECProperties(p)).flat(),
             };
-            groupProperty
-                ? await mappingClient.updateGroupProperty(accessToken, iModelId, mappingId, group.id, groupProperty.id, newGroupProperty)
-                : await mappingClient.createGroupProperty(accessToken, iModelId, mappingId, group.id, newGroupProperty);
+            return groupProperty
+                ? mappingClient.updateGroupProperty(accessToken, iModelId, mappingId, group.id, groupProperty.id, newGroupProperty)
+                : mappingClient.createGroupProperty(accessToken, iModelId, mappingId, group.id, newGroupProperty);
+        },
+        onSuccess: async () => {
             onSaveSuccess();
             reset();
+            await queryClient.invalidateQueries(["groupProperties", iModelId, mappingId, group.id]);
+        },
+    });
+    const handleSaveClick = async () => {
+        if (!validator.allValid()) {
+            showValidationMessage(true);
+            return;
         }
-        catch (error) {
-            handleError(error.status);
+        if (oldPropertyName !== propertyName && oldPropertyName !== "") {
+            setShowSaveConfirmationModal(true);
         }
-        finally {
-            setIsLoading(false);
+        else {
+            onSave();
         }
     };
-    const startSearch = useCallback(() => {
-        if (!searchInput)
-            return;
-        setActiveSearchInput(searchInput);
-        setSearched(true);
-    }, [searchInput]);
-    const clearSearch = useCallback(() => {
-        setSearchInput("");
-        setActiveSearchInput("");
-        setSearched(false);
-    }, []);
-    useEffect(() => {
-        if (searchInput.length === 0) {
-            setSearched(false);
-            clearSearch();
-        }
-    }, [searchInput, setSearched, clearSearch]);
-    return (React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd },
+    const handleCloseSaveModal = () => {
+        setShowSaveConfirmationModal(false);
+    };
+    const isLoading = isLoadingProperties || isSaving;
+    return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: 'gmw-group-property-action-container' },
             React.createElement(Fieldset, { disabled: isLoading, className: 'gmw-property-options', legend: 'Property Details' },
                 React.createElement(Text, { variant: 'small', as: 'small', className: 'gmw-field-legend' }, "Asterisk * indicates mandatory fields."),
@@ -196,66 +143,14 @@ export const GroupPropertyAction = ({ mappingId, group, groupProperty, onSaveSuc
                 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(Button, { onClick: async () => setShowPropertiesSelectionModal(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: getLocalizedStringPresentation(property.categoryLabel), actionGroup: null })))))),
+                    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: handleSaveClick, onCancel: onClickCancel, isLoading: isLoading, isSavingDisabled: selectedProperties.length === 0 || !propertyName || dataType === DataType.Undefined }),
-        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(Icon, { className: "gmw-gutter-drag-icon", size: "large" },
-                        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", title: 'Clear Search' },
-                                React.createElement(SvgClose, null))) : (React.createElement(IconButton, { onClick: startSearch, styleType: "borderless", title: 'Search' },
-                                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: getLocalizedStringPresentation(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(SaveModal, { onSave: onSave, onClose: handleCloseSaveModal, showSaveModal: showSaveModal }),
-        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(Icon, { className: "gmw-drag-icon", size: "large" },
-                    React.createElement(SvgDragHandleVertical, null)) }) : null)));
+        React.createElement(GroupsPropertiesSelectionModal, { showModal: showPropertiesSelectionModal, setShowModal: setShowPropertiesSelectionModal, selectedProperties: selectedProperties, setSelectedProperties: setSelectedProperties, propertiesMetaData: propertiesMetaData }),
+        React.createElement(SaveModal, { onSave: onSave, onClose: handleCloseSaveModal, showSaveModal: showSaveConfirmationModal })));
 };
 //# sourceMappingURL=GroupPropertyAction.js.map