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

package/src/widget/components/Reports.tsx

@@ -1,65 +1,41 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import {
-  SvgAdd,
-  SvgPlay,
-} from "@itwin/itwinui-icons-react";
-import {
-  Button,
-  IconButton,
-  Surface,
-  toaster,
-} from "@itwin/itwinui-react";
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { SvgAdd, SvgPlay, SvgRefresh } from "@itwin/itwinui-icons-react";
+import { Button, IconButton, Surface } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { CreateTypeFromInterface } from "./utils";
 import {
   EmptyMessage,
-  generateUrl,
   handleError,
   LoadingOverlay,
-  WidgetHeader,
 } from "./utils";
 import "./Reports.scss";
 import DeleteModal from "./DeleteModal";
-import type { Report } from "@itwin/insights-client";
-import { REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
-import ReportAction from "./ReportAction";
-import { ReportMappings } from "./ReportMappings";
+import type { Report, ReportsClient } from "@itwin/insights-client";
 import { ReportHorizontalTile } from "./ReportHorizontalTile";
 import { SearchBar } from "./SearchBar";
-import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
-import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
-import { useActiveIModelConnection } from "@itwin/appui-react";
-import BulkExtractor from "./BulkExtractor";
+import type { AccessToken } from "@itwin/core-bentley";
 import { BeEvent } from "@itwin/core-bentley";
-import { FailedExtractionToast, SuccessfulExtractionToast } from "./ExtractionToast";
+import { useBulkExtractor } from "../context/BulkExtractorContext";
 
 export type ReportType = CreateTypeFromInterface<Report>;
 
-enum ReportsView {
-  REPORTS = "reports",
-  REPORTSMAPPING = "reportsmapping",
-  ADDING = "adding",
-  MODIFYING = "modifying",
-}
-
 const fetchReports = async (
-  setReports: React.Dispatch<React.SetStateAction<Report[]>>,
+  setReports: (reports: Report[]) => void,
   iTwinId: string | undefined,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  apiContext: ReportsApiConfig
+  setIsLoading: (isLoading: boolean) => void,
+  reportsClient: ReportsClient,
+  getAccessToken: () => Promise<AccessToken>
 ) => {
   try {
     if (!iTwinId) return;
     setIsLoading(true);
-    const reportsClientApi = new ReportsClient(
-      generateUrl(REPORTING_BASE_PATH, apiContext.baseUrl)
-    );
-    const accessToken = await apiContext.getAccessToken();
-    const reports = await reportsClientApi.getReports(accessToken, iTwinId);
+    const accessToken = await getAccessToken();
+    const reports = await reportsClient.getReports(accessToken, iTwinId);
     setReports(reports ?? []);
   } catch (error: any) {
     handleError(error.status);
@@ -68,50 +44,50 @@ const fetchReports = async (
   }
 };
 
-export const Reports = () => {
-  const successfulExtractionToast = (iModelName: string, odataFeedUrl: string) => {
-    toaster.positive(<SuccessfulExtractionToast iModelName={iModelName} odataFeedUrl={odataFeedUrl} />);
-  };
-
-  const failedExtractionToast = (iModelName: string) => {
-    toaster.negative(<FailedExtractionToast iModelName={iModelName} />);
-  };
+export interface ReportsProps {
+  onClickAddReport?: () => void;
+  onClickReportTitle?: (report: Report) => void;
+  onClickReportModify?: (report: Report) => void;
+}
 
-  const iTwinId = useActiveIModelConnection()?.iTwinId ?? "";
-  const apiConfig = useReportsApiConfig();
-  const [selectedReportIds, setSelectedReportIds] = useState<string[]>([]);
-  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
-  const [reportsView, setReportsView] = useState<ReportsView>(
-    ReportsView.REPORTS
-  );
-  const [selectedReport, setSelectedReport] = useState<Report | undefined>(
+export const Reports = ({
+  onClickAddReport,
+  onClickReportModify,
+  onClickReportTitle,
+}: ReportsProps) => {
+  const { iTwinId, getAccessToken, reportsClient } = useReportsConfigApi();
+  const { bulkExtractor } = useBulkExtractor();
+  const [showDeleteModal, setShowDeleteModal] = useState<Report | undefined>(
     undefined
   );
+  const [selectedReportIds, setSelectedReportIds] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [searchValue, setSearchValue] = useState<string>("");
   const [reports, setReports] = useState<Report[]>([]);
-  const bulkExtractor = useMemo(
-    () => new BulkExtractor(apiConfig, successfulExtractionToast, failedExtractionToast),
-    [apiConfig]
-  );
   const jobStartEvent = useMemo(
     () => new BeEvent<(reportId: string) => void>(),
     []
   );
 
   useEffect(() => {
-    void fetchReports(setReports, iTwinId, setIsLoading, apiConfig);
-  }, [apiConfig, iTwinId, setIsLoading]);
+    void fetchReports(
+      setReports,
+      iTwinId,
+      setIsLoading,
+      reportsClient,
+      getAccessToken
+    );
+  }, [getAccessToken, iTwinId, reportsClient, setIsLoading]);
 
   const refresh = useCallback(async () => {
-    setReportsView(ReportsView.REPORTS);
-    setSelectedReport(undefined);
-    await fetchReports(setReports, iTwinId, setIsLoading, apiConfig);
-  }, [apiConfig, iTwinId, setReports]);
-
-  const addReport = () => {
-    setReportsView(ReportsView.ADDING);
-  };
+    await fetchReports(
+      setReports,
+      iTwinId,
+      setIsLoading,
+      reportsClient,
+      getAccessToken
+    );
+  }, [getAccessToken, iTwinId, reportsClient]);
 
   const filteredReports = useMemo(
     () =>
@@ -125,140 +101,120 @@ export const Reports = () => {
   );
 
   const onSelectionChange = (reportId: string, control: boolean) => {
-    if (!control)
-      setSelectedReportIds([]);
+    if (!control) setSelectedReportIds([]);
 
     setSelectedReportIds((sr) =>
       sr.some((r) => reportId === r)
-        ? sr.filter(
-          (r) => reportId !== r
-        )
+        ? sr.filter((r) => reportId !== r)
         : [...sr, reportId]
     );
   };
 
   const updateDatasets = useCallback(async () => {
+    if (!bulkExtractor) return;
     await bulkExtractor.runReportExtractions(selectedReportIds);
     selectedReportIds.map((reportId) => jobStartEvent.raiseEvent(reportId));
     setSelectedReportIds([]);
   }, [selectedReportIds, jobStartEvent, bulkExtractor]);
 
-  switch (reportsView) {
-    case ReportsView.ADDING:
-      return iTwinId ? (
-        <ReportAction iTwinId={iTwinId ?? ""} returnFn={refresh} />
-      ) : null;
-    case ReportsView.MODIFYING:
-      return iTwinId ? (
-        <ReportAction
-          iTwinId={iTwinId}
-          report={selectedReport}
-          returnFn={refresh}
-        />
-      ) : null;
-    case ReportsView.REPORTSMAPPING:
-      return selectedReport ? (
-        <ReportMappings report={selectedReport} bulkExtractor={bulkExtractor} goBack={refresh} />
-      ) : null;
-    default:
-      return (
-        <>
-          <WidgetHeader
+  if (!bulkExtractor) return null;
+
+  return (
+    <>
+      <Surface className="rcw-reports-list-container">
+        <div className="rcw-toolbar">
+          {onClickAddReport && (
+            <Button
+              startIcon={<SvgAdd />}
+              onClick={onClickAddReport}
+              styleType="high-visibility"
+            >
+              {ReportsConfigWidget.localization.getLocalizedString(
+                "ReportsConfigWidget:New"
+              )}
+            </Button>
+          )}
+          <IconButton
             title={ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:ITwinReports"
+              "ReportsConfigWidget:UpdateDatasets"
             )}
-          />
-          <Surface className="rcw-reports-list-container">
-            <div className="rcw-toolbar">
-              <Button
-                startIcon={<SvgAdd />}
-                onClick={() => addReport()}
-                styleType="high-visibility"
-              >
-                {ReportsConfigWidget.localization.getLocalizedString(
-                  "ReportsConfigWidget:New"
-                )}
-              </Button>
-              <IconButton
-                title={ReportsConfigWidget.localization.getLocalizedString(
-                  "ReportsConfigWidget:UpdateDatasets"
-                )}
-                onClick={updateDatasets}
-                disabled={selectedReportIds.length === 0}
-              >
-                <SvgPlay />
-              </IconButton>
-              <div className="rcw-search-bar-container" data-testid="rcw-search-bar">
-                <div className="rcw-search-button">
-                  <SearchBar
-                    searchValue={searchValue}
-                    setSearchValue={setSearchValue}
-                    disabled={isLoading}
-                  />
-                </div>
-              </div>
-            </div>
-            {isLoading ? (
-              <LoadingOverlay />
-            ) : reports.length === 0 ? (
-              <EmptyMessage>
-                <>
+            onClick={updateDatasets}
+            disabled={selectedReportIds.length === 0}
+          >
+            <SvgPlay />
+          </IconButton>
+          <div
+            className="rcw-search-bar-container"
+            data-testid="rcw-search-bar"
+          >
+            <IconButton
+              title={ReportsConfigWidget.localization.getLocalizedString(
+                "ReportsConfigWidget:Refresh"
+              )}
+              onClick={refresh}
+              disabled={isLoading}
+              styleType="borderless"
+            >
+              <SvgRefresh />
+            </IconButton>
+            <SearchBar
+              searchValue={searchValue}
+              setSearchValue={setSearchValue}
+              disabled={isLoading}
+            />
+          </div>
+        </div>
+        {isLoading ? (
+          <LoadingOverlay />
+        ) : reports.length === 0 && onClickAddReport ? (
+          <EmptyMessage>
+            <>
+              {ReportsConfigWidget.localization.getLocalizedString(
+                "ReportsConfigWidget:NoReports"
+              )}
+              <div>
+                <Button onClick={onClickAddReport} styleType="cta">
                   {ReportsConfigWidget.localization.getLocalizedString(
-                    "ReportsConfigWidget:NoReports"
+                    "ReportsConfigWidget:CreateOneReportCTA"
                   )}
-                  <div>
-                    <Button onClick={addReport} styleType="cta">
-                      {ReportsConfigWidget.localization.getLocalizedString(
-                        "ReportsConfigWidget:CreateOneReportCTA"
-                      )}
-                    </Button>
-                  </div>
-                </>
-              </EmptyMessage>
-            ) : (
-              <div className="rcw-reports-list">
-                {filteredReports.map((report) => (
-                  <ReportHorizontalTile
-                    key={report.id}
-                    report={report}
-                    onClickTitle={() => {
-                      setSelectedReport(report);
-                      setReportsView(ReportsView.REPORTSMAPPING);
-                    }}
-                    jobStartEvent={jobStartEvent}
-                    bulkExtractor={bulkExtractor}
-                    onClickDelete={() => {
-                      setSelectedReport(report);
-                      setShowDeleteModal(true);
-                    }}
-                    onClickModify={() => {
-                      setSelectedReport(report);
-                      setReportsView(ReportsView.MODIFYING);
-                    }}
-                    onSelectionChange={onSelectionChange}
-                    selected={selectedReportIds.some((reportId) => report.id === reportId)}
-                  />
-                ))}
+                </Button>
               </div>
-            )}
-          </Surface>
-          <DeleteModal
-            entityName={selectedReport?.displayName ?? ""}
-            show={showDeleteModal}
-            setShow={setShowDeleteModal}
-            onDelete={async () => {
-              const reportsClientApi = new ReportsClient(
-                generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
-              );
-              const accessToken = await apiConfig.getAccessToken();
-              await reportsClientApi.deleteReport(
-                accessToken,
-                selectedReport?.id ?? ""
-              );
-            }}
-            refresh={refresh}
-          />
-        </>
-      );
-  }
+            </>
+          </EmptyMessage>
+        ) : (
+          <div className="rcw-reports-list">
+            {filteredReports.map((report) => (
+              <ReportHorizontalTile
+                key={report.id}
+                report={report}
+                onClickTitle={onClickReportTitle}
+                jobStartEvent={jobStartEvent}
+                bulkExtractor={bulkExtractor}
+                onClickDelete={() => {
+                  setShowDeleteModal(report);
+                }}
+                onClickModify={onClickReportModify}
+                onSelectionChange={onSelectionChange}
+                selected={selectedReportIds.some(
+                  (reportId) => report.id === reportId
+                )}
+              />
+            ))}
+          </div>
+        )}
+      </Surface>
+      <DeleteModal
+        entityName={showDeleteModal?.displayName}
+        onClose={() => setShowDeleteModal(undefined)}
+        onDelete={async () => {
+          const accessToken = await getAccessToken();
+          await reportsClient.deleteReport(
+            accessToken,
+            showDeleteModal?.id ?? ""
+          );
+        }}
+        refresh={refresh}
+      />
+    </>
+  );
 };

package/src/widget/components/ReportsConfigContext.tsx

@@ -0,0 +1,95 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { Constants, IModelsClient } from "@itwin/imodels-client-management";
+import { ExtractionClient, 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 { ReportsConfigApiContext } from "../context/ReportsConfigApiContext";
+import { REPORTS_CONFIG_BASE_URL } from "../ReportsConfigUiProvider";
+import { BulkExtractor } from "./BulkExtractor";
+import { FailedExtractionToast, SuccessfulExtractionToast } from "./ExtractionToast";
+import { generateUrl } from "./utils";
+
+export interface ReportsConfigContextProps {
+  getAccessToken?: GetAccessTokenFn;
+  baseUrl?: string;
+  iTwinId: string;
+  bulkExtractor?: BulkExtractor;
+  reportsClient?: ReportsClient;
+  mappingsClient?: MappingsClient;
+  extractionClient?: ExtractionClient;
+  iModelsClient?: IModelsClient;
+  children?: React.ReactNode;
+}
+
+const authorizationClientGetAccessToken = async () =>
+  (await IModelApp.authorizationClient?.getAccessToken()) ?? "";
+
+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(Constants.api.baseUrl, props.baseUrl ?? REPORTS_CONFIG_BASE_URL) },
+  }), [props.baseUrl]);
+  const [extractionClient, setExtractionClient] = useState<ExtractionClient>(
+    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()),
+    iModelsClient: props.iModelsClient ?? new IModelsClient(iModelClientOptions),
+  });
+
+  useEffect(() => {
+    if (!props.extractionClient) {
+      setExtractionClient(props.extractionClient ?? new ExtractionClient(reportsBaseUrl()));
+    }
+  }, [props.extractionClient, reportsBaseUrl]);
+
+  const successfulExtractionToast = (iModelName: string, odataFeedUrl: string) => {
+    toaster.positive(<SuccessfulExtractionToast iModelName={iModelName} odataFeedUrl={odataFeedUrl} />);
+  };
+
+  const failedExtractionToast = (iModelName: string) => {
+    toaster.negative(<FailedExtractionToast iModelName={iModelName} />);
+  };
+
+  const bulkExtractor = useMemo(
+    () => ({ bulkExtractor: props.bulkExtractor ?? new BulkExtractor(apiConfig.reportsClient, extractionClient, apiConfig.getAccessToken, successfulExtractionToast, failedExtractionToast) }),
+    [apiConfig.getAccessToken, apiConfig.reportsClient, extractionClient, props.bulkExtractor]
+  );
+
+  useEffect(() => {
+    setApiConfig(() => ({
+      getAccessToken: props.getAccessToken ?? authorizationClientGetAccessToken,
+      baseUrl: props.baseUrl || REPORTS_CONFIG_BASE_URL,
+      iTwinId: props.iTwinId,
+      reportsClient: props.reportsClient ?? new ReportsClient(reportsBaseUrl()),
+      mappingsClient: props.mappingsClient ?? new MappingsClient(reportsBaseUrl()),
+      iModelsClient: props.iModelsClient ?? new IModelsClient(iModelClientOptions),
+    }));
+  }, [props.getAccessToken, props.baseUrl, props.iTwinId, props.reportsClient, props.mappingsClient, props.iModelsClient, reportsBaseUrl, iModelClientOptions]);
+
+  return (
+    <ReportsConfigApiContext.Provider value={apiConfig}>
+      <BulkExtractorContext.Provider value={bulkExtractor}>
+        {props.children}
+      </BulkExtractorContext.Provider>
+    </ReportsConfigApiContext.Provider>
+  );
+};

package/src/widget/components/ReportsContainer.tsx

@@ -3,43 +3,69 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import type { AccessToken } from "@itwin/core-bentley";
-import { IModelApp } from "@itwin/core-frontend";
-import React, { useEffect, useState } from "react";
-import { Reports } from "../components/Reports";
-import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
-import { ReportsApiConfigContext } from "../context/ReportsApiConfigContext";
+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";
 
 interface ReportsContainerProps {
   getAccessToken?: () => Promise<AccessToken>;
   baseUrl: string;
 }
 
-const authorizationClientGetAccessToken = async () =>
-  (await IModelApp.authorizationClient?.getAccessToken()) ?? "";
+export enum RouteStep {
+  ReportsList,
+  ReportAction,
+  ReportMappings
+}
+
+export interface ReportsRouteFields {
+  report?: Report;
+}
+
+export interface Route {
+  step: RouteStep;
+  title: string;
+  reportsRoutingFields: ReportsRouteFields;
+}
 
 const ReportsContainer = ({
   getAccessToken,
   baseUrl,
 }: ReportsContainerProps) => {
-  const [apiConfig, setApiConfig] = useState<ReportsApiConfig>({
-    getAccessToken: getAccessToken ?? authorizationClientGetAccessToken,
-    baseUrl,
-  });
-
-  useEffect(() => {
-    setApiConfig(() => ({
-      baseUrl,
-      getAccessToken: getAccessToken ?? authorizationClientGetAccessToken,
-    }));
-  }, [getAccessToken, baseUrl]);
+
+  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) => {
+    setRoutingHistory((r) => [...r, toRoute(r[r.length - 1])]);
+  }, []);
+
+  const goBack = useCallback(() => {
+    const updatedRouting = [...routingHistory];
+    updatedRouting.pop();
+    setRoutingHistory(updatedRouting);
+  }, [routingHistory]);
 
   return (
-    <ReportsApiConfigContext.Provider value={apiConfig}>
+    <ReportsConfigContext getAccessToken={getAccessToken} baseUrl={baseUrl} iTwinId={iTwinId}>
       <div className="rcw-reports-container">
-        <Reports />
+        <ReportsHeader
+          goBack={goBack}
+          currentRoute={currentRoute}
+        />
+        <ReportsRouter
+          currentRoute={currentRoute}
+          navigateTo={navigateTo}
+          goBack={goBack}
+        />
       </div>
-    </ReportsApiConfigContext.Provider>
+    </ReportsConfigContext>
   );
 };
 

package/src/widget/components/ReportsHeader.tsx

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+* 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;
+
+  return (
+    <WidgetHeader
+      returnFn={shouldDisableReturnFn ? undefined : goBack}
+      title={currentRoute.title}
+    />
+  );
+};