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

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

@@ -0,0 +1,192 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { ExtractionStates } from "./ExtractionStatus";
+import { STATUS_CHECK_INTERVAL } from "./Constants";
+
+export type ReportMappingAndMapping = ReportMapping & {
+  mappingName: string;
+  mappingDescription: string;
+  iModelName: string;
+};
+
+export default class BulkExtractor {
+  private _reportsClientApi: ReportsClient;
+  private _extractionClientApi: ExtractionClient;
+  private _accessToken: () => Promise<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._successfulExtractionToast = successfulExtractionToast;
+    this._failedExtractionToast = failedExtractionToast;
+  }
+
+  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);
+      }
+      this._iModelStates.set(iModelId, state);
+    }
+  }
+
+  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 async getIModelState(iModelId: string, iModelName: string, odataFeedUrl: string): Promise<ExtractionStates> {
+    if ((new Date().getTime() - this._timeFetched.getTime()) > STATUS_CHECK_INTERVAL) {
+      this._timeFetched = new Date();
+      await this.fetchStates();
+    }
+
+    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 {
+    if (states.includes(ExtractorState.Failed))
+      return ExtractionStates.Failed;
+
+    if (states.includes(ExtractorState.Queued))
+      return ExtractionStates.Queued;
+
+    if (states.includes(ExtractorState.Running))
+      return ExtractionStates.Running;
+
+    if (states.includes(ExtractorState.Succeeded))
+      return ExtractionStates.Succeeded;
+
+    return ExtractionStates.Failed;
+  }
+
+  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) {
+      handleError(error.status);
+    }
+    return ExtractorState.Failed;
+  }
+
+  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._reportIModels.set(reportId, reportIModels);
+    }
+    const iModels = new Set(Array.from(reportIModelIds.values()).flat());
+
+    for (const iModel of iModels) {
+      await this.runIModelExtractions([iModel]);
+    }
+  }
+
+  private async runExtraction(iModelId: string): Promise<string | undefined> {
+    try {
+      const response = await this._extractionClientApi.runExtraction(
+        await this._accessToken(),
+        iModelId
+      );
+      this._iModelToast.delete(iModelId);
+      return response.id;
+    } catch (error: any) {
+      handleError(error.status);
+    }
+    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(),
+      reportId
+    );
+    return reportMappings.map((x) => x.imodelId);
+  }
+}

package/src/widget/components/Constants.ts

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+export const STATUS_CHECK_INTERVAL = 5000;
+export const ANIMATION_DELAY = "5s";
+export const ANIMATION_DURATION = "1s";

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/FailedExtractionState.tsx

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { SvgStatusError } from "@itwin/itwinui-icons-color-react";
+import { ReportsConfigWidget } from "../../../ReportsConfigWidget";
+import { ANIMATION_DELAY, ANIMATION_DURATION } from "../Constants";
+
+interface ExtractionStateProps {
+  animation: boolean;
+  onAnimationEnd: () => void;
+}
+
+export const FailedExtractionState = ({ animation, onAnimationEnd }: ExtractionStateProps) => (
+  <div
+    title={ReportsConfigWidget.localization.getLocalizedString(
+      "ReportsConfigWidget:Failed"
+    )}
+    className="rcw-extraction-status"
+  >
+    <div
+      className={`rcw-status-icon`}
+      style={{
+        animationName: animation ? "rcw-fade-out" : "",
+        animationDelay: ANIMATION_DELAY,
+        animationDuration: ANIMATION_DURATION,
+      }}
+      onAnimationEnd={onAnimationEnd}
+    >
+      <SvgStatusError />
+    </div>
+  </div>
+);

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

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { SvgStatusPending } from "@itwin/itwinui-icons-color-react";
+import { ReportsConfigWidget } from "../../../ReportsConfigWidget";
+
+export const QueuedExtractionState = () => (
+  <div
+    title={ReportsConfigWidget.localization.getLocalizedString(
+      "ReportsConfigWidget:Queued"
+    )}
+    className="rcw-extraction-status"
+  >
+    <div className="rcw-status-icon">
+      <SvgStatusPending />
+    </div>
+  </div>
+);

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

@@ -0,0 +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 React from "react";
+import { ProgressRadial } from "@itwin/itwinui-react";
+import { ReportsConfigWidget } from "../../../ReportsConfigWidget";
+
+export const RunningExtractionState = () => (
+  <div
+    title={ReportsConfigWidget.localization.getLocalizedString(
+      "ReportsConfigWidget:Running"
+    )}
+    className="rcw-extraction-status-running"
+  >
+    <ProgressRadial size="x-small" indeterminate />
+  </div>
+);

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

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { SvgStatusPendingHollow } from "@itwin/itwinui-icons-color-react";
+import { ReportsConfigWidget } from "../../../ReportsConfigWidget";
+
+export const StartingExtractionState = () => (
+  <div
+    title={
+      ReportsConfigWidget.localization.getLocalizedString(
+        "ReportsConfigWidget:Starting"
+      )
+    }
+    className="rcw-extraction-status"
+  >
+    <div className="rcw-status-icon">
+      <SvgStatusPendingHollow />
+    </div>
+  </div>
+);

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

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { SvgStatusSuccess } from "@itwin/itwinui-icons-color-react";
+import { ReportsConfigWidget } from "../../../ReportsConfigWidget";
+import { ANIMATION_DELAY, ANIMATION_DURATION } from "../Constants";
+
+interface ExtractionStateProps {
+  animation: boolean;
+  onAnimationEnd: () => void;
+}
+
+export const SucceededExtractionState = ({ animation, onAnimationEnd }: ExtractionStateProps) => (
+  <div
+    title={ReportsConfigWidget.localization.getLocalizedString(
+      "ReportsConfigWidget:Success"
+    )}
+    className="rcw-extraction-status"
+  >
+    <div
+      className={`rcw-status-icon`}
+      data-testid="rcw-success-animation"
+      style={{
+        animationName: animation ? "rcw-fade-out" : "",
+        animationDelay: ANIMATION_DELAY,
+        animationDuration: ANIMATION_DURATION,
+      }}
+      onAnimationEnd={onAnimationEnd}
+    >
+      <SvgStatusSuccess />
+    </div>
+  </div>
+);

package/{lib/esm/widget/components/Extraction.scss → src/widget/components/ExtractionStatus.scss}

@@ -4,26 +4,27 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
 
-.extraction-container {
-  display: flex;
-  justify-content: space-between;
+.rcw-extraction-status {
   align-items: center;
-  gap: $iui-s;
-  .extraction-combo-box {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-  }
-  .extraction-status-container {
+  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;
   }
 }
 
-.extraction-status {
-  display: flex;
+.rcw-extraction-status-running {
   align-items: center;
-  margin: 0 $iui-s;
-  .status-icon {
+  height: 38px;
+  display: flex;
+  margin: auto $iui-xs * 3;
+
+  .rcw-status-icon {
     width: $iui-icons-default;
     height: $iui-icons-default;
   }
@@ -33,7 +34,8 @@
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
-}
+}

package/src/widget/components/ExtractionStatus.tsx

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { useEffect, useState } from "react";
+import "./ExtractionStatus.scss";
+import { STATUS_CHECK_INTERVAL } from "./Constants";
+import { StartingExtractionState } from "./ExtractionStates/StartingExtractionState";
+import { RunningExtractionState } from "./ExtractionStates/RunningExtractionState";
+import { FailedExtractionState } from "./ExtractionStates/FailedExtractionState";
+import { QueuedExtractionState } from "./ExtractionStates/QueuedExtractionState";
+import { SucceededExtractionState } from "./ExtractionStates/SucceededExtractionState";
+
+export enum ExtractionStates {
+  None,
+  Starting,
+  Queued,
+  Running,
+  Succeeded,
+  Failed,
+}
+
+interface ExtractionStatusProps {
+  state: ExtractionStates;
+  clearExtractionState: () => void;
+}
+
+export const ExtractionStatus = ({
+  state,
+  clearExtractionState,
+}: ExtractionStatusProps) => {
+  const [fadeOut, setFadeOut] = useState<boolean>(false);
+
+  const onAnimationEnd = () => {
+    clearExtractionState();
+    setFadeOut(false);
+  };
+
+  useEffect(() => {
+    let timer: number;
+    switch (state) {
+      case ExtractionStates.Succeeded:
+      case ExtractionStates.Failed:
+        timer = window.setTimeout(() => setFadeOut(true), STATUS_CHECK_INTERVAL);
+    }
+    return () => window.clearTimeout(timer);
+  }, [state]);
+
+  switch (state) {
+    case ExtractionStates.Starting:
+      return (<StartingExtractionState />);
+    case ExtractionStates.Queued:
+      return (<QueuedExtractionState />);
+    case ExtractionStates.Running:
+      return (<RunningExtractionState />);
+    case ExtractionStates.Succeeded:
+      return (<SucceededExtractionState
+        animation={fadeOut}
+        onAnimationEnd={onAnimationEnd}
+      />);
+    case ExtractionStates.Failed:
+      return (<FailedExtractionState
+        animation={fadeOut}
+        onAnimationEnd={onAnimationEnd}
+      />);
+    default:
+      return <></>;
+  }
+};

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