@itwin/grouping-mapping-widget 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/grouping-mapping-widget",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "An iTwin.js 3D Viewer Widget that interfaces with the iTwin Reporting Platform.",
   "keywords": [
     "Bentley",
@@ -36,16 +36,22 @@
     }
   },
   "dependencies": {
-    "@itwin/imodel-browser-react": "^0.12.1",
+    "@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/sortable": "7.0.1",
+    "@dnd-kit/utilities": "3.2.0",
+    "@itwin/imodel-browser-react": "^0.12.3",
     "@itwin/insights-client": "^0.3.0",
-    "@itwin/itwinui-icons-react": "^1.7.0",
+    "@itwin/itwinui-icons-react": "^1.15.1",
     "@itwin/itwinui-react": "~1.42.0",
     "classnames": "^2.3.1",
     "cross-fetch": "^3.1.4",
+    "fast-equals": "^4.0.2",
     "immer": "^9.0.7",
+    "react-split": "2.0.14",
     "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 +72,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 +91,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 +132,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"
 }