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

package/src/widget/components/ReportMappings.tsx

@@ -1,37 +1,18 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import {
-  SvgAdd,
-  SvgCopy,
-  SvgRefresh,
-} from "@itwin/itwinui-icons-react";
-import {
-  Button,
-  IconButton,
-  LabeledInput,
-  Text,
-  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, SvgCopy, SvgRefresh } from "@itwin/itwinui-icons-react";
+import { Button, IconButton, LabeledInput, Text, toaster } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { CreateTypeFromInterface } from "./utils";
-import {
-  EmptyMessage,
-  generateUrl,
-  handleError,
-  LoadingOverlay,
-  LoadingSpinner,
-} from "./utils";
+import { EmptyMessage, generateUrl, handleError, LoadingOverlay, LoadingSpinner } from "./utils";
 import "./ReportMappings.scss";
 import DeleteModal from "./DeleteModal";
-import type { MappingsClient, Report, ReportMapping, ReportsClient } from "@itwin/insights-client";
+import type { ExtractionRequestDetails, IMappingsClient, IReportsClient, Report, ReportMapping } from "@itwin/insights-client";
 import { REPORTING_BASE_PATH } from "@itwin/insights-client";
 import { AddMappingsModal } from "./AddMappingsModal";
-import type {
-  GetSingleIModelParams,
-  IModelsClient,
-} from "@itwin/imodels-client-management";
+import type { GetSingleIModelParams, IModelsClient } from "@itwin/imodels-client-management";
 import { AccessTokenAdapter } from "@itwin/imodels-access-frontend";
 import { SearchBar } from "./SearchBar";
 import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
@@ -40,7 +21,6 @@ import { ReportMappingHorizontalTile } from "./ReportMappingHorizontalTile";
 import type { AccessToken } from "@itwin/core-bentley";
 import { BeEvent } from "@itwin/core-bentley";
 import { useBulkExtractor } from "../context/BulkExtractorContext";
-
 export type ReportMappingType = CreateTypeFromInterface<ReportMapping>;
 
 export type ReportMappingAndMapping = ReportMappingType & {
@@ -53,31 +33,23 @@ const fetchReportMappings = async (
   setReportMappings: (mappings: ReportMappingAndMapping[]) => void,
   reportId: string,
   setIsLoading: (isLoading: boolean) => void,
-  reportsClient: ReportsClient,
-  mappingsClient: MappingsClient,
+  reportsClient: IReportsClient,
+  mappingsClient: IMappingsClient,
   iModelsClient: IModelsClient,
-  getAccessToken: () => Promise<AccessToken>
+  getAccessToken: () => Promise<AccessToken>,
 ) => {
   try {
     setIsLoading(true);
     const accessToken = await getAccessToken();
-    const reportMappings = await reportsClient.getReportMappings(
-      accessToken,
-      reportId
-    );
-    const authorization =
-      AccessTokenAdapter.toAuthorizationCallback(accessToken);
+    const reportMappings = await reportsClient.getReportMappings(accessToken, reportId);
+    const authorization = AccessTokenAdapter.toAuthorizationCallback(accessToken);
     const iModelNames = new Map<string, string>();
 
     const reportMappingsAndMappings = [];
     for (const reportMapping of reportMappings) {
       const iModelId = reportMapping.imodelId;
       let iModelName = "";
-      const mapping = await mappingsClient.getMapping(
-        accessToken,
-        iModelId,
-        reportMapping.mappingId
-      );
+      const mapping = await mappingsClient.getMapping(accessToken, reportMapping.mappingId);
       if (iModelNames.has(iModelId)) {
         iModelName = iModelNames.get(iModelId) ?? "";
       } else {
@@ -106,12 +78,20 @@ const fetchReportMappings = async (
   }
 };
 
+/**
+ * Props for the {@link ReportMappings} component.
+ * @public
+ */
 export interface ReportMappingsProps {
   report: Report;
   onClickClose: () => void;
   defaultIModelId?: string;
 }
 
+/**
+ * Component to display and manage report mappings.
+ * @public
+ */
 export const ReportMappings = ({ report, onClickClose, defaultIModelId }: ReportMappingsProps) => {
   const { getAccessToken, reportsClient, iModelsClient, mappingsClient, baseUrl } = useReportsConfigApi();
   const [showDeleteModal, setShowDeleteModal] = useState<ReportMappingAndMapping | undefined>(undefined);
@@ -121,61 +101,39 @@ export const ReportMappings = ({ report, onClickClose, defaultIModelId }: Report
   const [searchValue, setSearchValue] = useState<string>("");
   const [reportMappings, setReportMappings] = useState<ReportMappingAndMapping[]>([]);
   const [jobRunning, setJobRunning] = useState<boolean>(false);
-  const jobStartEvent = useMemo(
-    () => new BeEvent<(iModelId: string) => void>(),
-    []
-  );
+  const jobStartEvent = useMemo(() => new BeEvent<(iModelId: string) => void>(), []);
 
   useEffect(() => {
-    void fetchReportMappings(
-      setReportMappings,
-      report.id,
-      setIsLoading,
-      reportsClient,
-      mappingsClient,
-      iModelsClient,
-      getAccessToken
-    );
+    void fetchReportMappings(setReportMappings, report.id, setIsLoading, reportsClient, mappingsClient, iModelsClient, getAccessToken);
   }, [getAccessToken, iModelsClient, mappingsClient, report.id, reportsClient, setIsLoading]);
 
   useEffect(() => {
     if (!bulkExtractor) return;
-    bulkExtractor.setHook(setJobRunning, reportMappings.map((x) => x.imodelId));
+    bulkExtractor.setHook(
+      setJobRunning,
+      reportMappings.map((x) => x.imodelId),
+    );
   }, [bulkExtractor, reportMappings]);
 
   const refresh = useCallback(async () => {
-    await fetchReportMappings(
-      setReportMappings,
-      report.id,
-      setIsLoading,
-      reportsClient,
-      mappingsClient,
-      iModelsClient,
-      getAccessToken
-    );
+    await fetchReportMappings(setReportMappings, report.id, setIsLoading, reportsClient, mappingsClient, iModelsClient, getAccessToken);
   }, [getAccessToken, iModelsClient, mappingsClient, report.id, reportsClient]);
 
-  const odataFeedUrl = `${generateUrl(
-    REPORTING_BASE_PATH,
-    baseUrl
-  )}/odata/${report.id}`;
+  const odataFeedUrl = `${generateUrl(REPORTING_BASE_PATH, baseUrl)}/odata/${report.id}`;
 
   const addMapping = useCallback(() => {
     setShowAddMapping(true);
   }, []);
 
   const filteredReportMappings = useMemo(
-    () =>
-      reportMappings.filter((x) =>
-        [x.iModelName, x.mappingName, x.mappingDescription]
-          .join(" ")
-          .toLowerCase()
-          .includes(searchValue.toLowerCase())
-      ),
-    [reportMappings, searchValue]
+    () => reportMappings.filter((x) => [x.iModelName, x.mappingName, x.mappingDescription].join(" ").toLowerCase().includes(searchValue.toLowerCase())),
+    [reportMappings, searchValue],
   );
 
-  const onAddMappingsModalClose = useCallback(async () => { await refresh(); setShowAddMapping(false); }, [refresh]);
+  const onAddMappingsModalClose = useCallback(async () => {
+    await refresh();
+    setShowAddMapping(false);
+  }, [refresh]);
 
   if (!bulkExtractor) return null;
 
@@ -183,24 +141,16 @@ export const ReportMappings = ({ report, onClickClose, defaultIModelId }: Report
     <>
       <div className="rcw-report-mappings-container">
         <LabeledInput
-          label={ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:ODataFeedURL"
-          )}
+          label={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ODataFeedURL")}
           className="rcw-odata-url-input"
           readOnly={true}
           value={odataFeedUrl}
           svgIcon={
             <IconButton
-              title={ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:Copy"
-              )}
+              title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Copy")}
               onClick={async (_) => {
                 await navigator.clipboard.writeText(odataFeedUrl);
-                toaster.positive(
-                  ReportsConfigWidget.localization.getLocalizedString(
-                    "ReportsConfigWidget:CopiedToClipboard"
-                  )
-                );
+                toaster.positive(ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:CopiedToClipboard"));
               }}
             >
               <SvgCopy />
@@ -209,31 +159,19 @@ export const ReportMappings = ({ report, onClickClose, defaultIModelId }: Report
           iconDisplayStyle="inline"
         />
         <div className="rcw-toolbar">
-          <Button
-            startIcon={<SvgAdd />}
-            onClick={() => addMapping()}
-            styleType="high-visibility"
-          >
-            {ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:AddMapping"
-            )}
+          <Button startIcon={<SvgAdd />} onClick={() => addMapping()} styleType="high-visibility">
+            {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:AddMapping")}
           </Button>
           <div className="rcw-search-bar-container" data-testid="rcw-search-bar">
             <IconButton
-              title={ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:Refresh"
-              )}
+              title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Refresh")}
               onClick={refresh}
               disabled={isLoading}
-              styleType='borderless'
+              styleType="borderless"
             >
               <SvgRefresh />
             </IconButton>
-            <SearchBar
-              searchValue={searchValue}
-              setSearchValue={setSearchValue}
-              disabled={isLoading}
-            />
+            <SearchBar searchValue={searchValue} setSearchValue={setSearchValue} disabled={isLoading} />
           </div>
         </div>
         {isLoading ? (
@@ -241,16 +179,10 @@ export const ReportMappings = ({ report, onClickClose, defaultIModelId }: Report
         ) : reportMappings.length === 0 ? (
           <EmptyMessage>
             <>
-              <Text>
-                {ReportsConfigWidget.localization.getLocalizedString(
-                  "ReportsConfigWidget:NoReportMappings"
-                )}
-              </Text>
+              <Text>{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:NoReportMappings")}</Text>
               <div>
                 <Button onClick={addMapping} styleType="cta">
-                  {ReportsConfigWidget.localization.getLocalizedString(
-                    "ReportsConfigWidget:LetsAddSomeMappingsCTA"
-                  )}
+                  {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:LetsAddSomeMappingsCTA")}
                 </Button>
               </div>
             </>
@@ -283,11 +215,7 @@ export const ReportMappings = ({ report, onClickClose, defaultIModelId }: Report
         entityName={showDeleteModal?.mappingName ?? ""}
         onDelete={async () => {
           const accessToken = await getAccessToken();
-          await reportsClient.deleteReportMapping(
-            accessToken,
-            report.id,
-            showDeleteModal?.mappingId ?? ""
-          );
+          await reportsClient.deleteReportMapping(accessToken, report.id, showDeleteModal?.mappingId ?? "");
         }}
         refresh={refresh}
         onClose={() => setShowDeleteModal(undefined)}
@@ -300,25 +228,26 @@ export const ReportMappings = ({ report, onClickClose, defaultIModelId }: Report
           onClick={async () => {
             setJobRunning(true);
             const uniqueIModels = Array.from(new Set(reportMappings.map((x) => x.imodelId)));
-            await bulkExtractor.runIModelExtractions(uniqueIModels);
+            const iModelsAndMappings: ExtractionRequestDetails[] = uniqueIModels.map((iModelId) => {
+              return {
+                iModelId,
+                mappings: reportMappings
+                  .filter((reportMapping) => reportMapping.imodelId === iModelId)
+                  .map((reportMappingForIModel) => ({
+                    id: reportMappingForIModel.mappingId,
+                  })),
+              };
+            });
+            await bulkExtractor.runIModelExtractions(iModelsAndMappings);
             reportMappings.forEach((reportMapping) => {
               jobStartEvent.raiseEvent(reportMapping.imodelId);
             });
           }}
         >
-          {ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:UpdateAllDatasets"
-          )}
+          {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:UpdateAllDatasets")}
         </Button>
-        <Button
-          styleType="default"
-          type="button"
-          onClick={onClickClose}
-          disabled={isLoading}
-        >
-          {ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:Close"
-          )}
+        <Button styleType="default" type="button" onClick={onClickClose} disabled={isLoading}>
+          {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Close")}
         </Button>
       </div>
     </>

package/src/widget/components/Reports.scss

@@ -37,4 +37,3 @@
     margin-top: var(--iui-size-xs);
   }
 }
-

package/src/widget/components/Reports.tsx

@@ -6,14 +6,10 @@ import { SvgAdd, SvgPlay, SvgRefresh } from "@itwin/itwinui-icons-react";
 import { Button, IconButton } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { CreateTypeFromInterface } from "./utils";
-import {
-  EmptyMessage,
-  handleError,
-  LoadingOverlay,
-} from "./utils";
+import { EmptyMessage, handleError, LoadingOverlay } from "./utils";
 import "./Reports.scss";
 import DeleteModal from "./DeleteModal";
-import type { Report, ReportsClient } from "@itwin/insights-client";
+import type { IReportsClient, Report } from "@itwin/insights-client";
 import { ReportHorizontalTile } from "./ReportHorizontalTile";
 import { SearchBar } from "./SearchBar";
 import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
@@ -28,8 +24,8 @@ const fetchReports = async (
   setReports: (reports: Report[]) => void,
   iTwinId: string | undefined,
   setIsLoading: (isLoading: boolean) => void,
-  reportsClient: ReportsClient,
-  getAccessToken: () => Promise<AccessToken>
+  reportsClient: IReportsClient,
+  getAccessToken: () => Promise<AccessToken>,
 ) => {
   try {
     if (!iTwinId) return;
@@ -44,70 +40,47 @@ const fetchReports = async (
   }
 };
 
+/**
+ * Props for {@link Reports} component.
+ * @public
+ */
 export interface ReportsProps {
   onClickAddReport?: () => void;
   onClickReportTitle?: (report: Report) => void;
   onClickReportModify?: (report: Report) => void;
 }
 
-export const Reports = ({
-  onClickAddReport,
-  onClickReportModify,
-  onClickReportTitle,
-}: ReportsProps) => {
+/**
+ * Component to manage and list reports for an iTwin.
+ * @public
+ */
+export const Reports = ({ onClickAddReport, onClickReportModify, onClickReportTitle }: ReportsProps) => {
   const { iTwinId, getAccessToken, reportsClient } = useReportsConfigApi();
   const { bulkExtractor } = useBulkExtractor();
-  const [showDeleteModal, setShowDeleteModal] = useState<Report | undefined>(
-    undefined
-  );
+  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 jobStartEvent = useMemo(
-    () => new BeEvent<(reportId: string) => void>(),
-    []
-  );
+  const jobStartEvent = useMemo(() => new BeEvent<(reportId: string) => void>(), []);
 
   useEffect(() => {
-    void fetchReports(
-      setReports,
-      iTwinId,
-      setIsLoading,
-      reportsClient,
-      getAccessToken
-    );
+    void fetchReports(setReports, iTwinId, setIsLoading, reportsClient, getAccessToken);
   }, [getAccessToken, iTwinId, reportsClient, setIsLoading]);
 
   const refresh = useCallback(async () => {
-    await fetchReports(
-      setReports,
-      iTwinId,
-      setIsLoading,
-      reportsClient,
-      getAccessToken
-    );
+    await fetchReports(setReports, iTwinId, setIsLoading, reportsClient, getAccessToken);
   }, [getAccessToken, iTwinId, reportsClient]);
 
   const filteredReports = useMemo(
-    () =>
-      reports.filter((x) =>
-        [x.displayName, x.description]
-          .join(" ")
-          .toLowerCase()
-          .includes(searchValue.toLowerCase())
-      ),
-    [reports, searchValue]
+    () => reports.filter((x) => [x.displayName, x.description].join(" ").toLowerCase().includes(searchValue.toLowerCase())),
+    [reports, searchValue],
   );
 
   const onSelectionChange = (reportId: string, control: boolean) => {
     if (!control) setSelectedReportIds([]);
 
-    setSelectedReportIds((sr) =>
-      sr.some((r) => reportId === r)
-        ? sr.filter((r) => reportId !== r)
-        : [...sr, reportId]
-    );
+    setSelectedReportIds((sr) => (sr.some((r) => reportId === r) ? sr.filter((r) => reportId !== r) : [...sr, reportId]));
   };
 
   const updateDatasets = useCallback(async () => {
@@ -125,46 +98,28 @@ export const Reports = ({
         <div className="rcw-toolbar">
           <div className="rcw-button-spacing">
             {onClickAddReport && (
-              <Button
-                startIcon={<SvgAdd />}
-                onClick={onClickAddReport}
-                styleType="high-visibility"
-                title="New Report"
-              >
-                {ReportsConfigWidget.localization.getLocalizedString(
-                  "ReportsConfigWidget:New"
-                )}
+              <Button startIcon={<SvgAdd />} onClick={onClickAddReport} styleType="high-visibility" title="New Report">
+                {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:New")}
               </Button>
             )}
             <IconButton
-              title={ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:UpdateDatasets"
-              )}
+              title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:UpdateDatasets")}
               onClick={updateDatasets}
               disabled={selectedReportIds.length === 0}
             >
               <SvgPlay />
             </IconButton>
           </div>
-          <div
-            className="rcw-search-bar-container"
-            data-testid="rcw-search-bar"
-          >
+          <div className="rcw-search-bar-container" data-testid="rcw-search-bar">
             <IconButton
-              title={ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:Refresh"
-              )}
+              title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Refresh")}
               onClick={refresh}
               disabled={isLoading}
               styleType="borderless"
             >
               <SvgRefresh />
             </IconButton>
-            <SearchBar
-              searchValue={searchValue}
-              setSearchValue={setSearchValue}
-              disabled={isLoading}
-            />
+            <SearchBar searchValue={searchValue} setSearchValue={setSearchValue} disabled={isLoading} />
           </div>
         </div>
         {isLoading ? (
@@ -172,14 +127,10 @@ export const Reports = ({
         ) : reports.length === 0 && onClickAddReport ? (
           <EmptyMessage>
             <>
-              {ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:NoReports"
-              )}
+              {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:NoReports")}
               <div>
                 <Button onClick={onClickAddReport} styleType="cta">
-                  {ReportsConfigWidget.localization.getLocalizedString(
-                    "ReportsConfigWidget:CreateOneReportCTA"
-                  )}
+                  {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:CreateOneReportCTA")}
                 </Button>
               </div>
             </>
@@ -198,9 +149,7 @@ export const Reports = ({
                 }}
                 onClickModify={onClickReportModify}
                 onSelectionChange={onSelectionChange}
-                selected={selectedReportIds.some(
-                  (reportId) => report.id === reportId
-                )}
+                selected={selectedReportIds.some((reportId) => report.id === reportId)}
               />
             ))}
           </div>
@@ -211,10 +160,7 @@ export const Reports = ({
         onClose={() => setShowDeleteModal(undefined)}
         onDelete={async () => {
           const accessToken = await getAccessToken();
-          await reportsClient.deleteReport(
-            accessToken,
-            showDeleteModal?.id ?? ""
-          );
+          await reportsClient.deleteReport(accessToken, showDeleteModal?.id ?? "");
         }}
         refresh={refresh}
       />