[Grouping&Mapping] accessToken parameter now takes a callback fn

common/changes/@itwin/grouping-mapping-widget/token-callback_2022-06-21-01-21.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/grouping-mapping-widget",
+      "comment": "Custom accessToken parameter now takes a callback function",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@itwin/grouping-mapping-widget"
+}

packages/itwin/grouping-mapping-widget/src/grouping-mapping-widget.ts

@@ -6,7 +6,8 @@
 export * from "./widget/GroupingMappingWidget";
 
 /** Interfaces for providing custom MappingClient */
-export { createDefaultMappingClient, ClientPrefix } from "./widget/components/GroupingMapping";
+export { createDefaultMappingClient } from "./widget/components/context/MappingClientContext";
+export { ClientPrefix } from "./widget/components/context/GroupingApiConfigContext";
 export * from "@itwin/insights-client";
 export * from "./widget/IMappingClient";
 

packages/itwin/grouping-mapping-widget/src/widget/GroupingMappingWidget.tsx

@@ -14,19 +14,19 @@ import {
 } from "@itwin/appui-abstract";
 import type { AccessToken } from "@itwin/core-bentley";
 import React from "react";
+import type { ClientPrefix } from "./components/context/GroupingApiConfigContext";
 import GroupingMapping from "./components/GroupingMapping";
-import type { ClientPrefix } from "./components/GroupingMapping";
 import type { IMappingClient } from "./IMappingClient";
 
 export class GroupingMappingProvider implements UiItemsProvider {
   public readonly id = "GroupingMappingProvider";
 
-  private readonly _accessToken?: AccessToken;
+  private readonly _getAccessToken?: () => Promise<AccessToken>;
   private readonly _prefix?: ClientPrefix;
   private readonly _client?: IMappingClient;
 
-  constructor(accessToken?: AccessToken, prefix?: "" | "dev" | "qa", client?: IMappingClient) {
-    this._accessToken = accessToken;
+  constructor(getAccessToken?: () => Promise<AccessToken>, prefix?: "" | "dev" | "qa", client?: IMappingClient) {
+    this._getAccessToken = getAccessToken;
     this._prefix = prefix;
     this._client = client;
   }
@@ -49,7 +49,7 @@ export class GroupingMappingProvider implements UiItemsProvider {
         id: "GroupingMappingWidget",
         label: "Grouping & Mapping",
         getWidgetContent: () => {
-          return <GroupingMapping accessToken={this._accessToken} prefix={this._prefix} client={this._client} />;
+          return <GroupingMapping getAccessToken={this._getAccessToken} prefix={this._prefix} client={this._client} />;
         },
       };
 

packages/itwin/grouping-mapping-widget/src/widget/components/CalculatedPropertyAction.tsx

@@ -13,7 +13,7 @@ import {
   MenuItem,
   Small,
 } from "@itwin/itwinui-react";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ActionPanel from "./ActionPanel";
 import {
   BboxDimension,
@@ -24,7 +24,8 @@ import { handleError, WidgetHeader } from "./utils";
 import { visualizeElements, zoomToElements } from "./viewerUtils";
 import "./CalculatedPropertyAction.scss";
 import type { CalculatedPropertyType } from "./CalculatedPropertyTable";
-import { ApiContext, MappingClientContext } from "./GroupingMapping";
+import { useMappingClient } from "./context/MappingClientContext";
+import { useGroupingMappingApiConfig } from "./context/GroupingApiConfigContext";
 
 interface CalculatedPropertyActionProps {
   iModelId: string;
@@ -43,8 +44,8 @@ const CalculatedPropertyAction = ({
   ids,
   returnFn,
 }: CalculatedPropertyActionProps) => {
-  const apiContext = useContext(ApiContext);
-  const mappingClient = useContext(MappingClientContext);
+  const apiContext = useGroupingMappingApiConfig();
+  const mappingClient = useMappingClient();
   const [propertyName, setPropertyName] = useState<string>(
     property?.propertyName ?? "",
   );
@@ -102,9 +103,11 @@ const CalculatedPropertyAction = ({
     try {
       setIsLoading(true);
 
+      const accessToken = await apiContext.getAccessToken();
+
       property
         ? await mappingClient.updateCalculatedProperty(
-          apiContext.accessToken,
+          accessToken,
           iModelId,
           mappingId,
           groupId,
@@ -115,7 +118,7 @@ const CalculatedPropertyAction = ({
           },
         )
         : await mappingClient.createCalculatedProperty(
-          apiContext.accessToken,
+          accessToken,
           iModelId,
           mappingId,
           groupId,

packages/itwin/grouping-mapping-widget/src/widget/components/CalculatedPropertyTable.tsx

@@ -15,13 +15,14 @@ import {
   MenuItem,
   Table,
 } from "@itwin/itwinui-react";
-import React, { useContext, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import type { CreateTypeFromInterface } from "../utils";
 import { PropertyMenuView } from "./PropertyMenu";
 import type { CellProps } from "react-table";
 import DeleteModal from "./DeleteModal";
 import type { CalculatedProperty } from "@itwin/insights-client";
-import { ApiContext, MappingClientContext } from "./GroupingMapping";
+import { useMappingClient } from "./context/MappingClientContext";
+import { useGroupingMappingApiConfig } from "./context/GroupingApiConfigContext";
 
 export type CalculatedPropertyType =
   CreateTypeFromInterface<CalculatedProperty>;
@@ -51,8 +52,8 @@ const CalculatedPropertyTable = ({
   refreshCalculatedProperties,
   selectedCalculatedProperty,
 }: CalculatedPropertyTableProps) => {
-  const apiContext = useContext(ApiContext);
-  const mappingClient = useContext(MappingClientContext);
+  const apiContext = useGroupingMappingApiConfig();
+  const mappingClient = useMappingClient();
   const [
     showCalculatedPropertyDeleteModal,
     setShowCalculatedPropertyDeleteModal,
@@ -147,8 +148,9 @@ const CalculatedPropertyTable = ({
         show={showCalculatedPropertyDeleteModal}
         setShow={setShowCalculatedPropertyDeleteModal}
         onDelete={async () => {
+          const accessToken = await apiContext.getAccessToken();
           await mappingClient.deleteCalculatedProperty(
-            apiContext.accessToken,
+            accessToken,
             iModelId,
             mappingId,
             groupId,

packages/itwin/grouping-mapping-widget/src/widget/components/ConfirmMappingsImport.tsx

@@ -9,14 +9,15 @@ import {
   ProgressLinear,
   Text,
 } from "@itwin/itwinui-react";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import type { MappingType } from "./Mapping";
 import "./ConfirmMappingsImport.scss";
 import { useActiveIModelConnection } from "@itwin/appui-react";
 import { SvgStatusSuccessHollow } from "@itwin/itwinui-icons-react";
 import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
 import { handleError } from "./utils";
-import { ApiContext, MappingClientContext } from "./GroupingMapping";
+import { useMappingClient } from "./context/MappingClientContext";
+import { useGroupingMappingApiConfig } from "./context/GroupingApiConfigContext";
 
 interface ConfirmMappingImportProps {
   sourceiModelId: string;
@@ -40,8 +41,8 @@ const ConfirmMappingImport = ({
   onFinish,
 }: ConfirmMappingImportProps) => {
   const iModelId = useActiveIModelConnection()?.iModelId;
-  const apiContext = useContext(ApiContext);
-  const mappingClient = useContext(MappingClientContext);
+  const apiContext = useGroupingMappingApiConfig();
+  const mappingClient = useMappingClient();
 
   const [importCount, setImportCount] = useState<number>(0);
   const [currentlyImporting, setCurrentlyImporting] = useState<string>("");
@@ -78,8 +79,9 @@ const ConfirmMappingImport = ({
     try {
       for (const selectedMapping of selectedMappings) {
         setCurrentlyImporting(selectedMapping.mappingName ?? "");
+        const accessToken = await apiContext.getAccessToken();
         await mappingClient.copyMapping(
-          apiContext.accessToken,
+          accessToken,
           sourceiModelId,
           selectedMapping.id ?? "",
           {

packages/itwin/grouping-mapping-widget/src/widget/components/CustomCalculationAction.tsx

@@ -9,7 +9,7 @@ import {
   LabeledTextarea,
   Small,
 } from "@itwin/itwinui-react";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import ActionPanel from "./ActionPanel";
 import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
 import { handleError, WidgetHeader } from "./utils";
@@ -19,7 +19,8 @@ import "./CustomCalculationAction.scss";
 import { quantityTypesSelectionOptions } from "./GroupPropertyAction";
 import { useFormulaValidation } from "../hooks/useFormulaValidation";
 import type { PropertyMap } from "../../formula/Types";
-import { ApiContext, MappingClientContext } from "./GroupingMapping";
+import { useMappingClient } from "./context/MappingClientContext";
+import { useGroupingMappingApiConfig } from "./context/GroupingApiConfigContext";
 
 interface CalculatedPropertyActionProps {
   iModelId: string;
@@ -38,8 +39,8 @@ const CustomCalculationAction = ({
   customCalculation,
   returnFn,
 }: CalculatedPropertyActionProps) => {
-  const apiContext = useContext(ApiContext);
-  const mappingClient = useContext(MappingClientContext);
+  const apiContext = useGroupingMappingApiConfig();
+  const mappingClient = useMappingClient();
   const [propertyName, setPropertyName] = useState<string>(
     customCalculation?.propertyName ?? "",
   );
@@ -62,10 +63,10 @@ const CustomCalculationAction = ({
     }
     try {
       setIsLoading(true);
-
+      const accessToken = await apiContext.getAccessToken();
       customCalculation
         ? await mappingClient.updateCustomCalculation(
-          apiContext.accessToken,
+          accessToken,
           iModelId,
           mappingId,
           groupId,
@@ -77,7 +78,7 @@ const CustomCalculationAction = ({
           }
         )
         : await mappingClient.createCustomCalculation(
-          apiContext.accessToken,
+          accessToken,
           iModelId,
           mappingId,
           groupId,

packages/itwin/grouping-mapping-widget/src/widget/components/CustomCalculationTable.tsx

@@ -15,13 +15,14 @@ import {
   MenuItem,
   Table,
 } from "@itwin/itwinui-react";
-import React, { useContext, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import type { CreateTypeFromInterface } from "../utils";
 import { PropertyMenuView } from "./PropertyMenu";
 import type { CellProps } from "react-table";
 import DeleteModal from "./DeleteModal";
 import type { CustomCalculation } from "@itwin/insights-client";
-import { ApiContext, MappingClientContext } from "./GroupingMapping";
+import { useMappingClient } from "./context/MappingClientContext";
+import { useGroupingMappingApiConfig } from "./context/GroupingApiConfigContext";
 
 export type CustomCalculationType =
   CreateTypeFromInterface<CustomCalculation>;
@@ -51,8 +52,8 @@ const CustomCalculationTable = ({
   refreshCustomCalculations,
   selectedCustomCalculation,
 }: CustomCalculationTableProps) => {
-  const apiContext = useContext(ApiContext);
-  const mappingClient = useContext(MappingClientContext);
+  const apiContext = useGroupingMappingApiConfig();
+  const mappingClient = useMappingClient();
   const [
     showCustomCalculationDeleteModal,
     setShowCustomCalculationDeleteModal,
@@ -152,8 +153,9 @@ const CustomCalculationTable = ({
         show={showCustomCalculationDeleteModal}
         setShow={setShowCustomCalculationDeleteModal}
         onDelete={async () => {
+          const accessToken = await apiContext.getAccessToken();
           await mappingClient.deleteCustomCalculation(
-            apiContext.accessToken,
+            accessToken,
             iModelId,
             mappingId,
             groupId,

packages/itwin/grouping-mapping-widget/src/widget/components/GroupAction.tsx

@@ -12,23 +12,24 @@ import {
 } from "@itwin/presentation-frontend";
 import { useActiveIModelConnection } from "@itwin/appui-react";
 import { Button, Fieldset, LabeledInput, LabeledTextarea, RadioTile, RadioTileGroup, Small, Text, toaster } from "@itwin/itwinui-react";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { fetchIdsFromQuery, handleError, handleInputChange, LoadingSpinner, WidgetHeader } from "./utils";
 import type { GroupType } from "./Grouping";
 import "./GroupAction.scss";
 import ActionPanel from "./ActionPanel";
 import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
 import type { PropertyRecord } from "@itwin/appui-abstract";
 import { GroupQueryBuilderContainer } from "./GroupQueryBuilderContainer";
-import { GroupQueryBuilderContext } from "./GroupQueryBuilderContext";
 import { QueryBuilder } from "./QueryBuilder";
 import {
   transparentOverriddenElements,
   visualizeElementsById,
   zoomToElements,
 } from "./viewerUtils";
 import { SvgCursor, SvgSearch } from "@itwin/itwinui-icons-react";
-import { ApiContext, MappingClientContext } from "./GroupingMapping";
+import { GroupQueryBuilderContext } from "./context/GroupQueryBuilderContext";
+import { useGroupingMappingApiConfig } from "./context/GroupingApiConfigContext";
+import { useMappingClient } from "./context/MappingClientContext";
 
 interface GroupActionProps {
   iModelId: string;
@@ -46,8 +47,8 @@ const GroupAction = ({
   resetView,
 }: GroupActionProps) => {
   const iModelConnection = useActiveIModelConnection() as IModelConnection;
-  const apiContext = useContext(ApiContext);
-  const mappingClient = useContext(MappingClientContext);
+  const apiContext = useGroupingMappingApiConfig();
+  const mappingClient = useMappingClient();
   const [details, setDetails] = useState({
     groupName: group?.groupName ?? "",
     description: group?.description ?? "",
@@ -177,15 +178,17 @@ const GroupAction = ({
       setIsLoading(true);
       const currentQuery = query || simpleQuery;
 
+      const accessToken = await apiContext.getAccessToken();
+
       group
         ? await mappingClient.updateGroup(
-          apiContext.accessToken,
+          accessToken,
           iModelId,
           mappingId,
           group.id ?? "",
           { ...details, query: currentQuery },
         )
-        : await mappingClient.createGroup(apiContext.accessToken, iModelId, mappingId, {
+        : await mappingClient.createGroup(accessToken, iModelId, mappingId, {
           ...details,
           query: currentQuery,
         });
@@ -209,7 +212,7 @@ const GroupAction = ({
     showValidationMessage,
     simpleQuery,
     validator,
-    apiContext.accessToken,
+    apiContext,
     mappingClient,
   ]);