@itwin/reports-config-widget-react 0.5.0 → 0.7.0

package/src/widget/components/ReportsConfigContext.tsx

@@ -1,18 +1,16 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import { IModelApp } from "@itwin/core-frontend";
 import type { IModelsClientOptions } from "@itwin/imodels-client-management";
 import { IModelsClient } from "@itwin/imodels-client-management";
-import { ExtractionClient, MappingsClient, REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
+import type { IExtractionClient, IMappingsClient, IReportsClient } from "@itwin/insights-client";
+import { ExtractionClient, GROUPING_AND_MAPPING_BASE_PATH, MappingsClient, REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
 import { toaster } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { BulkExtractorContext } from "../context/BulkExtractorContext";
-import type {
-  GetAccessTokenFn,
-  ReportsConfigApiProps,
-} from "../context/ReportsConfigApiContext";
+import type { GetAccessTokenFn, ReportsConfigApiProps } from "../context/ReportsConfigApiContext";
 import { ReportsConfigApiContext } from "../context/ReportsConfigApiContext";
 import { REPORTS_CONFIG_BASE_URL } from "../ReportsConfigUiProvider";
 import { BulkExtractor } from "./BulkExtractor";
@@ -20,47 +18,75 @@ import { IMODELS_BASE_URL } from "./Constants";
 import { FailedExtractionToast, SuccessfulExtractionToast } from "./ExtractionToast";
 import { generateUrl } from "./utils";
 
+/**
+ * Props for the {@link ReportsConfigContext} component.
+ * @public
+ */
 export interface ReportsConfigContextProps {
+  /**
+   * A callback function that returns an access token for authenticating API requests.
+   * If not specified, it defaults to the authorizationClient of the IModelApp.
+   */
   getAccessToken?: GetAccessTokenFn;
+  /**
+   * The base URL for the API requests. Defaults to https://api.bentley.com.
+   */
   baseUrl?: string;
   iTwinId: string;
+  /**
+   * The bulk extractor instance to use for extracting data. Internal use only.
+   */
   bulkExtractor?: BulkExtractor;
-  reportsClient?: ReportsClient;
-  mappingsClient?: MappingsClient;
-  extractionClient?: ExtractionClient;
+  /**
+   * A custom implementation of ReportsClient. If provided, baseUrl is ignored.
+   */
+  reportsClient?: IReportsClient;
+  /**
+   * A custom implementation of MappingsClient. If provided, baseUrl is ignored.
+   */
+  mappingsClient?: IMappingsClient;
+  /**
+   * A custom implementation of ExtractionClient. If provided, baseUrl is ignored.
+   */
+  extractionClient?: IExtractionClient;
+  /**
+   * A custom implementation of IModelsClient. If provided, baseUrl is ignored.
+   */
   iModelsClient?: IModelsClient;
   children?: React.ReactNode;
 }
 
-const authorizationClientGetAccessToken = async () =>
-  (await IModelApp.authorizationClient?.getAccessToken()) ?? "";
+const authorizationClientGetAccessToken = async () => (await IModelApp.authorizationClient?.getAccessToken()) ?? "";
 
+/**
+ * Reports Config context providers required for all components.
+ * @public
+ */
 export const ReportsConfigContext = (props: ReportsConfigContextProps) => {
-  const reportsBaseUrl = useCallback(() => generateUrl(
-    REPORTING_BASE_PATH,
-    props.baseUrl || REPORTS_CONFIG_BASE_URL
-  ), [props.baseUrl]);
-  const iModelClientOptions: IModelsClientOptions = useMemo(() => ({
-    api: { baseUrl: generateUrl(IMODELS_BASE_URL, props.baseUrl ?? REPORTS_CONFIG_BASE_URL) },
-  }), [props.baseUrl]);
-  const [extractionClient, setExtractionClient] = useState<ExtractionClient>(
-    props.extractionClient ?? new ExtractionClient(reportsBaseUrl())
+  const reportsBaseUrl = useCallback(() => generateUrl(REPORTING_BASE_PATH, props.baseUrl || REPORTS_CONFIG_BASE_URL), [props.baseUrl]);
+  const groupingMappingBaseUrl = useCallback(() => generateUrl(GROUPING_AND_MAPPING_BASE_PATH, props.baseUrl || REPORTS_CONFIG_BASE_URL), [props.baseUrl]);
+  const iModelClientOptions: IModelsClientOptions = useMemo(
+    () => ({
+      api: { baseUrl: generateUrl(IMODELS_BASE_URL, props.baseUrl ?? REPORTS_CONFIG_BASE_URL) },
+    }),
+    [props.baseUrl],
   );
+  const [extractionClient, setExtractionClient] = useState<IExtractionClient>(props.extractionClient ?? new ExtractionClient(reportsBaseUrl()));
 
   const [apiConfig, setApiConfig] = useState<ReportsConfigApiProps>({
     getAccessToken: props.getAccessToken ?? authorizationClientGetAccessToken,
     baseUrl: reportsBaseUrl(),
     iTwinId: props.iTwinId,
     reportsClient: props.reportsClient ?? new ReportsClient(reportsBaseUrl()),
-    mappingsClient: props.mappingsClient ?? new MappingsClient(reportsBaseUrl()),
+    mappingsClient: props.mappingsClient ?? new MappingsClient(undefined, groupingMappingBaseUrl()),
     iModelsClient: props.iModelsClient ?? new IModelsClient(iModelClientOptions),
   });
 
   useEffect(() => {
     if (!props.extractionClient) {
-      setExtractionClient(props.extractionClient ?? new ExtractionClient(reportsBaseUrl()));
+      setExtractionClient(props.extractionClient ?? new ExtractionClient(undefined, groupingMappingBaseUrl()));
     }
-  }, [props.extractionClient, reportsBaseUrl]);
+  }, [groupingMappingBaseUrl, props.extractionClient]);
 
   const successfulExtractionToast = (iModelName: string, odataFeedUrl: string) => {
     toaster.positive(<SuccessfulExtractionToast iModelName={iModelName} odataFeedUrl={odataFeedUrl} />);
@@ -71,8 +97,12 @@ export const ReportsConfigContext = (props: ReportsConfigContextProps) => {
   };
 
   const bulkExtractor = useMemo(
-    () => ({ bulkExtractor: props.bulkExtractor ?? new BulkExtractor(apiConfig.reportsClient, extractionClient, apiConfig.getAccessToken, successfulExtractionToast, failedExtractionToast) }),
-    [apiConfig.getAccessToken, apiConfig.reportsClient, extractionClient, props.bulkExtractor]
+    () => ({
+      bulkExtractor:
+        props.bulkExtractor ??
+        new BulkExtractor(apiConfig.reportsClient, extractionClient, apiConfig.getAccessToken, successfulExtractionToast, failedExtractionToast),
+    }),
+    [apiConfig.getAccessToken, apiConfig.reportsClient, extractionClient, props.bulkExtractor],
   );
 
   useEffect(() => {
@@ -81,16 +111,24 @@ export const ReportsConfigContext = (props: ReportsConfigContextProps) => {
       baseUrl: props.baseUrl || REPORTS_CONFIG_BASE_URL,
       iTwinId: props.iTwinId,
       reportsClient: props.reportsClient ?? new ReportsClient(reportsBaseUrl()),
-      mappingsClient: props.mappingsClient ?? new MappingsClient(reportsBaseUrl()),
+      mappingsClient: props.mappingsClient ?? new MappingsClient(undefined, groupingMappingBaseUrl()),
       iModelsClient: props.iModelsClient ?? new IModelsClient(iModelClientOptions),
     }));
-  }, [props.getAccessToken, props.baseUrl, props.iTwinId, props.reportsClient, props.mappingsClient, props.iModelsClient, reportsBaseUrl, iModelClientOptions]);
+  }, [
+    props.getAccessToken,
+    props.baseUrl,
+    props.iTwinId,
+    props.reportsClient,
+    props.mappingsClient,
+    props.iModelsClient,
+    reportsBaseUrl,
+    iModelClientOptions,
+    groupingMappingBaseUrl,
+  ]);
 
   return (
     <ReportsConfigApiContext.Provider value={apiConfig}>
-      <BulkExtractorContext.Provider value={bulkExtractor}>
-        {props.children}
-      </BulkExtractorContext.Provider>
+      <BulkExtractorContext.Provider value={bulkExtractor}>{props.children}</BulkExtractorContext.Provider>
     </ReportsConfigApiContext.Provider>
   );
 };

package/src/widget/components/ReportsContainer.scss

@@ -13,4 +13,4 @@
   box-sizing: border-box;
   height: 100%;
   overflow: auto;
-}
+}

package/src/widget/components/ReportsContainer.tsx

@@ -1,25 +1,22 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import type { AccessToken } from "@itwin/core-bentley";
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import React, { useCallback, useState } from "react";
 import "./ReportsContainer.scss";
 import type { Report } from "@itwin/insights-client";
 import { useActiveIModelConnection } from "@itwin/appui-react";
 import { ReportsHeader } from "./ReportsHeader";
 import { ReportsRouter } from "./ReportsRouter";
-import { ReportsConfigContext } from "./ReportsConfigContext";
+import type { ReportsConfigContextProps } from "./ReportsConfigContext";
+import { ReportsConfigContext } from "./ReportsConfigContext"
 
-interface ReportsContainerProps {
-  getAccessToken?: () => Promise<AccessToken>;
-  baseUrl: string;
-}
+export type ReportsContainerProps = Omit<ReportsConfigContextProps, "iTwinId" | "children">;
 
 export enum RouteStep {
   ReportsList,
   ReportAction,
-  ReportMappings
+  ReportMappings,
 }
 
 export interface ReportsRouteFields {
@@ -32,14 +29,8 @@ export interface Route {
   reportsRoutingFields: ReportsRouteFields;
 }
 
-const ReportsContainer = ({
-  getAccessToken,
-  baseUrl,
-}: ReportsContainerProps) => {
-
-  const [routingHistory, setRoutingHistory] = useState<Route[]>([
-    { step: RouteStep.ReportsList, title: "iTwin Reports", reportsRoutingFields: {} },
-  ]);
+const ReportsContainer = (props: ReportsContainerProps) => {
+  const [routingHistory, setRoutingHistory] = useState<Route[]>([{ step: RouteStep.ReportsList, title: "iTwin Reports", reportsRoutingFields: {} }]);
   const currentRoute = routingHistory[routingHistory.length - 1];
   const iTwinId = useActiveIModelConnection()?.iTwinId ?? "";
   const navigateTo = useCallback((toRoute: (prev: Route | undefined) => Route) => {
@@ -53,17 +44,10 @@ const ReportsContainer = ({
   }, [routingHistory]);
 
   return (
-    <ReportsConfigContext getAccessToken={getAccessToken} baseUrl={baseUrl} iTwinId={iTwinId}>
+    <ReportsConfigContext {...props} iTwinId={iTwinId}>
       <div className="rcw-reports-container">
-        <ReportsHeader
-          goBack={goBack}
-          currentRoute={currentRoute}
-        />
-        <ReportsRouter
-          currentRoute={currentRoute}
-          navigateTo={navigateTo}
-          goBack={goBack}
-        />
+        <ReportsHeader goBack={goBack} currentRoute={currentRoute} />
+        <ReportsRouter currentRoute={currentRoute} navigateTo={navigateTo} goBack={goBack} />
       </div>
     </ReportsConfigContext>
   );

package/src/widget/components/ReportsHeader.tsx

@@ -1,27 +1,14 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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 type { Route } from "./ReportsContainer";
 import { RouteStep } from "./ReportsContainer";
 import { WidgetHeader } from "./utils";
 
-export const ReportsHeader = ({
-  goBack,
-  currentRoute,
-}: {
-  goBack: () => void;
-  currentRoute: Route;
-}) => {
-  const shouldDisableReturnFn =
-    currentRoute.step === RouteStep.ReportsList ||
-    currentRoute.step === RouteStep.ReportAction;
+export const ReportsHeader = ({ goBack, currentRoute }: { goBack: () => void; currentRoute: Route }) => {
+  const shouldDisableReturnFn = currentRoute.step === RouteStep.ReportsList || currentRoute.step === RouteStep.ReportAction;
 
-  return (
-    <WidgetHeader
-      returnFn={shouldDisableReturnFn ? undefined : goBack}
-      title={currentRoute.title}
-    />
-  );
+  return <WidgetHeader returnFn={shouldDisableReturnFn ? undefined : goBack} title={currentRoute.title} />;
 };

package/src/widget/components/ReportsRouter.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import { useActiveIModelConnection } from "@itwin/appui-react";
 import React from "react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
@@ -29,9 +29,7 @@ export const ReportsRouter = ({
           onClickAddReport={() =>
             navigateTo(() => ({
               step: RouteStep.ReportAction,
-              title: ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:ITwinReports"
-              ),
+              title: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ITwinReports"),
               reportsRoutingFields: {},
             }))
           }

package/src/widget/components/SearchBar.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import { SvgCloseSmall, SvgSearch } from "@itwin/itwinui-icons-react";
 import { IconButton, LabeledInput } from "@itwin/itwinui-react";
 import React, { useState } from "react";
@@ -14,16 +14,13 @@ interface SearchBarProps {
   disabled?: boolean;
 }
 
-export const SearchBar = ({
-  searchValue,
-  setSearchValue,
-  disabled,
-}: SearchBarProps) => {
+export const SearchBar = ({ searchValue, setSearchValue, disabled }: SearchBarProps) => {
   const [searchBarOpen, setSearchBarOpened] = useState<boolean>(false);
   const [searchBarClosing, setSearchBarClosing] = useState<boolean>(false);
 
   return searchBarOpen || searchValue ? (
-    <div className="rcw-search-button"
+    <div
+      className="rcw-search-button"
       style={{
         animation: searchBarClosing ? "rcw-shrink .5s" : "rcw-expand .5s",
       }}
@@ -37,9 +34,7 @@ export const SearchBar = ({
     >
       <LabeledInput
         aria-label="search-textbox"
-        placeholder={ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:Search"
-        )}
+        placeholder={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Search")}
         svgIcon={
           <IconButton
             onClick={() => setSearchBarClosing(true)}
@@ -60,7 +55,8 @@ export const SearchBar = ({
       styleType="borderless"
       data-testid="rcw-search-button"
       title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:SearchReport")}
-      onClick={() => setSearchBarOpened(true)}>
+      onClick={() => setSearchBarOpened(true)}
+    >
       <SvgSearch />
     </IconButton>
   );

package/src/widget/components/SelectIModel.scss

@@ -12,4 +12,4 @@
     gap: var(--iui-size-xs);
     width: 100%;
   }
-}
+}

package/src/widget/components/SelectIModel.tsx

@@ -1,17 +1,11 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import type { AccessToken } from "@itwin/core-bentley";
 import { AccessTokenAdapter } from "@itwin/imodels-access-frontend";
-import type {
-  GetIModelListParams,
-  IModelsClient,
-  MinimalIModel,
-} from "@itwin/imodels-client-management";
-import {
-  toArray,
-} from "@itwin/imodels-client-management";
+import type { GetIModelListParams, IModelsClient, MinimalIModel } from "@itwin/imodels-client-management";
+import { toArray } from "@itwin/imodels-client-management";
 import { ComboBox, Label } from "@itwin/itwinui-react";
 import React, { useEffect, useMemo, useState } from "react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
@@ -22,7 +16,7 @@ const fetchIModels = async (
   setiModels: React.Dispatch<React.SetStateAction<MinimalIModel[]>>,
   iTwinId: string,
   iModelsClient: IModelsClient,
-  getAccessToken: () => Promise<AccessToken>
+  getAccessToken: () => Promise<AccessToken>,
 ) => {
   const accessToken = await getAccessToken();
   const authorization = AccessTokenAdapter.toAuthorizationCallback(accessToken);
@@ -30,9 +24,7 @@ const fetchIModels = async (
     urlParams: { iTwinId },
     authorization,
   };
-  const iModels = await toArray(
-    iModelsClient.iModels.getMinimalList(getiModelListParams)
-  );
+  const iModels = await toArray(iModelsClient.iModels.getMinimalList(getiModelListParams));
   setiModels(iModels);
 };
 
@@ -41,10 +33,7 @@ interface SelectedIModelProps {
   setSelectedIModelId: (iModelId: string) => void;
 }
 
-export const SelectIModel = ({
-  selectedIModelId,
-  setSelectedIModelId,
-}: SelectedIModelProps) => {
+export const SelectIModel = ({ selectedIModelId, setSelectedIModelId }: SelectedIModelProps) => {
   const { iTwinId, getAccessToken, iModelsClient } = useReportsConfigApi();
   const [iModels, setIModels] = useState<MinimalIModel[]>([]);
 
@@ -61,11 +50,7 @@ export const SelectIModel = ({
 
   return (
     <div className="rcw-select-imodel">
-      <Label htmlFor="combo-input">
-        {ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:SelectIModel"
-        )}
-      </Label>
+      <Label htmlFor="combo-input">{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:SelectIModel")}</Label>
       <div className="rcw-combobox">
         <ComboBox<string>
           options={iModelOptions}

package/src/widget/components/utils.scss

@@ -44,4 +44,4 @@
 .rcw-skeleton-block {
   height: calc(var(--iui-size-s) * 3);
   width: 100%;
-}
+}

package/src/widget/components/utils.tsx

@@ -1,14 +1,9 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import { SvgChevronLeft } from "@itwin/itwinui-icons-react";
-import {
-  Icon,
-  ProgressRadial,
-  Text,
-  toaster,
-} from "@itwin/itwinui-react";
+import { Icon, ProgressRadial, Text, toaster } from "@itwin/itwinui-react";
 import "./utils.scss";
 import React from "react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
@@ -19,11 +14,7 @@ export interface WidgetHeaderProps {
   returnFn?: () => void;
 }
 
-export const WidgetHeader = ({
-  title,
-  disabled = false,
-  returnFn,
-}: WidgetHeaderProps) => {
+export const WidgetHeader = ({ title, disabled = false, returnFn }: WidgetHeaderProps) => {
   return (
     <div className="rcw-widget-header-container">
       {returnFn && (
@@ -44,76 +35,46 @@ export const WidgetHeader = ({
 };
 
 export const handleError = (errorStatus: number) => {
-  let errorMessage = `${ReportsConfigWidget.localization.getLocalizedString(
-    "ReportsConfigWidget:ErrorMessages.Error"
-  )} `;
+  let errorMessage = `${ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.Error")} `;
   switch (errorStatus) {
     case 401:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.401"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.401");
       break;
     case 403:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.403"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.403");
       break;
     case 404:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.404"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.404");
       break;
     case 409:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.409"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.409");
       break;
     case 422:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.422"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.422");
       break;
     case 429:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.429"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.429");
       break;
     case 500:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.500"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.500");
       break;
     case 502:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.502"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.502");
       break;
     case 503:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.503"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.503");
       break;
     default:
-      errorMessage += ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:ErrorMessages.SomethingWentWrong"
-      );
+      errorMessage += ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ErrorMessages.SomethingWentWrong");
   }
   toaster.negative(errorMessage);
 };
 
 export const LoadingOverlay = () => (
   <div className="rcw-center-overlay">
-    <Text>
-      {ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:Loading"
-      )}
-    </Text>
+    <Text>{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Loading")}</Text>
     <ProgressRadial indeterminate />
-    <Text>
-      {ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:PleaseWait"
-      )}
-    </Text>
+    <Text>{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:PleaseWait")}</Text>
   </div>
 );
 interface EmptyMessageProps {
@@ -123,11 +84,7 @@ export const EmptyMessage = ({ children }: EmptyMessageProps) => {
   return <div className="rcw-center-overlay">{children}</div>;
 };
 
-export const handleInputChange = <T,>(
-  e: React.ChangeEvent<HTMLInputElement>,
-  values: T,
-  setValues: React.Dispatch<React.SetStateAction<T>>
-) => {
+export const handleInputChange = <T,>(e: React.ChangeEvent<HTMLInputElement>, values: T, setValues: React.Dispatch<React.SetStateAction<T>>) => {
   const { name, value } = e.target;
 
   setValues({
@@ -138,18 +95,13 @@ export const handleInputChange = <T,>(
 
 export const LoadingSpinner = () => {
   return (
-    <div
-      className="rcw-loading-spinner"
-      data-testid="rcw-action-loading-spinner"
-    >
+    <div className="rcw-loading-spinner" data-testid="rcw-action-loading-spinner">
       <ProgressRadial size="small" indeterminate />
     </div>
   );
 };
 
-export const SkeletonBlock = () => (
-  <div className="rcw-skeleton-block iui-skeleton" />
-);
+export const SkeletonBlock = () => <div className="rcw-skeleton-block iui-skeleton" />;
 
 export const generateUrl = (baseUrl: string, newBaseUrl: string) => {
   return baseUrl.replace("https://api.bentley.com", newBaseUrl);

package/src/widget/context/BulkExtractorContext.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import type { AccessToken } from "@itwin/core-bentley";
 import * as React from "react";
 import { createContext } from "react";
@@ -18,9 +18,7 @@ export const BulkExtractorContext = createContext<BulkExtractorContextProps>({})
 export const useBulkExtractor = () => {
   const context = React.useContext(BulkExtractorContext);
   if (!context) {
-    throw new Error(
-      "useBulkExtractor should be used within a BulkExtractorContext provider"
-    );
+    throw new Error("useBulkExtractor should be used within a BulkExtractorContext provider");
   }
   return context;
 };

package/src/widget/context/ReportsConfigApiContext.tsx

@@ -1,9 +1,10 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import type { AccessToken } from "@itwin/core-bentley";
 import { IModelsClient } from "@itwin/imodels-client-management";
+import type { IMappingsClient, IReportsClient } from "@itwin/insights-client";
 import { MappingsClient, ReportsClient } from "@itwin/insights-client";
 import * as React from "react";
 import { createContext } from "react";
@@ -14,8 +15,8 @@ export interface ReportsConfigApiProps {
   getAccessToken: GetAccessTokenFn;
   iTwinId: string;
   baseUrl: string;
-  reportsClient: ReportsClient;
-  mappingsClient: MappingsClient;
+  reportsClient: IReportsClient;
+  mappingsClient: IMappingsClient;
   iModelsClient: IModelsClient;
 }
 
@@ -31,9 +32,7 @@ export const ReportsConfigApiContext = createContext<ReportsConfigApiProps>({
 export const useReportsConfigApi = () => {
   const context = React.useContext(ReportsConfigApiContext);
   if (!context) {
-    throw new Error(
-      "useReportsConfigApi should be used within a ReportsConfigApiContext provider"
-    );
+    throw new Error("useReportsConfigApi should be used within a ReportsConfigApiContext provider");
   }
   return context;
 };