@itwin/grouping-mapping-widget 0.6.0 → 0.7.0

package/lib/esm/widget/components/context/GroupingMappingCustomUIContext.js

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { createContext, useContext } from "react";
+export const createGroupingMappingCustomUI = (customUIs) => {
+    if (undefined === customUIs) {
+        return [];
+    }
+    return customUIs;
+};
+export const GroupingMappingCustomUIContext = createContext([]);
+export const useGroupingMappingCustomUI = () => {
+    const context = useContext(GroupingMappingCustomUIContext);
+    if (!context) {
+        throw new Error("useGroupingMappingCustomUI should be used within a GroupingMappingCustomUIContext provider");
+    }
+    return context;
+};
+//# sourceMappingURL=GroupingMappingCustomUIContext.js.map

package/lib/esm/widget/components/context/GroupingMappingCustomUIContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupingMappingCustomUIContext.js","sourceRoot":"","sources":["../../../../../src/widget/components/context/GroupingMappingCustomUIContext.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,SAAgD,EACrB,EAAE;IAC7B,IAAI,SAAS,KAAK,SAAS,EAAE;QAC3B,OAAO,EAAE,CAAC;KACX;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAG,aAAa,CAA4B,EAAE,CAAC,CAAC;AAE3F,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,EAAE;IAC7C,MAAM,OAAO,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAC;IAC3D,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,4FAA4F,CAC7F,CAAC;KACH;IACD,OAAO,OAAO,CAAC;AACjB,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 { createContext, useContext } from \"react\";\nimport type { GroupingMappingCustomUI } from \"../customUI/GroupingMappingCustomUI\";\n\nexport const createGroupingMappingCustomUI = (\n  customUIs: GroupingMappingCustomUI[] | undefined,\n): GroupingMappingCustomUI[] => {\n  if (undefined === customUIs) {\n    return [];\n  }\n  return customUIs;\n};\n\nexport const GroupingMappingCustomUIContext = createContext<GroupingMappingCustomUI[]>([]);\n\nexport const useGroupingMappingCustomUI = () => {\n  const context = useContext(GroupingMappingCustomUIContext);\n  if (!context) {\n    throw new Error(\n      \"useGroupingMappingCustomUI should be used within a GroupingMappingCustomUIContext provider\",\n    );\n  }\n  return context;\n};\n"]}

package/lib/esm/widget/components/customUI/GroupingMappingCustomUI.d.ts

@@ -0,0 +1,91 @@
+import type { ReactElement } from "react";
+export declare enum GroupingMappingCustomUIType {
+    Grouping = 0,
+    Context = 1
+}
+export declare type GroupingMappingCustomUI = GroupingCustomUI | ContextCustomUI;
+/** Custom UI Definitions. */
+export interface IGroupingMappingCustomUI {
+    /**
+     * See GroupingMappingCustomUIType.
+     */
+    type: GroupingMappingCustomUIType;
+    /**
+     * Unique identifier of the custom UI.
+     */
+    name: string;
+    /**
+     * Display label in the widget.
+     */
+    displayLabel: string;
+    /**
+     * Optional icon, will be shown before display label in widget.
+     */
+    icon?: ReactElement;
+}
+/**
+ * Context custom UI type definition.
+ */
+export interface ContextCustomUI extends IGroupingMappingCustomUI {
+    /**
+     * See GroupingMappingCustomUIType.
+     */
+    type: GroupingMappingCustomUIType.Context;
+    /**
+     * User defined component for UI interaction with grouping mapping widget.
+     */
+    uiComponent?: (props: ContextCustomUIProps) => JSX.Element;
+    /**
+     * Callback function for context custom UI menu item click event.
+     */
+    onClick?: (groupId: string, mappingId: string, iModelId: string) => void;
+}
+/**
+ * Group custom UI type definition.
+ */
+export interface GroupingCustomUI extends IGroupingMappingCustomUI {
+    /**
+     * See GroupingMappingCustomUIType.
+     */
+    type: GroupingMappingCustomUIType.Grouping;
+    /**
+     * Custom UI Component to build query interactively. Refer to SearchGroupingCustomUI/ManualGroupingCustomUI.
+     */
+    uiComponent: (props: GroupingCustomUIProps) => JSX.Element;
+}
+/** Custom UI Component props definitions. */
+/**
+ * Context custom UI component arguments definition.
+ */
+export interface ContextCustomUIProps {
+    /**
+     * IModel Id.
+     */
+    iModelId: string;
+    /**
+     * Mapping Id.
+     */
+    mappingId: string;
+    /**
+     * Group Id.
+     */
+    groupId: string;
+}
+/**
+ * Group custom UI component arguments definition.
+ */
+export interface GroupingCustomUIProps {
+    /**
+     * To validate and update current query.
+     */
+    updateQuery: (query: string) => void;
+    /**
+     * To get the query loading status.
+     */
+    isUpdating?: boolean;
+    /**
+     * To reset the viewer.
+     */
+    resetView?: () => Promise<void>;
+}
+//# sourceMappingURL=GroupingMappingCustomUI.d.ts.map

package/lib/esm/widget/components/customUI/GroupingMappingCustomUI.js

@@ -0,0 +1,6 @@
+export var GroupingMappingCustomUIType;
+(function (GroupingMappingCustomUIType) {
+    GroupingMappingCustomUIType[GroupingMappingCustomUIType["Grouping"] = 0] = "Grouping";
+    GroupingMappingCustomUIType[GroupingMappingCustomUIType["Context"] = 1] = "Context";
+})(GroupingMappingCustomUIType || (GroupingMappingCustomUIType = {}));
+//# sourceMappingURL=GroupingMappingCustomUI.js.map

package/lib/esm/widget/components/customUI/GroupingMappingCustomUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupingMappingCustomUI.js","sourceRoot":"","sources":["../../../../../src/widget/components/customUI/GroupingMappingCustomUI.ts"],"names":[],"mappings":"AAMA,MAAM,CAAN,IAAY,2BAGX;AAHD,WAAY,2BAA2B;IACrC,qFAAQ,CAAA;IACR,mFAAO,CAAA;AACT,CAAC,EAHW,2BAA2B,KAA3B,2BAA2B,QAGtC","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 { ReactElement } from \"react\";\n\nexport enum GroupingMappingCustomUIType {\n  Grouping,\n  Context,\n}\n\nexport type GroupingMappingCustomUI = GroupingCustomUI | ContextCustomUI;\n\n/** Custom UI Definitions. */\n\nexport interface IGroupingMappingCustomUI {\n  /**\n   * See GroupingMappingCustomUIType.\n   */\n  type: GroupingMappingCustomUIType;\n  /**\n   * Unique identifier of the custom UI.\n   */\n  name: string;\n  /**\n   * Display label in the widget.\n   */\n  displayLabel: string;\n  /**\n   * Optional icon, will be shown before display label in widget.\n   */\n  icon?: ReactElement;\n}\n\n/**\n * Context custom UI type definition.\n */\nexport interface ContextCustomUI extends IGroupingMappingCustomUI {\n  /**\n   * See GroupingMappingCustomUIType.\n   */\n  type: GroupingMappingCustomUIType.Context;\n  /**\n   * User defined component for UI interaction with grouping mapping widget.\n   */\n  uiComponent?: (props: ContextCustomUIProps) => JSX.Element;\n  /**\n   * Callback function for context custom UI menu item click event.\n   */\n  onClick?: (groupId: string, mappingId: string, iModelId: string) => void;\n}\n\n/**\n * Group custom UI type definition.\n */\nexport interface GroupingCustomUI extends IGroupingMappingCustomUI {\n  /**\n   * See GroupingMappingCustomUIType.\n   */\n  type: GroupingMappingCustomUIType.Grouping;\n  /**\n   * Custom UI Component to build query interactively. Refer to SearchGroupingCustomUI/ManualGroupingCustomUI.\n   */\n  uiComponent: (props: GroupingCustomUIProps) => JSX.Element;\n}\n\n/** Custom UI Component props definitions. */\n\n/**\n * Context custom UI component arguments definition.\n */\nexport interface ContextCustomUIProps {\n  /**\n   * IModel Id.\n   */\n  iModelId: string;\n  /**\n   * Mapping Id.\n   */\n  mappingId: string;\n  /**\n   * Group Id.\n   */\n  groupId: string;\n}\n\n/**\n * Group custom UI component arguments definition.\n */\nexport interface GroupingCustomUIProps {\n  /**\n   * To validate and update current query.\n   */\n  updateQuery: (query: string) => void;\n  /**\n   * To get the query loading status.\n   */\n  isUpdating?: boolean;\n  /**\n   * To reset the viewer.\n   */\n  resetView?: () => Promise<void>;\n}\n"]}

package/lib/esm/widget/components/customUI/ManualGroupingCustomUI.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import "./ManualGroupingCustomUI.scss";
+import type { GroupingCustomUIProps } from "./GroupingMappingCustomUI";
+declare const ManualGroupingCustomUI: ({ updateQuery, isUpdating, resetView, }: GroupingCustomUIProps) => JSX.Element;
+export default ManualGroupingCustomUI;
+//# sourceMappingURL=ManualGroupingCustomUI.d.ts.map

package/lib/esm/widget/components/customUI/ManualGroupingCustomUI.js

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React from "react";
+import { Button, LabeledTextarea, Text } from "@itwin/itwinui-react";
+import { LoadingSpinner } from "../utils";
+import "./ManualGroupingCustomUI.scss";
+const ManualGroupingCustomUI = ({ updateQuery, isUpdating, resetView, }) => {
+    const [manualInput, setManualInput] = React.useState("");
+    return (React.createElement("div", { className: 'gmw-manual-form' },
+        React.createElement(Text, null, "Generate group using an ECSQL query. Please select ECInstanceId and ECClassId columns in the query."),
+        React.createElement(LabeledTextarea, { label: 'Query', required: true, value: manualInput, onChange: (event) => setManualInput(event.target.value), disabled: isUpdating, placeholder: `E.g. "SELECT ECInstanceId, ECClassId FROM BisCore:PhysicalElement"` }),
+        React.createElement("div", { className: 'gmw-manual-actions' },
+            isUpdating && React.createElement(LoadingSpinner, null),
+            React.createElement(Button, { disabled: isUpdating, onClick: () => updateQuery(manualInput) }, "Apply"),
+            React.createElement(Button, { disabled: isUpdating, onClick: async () => {
+                    updateQuery("");
+                    setManualInput("");
+                    if (resetView) {
+                        await resetView();
+                    }
+                } }, "Clear"))));
+};
+export default ManualGroupingCustomUI;
+//# sourceMappingURL=ManualGroupingCustomUI.js.map

package/lib/esm/widget/components/customUI/ManualGroupingCustomUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManualGroupingCustomUI.js","sourceRoot":"","sources":["../../../../../src/widget/components/customUI/ManualGroupingCustomUI.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,+BAA+B,CAAC;AAGvC,MAAM,sBAAsB,GAAG,CAAC,EAC9B,WAAW,EACX,UAAU,EACV,SAAS,GACa,EAAE,EAAE;IAC1B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzD,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,oBAAC,IAAI,8GAEE;QACP,oBAAC,eAAe,IACd,KAAK,EAAC,OAAO,EACb,QAAQ,QACR,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACvD,QAAQ,EAAE,UAAU,EACpB,WAAW,EAAE,oEAAoE,GACjF;QACF,6BAAK,SAAS,EAAC,oBAAoB;YAChC,UAAU,IAAI,oBAAC,cAAc,OAAG;YACjC,oBAAC,MAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,YAE5D;YACT,oBAAC,MAAM,IACL,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,KAAK,IAAI,EAAE;oBAClB,WAAW,CAAC,EAAE,CAAC,CAAC;oBAChB,cAAc,CAAC,EAAE,CAAC,CAAC;oBACnB,IAAI,SAAS,EAAE;wBACb,MAAM,SAAS,EAAE,CAAC;qBACnB;gBACH,CAAC,YAGM,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,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 from \"react\";\nimport { Button, LabeledTextarea, Text } from \"@itwin/itwinui-react\";\nimport { LoadingSpinner } from \"../utils\";\nimport \"./ManualGroupingCustomUI.scss\";\nimport type { GroupingCustomUIProps } from \"./GroupingMappingCustomUI\";\n\nconst ManualGroupingCustomUI = ({\n  updateQuery,\n  isUpdating,\n  resetView,\n}: GroupingCustomUIProps) => {\n  const [manualInput, setManualInput] = React.useState(\"\");\n\n  return (\n    <div className='gmw-manual-form'>\n      <Text>\n        Generate group using an ECSQL query. Please select ECInstanceId and ECClassId columns in the query.\n      </Text>\n      <LabeledTextarea\n        label='Query'\n        required\n        value={manualInput}\n        onChange={(event) => setManualInput(event.target.value)}\n        disabled={isUpdating}\n        placeholder={`E.g. \"SELECT ECInstanceId, ECClassId FROM BisCore:PhysicalElement\"`}\n      />\n      <div className='gmw-manual-actions'>\n        {isUpdating && <LoadingSpinner />}\n        <Button disabled={isUpdating} onClick={() => updateQuery(manualInput)}>\n          Apply\n        </Button>\n        <Button\n          disabled={isUpdating}\n          onClick={async () => {\n            updateQuery(\"\");\n            setManualInput(\"\");\n            if (resetView) {\n              await resetView();\n            }\n          }}\n        >\n          Clear\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default ManualGroupingCustomUI;\n"]}

package/lib/esm/widget/components/customUI/ManualGroupingCustomUI.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.gmw-manual-form {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+  margin-top: $iui-baseline;
+  > .gmw-manual-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: $iui-s;
+  }
+}

package/lib/esm/widget/components/customUI/SearchGroupingCustomUI.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { GroupingCustomUIProps } from "./GroupingMappingCustomUI";
+import "./SearchGroupingCustomUI.scss";
+declare const SearchGroupingCustomUI: ({ updateQuery, isUpdating, resetView, }: GroupingCustomUIProps) => JSX.Element;
+export default SearchGroupingCustomUI;
+//# sourceMappingURL=SearchGroupingCustomUI.d.ts.map

package/lib/esm/widget/components/customUI/SearchGroupingCustomUI.js

@@ -0,0 +1,92 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React from "react";
+import { Button, LabeledTextarea, Text } from "@itwin/itwinui-react";
+import { LoadingSpinner } from "../utils";
+import "./SearchGroupingCustomUI.scss";
+const SearchGroupingCustomUI = ({ updateQuery, isUpdating, resetView, }) => {
+    const [searchInput, setSearchInput] = React.useState("");
+    const isWrappedInQuotes = (text) => {
+        return text.startsWith(`"`) && text.endsWith(`"`);
+    };
+    const needsAndOperator = (token, index, searchQuery) => isWrappedInQuotes(token) ||
+        (index === 1 && isWrappedInQuotes(searchQuery[0]));
+    const generateSearchQuery = (searchQuery) => {
+        if (searchQuery.length === 0) {
+            updateQuery("");
+            return;
+        }
+        let generatedSearchQuery = `SELECT be.ECInstanceId, be.ECClassId FROM bis.geometricelement3d be `;
+        generatedSearchQuery += `LEFT JOIN bis.SpatialCategory cat ON be.Category.Id = cat.ECInstanceID LEFT JOIN ecdbmeta.ECClassDef ecc ON be.ECClassId = ecc.ECInstanceId `;
+        generatedSearchQuery += `LEFT JOIN bis.PhysicalType pt ON be.TypeDefinition.Id = pt.ECInstanceID`;
+        generatedSearchQuery += ` WHERE `;
+        generatedSearchQuery += `((${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} be.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")}) OR (${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} be.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")})) OR ((${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} cat.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")}) OR (${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} cat.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")})) OR (${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} ecc.name LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")})`;
+        // Physical Types
+        generatedSearchQuery += ` OR ((${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} pt.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")}) OR (${searchQuery
+            .map((token, index) => `${index === 0
+            ? ""
+            : needsAndOperator(token, index, searchQuery)
+                ? "AND"
+                : "OR"} pt.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token}%'`)
+            .join(" ")})) `;
+        updateQuery(generatedSearchQuery);
+    };
+    return (React.createElement("div", { className: 'gmw-search-form' },
+        React.createElement(Text, null, "Generate a query by keywords. Keywords wrapped in double quotes will be considered a required criteria."),
+        React.createElement(LabeledTextarea, { label: 'Query Keywords', required: true, value: searchInput, onChange: (event) => setSearchInput(event.target.value), disabled: isUpdating, placeholder: `E.g. "red" chair` }),
+        React.createElement("div", { className: 'gmw-search-actions' },
+            isUpdating && React.createElement(LoadingSpinner, null),
+            React.createElement(Button, { disabled: isUpdating, onClick: () => generateSearchQuery(searchInput
+                    ? searchInput
+                        .replace(/(\r\n|\n|\r)/gm, "")
+                        .trim()
+                        .split(" ")
+                    : []) }, "Apply"),
+            React.createElement(Button, { disabled: isUpdating, onClick: async () => {
+                    updateQuery("");
+                    setSearchInput("");
+                    if (resetView) {
+                        await resetView();
+                    }
+                } }, "Clear"))));
+};
+export default SearchGroupingCustomUI;
+//# sourceMappingURL=SearchGroupingCustomUI.js.map

package/lib/esm/widget/components/customUI/SearchGroupingCustomUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchGroupingCustomUI.js","sourceRoot":"","sources":["../../../../../src/widget/components/customUI/SearchGroupingCustomUI.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 React from \"react\";\nimport { Button, LabeledTextarea, Text } from \"@itwin/itwinui-react\";\nimport type { GroupingCustomUIProps } from \"./GroupingMappingCustomUI\";\nimport { LoadingSpinner } from \"../utils\";\nimport \"./SearchGroupingCustomUI.scss\";\n\nconst SearchGroupingCustomUI = ({\n  updateQuery,\n  isUpdating,\n  resetView,\n}: GroupingCustomUIProps) => {\n  const [searchInput, setSearchInput] = React.useState(\"\");\n  const isWrappedInQuotes = (text: string) => {\n    return text.startsWith(`\"`) && text.endsWith(`\"`);\n  };\n\n  const needsAndOperator = (\n    token: string,\n    index: number,\n    searchQuery: string[],\n  ) =>\n    isWrappedInQuotes(token) ||\n    (index === 1 && isWrappedInQuotes(searchQuery[0]));\n\n  const generateSearchQuery = (searchQuery: string[]) => {\n    if (searchQuery.length === 0) {\n      updateQuery(\"\");\n      return;\n    }\n\n    let generatedSearchQuery = `SELECT be.ECInstanceId, be.ECClassId FROM bis.geometricelement3d be `;\n    generatedSearchQuery += `LEFT JOIN bis.SpatialCategory cat ON be.Category.Id = cat.ECInstanceID LEFT JOIN ecdbmeta.ECClassDef ecc ON be.ECClassId = ecc.ECInstanceId `;\n    generatedSearchQuery += `LEFT JOIN bis.PhysicalType pt ON be.TypeDefinition.Id = pt.ECInstanceID`;\n    generatedSearchQuery += ` WHERE `;\n    generatedSearchQuery += `((${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } be.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")}) OR (${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } be.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")})) OR ((${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } cat.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")}) OR (${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } cat.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")})) OR (${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } ecc.name LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")})`;\n    // Physical Types\n    generatedSearchQuery += ` OR ((${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } pt.codevalue LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")}) OR (${searchQuery\n      .map(\n        (token, index) =>\n          `${index === 0\n            ? \"\"\n            : needsAndOperator(token, index, searchQuery)\n              ? \"AND\"\n              : \"OR\"\n          } pt.userlabel LIKE '%${isWrappedInQuotes(token) ? token.slice(1, -1) : token\n          }%'`,\n      )\n      .join(\" \")})) `;\n\n    updateQuery(generatedSearchQuery);\n  };\n\n  return (\n    <div className='gmw-search-form'>\n      <Text>\n        Generate a query by keywords. Keywords wrapped in double quotes will be\n        considered a required criteria.\n      </Text>\n      <LabeledTextarea\n        label='Query Keywords'\n        required\n        value={searchInput}\n        onChange={(event) => setSearchInput(event.target.value)}\n        disabled={isUpdating}\n        placeholder={`E.g. \"red\" chair`}\n      />\n      <div className='gmw-search-actions'>\n        {isUpdating && <LoadingSpinner />}\n        <Button\n          disabled={isUpdating}\n          onClick={() =>\n            generateSearchQuery(\n              searchInput\n                ? searchInput\n                  .replace(/(\\r\\n|\\n|\\r)/gm, \"\")\n                  .trim()\n                  .split(\" \")\n                : [],\n            )\n          }\n        >\n          Apply\n        </Button>\n        <Button\n          disabled={isUpdating}\n          onClick={async () => {\n            updateQuery(\"\");\n            setSearchInput(\"\");\n            if (resetView) {\n              await resetView();\n            }\n          }}\n        >\n          Clear\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default SearchGroupingCustomUI;\n"]}

package/lib/esm/widget/components/customUI/SearchGroupingCustomUI.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.gmw-search-form {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+  margin-top: $iui-baseline;
+  > .gmw-search-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: $iui-s;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/grouping-mapping-widget",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "An iTwin.js 3D Viewer Widget that interfaces with the iTwin Reporting Platform.",
   "keywords": [
     "Bentley",
@@ -46,6 +46,7 @@
     "simple-react-validator": "^1.6.1"
   },
   "devDependencies": {
+    "@faker-js/faker": "^7.5.0",
     "@itwin/appui-abstract": "^3.2.0",
     "@itwin/appui-layout-react": "^3.2.0",
     "@itwin/appui-react": "^3.2.0",
@@ -66,12 +67,18 @@
     "@itwin/presentation-components": "^3.2.0",
     "@itwin/presentation-frontend": "^3.2.0",
     "@itwin/webgl-compatibility": "^3.2.0",
+    "@testing-library/dom": "^8.12.0",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^14.1.1",
     "@types/i18next": "^8.4.2",
+    "@types/jest": "^27.4.1",
     "@types/node": "^14.14.20",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
     "@types/react-redux": "^7.0.1",
     "@types/react-table": "^7.7.0",
+    "@types/testing-library__jest-dom": "^5.14.3",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
     "@typescript-eslint/parser": "^5.10.1",
     "cpx2": "^3.0.0",
@@ -79,12 +86,18 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
+    "jest-transform-stub": "^2.0.0",
+    "msw": "^0.39.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.0",
     "react-table": "^7.7.0",
     "redux": "^4.1.0",
     "rimraf": "^3.0.2",
+    "ts-jest": "^27.1.3",
+    "typemoq": "^2.1.0",
     "typescript": "~4.3.0"
   },
   "peerDependencies": {
@@ -114,7 +127,8 @@
     "lint:fix": "npm run lint -- --fix",
     "pseudolocalize": "betools pseudolocalize --englishDir ./public/locales/en --out ./public/locales/en-PSEUDO",
     "rebuild": "npm run clean && npm run build",
-    "test": ""
+    "test": "jest",
+    "test:watch": "jest --watch "
   },
-  "readme": "# @itwin/grouping-mapping-widget\r\n\r\nCopyright © Bentley Systems, Incorporated. All rights reserved.\r\nThe Grouping Mapping widget is a UI component for iTwin Viewer applications that simplifies how users (and developers) interface with the [Reporting Platform APIs](https://developer.bentley.com/apis/insights/overview/).\r\nThe grouping-mapping-widget package provides a UiProvider class - `GroupingMappingProvider` - which can be passed into the `uiProviders` prop of the iTwin Viewer's `<Viewer />` component.\r\n\r\n## Getting Started\r\n\r\nThis is not a standalone UI and requires a parent iTwin Viewer application to work as intended.\r\nA guide on how to create a basic iTwin Viewer application can be found here: <https://www.itwinjs.org/learning/tutorials/develop-web-viewer/>.\r\nThis package provides a viewer 'widget'. Documentation on how to add a widget to your application can be found here: <https://developer.bentley.com/tutorials/itwin-viewer-hello-world/#2-your-first-ui-widget>.\r\n\r\n## Permissions and Scopes\r\n\r\nThe SPA client used by your iTwin viewer must have these additional scopes:\r\n\r\n- `insights:read`\r\n- `insights:modify`\r\n- `projects:read`\r\n\r\nIn addition, users must have the `imodels_read` and `imodels_write` [permissions](https://developer.bentley.com/apis/insights/operations/create-mapping/#authorization) assigned at either the Project or iModel level. Further instruction on how to create roles and assign permissions can be found in the [iTwin Platform Projects API documentation](https://developer.bentley.com/apis/projects/tutorials/).\r\n\r\n## Sample usage\r\n\r\n```tsx\r\nimport { GroupingMappingProvider } from \"@itwin/grouping-mapping-widget\";\r\n<Viewer\r\n  ...\r\n  uiProviders={[new GroupingMappingProvider()]}\r\n/>\r\n```\r\n"
+  "readme": "# @itwin/grouping-mapping-widget\r\n\r\nCopyright © Bentley Systems, Incorporated. All rights reserved.\r\nThe Grouping Mapping widget is a UI component for iTwin Viewer applications that simplifies how users (and developers) interface with the [Reporting Platform APIs](https://developer.bentley.com/apis/insights/overview/).\r\nThe grouping-mapping-widget package provides a UiProvider class - `GroupingMappingProvider` - which can be passed into the `uiProviders` prop of the iTwin Viewer's `<Viewer />` component.\r\n\r\n## Getting Started\r\n\r\nThis is not a standalone UI and requires a parent iTwin Viewer application to work as intended.\r\nA guide on how to create a basic iTwin Viewer application can be found here: <https://www.itwinjs.org/learning/tutorials/develop-web-viewer/>.\r\nThis package provides a viewer 'widget'. Documentation on how to add a widget to your application can be found here: <https://developer.bentley.com/tutorials/itwin-viewer-hello-world/#2-your-first-ui-widget>.\r\n\r\n## Permissions and Scopes\r\n\r\nThe SPA client used by your iTwin viewer must have these additional scopes:\r\n\r\n- `insights:read`\r\n- `insights:modify`\r\n- `projects:read`\r\n\r\nIn addition, users must have the `imodels_read` and `imodels_write` [permissions](https://developer.bentley.com/apis/insights/operations/create-mapping/#authorization) assigned at either the Project or iModel level. Further instruction on how to create roles and assign permissions can be found in the [iTwin Platform Projects API documentation](https://developer.bentley.com/apis/projects/tutorials/).\r\n\r\n## Sample usage\r\n\r\n```tsx\r\nimport { GroupingMappingProvider } from \"@itwin/grouping-mapping-widget\";\r\n<Viewer\r\n  ...\r\n  uiProviders={[new GroupingMappingProvider()]}\r\n/>\r\n```\r\n\r\n## Custom UI\r\n\r\nThis package provides an interface to define your own custom UI or callback functions in grouping mapping widget. There are different types of custom UIs provided.\r\n\r\n### Grouping Custom UI\r\n\r\nYou can use your own UI component to define group creation method.\r\n\r\nAn example of grouping custom UI, [ManualGroupingCustomUI](https://github.com/iTwin/viewer-components-react/blob/master/packages/itwin/grouping-mapping-widget/src/widget/components/customUI/ManualGroupingCustomUI.tsx) helps user to manually define ECSQL query for groups.\r\n\r\nIn `GroupingCustomUIProps`:\r\n\r\n- `updateQuery` is used to run the query and visualize results in the viewer.\r\n- `isUpdating` keeps track of the status of query execution.\r\n- `resetView` enables you to reset the viewer state.\r\n\r\nTo configure your own grouping custom UI, you need to give it:\r\n\r\n- a `type` as `GroupingMappingCustomUIType.Grouping`\r\n- a `name` as identifier\r\n- a `displayLabel` which will be shown in the 'Add Group' dropdown list\r\n- a `uiComponent` like above\r\n- an optional `icon`\r\n\r\nYou can define your UI provider as follows in the GroupingMappingProvider:\r\n\r\n```tsx\r\nnew GroupingMappingProvider({\r\n  customUIs: [\r\n    {\r\n      type: GroupingMappingCustomUIType.Grouping,\r\n      name: \"Manual\",\r\n      displayLabel: \"Manual Query\",\r\n      uiComponent: ManualGroupingCustomUI,\r\n      icon: <SvgDraw />,\r\n    },\r\n  ],\r\n});\r\n```\r\n\r\nAfter adding the grouping custom UI, it will be presented in the 'Add Group' drop down list.\r\n\r\n![Process Functional Grouping Menu Item](./assets/ProcessGroupingMenuItem.jpg)\r\n\r\n### Context Custom UI\r\n\r\nYou can also add custom UI in context menu for each group. This could be UI driven interaction or simply a callback function to execute your own code.\r\n\r\nYou can use the `iModelId`, `mappingId` and `groupId` in `ContextCustomUIProps` provided by Grouping Mapping Widget in your UI component or callback.\r\n\r\nTo configure your own context custom UI, you need to give it:\r\n\r\n- a `type` as `GroupingMappingCustomUIType.Context`\r\n- a `name` as identifier\r\n- a `displayLabel` which will be shown in the context dropdown list in each group tile\r\n- an optional `uiComponent` which will be presented in the widget as a UI component\r\n- an optional `onClick` callback function where you could make your own API calls\r\n- an optional `icon`\r\n\r\nYou can define your context custom UI as following example in the GroupingMappingProvider with an example is to use [clash detection](https://www.itwinjs.org/sandboxes/iTwinPlatform/Clash%20Review) in the widget:\r\n\r\n```tsx\r\nconst customCB = (groupId: string, mappingId: string, iModelId: string) => {\r\n  toaster.informational(`Called callback for group ${groupId}`)\r\n}\r\n\r\nnew GroupingMappingProvider({\r\n  customUIs: [\r\n    {\r\n      type: GroupingMappingCustomUIType.Context,\r\n      name: \"ClashDetection\",\r\n      displayLabel: \"Clash Detection\",\r\n      uiComponent: ClashDetectionCustomUI,\r\n      onClick: customCB,\r\n      icon: <SvgClash />,\r\n    },\r\n  ],\r\n});\r\n```\r\n\r\nAfter adding the context custom UI, the context menu item will look like this with additional `Clash Detection` menu item.\r\n\r\n![Clash Detection Context Menu Item](./assets/ClashDetectionContextMenuItem.jpg)\r\n"
 }