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

package/src/widget/components/ReportMappingHorizontalTile.tsx

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { BulkExtractor } from "./BulkExtractor";
 import { ExtractionStates, ExtractionStatus } from "./ExtractionStatus";
@@ -9,12 +9,10 @@ import type { BeEvent } from "@itwin/core-bentley";
 import { STATUS_CHECK_INTERVAL } from "./Constants";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 import { IconButton } from "@itwin/itwinui-react";
-import {
-  SvgDelete,
-  SvgPlay,
-} from "@itwin/itwinui-icons-react";
+import { SvgDelete, SvgPlay } from "@itwin/itwinui-icons-react";
 import { HorizontalTile } from "./HorizontalTile";
 import type { ReportMappingAndMapping } from "./ReportMappings";
+import type { ExtractionRequestDetails } from "@itwin/insights-client";
 
 export interface ReportMappingHorizontalTileProps {
   jobStartEvent: BeEvent<(iModelId: string) => void>;
@@ -26,15 +24,12 @@ export interface ReportMappingHorizontalTileProps {
 
 export const ReportMappingHorizontalTile = (props: ReportMappingHorizontalTileProps) => {
   const [extractionState, setExtractionState] = useState<ExtractionStates>(ExtractionStates.None);
-  const [jobStarted, setJobStarted] = useState<boolean>(true);
   const interval = useRef<number>();
-  const initialLoad = useRef<boolean>(true);
 
   useEffect(() => {
     const listener = (startedIModelId: string) => {
       if (startedIModelId === props.mapping.imodelId) {
         setExtractionState(ExtractionStates.Starting);
-        setJobStarted(true);
       }
     };
     props.jobStartEvent.addListener(listener);
@@ -42,87 +37,84 @@ export const ReportMappingHorizontalTile = (props: ReportMappingHorizontalTilePr
     return () => {
       props.jobStartEvent.removeListener(listener);
     };
-  }, [props.jobStartEvent, props.mapping]);
+  }, [props.jobStartEvent, props.mapping.imodelId]);
 
-  const getExtractionState = useCallback(async () => {
-    const state = await props.bulkExtractor.getIModelState(props.mapping.imodelId, props.mapping.iModelName, props.odataFeedUrl);
-    if (state === ExtractionStates.Failed || state === ExtractionStates.Succeeded || state === ExtractionStates.None) {
-      setJobStarted(false);
-      if (initialLoad.current) {
-        initialLoad.current = false;
-        setExtractionState(ExtractionStates.None);
-        return;
+  const updateExtractionState = useCallback(async () => {
+    try {
+      const state = await props.bulkExtractor.getIModelState(props.mapping.imodelId, props.mapping.iModelName, props.odataFeedUrl);
+      if (state === ExtractionStates.Failed || state === ExtractionStates.Succeeded) {
+        if (extractionState === ExtractionStates.Running) {
+          setExtractionState(state);
+        }
+      } else {
+        setExtractionState(state);
       }
-    } else {
-      initialLoad.current = false;
+    } catch (error) {
+      setExtractionState(ExtractionStates.Failed);
+      /* eslint-disable no-console */
+      console.error(error);
     }
-    setExtractionState(state);
-  }, [props.mapping, props.bulkExtractor, props.odataFeedUrl]);
+  }, [props.bulkExtractor, props.mapping.imodelId, props.mapping.iModelName, props.odataFeedUrl, extractionState]);
 
   useEffect(() => {
-    if (jobStarted) {
-      getExtractionState().catch((error) => {
-        setExtractionState(ExtractionStates.Failed);
-        setJobStarted(false);
-        /* eslint-disable no-console */
-        console.error(error);
-      });
-      window.clearInterval(interval.current);
-      interval.current = window.setInterval(async () => {
-        await getExtractionState();
-      }, STATUS_CHECK_INTERVAL);
-    }
+    void updateExtractionState();
+  }, [extractionState, updateExtractionState]);
+
+  useEffect(() => {
+    window.clearInterval(interval.current);
+    if (extractionState === ExtractionStates.None) return;
+    interval.current = window.setInterval(async () => {
+      await updateExtractionState();
+    }, STATUS_CHECK_INTERVAL);
     return () => window.clearInterval(interval.current);
-  }, [jobStarted, getExtractionState]);
+  }, [extractionState, updateExtractionState]);
+
+  const handleUpdateDataset = useCallback(async () => {
+    setExtractionState(ExtractionStates.Starting);
+    const extractionRequestDetails: ExtractionRequestDetails = {
+      iModelId: props.mapping.imodelId,
+      mappings: [{ id: props.mapping.mappingId }],
+    };
+    await props.bulkExtractor.runIModelExtraction(extractionRequestDetails);
+    props.jobStartEvent.raiseEvent(props.mapping.imodelId);
+  }, [props.bulkExtractor, props.jobStartEvent, props.mapping.imodelId, props.mapping.mappingId]);
 
   return (
     <HorizontalTile
       title={props.mapping.mappingName}
       subText={props.mapping.iModelName}
       titleTooltip={props.mapping.mappingDescription}
-      actionGroup={(
-        <div
-          className="rcw-action-button"
-          data-testid="tile-action-button">
-          {extractionState === ExtractionStates.None ?
-            (
-              <>
-                <IconButton
-                  styleType="borderless"
-                  title={ReportsConfigWidget.localization.getLocalizedString(
-                    "ReportsConfigWidget:UpdateDataset"
-                  )}
-                  onClick={async () => {
-                    setExtractionState(ExtractionStates.Starting);
-                    await props.bulkExtractor.runIModelExtraction(props.mapping.imodelId);
-                    props.jobStartEvent.raiseEvent(props.mapping.imodelId);
-                  }}
-                  disabled={jobStarted}
-                >
-                  <SvgPlay />
-                </IconButton>
-                <IconButton
-                  styleType="borderless"
-                  title={ReportsConfigWidget.localization.getLocalizedString(
-                    "ReportsConfigWidget:Remove"
-                  )}
-                  onClick={() => {
-                    props.onClickDelete();
-                  }}
-                >
-                  <SvgDelete />
-                </IconButton>
-              </>
-            ) : (
-              <ExtractionStatus
-                state={extractionState}
-                clearExtractionState={() => {
-                  setExtractionState(ExtractionStates.None);
+      actionGroup={
+        <div className="rcw-action-button" data-testid="tile-action-button">
+          {extractionState === ExtractionStates.None ? (
+            <>
+              <IconButton
+                styleType="borderless"
+                title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:UpdateDataset")}
+                onClick={handleUpdateDataset}
+              >
+                <SvgPlay />
+              </IconButton>
+              <IconButton
+                styleType="borderless"
+                title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Remove")}
+                onClick={() => {
+                  props.onClickDelete();
                 }}
-              ></ExtractionStatus>
-            )}
-        </div >
-      )}
+              >
+                <SvgDelete />
+              </IconButton>
+            </>
+          ) : (
+            <ExtractionStatus
+              state={extractionState}
+              clearExtractionState={() => {
+                setExtractionState(ExtractionStates.None);
+              }}
+            ></ExtractionStatus>
+          )}
+        </div>
+      }
     />
   );
 };

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, MappingsClient, Report, ReportMapping, ReportsClient } 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 & {
@@ -56,28 +36,20 @@ const fetchReportMappings = async (
   reportsClient: ReportsClient,
   mappingsClient: MappingsClient,
   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);
   }
 }
-