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

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}
+    />
+  );
+};

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

@@ -2,7 +2,6 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/variables";
 
 @keyframes rcw-expand {
   0% {
@@ -30,4 +29,4 @@
 
 .rcw-search-button {
   float: right;
-}
+}

package/src/widget/components/SearchBar.tsx

@@ -44,6 +44,7 @@ export const SearchBar = ({
           <IconButton
             onClick={() => setSearchBarClosing(true)}
             styleType="borderless"
+            title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ClearSearch")}
           >
             <SvgCloseSmall />
           </IconButton>
@@ -52,10 +53,14 @@ 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"
+      title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:SearchReport")}
+      onClick={() => setSearchBarOpened(true)}>
       <SvgSearch />
     </IconButton>
   );

package/src/widget/components/SelectIModel.scss

@@ -2,15 +2,14 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/variables";
 
 .rcw-select-imodel {
   position: relative;
-  margin-bottom: $iui-baseline * 2;
+  margin-bottom: calc(var(--iui-size-s) * 2);
 
   .rcw-combobox {
     display: flex;
-    gap: $iui-s;
+    gap: var(--iui-size-xs);
     width: 100%;
   }
 }

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.scss

@@ -2,20 +2,28 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/variables";
-@import "~@itwin/itwinui-css/scss/icon/index";
-@import "~@itwin/itwinui-css/scss/button/index";
 
 .rcw-widget-header-container {
   display: flex;
-  margin-bottom: $iui-baseline;
-  align-items: center;
+  margin-bottom: calc(var(--iui-size-s) * 2);
+
+  .rcw-chevron {
+    cursor: pointer;
+    align-self: center;
+    margin-right: var(--iui-size-xs);
+  }
+
+  .rcw-chevron-disabled {
+    fill: var(--iui-color-icon-muted);
+    cursor: not-allowed;
+    align-self: center;
+    margin-right: var(--iui-size-xs);
+  }
 
   .rcw-title {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    margin-bottom: 3px;
   }
 }
 
@@ -29,11 +37,11 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  gap: $iui-baseline;
+  gap: var(--iui-size-s);
   height: 100%;
 }
 
 .rcw-skeleton-block {
-  height: $iui-baseline * 3;
+  height: calc(var(--iui-size-s) * 3);
   width: 100%;
 }

package/src/widget/components/utils.tsx

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 import { SvgChevronLeft } from "@itwin/itwinui-icons-react";
 import {
-  IconButton,
+  Icon,
   ProgressRadial,
   Text,
   toaster,
@@ -16,7 +16,7 @@ import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 export interface WidgetHeaderProps {
   title: string;
   disabled?: boolean;
-  returnFn?: () => Promise<void>;
+  returnFn?: () => void;
 }
 
 export const WidgetHeader = ({
@@ -27,13 +27,14 @@ export const WidgetHeader = ({
   return (
     <div className="rcw-widget-header-container">
       {returnFn && (
-        <IconButton
-          onClick={returnFn}
-          disabled={disabled}
-          styleType="borderless"
+        <Icon
+          className={`${disabled ? "rcw-chevron-disabled" : "rcw-chevron"}`}
+          onClick={disabled ? undefined : returnFn}
+          size="large"
+          title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Back")}
         >
           <SvgChevronLeft />
-        </IconButton>
+        </Icon>
       )}
       <Text className="rcw-title" variant="title">
         {title}

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;
+};

package/lib/cjs/widget/context/ReportsApiConfigContext.d.ts

@@ -1,9 +0,0 @@
-import type { AccessToken } from "@itwin/core-bentley";
-import * as React from "react";
-export interface ReportsApiConfig {
-    getAccessToken: () => Promise<AccessToken>;
-    baseUrl: string;
-}
-export declare const ReportsApiConfigContext: React.Context<ReportsApiConfig>;
-export declare const useReportsApiConfig: () => ReportsApiConfig;
-//# sourceMappingURL=ReportsApiConfigContext.d.ts.map

package/lib/cjs/widget/context/ReportsApiConfigContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReportsApiConfigContext.d.ts","sourceRoot":"","sources":["../../../../src/widget/context/ReportsApiConfigContext.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAgB;IAC/B,cAAc,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,uBAAuB,iCAGlC,CAAC;AAEH,eAAO,MAAM,mBAAmB,wBAQ/B,CAAC"}

package/lib/cjs/widget/context/ReportsApiConfigContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReportsApiConfigContext.js","sourceRoot":"","sources":["../../../../src/widget/context/ReportsApiConfigContext.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,6CAA+B;AAC/B,iCAAsC;AAOzB,QAAA,uBAAuB,GAAG,qBAAa,CAAmB;IACrE,cAAc,EAAE,KAAK,IAAI,EAAE,CAAC,EAAE;IAC9B,OAAO,EAAE,EAAE;CACZ,CAAC,CAAC;AAEI,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,+BAAuB,CAAC,CAAC;IAC1D,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,uEAAuE,CACxE,CAAC;KACH;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,mBAAmB,uBAQ9B","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { AccessToken } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport { createContext } from \"react\";\n\nexport interface ReportsApiConfig {\n  getAccessToken: () => Promise<AccessToken>;\n  baseUrl: string;\n}\n\nexport const ReportsApiConfigContext = createContext<ReportsApiConfig>({\n  getAccessToken: async () => \"\",\n  baseUrl: \"\",\n});\n\nexport const useReportsApiConfig = () => {\n  const context = React.useContext(ReportsApiConfigContext);\n  if (!context) {\n    throw new Error(\n      \"useApiConfig should be used within a ReportsApiConfigContext provider\"\n    );\n  }\n  return context;\n};\n"]}

package/lib/esm/widget/context/ReportsApiConfigContext.d.ts

@@ -1,9 +0,0 @@
-import type { AccessToken } from "@itwin/core-bentley";
-import * as React from "react";
-export interface ReportsApiConfig {
-    getAccessToken: () => Promise<AccessToken>;
-    baseUrl: string;
-}
-export declare const ReportsApiConfigContext: React.Context<ReportsApiConfig>;
-export declare const useReportsApiConfig: () => ReportsApiConfig;
-//# sourceMappingURL=ReportsApiConfigContext.d.ts.map

package/lib/esm/widget/context/ReportsApiConfigContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReportsApiConfigContext.d.ts","sourceRoot":"","sources":["../../../../src/widget/context/ReportsApiConfigContext.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAgB;IAC/B,cAAc,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,uBAAuB,iCAGlC,CAAC;AAEH,eAAO,MAAM,mBAAmB,wBAQ/B,CAAC"}

package/lib/esm/widget/context/ReportsApiConfigContext.js

@@ -1,14 +0,0 @@
-import * as React from "react";
-import { createContext } from "react";
-export const ReportsApiConfigContext = createContext({
-    getAccessToken: async () => "",
-    baseUrl: "",
-});
-export const useReportsApiConfig = () => {
-    const context = React.useContext(ReportsApiConfigContext);
-    if (!context) {
-        throw new Error("useApiConfig should be used within a ReportsApiConfigContext provider");
-    }
-    return context;
-};
-//# sourceMappingURL=ReportsApiConfigContext.js.map

package/lib/esm/widget/context/ReportsApiConfigContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReportsApiConfigContext.js","sourceRoot":"","sources":["../../../../src/widget/context/ReportsApiConfigContext.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAmB;IACrE,cAAc,EAAE,KAAK,IAAI,EAAE,CAAC,EAAE;IAC9B,OAAO,EAAE,EAAE;CACZ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC1D,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,uEAAuE,CACxE,CAAC;KACH;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type { AccessToken } from \"@itwin/core-bentley\";\nimport * as React from \"react\";\nimport { createContext } from \"react\";\n\nexport interface ReportsApiConfig {\n  getAccessToken: () => Promise<AccessToken>;\n  baseUrl: string;\n}\n\nexport const ReportsApiConfigContext = createContext<ReportsApiConfig>({\n  getAccessToken: async () => \"\",\n  baseUrl: \"\",\n});\n\nexport const useReportsApiConfig = () => {\n  const context = React.useContext(ReportsApiConfigContext);\n  if (!context) {\n    throw new Error(\n      \"useApiConfig should be used within a ReportsApiConfigContext provider\"\n    );\n  }\n  return context;\n};\n"]}