@itwin/reports-config-widget-react 0.2.0 → 0.3.0

package/src/widget/components/ReportsRouter.tsx

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+import { ReportAction } from "./ReportAction";
+import { ReportMappings } from "./ReportMappings";
+import { Reports } from "./Reports";
+import type { Route } from "./ReportsContainer";
+import { RouteStep } from "./ReportsContainer";
+
+export const ReportsRouter = ({
+  currentRoute,
+  navigateTo,
+  goBack,
+}: {
+  currentRoute: Route;
+  navigateTo: (toRoute: (prev: Route | undefined) => Route) => void;
+  goBack: () => void;
+}) => {
+  const { report } = currentRoute.reportsRoutingFields;
+  const iModelId = useActiveIModelConnection()?.iModelId ?? "";
+  switch (currentRoute.step) {
+    case RouteStep.ReportsList:
+      return (
+        <Reports
+          onClickAddReport={() =>
+            navigateTo(() => ({
+              step: RouteStep.ReportAction,
+              title: ReportsConfigWidget.localization.getLocalizedString(
+                "ReportsConfigWidget:ITwinReports"
+              ),
+              reportsRoutingFields: {},
+            }))
+          }
+          onClickReportTitle={(r) => {
+            navigateTo(() => ({
+              step: RouteStep.ReportMappings,
+              reportsRoutingFields: { report: r },
+              title: r.displayName,
+            }));
+          }}
+          onClickReportModify={(r) => {
+            navigateTo(() => ({
+              step: RouteStep.ReportAction,
+              reportsRoutingFields: { report: r },
+              title: r.displayName,
+            }));
+          }}
+        />
+      );
+
+    case RouteStep.ReportAction:
+      return <ReportAction report={report} onClickCancel={goBack} onSaveSuccess={goBack} />;
+    case RouteStep.ReportMappings:
+      if (!report) return null;
+      return <ReportMappings report={report} onClickClose={goBack} defaultIModelId={iModelId} />;
+    default:
+      return null;
+  }
+};

package/src/widget/components/SearchBar.scss

@@ -30,4 +30,4 @@
 
 .rcw-search-button {
   float: right;
-}
+}

package/src/widget/components/SearchBar.tsx

@@ -52,10 +52,10 @@ export const SearchBar = ({
         value={searchValue}
         onChange={(e) => setSearchValue(e.target.value)}
         disabled={disabled}
-      />{" "}
+      />
     </div>
   ) : (
-    <IconButton styleType="borderless" onClick={() => setSearchBarOpened(true)}>
+    <IconButton styleType="borderless" data-testid="rcw-search-button" onClick={() => setSearchBarOpened(true)}>
       <SvgSearch />
     </IconButton>
   );

package/src/widget/components/SelectIModel.tsx

@@ -2,37 +2,29 @@
 * 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 type { AccessToken } from "@itwin/core-bentley";
 import { AccessTokenAdapter } from "@itwin/imodels-access-frontend";
 import type {
   GetIModelListParams,
-  IModelsClientOptions,
+  IModelsClient,
   MinimalIModel,
 } from "@itwin/imodels-client-management";
 import {
-  Constants,
-  IModelsClient,
   toArray,
 } from "@itwin/imodels-client-management";
 import { ComboBox, Label } from "@itwin/itwinui-react";
 import React, { useEffect, useMemo, useState } from "react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
-import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
-import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
 import "./SelectIModel.scss";
-import { generateUrl } from "./utils";
 
 const fetchIModels = async (
   setiModels: React.Dispatch<React.SetStateAction<MinimalIModel[]>>,
   iTwinId: string,
-  apiContext: ReportsApiConfig
+  iModelsClient: IModelsClient,
+  getAccessToken: () => Promise<AccessToken>
 ) => {
-  const iModelClientOptions: IModelsClientOptions = {
-    api: { baseUrl: generateUrl(Constants.api.baseUrl, apiContext.baseUrl) },
-  };
-
-  const iModelsClient: IModelsClient = new IModelsClient(iModelClientOptions);
-  const accessToken = await apiContext.getAccessToken();
+  const accessToken = await getAccessToken();
   const authorization = AccessTokenAdapter.toAuthorizationCallback(accessToken);
   const getiModelListParams: GetIModelListParams = {
     urlParams: { projectId: iTwinId },
@@ -45,30 +37,20 @@ const fetchIModels = async (
 };
 
 interface SelectedIModelProps {
-  selectedIModelId: string;
-  setSelectedIModelId: React.Dispatch<React.SetStateAction<string>>;
+  selectedIModelId?: string;
+  setSelectedIModelId: (iModelId: string) => void;
 }
 
 export const SelectIModel = ({
   selectedIModelId,
   setSelectedIModelId,
 }: SelectedIModelProps) => {
-  const apiConfig = useReportsApiConfig();
-  const iModelId = useActiveIModelConnection()?.iModelId ?? "";
-  const iTwinId = useActiveIModelConnection()?.iTwinId ?? "";
+  const { iTwinId, getAccessToken, iModelsClient } = useReportsConfigApi();
   const [iModels, setIModels] = useState<MinimalIModel[]>([]);
 
   useEffect(() => {
-    if (iModelId && iTwinId) {
-      void fetchIModels(setIModels, iTwinId, apiConfig);
-    }
-  }, [apiConfig, setIModels, iModelId, iTwinId]);
-
-  useEffect(() => {
-    if (iModelId && iModels.length > 0) {
-      setSelectedIModelId(iModelId);
-    }
-  }, [iModelId, iModels, setSelectedIModelId]);
+    void fetchIModels(setIModels, iTwinId, iModelsClient, getAccessToken);
+  }, [getAccessToken, iModelsClient, iTwinId, setIModels]);
 
   const iModelOptions = useMemo(() => {
     return iModels.map((iModel) => ({

package/src/widget/components/utils.tsx

@@ -16,7 +16,7 @@ import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 export interface WidgetHeaderProps {
   title: string;
   disabled?: boolean;
-  returnFn?: () => Promise<void>;
+  returnFn?: () => void;
 }
 
 export const WidgetHeader = ({

package/src/widget/context/{ReportsApiConfigContext.tsx → BulkExtractorContext.tsx}

@@ -5,22 +5,21 @@
 import type { AccessToken } from "@itwin/core-bentley";
 import * as React from "react";
 import { createContext } from "react";
+import type { BulkExtractor } from "../components/BulkExtractor";
 
-export interface ReportsApiConfig {
-  getAccessToken: () => Promise<AccessToken>;
-  baseUrl: string;
+export type GetAccessTokenFn = () => Promise<AccessToken>;
+
+export interface BulkExtractorContextProps {
+  bulkExtractor?: BulkExtractor;
 }
 
-export const ReportsApiConfigContext = createContext<ReportsApiConfig>({
-  getAccessToken: async () => "",
-  baseUrl: "",
-});
+export const BulkExtractorContext = createContext<BulkExtractorContextProps>({});
 
-export const useReportsApiConfig = () => {
-  const context = React.useContext(ReportsApiConfigContext);
+export const useBulkExtractor = () => {
+  const context = React.useContext(BulkExtractorContext);
   if (!context) {
     throw new Error(
-      "useApiConfig should be used within a ReportsApiConfigContext provider"
+      "useBulkExtractor should be used within a BulkExtractorContext provider"
     );
   }
   return context;

package/src/widget/context/ReportsConfigApiContext.tsx

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { MappingsClient, ReportsClient } from "@itwin/insights-client";
+import * as React from "react";
+import { createContext } from "react";
+
+export type GetAccessTokenFn = () => Promise<AccessToken>;
+
+export interface ReportsConfigApiProps {
+  getAccessToken: GetAccessTokenFn;
+  iTwinId: string;
+  baseUrl: string;
+  reportsClient: ReportsClient;
+  mappingsClient: MappingsClient;
+  iModelsClient: IModelsClient;
+}
+
+export const ReportsConfigApiContext = createContext<ReportsConfigApiProps>({
+  getAccessToken: async () => "",
+  iTwinId: "",
+  baseUrl: "",
+  reportsClient: new ReportsClient(),
+  mappingsClient: new MappingsClient(),
+  iModelsClient: new IModelsClient(),
+});
+
+export const useReportsConfigApi = () => {
+  const context = React.useContext(ReportsConfigApiContext);
+  if (!context) {
+    throw new Error(
+      "useReportsConfigApi should be used within a ReportsConfigApiContext provider"
+    );
+  }
+  return context;
+};