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

package/src/test/Reports.test.tsx

@@ -291,7 +291,7 @@ describe("Reports View", () => {
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
 
-    const searchButton = within(screen.getByTestId(/search-bar/i)).getByRole(
+    const searchButton = within(screen.getByTestId(/rcw-search-bar/i)).getByRole(
       "button"
     );
     await user.click(searchButton);

package/src/widget/components/ActionPanel.tsx

@@ -26,29 +26,25 @@ const ActionPanel = ({
   isLoading = false,
 }: ActionPanelProps): JSX.Element => {
   return (
-    <div id="action">
-      <div className="rcw-action-panel">
-        {isLoading && <LoadingSpinner />}
-        <Button
-          disabled={isSavingDisabled || isLoading}
-          styleType="high-visibility"
-          id="save-app"
-          onClick={onAction}
-        >
-          {actionLabel}
-        </Button>
-        <Button
-          styleType="default"
-          type="button"
-          id="cancel"
-          onClick={onCancel}
-          disabled={isCancelDisabled || isLoading}
-        >
-          {ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:Cancel"
-          )}
-        </Button>
-      </div>
+    <div className="rcw-action-panel">
+      {isLoading && <LoadingSpinner />}
+      <Button
+        disabled={isSavingDisabled || isLoading}
+        styleType="high-visibility"
+        onClick={onAction}
+      >
+        {actionLabel}
+      </Button>
+      <Button
+        styleType="default"
+        type="button"
+        onClick={onCancel}
+        disabled={isCancelDisabled || isLoading}
+      >
+        {ReportsConfigWidget.localization.getLocalizedString(
+          "ReportsConfigWidget:Cancel"
+        )}
+      </Button>
     </div>
   );
 };

package/src/widget/components/AddMappingsModal.scss

@@ -4,15 +4,16 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
 
-.add-mappings-container {
+.rcw-add-mappings-container {
   display: flex;
   flex-direction: column;
   gap: $iui-baseline;
   width: 45vw;
   min-width: 100%;
   overflow: auto;
-  .add-mappings-table {
+
+  .rcw-add-mappings-table {
     flex-grow: 1;
     overflow: auto;
   }
-}
+}

package/src/widget/components/AddMappingsModal.tsx

@@ -50,13 +50,13 @@ interface AddMappingsModalProps {
   returnFn: () => Promise<void>;
 }
 
-const AddMappingsModal = ({
+export const AddMappingsModal = ({
   reportId,
   existingMappings,
   show,
   returnFn,
 }: AddMappingsModalProps) => {
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [selectedMappings, setSelectedMappings] = useState<Mapping[]>([]);
   const [selectedIModelId, setSelectediModelId] = useState<string>("");
   const [mappings, setMappings] = useState<Mapping[]>([]);
@@ -135,7 +135,7 @@ const AddMappingsModal = ({
       }}
       style={{ display: "flex", flexDirection: "column", maxHeight: "77vh" }}
     >
-      <div className="add-mappings-container">
+      <div className="rcw-add-mappings-container">
         <SelectIModel
           selectedIModelId={selectedIModelId}
           setSelectedIModelId={setSelectediModelId}
@@ -143,7 +143,7 @@ const AddMappingsModal = ({
         <Table<MappingType>
           data={isLoading ? [] : mappings}
           columns={mappingsColumns}
-          className="add-mappings-table"
+          className="rcw-add-mappings-table"
           emptyTableContent={ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:NoMappingsAvailable"
           )}
@@ -171,5 +171,3 @@ const AddMappingsModal = ({
     </Modal>
   );
 };
-
-export default AddMappingsModal;

package/src/widget/components/BulkExtractor.ts

@@ -16,67 +16,80 @@ export type ReportMappingAndMapping = ReportMapping & {
 };
 
 export default class BulkExtractor {
-  private _reportRunIds = new Map<string, string[]>();
   private _reportsClientApi: ReportsClient;
   private _extractionClientApi: ExtractionClient;
   private _accessToken: () => Promise<string>;
-  private _reportStates = new Map<string, ExtractionStates>();
-  private _timeFetched = new Date();
-  private _reportIds: string[];
 
-  constructor(apiConfig: ReportsApiConfig, reportIds: string[]) {
+  private _reportIModels = new Map<string, string[]>(); // key: reportId, value: iModels
+  private _iModelStates = new Map<string, ExtractorState>(); // key: iModelId, value: state
+  private _timeFetched = new Date();
+  private _iModelRun = new Map<string, string>(); // key: iModelId, value: runId
+  private _iModelToast = new Set<string>();
+  private _successfulExtractionToast: (iModelName: string, odataFeedUrl: string) => void;
+  private _failedExtractionToast: (iModelName: string) => void;
+  private _setJobRunning: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+  private _iModels: string[] = [];
+
+  constructor(
+    apiConfig: ReportsApiConfig,
+    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._reportIds = reportIds;
+    this._successfulExtractionToast = successfulExtractionToast;
+    this._failedExtractionToast = failedExtractionToast;
   }
 
-  private async getStates(reportIds: string[]): Promise<Map<string, ExtractionStates>> {
-    const stateByReportId = new Map<string, ExtractionStates>();
-    const stateByRunId = new Map<string, ExtractorState>();
-
-    for (const reportId of reportIds) {
-      const runs = this._reportRunIds.get(reportId);
-      if (!runs) {
-        stateByReportId.set(reportId, ExtractionStates.None);
-        continue;
-      }
-
-      const states: ExtractorState[] = [];
-      for (const runId of runs) {
-        const state = stateByRunId.get(runId);
-        if (state) {
-          states.push(state);
-        } else {
-          const runState = await this.getSingleState(runId, await this._accessToken());
-          states.push(runState);
-          stateByRunId.set(runId, runState);
-        }
+  private async fetchStates(): Promise<void> {
+    for (const [iModelId, runId] of this._iModelRun) {
+      const state = await this.getState(runId);
+      if (state === ExtractorState.Succeeded || state === ExtractorState.Failed) {
+        this._iModelRun.delete(iModelId);
       }
-      const finalState = BulkExtractor.getFinalState(states);
-      stateByReportId.set(reportId, finalState);
+      this._iModelStates.set(iModelId, state);
     }
-    return stateByReportId;
   }
 
-  private async fetchStates(): Promise<void> {
-    this._reportStates = await this.getStates(this._reportIds);
+  public async getReportState(reportId: string): Promise<ExtractionStates> {
+    if ((new Date().getTime() - this._timeFetched.getTime()) > STATUS_CHECK_INTERVAL) {
+      this._timeFetched = new Date();
+      await this.fetchStates();
+    }
+
+    const iModels = this._reportIModels.get(reportId);
+    if (!iModels) return ExtractionStates.None;
+    const states: ExtractorState[] = [];
+    for (const iModelId of iModels) {
+      const state = this._iModelStates.get(iModelId);
+      if (!state) continue;
+      states.push(state);
+    }
+    return BulkExtractor.getFinalState(states);
   }
 
-  public getState(reportId: string): ExtractionStates {
+  public async getIModelState(iModelId: string, iModelName: string, odataFeedUrl: string): Promise<ExtractionStates> {
     if ((new Date().getTime() - this._timeFetched.getTime()) > STATUS_CHECK_INTERVAL) {
       this._timeFetched = new Date();
-      this.fetchStates().catch((e) =>
-        /* eslint-disable no-console */
-        console.error(e)
-      );
+      await this.fetchStates();
     }
-    return this._reportStates.get(reportId) ?? ExtractionStates.None;
-  }
 
-  public clearJob(reportId: string): void {
-    this._reportRunIds.delete(reportId);
+    const state = this._iModelStates.get(iModelId);
+    if (!state) return ExtractionStates.None;
+    if (!this._iModelToast.has(iModelId)) {
+      if (state === ExtractorState.Succeeded) {
+        this._successfulExtractionToast(iModelName, odataFeedUrl);
+        this._iModelToast.add(iModelId);
+        this.checkRunning();
+      } else if (state === ExtractorState.Failed) {
+        this._failedExtractionToast(iModelName);
+        this._iModelToast.add(iModelId);
+        this.checkRunning();
+      }
+    }
+    return BulkExtractor.getFinalState([state]);
   }
 
   private static getFinalState(states: ExtractorState[]): ExtractionStates {
@@ -95,8 +108,9 @@ export default class BulkExtractor {
     return ExtractionStates.Failed;
   }
 
-  private async getSingleState(runId: string, accessToken: string): Promise<ExtractorState> {
+  private async getState(runId: string): Promise<ExtractorState> {
     try {
+      const accessToken = await this._accessToken();
       const response = await this._extractionClientApi.getExtractionStatus(accessToken, runId);
       return response.state;
     } catch (error: any) {
@@ -105,32 +119,32 @@ export default class BulkExtractor {
     return ExtractorState.Failed;
   }
 
-  public async startJobs(reportIds: string[]): Promise<void> {
+  private checkRunning(): void {
+    if (this._setJobRunning) {
+      let allFinished = true;
+      this._iModels.forEach((iModelId) => {
+        const state = this._iModelStates.get(iModelId);
+        if (state === ExtractorState.Queued || state === ExtractorState.Running) {
+          allFinished = false;
+        }
+      });
+
+      this._setJobRunning(!allFinished);
+    }
+  }
+
+  public async runReportExtractions(reportIds: string[]): Promise<void> {
     const reportIModelIds = new Map<string, string[]>();
     for (const reportId of reportIds) {
       const reportIModels = await this.fetchReportIModels(reportId);
       reportIModelIds.set(reportId, reportIModels);
-      this._reportStates.set(reportId, ExtractionStates.Starting);
+      this._reportIModels.set(reportId, reportIModels);
     }
     const iModels = new Set(Array.from(reportIModelIds.values()).flat());
-    const extractionMapPromise =
-      Array.from(iModels).map(async (iModel): Promise<[string, string | undefined]> => {
-        const run = await this.runExtraction(iModel);
-        return [iModel, run];
-      });
 
-    const extractionMap = await Promise.all(extractionMapPromise);
-    const extractionByIModel = new Map<string, string | undefined>(extractionMap);
-    reportIds.forEach((reportId) => {
-      const reportIModels = reportIModelIds.get(reportId)!;
-      const runs: string[] = [];
-      reportIModels.forEach((iModelId) => {
-        const runId = extractionByIModel.get(iModelId);
-        if (runId)
-          runs.push(runId);
-      });
-      this._reportRunIds.set(reportId, runs);
-    });
+    for (const iModel of iModels) {
+      await this.runIModelExtractions([iModel]);
+    }
   }
 
   private async runExtraction(iModelId: string): Promise<string | undefined> {
@@ -139,6 +153,7 @@ export default class BulkExtractor {
         await this._accessToken(),
         iModelId
       );
+      this._iModelToast.delete(iModelId);
       return response.id;
     } catch (error: any) {
       handleError(error.status);
@@ -146,6 +161,27 @@ export default class BulkExtractor {
     return undefined;
   }
 
+  public async runIModelExtraction(iModelId: string): Promise<void> {
+    return this.runIModelExtractions([iModelId]);
+  }
+
+  public setHook(setJobRunning: React.Dispatch<React.SetStateAction<boolean>>, iModels: string[]): void {
+    this._setJobRunning = setJobRunning;
+    this._iModels = iModels;
+    this.checkRunning();
+  }
+
+  public async runIModelExtractions(iModels: string[]): Promise<void> {
+    for (const iModelId of iModels) {
+      const run = await this.runExtraction(iModelId);
+      if (run) {
+        this._iModelStates.set(iModelId, ExtractorState.Queued);
+        this._iModelRun.set(iModelId, run);
+      }
+      this.checkRunning();
+    }
+  }
+
   private async fetchReportIModels(reportId: string): Promise<string[]> {
     const reportMappings = await this._reportsClientApi.getReportMappings(
       await this._accessToken(),

package/src/widget/components/DeleteModal.scss

@@ -4,15 +4,16 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
 
-.delete-modal-body-text {
+.rcw-delete-modal-body-text {
   display: flex;
   gap: $iui-xs;
   flex-wrap: wrap;
-  > strong {
+
+  >strong {
     min-width: 0px;
   }
 }
 
 .rcw-loading-delete {
   margin-right: $iui-s;
-}
+}

package/src/widget/components/DeleteModal.tsx

@@ -57,7 +57,7 @@ export const DeleteModal = ({
       }}
     >
       <ModalContent>
-        <div className="delete-modal-body-text">
+        <div className="rcw-delete-modal-body-text">
           <Leading>
             {ReportsConfigWidget.localization.getLocalizedString(
               "ReportsConfigWidget:AreYouSureYouWantToDelete"

package/src/widget/components/ExtractionStates/RunningExtractionState.tsx

@@ -11,7 +11,7 @@ export const RunningExtractionState = () => (
     title={ReportsConfigWidget.localization.getLocalizedString(
       "ReportsConfigWidget:Running"
     )}
-    className="rcw-extraction-status"
+    className="rcw-extraction-status-running"
   >
     <ProgressRadial size="x-small" indeterminate />
   </div>

package/src/widget/components/ExtractionStates/SucceededExtractionState.tsx

@@ -21,6 +21,7 @@ export const SucceededExtractionState = ({ animation, onAnimationEnd }: Extracti
   >
     <div
       className={`rcw-status-icon`}
+      data-testid="rcw-success-animation"
       style={{
         animationName: animation ? "rcw-fade-out" : "",
         animationDelay: ANIMATION_DELAY,

package/src/widget/components/ExtractionStatus.scss

@@ -6,10 +6,24 @@
 
 .rcw-extraction-status {
   align-items: center;
-  margin: auto $iui-s * 2;
   height: 38px;
   display: flex;
 
+  .rcw-status-icon {
+    width: $iui-icons-default;
+    height: $iui-icons-default;
+    align-items: center;
+    margin: auto $iui-xs * 3;
+    display: flex;
+  }
+}
+
+.rcw-extraction-status-running {
+  align-items: center;
+  height: 38px;
+  display: flex;
+  margin: auto $iui-xs * 3;
+
   .rcw-status-icon {
     width: $iui-icons-default;
     height: $iui-icons-default;

package/src/widget/components/ExtractionToast.tsx

@@ -0,0 +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 React from "react";
+import { Text } from "@itwin/itwinui-react";
+import { ReportsConfigWidget } from "../../ReportsConfigWidget";
+
+interface SuccessfulExtractionToastProps extends ExtractionToastProps {
+  odataFeedUrl: string;
+}
+
+interface ExtractionToastProps {
+  iModelName: string;
+}
+
+export const SuccessfulExtractionToast = ({ iModelName, odataFeedUrl }: SuccessfulExtractionToastProps) => {
+  const onClick = async (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    e.preventDefault();
+    await navigator.clipboard.writeText(odataFeedUrl);
+  };
+  return (
+    <div>
+      <Text>{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionSuccess")}{iModelName}</Text>
+      <a
+        href="#"
+        onClick={onClick}
+      >
+        {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:CopyODataUrl")}
+      </a>
+    </div>
+  );
+};
+
+export const FailedExtractionToast = ({ iModelName }: ExtractionToastProps) => {
+  return (
+    <div>
+      <Text>{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionFailed")}{iModelName}</Text>
+    </div>
+  );
+};

package/src/widget/components/HorizontalTile.scss

@@ -36,8 +36,8 @@
       margin-left: 0;
       align-self: center;
       min-width: 36px;
-      margin-right: $iui-xs;
       flex-shrink: 0;
+      display: flex;
     }
   }
 

package/src/widget/components/ReportAction.scss

@@ -8,9 +8,9 @@
   overflow-x: auto;
   height: 100%;
 
-  .details-form {
+  .rcw-details-form {
     display: flex;
     flex-direction: column;
     gap: $iui-baseline;
   }
-}
+}

package/src/widget/components/ReportAction.tsx

@@ -82,7 +82,7 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
           legend={ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:ReportDetails"
           )}
-          className="details-form"
+          className="rcw-details-form"
         >
           <Small className="field-legend">
             {ReportsConfigWidget.localization.getLocalizedString(
@@ -90,7 +90,6 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
             )}
           </Small>
           <LabeledInput
-            id="name"
             name="name"
             label={ReportsConfigWidget.localization.getLocalizedString(
               "ReportsConfigWidget:Name"
@@ -117,7 +116,6 @@ const ReportAction = ({ iTwinId, report, returnFn }: ReportActionProps) => {
             }}
           />
           <LabeledInput
-            id="description"
             name="description"
             label={ReportsConfigWidget.localization.getLocalizedString(
               "ReportsConfigWidget:Description"

package/src/widget/components/ReportHorizontalTile.tsx

@@ -56,7 +56,7 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
     if (jobStarted) {
       window.clearInterval(interval.current);
       interval.current = window.setInterval(async () => {
-        const state = props.bulkExtractor.getState(props.report.id);
+        const state = await props.bulkExtractor.getReportState(props.report.id);
         if (state) {
           setExtractionState(state);
           if (state === ExtractionStates.Failed || state === ExtractionStates.Succeeded) {
@@ -121,7 +121,6 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
         <ExtractionStatus
           state={extractionState}
           clearExtractionState={() => {
-            props.bulkExtractor.clearJob(props.report.id);
             setExtractionState(ExtractionStates.None);
           }}
         ></ExtractionStatus>

package/src/widget/components/ReportMappingHorizontalTile.tsx

@@ -0,0 +1,128 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { ExtractionStates, ExtractionStatus } from "./ExtractionStatus";
+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,
+  SvgRefresh,
+} from "@itwin/itwinui-icons-react";
+import { HorizontalTile } from "./HorizontalTile";
+import type { ReportMappingAndMapping } from "./ReportMappings";
+
+export interface ReportMappingHorizontalTileProps {
+  jobStartEvent: BeEvent<(iModelId: string) => void>;
+  mapping: ReportMappingAndMapping;
+  onClickDelete: () => void;
+  bulkExtractor: BulkExtractor;
+  odataFeedUrl: string;
+}
+
+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);
+
+    return () => {
+      props.jobStartEvent.removeListener(listener);
+    };
+  }, [props.jobStartEvent, props.mapping]);
+
+  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;
+      }
+    } else {
+      initialLoad.current = false;
+    }
+    setExtractionState(state);
+  }, [props.mapping, props.bulkExtractor, props.odataFeedUrl]);
+
+  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);
+    }
+    return () => window.clearInterval(interval.current);
+  }, [jobStarted, getExtractionState]);
+
+  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}
+              >
+                <SvgRefresh />
+              </IconButton>
+            ) : (
+              <ExtractionStatus
+                state={extractionState}
+                clearExtractionState={() => {
+                  setExtractionState(ExtractionStates.None);
+                }}
+              ></ExtractionStatus>
+            )}
+          <IconButton
+            styleType="borderless"
+            title={ReportsConfigWidget.localization.getLocalizedString(
+              "ReportsConfigWidget:Remove"
+            )}
+            onClick={() => {
+              props.onClickDelete();
+            }}
+            disabled={jobStarted}
+          >
+            <SvgDelete />
+          </IconButton>
+        </div >
+      )}
+    />
+  );
+};