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

package/src/widget/components/AddMappingsModal.tsx

@@ -3,35 +3,32 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import { Modal, Table, tableFilters } from "@itwin/itwinui-react";
-import React, { useEffect, useMemo, useState } from "react";
-import type { Mapping } from "@itwin/insights-client";
-import { MappingsClient, REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Mapping, MappingsClient } from "@itwin/insights-client";
 import ActionPanel from "./ActionPanel";
 import "./AddMappingsModal.scss";
 import { LocalizedTablePaginator } from "./LocalizedTablePaginator";
 import type { ReportMappingAndMapping } from "./ReportMappings";
-import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
-import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
 import { SelectIModel } from "./SelectIModel";
 import type { CreateTypeFromInterface } from "./utils";
-import { generateUrl, handleError } from "./utils";
+import { handleError } from "./utils";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+import type { AccessToken } from "@itwin/core-bentley";
 
 export type MappingType = CreateTypeFromInterface<Mapping>;
 
 const fetchMappings = async (
-  setMappings: React.Dispatch<React.SetStateAction<Mapping[]>>,
+  setMappings: (mappings: Mapping[]) => void,
   iModelId: string,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  apiContext: ReportsApiConfig
+  setIsLoading: (isLoading: boolean) => void,
+  mappingsClient: MappingsClient,
+  getAccessToken: () => Promise<AccessToken>
 ) => {
   try {
     setIsLoading(true);
-    const mappingsClientApi = new MappingsClient(
-      generateUrl(REPORTING_BASE_PATH, apiContext.baseUrl)
-    );
-    const accessToken = await apiContext.getAccessToken();
-    const mappings = await mappingsClientApi.getMappings(
+    const accessToken = await getAccessToken();
+    const mappings = await mappingsClient.getMappings(
       accessToken,
       iModelId
     );
@@ -43,24 +40,26 @@ const fetchMappings = async (
   }
 };
 
-interface AddMappingsModalProps {
+export interface AddMappingsModalProps {
   reportId: string;
   existingMappings: ReportMappingAndMapping[];
   show: boolean;
-  returnFn: () => Promise<void>;
+  onClose: () => Promise<void>;
+  defaultIModelId?: string;
 }
 
 export const AddMappingsModal = ({
   reportId,
   existingMappings,
   show,
-  returnFn,
+  onClose,
+  defaultIModelId,
 }: AddMappingsModalProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [selectedMappings, setSelectedMappings] = useState<Mapping[]>([]);
-  const [selectedIModelId, setSelectediModelId] = useState<string>("");
+  const selectedMappings = useRef<Mapping[]>([]);
+  const [selectedIModelId, setSelectediModelId] = useState<string | undefined>(defaultIModelId);
   const [mappings, setMappings] = useState<Mapping[]>([]);
-  const apiConfig = useReportsApiConfig();
+  const { getAccessToken, mappingsClient, reportsClient } = useReportsConfigApi();
 
   useEffect(() => {
     if (selectedIModelId) {
@@ -68,10 +67,11 @@ export const AddMappingsModal = ({
         setMappings,
         selectedIModelId,
         setIsLoading,
-        apiConfig
+        mappingsClient,
+        getAccessToken
       );
     }
-  }, [apiConfig, selectedIModelId, setIsLoading]);
+  }, [getAccessToken, mappingsClient, selectedIModelId, setIsLoading]);
 
   const mappingsColumns = useMemo(
     () => [
@@ -104,18 +104,15 @@ export const AddMappingsModal = ({
     try {
       if (!selectedIModelId) return;
       setIsLoading(true);
-      const reportsClientApi = new ReportsClient(
-        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
-      );
-      const accessToken = await apiConfig.getAccessToken();
-      for (const mapping of selectedMappings) {
-        await reportsClientApi.createReportMapping(accessToken, reportId, {
+      const accessToken = await getAccessToken();
+      for (const mapping of selectedMappings.current) {
+        await reportsClient.createReportMapping(accessToken, reportId, {
           imodelId: selectedIModelId,
           mappingId: mapping.id,
         });
       }
 
-      await returnFn();
+      await onClose();
     } catch (error: any) {
       handleError(error.status);
     } finally {
@@ -123,6 +120,14 @@ export const AddMappingsModal = ({
     }
   };
 
+  const onSelect = useCallback((selectData: Mapping[] | undefined) => {
+    if (selectData) selectedMappings.current = selectData;
+  }, []);
+
+  const tableData = useMemo(() => isLoading ? [] : mappings, [isLoading, mappings]);
+  const isRowDisabled = useCallback((rowData: MappingType) =>
+    existingMappings.some((v) => v.mappingId === rowData.id), [existingMappings]);
+
   return (
     <Modal
       title={ReportsConfigWidget.localization.getLocalizedString(
@@ -131,7 +136,7 @@ export const AddMappingsModal = ({
       isOpen={show}
       isDismissible={!isLoading}
       onClose={async () => {
-        await returnFn();
+        await onClose();
       }}
       style={{ display: "flex", flexDirection: "column", maxHeight: "77vh" }}
     >
@@ -141,7 +146,7 @@ export const AddMappingsModal = ({
           setSelectedIModelId={setSelectediModelId}
         />
         <Table<MappingType>
-          data={isLoading ? [] : mappings}
+          data={tableData}
           columns={mappingsColumns}
           className="rcw-add-mappings-table"
           emptyTableContent={ReportsConfigWidget.localization.getLocalizedString(
@@ -150,22 +155,17 @@ export const AddMappingsModal = ({
           isSortable
           isSelectable
           isLoading={isLoading}
-          isRowDisabled={(rowData) =>
-            existingMappings.some((v) => v.mappingId === rowData.id)
-          }
-          onSelect={(selectData: Mapping[] | undefined) => {
-            selectData && setSelectedMappings(selectData);
-          }}
+          isRowDisabled={isRowDisabled}
+          onSelect={onSelect}
           paginatorRenderer={LocalizedTablePaginator}
         />
       </div>
+      {/* Add button permanently enabled as a workaround to the warning stating that the table and parent component are being rendered at the same time. */}
       <ActionPanel
         actionLabel={ReportsConfigWidget.localization.getLocalizedString(
           "ReportsConfigWidget:Add"
         )}
         onAction={onSave}
-        onCancel={returnFn}
-        isSavingDisabled={selectedMappings.length === 0}
         isLoading={isLoading}
       />
     </Modal>

package/src/widget/components/BulkExtractor.ts

@@ -2,12 +2,12 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { ExtractionClient, ExtractorState, REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
-import type { ReportMapping } from "@itwin/insights-client";
-import { generateUrl, handleError } from "./utils";
-import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { ExtractorState } from "@itwin/insights-client";
+import type { ExtractionClient, ReportMapping, ReportsClient } from "@itwin/insights-client";
+import { handleError } from "./utils";
 import { ExtractionStates } from "./ExtractionStatus";
 import { STATUS_CHECK_INTERVAL } from "./Constants";
+import type { AccessToken } from "@itwin/core-bentley";
 
 export type ReportMappingAndMapping = ReportMapping & {
   mappingName: string;
@@ -15,7 +15,7 @@ export type ReportMappingAndMapping = ReportMapping & {
   iModelName: string;
 };
 
-export default class BulkExtractor {
+export class BulkExtractor {
   private _reportsClientApi: ReportsClient;
   private _extractionClientApi: ExtractionClient;
   private _accessToken: () => Promise<string>;
@@ -31,14 +31,15 @@ export default class BulkExtractor {
   private _iModels: string[] = [];
 
   constructor(
-    apiConfig: ReportsApiConfig,
+    reportsClient: ReportsClient,
+    extractionClient: ExtractionClient,
+    getAccessToken: () => Promise<AccessToken>,
     successfulExtractionToast: (iModelName: string, odataFeedUrl: string) => void,
     failedExtractionToast: (iModelName: string) => void,
   ) {
-    const url = generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl);
-    this._reportsClientApi = new ReportsClient(url);
-    this._extractionClientApi = new ExtractionClient(url);
-    this._accessToken = apiConfig.getAccessToken;
+    this._reportsClientApi = reportsClient;
+    this._extractionClientApi = extractionClient;
+    this._accessToken = getAccessToken;
     this._successfulExtractionToast = successfulExtractionToast;
     this._failedExtractionToast = failedExtractionToast;
   }

package/src/widget/components/DeleteModal.tsx

@@ -16,32 +16,30 @@ import "./DeleteModal.scss";
 import { handleError, LoadingSpinner } from "./utils";
 
 export interface DeleteModalProps {
-  entityName: string;
-  show: boolean;
-  setShow: React.Dispatch<React.SetStateAction<boolean>>;
+  entityName?: string;
+  onClose: () => void;
   onDelete: () => Promise<void>;
   refresh: () => Promise<void>;
 }
 
 export const DeleteModal = ({
   entityName,
-  show,
-  setShow,
+  onClose,
   onDelete,
   refresh,
 }: DeleteModalProps) => {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
 
   const deleteCallback = async () => {
     try {
-      setIsLoading(true);
+      setIsDeleting(true);
       await onDelete();
-      setShow(false);
       await refresh();
+      onClose();
     } catch (error: any) {
       handleError(error.status);
     } finally {
-      setIsLoading(false);
+      setIsDeleting(false);
     }
   };
 
@@ -50,11 +48,9 @@ export const DeleteModal = ({
       title={ReportsConfigWidget.localization.getLocalizedString(
         "ReportsConfigWidget:Confirm"
       )}
-      isOpen={show}
-      isDismissible={!isLoading}
-      onClose={() => {
-        setShow(false);
-      }}
+      isOpen={!!entityName}
+      isDismissible={!isDeleting}
+      onClose={onClose}
     >
       <ModalContent>
         <div className="rcw-delete-modal-body-text">
@@ -67,7 +63,7 @@ export const DeleteModal = ({
         </div>
       </ModalContent>
       <ModalButtonBar>
-        {isLoading && (
+        {isDeleting && (
           <div className="rcw-loading-delete" data-testid="rcw-loading-delete">
             <LoadingSpinner />
           </div>
@@ -75,7 +71,7 @@ export const DeleteModal = ({
         <Button
           styleType="high-visibility"
           onClick={deleteCallback}
-          disabled={isLoading}
+          disabled={isDeleting}
         >
           {ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:Delete"
@@ -83,10 +79,8 @@ export const DeleteModal = ({
         </Button>
         <Button
           styleType="default"
-          onClick={() => {
-            setShow(false);
-          }}
-          disabled={isLoading}
+          onClick={onClose}
+          disabled={isDeleting}
         >
           {ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:Cancel"

package/src/widget/components/HorizontalTile.scss

@@ -12,6 +12,7 @@
     border-radius: 5px;
     background-color: var(--iui-color-background-2);
     height: $iui-baseline * 4;
+    min-height: 44px;
     padding: 5.5px $iui-s;
 
     .rcw-body-container {
@@ -44,9 +45,11 @@
   &-selected {
     @include themed {
       border: 1px solid t(iui-color-foreground-primary);
-      background: linear-gradient(rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
-          rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))),
+      background: linear-gradient(
+          rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
+          rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))
+        ),
         linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
     }
   }
-}
+}

package/src/widget/components/ReportAction.tsx

@@ -7,25 +7,22 @@ import React, { useState } from "react";
 import ActionPanel from "./ActionPanel";
 import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
 import {
-  generateUrl,
   handleError,
   handleInputChange,
-  WidgetHeader,
 } from "./utils";
 import "./ReportAction.scss";
 import type { Report } from "@itwin/insights-client";
-import { REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
-import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 
-interface ReportActionProps {
-  iTwinId: string;
+export interface ReportActionProps {
   report?: Report;
-  returnFn: () => Promise<void>;
+  onSaveSuccess: () => void;
+  onClickCancel?: () => void;
 }
 
-const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
-  const apiConfig = useReportsApiConfig();
+export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportActionProps) => {
+  const { iTwinId, getAccessToken, reportsClient } = useReportsConfigApi();
   const [values, setValues] = useState({
     name: report?.displayName ?? "",
     description: report?.description ?? "",
@@ -40,21 +37,22 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
         return;
       }
       setIsLoading(true);
-      const reportsClientApi = new ReportsClient(
-        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
-      );
-      const accessToken = await apiConfig.getAccessToken();
+      const accessToken = await getAccessToken();
       report
-        ? await reportsClientApi.updateReport(accessToken, report.id ?? "", {
+        ? await reportsClient.updateReport(accessToken, report.id ?? "", {
           displayName: values.name,
           description: values.description,
         })
-        : await reportsClientApi.createReport(accessToken, {
+        : await reportsClient.createReport(accessToken, {
           displayName: values.name,
           description: values.description,
           projectId: iTwinId,
         });
-      await returnFn();
+      onSaveSuccess();
+      setValues({
+        name: report?.displayName ?? "",
+        description: report?.description ?? "",
+      });
     } catch (error: any) {
       handleError(error.status);
       setIsLoading(false);
@@ -65,18 +63,6 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
 
   return (
     <>
-      <WidgetHeader
-        title={
-          report
-            ? ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:ModifyReport"
-            )
-            : ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:AddReport"
-            )
-        }
-        returnFn={returnFn}
-      />
       <div className="rcw-details-form-container">
         <Fieldset
           legend={ReportsConfigWidget.localization.getLocalizedString(
@@ -133,7 +119,7 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
           "ReportsConfigWidget:Add"
         )}
         onAction={onSave}
-        onCancel={returnFn}
+        onCancel={onClickCancel}
         isSavingDisabled={!values.name}
         isLoading={isLoading}
       />
@@ -141,4 +127,3 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
   );
 };
 
-export default ReportAction;

package/src/widget/components/ReportHorizontalTile.tsx

@@ -2,9 +2,8 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { useEffect, useRef, useState } from "react";
-import React from "react";
-import type BulkExtractor from "./BulkExtractor";
+import React, { useEffect, useRef, useState } from "react";
+import type { BulkExtractor } from "./BulkExtractor";
 import { ExtractionStates, ExtractionStatus } from "./ExtractionStatus";
 import type { BeEvent } from "@itwin/core-bentley";
 import { STATUS_CHECK_INTERVAL } from "./Constants";
@@ -21,16 +20,16 @@ import {
   SvgMore,
 } from "@itwin/itwinui-icons-react";
 import { HorizontalTile } from "./HorizontalTile";
-import type { HorizontalTileProps } from "./HorizontalTile";
 
-export interface ReportHorizontalTileProps extends Pick<HorizontalTileProps, "onClickTitle"> {
+export interface ReportHorizontalTileProps {
   selected: boolean;
   onSelectionChange: (reportId: string, controlPressed: boolean) => void;
   bulkExtractor: BulkExtractor;
   jobStartEvent: BeEvent<(reportId: string) => void>;
   report: Report;
   onClickDelete: () => void;
-  onClickModify: () => void;
+  onClickModify?: (report: Report) => void;
+  onClickTitle?: (report: Report) => void;
 }
 
 export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
@@ -81,7 +80,7 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
       subtextToolTip={props.report.description ?? ""}
       titleTooltip={props.report.displayName}
       onClick={onClickTile}
-      onClickTitle={props.onClickTitle}
+      onClickTitle={() => props.onClickTitle?.(props.report)}
       selected={props.selected}
       actionGroup={extractionState === ExtractionStates.None ? (
         <div
@@ -89,15 +88,15 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
           data-testid="tile-action-button">
           <DropdownMenu
             menuItems={(close: () => void) => [
-              <MenuItem
+              props.onClickModify ? <MenuItem
                 key={0}
-                onClick={props.onClickModify}
+                onClick={() => props.onClickModify?.(props.report)}
                 icon={<SvgEdit />}
               >
                 {ReportsConfigWidget.localization.getLocalizedString(
                   "ReportsConfigWidget:Modify"
                 )}
-              </MenuItem>,
+              </MenuItem> : [],
               <MenuItem
                 key={1}
                 onClick={() => {
@@ -110,7 +109,7 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
                   "ReportsConfigWidget:Remove"
                 )}
               </MenuItem>,
-            ]}
+            ].flat()}
           >
             <IconButton styleType="borderless">
               <SvgMore />

package/src/widget/components/ReportMappingHorizontalTile.tsx

@@ -2,9 +2,8 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { useCallback, useEffect, useRef, useState } from "react";
-import React from "react";
-import type BulkExtractor from "./BulkExtractor";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { BulkExtractor } from "./BulkExtractor";
 import { ExtractionStates, ExtractionStatus } from "./ExtractionStatus";
 import type { BeEvent } from "@itwin/core-bentley";
 import { STATUS_CHECK_INTERVAL } from "./Constants";

package/src/widget/components/ReportMappings.scss

@@ -34,8 +34,8 @@
     display: flex;
     flex-direction: column;
     overflow-y: overlay;
-    gap: 7.5px;
-    margin-top: 7.5px;
+    gap: 8px;
+    margin-top: 8px;
   }
 
   .rcw-search-bar-container {
@@ -43,4 +43,4 @@
     flex-shrink: 1;
     flex-grow: 1;
   }
-}
+}