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

package/src/widget/components/AddMappingsModal.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 { Modal, Table, tableFilters } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Mapping, MappingsClient } from "@itwin/insights-client";
@@ -24,16 +24,13 @@ const fetchMappings = async (
   iModelId: string,
   setIsLoading: (isLoading: boolean) => void,
   mappingsClient: MappingsClient,
-  getAccessToken: () => Promise<AccessToken>
+  getAccessToken: () => Promise<AccessToken>,
 ) => {
   try {
     setIsLoading(true);
     const accessToken = await getAccessToken();
-    const mappings = await mappingsClient.getMappings(
-      accessToken,
-      iModelId
-    );
-    setMappings(mappings);
+    const mappings = await mappingsClient.getMappings(accessToken, iModelId);
+    setMappings(mappings.mappings);
   } catch (error: any) {
     handleError(error.status);
   } finally {
@@ -49,13 +46,7 @@ export interface AddMappingsModalProps {
   defaultIModelId?: string;
 }
 
-export const AddMappingsModal = ({
-  reportId,
-  existingMappings,
-  show,
-  onClose,
-  defaultIModelId,
-}: AddMappingsModalProps) => {
+export const AddMappingsModal = ({ reportId, existingMappings, show, onClose, defaultIModelId }: AddMappingsModalProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const selectedMappings = useRef<Mapping[]>([]);
   const [selectedIModelId, setSelectediModelId] = useState<string | undefined>(defaultIModelId);
@@ -64,13 +55,7 @@ export const AddMappingsModal = ({
 
   useEffect(() => {
     if (selectedIModelId) {
-      void fetchMappings(
-        setMappings,
-        selectedIModelId,
-        setIsLoading,
-        mappingsClient,
-        getAccessToken
-      );
+      void fetchMappings(setMappings, selectedIModelId, setIsLoading, mappingsClient, getAccessToken);
     }
   }, [getAccessToken, mappingsClient, selectedIModelId, setIsLoading]);
 
@@ -78,21 +63,18 @@ export const AddMappingsModal = ({
     (): Column<CreateTypeFromInterface<Mapping>>[] => [
       {
         id: "mappingName",
-        Header: ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:MappingName"
-        ),
+        Header: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:MappingName"),
         accessor: "mappingName",
         Filter: tableFilters.TextFilter(),
       },
       {
         id: "description",
-        Header: ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:Description"
-        ),
+        Header: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Description"),
         accessor: "description",
         Filter: tableFilters.TextFilter(),
-      }],
-    []
+      },
+    ],
+    [],
   );
 
   const onSave = async () => {
@@ -119,15 +101,12 @@ export const AddMappingsModal = ({
     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]);
+  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(
-        "ReportsConfigWidget:AddMappings"
-      )}
+      title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:AddMappings")}
       isOpen={show}
       isDismissible={!isLoading}
       onClose={async () => {
@@ -136,17 +115,12 @@ export const AddMappingsModal = ({
       style={{ display: "flex", flexDirection: "column", maxHeight: "77vh" }}
     >
       <div className="rcw-add-mappings-container">
-        <SelectIModel
-          selectedIModelId={selectedIModelId}
-          setSelectedIModelId={setSelectediModelId}
-        />
+        <SelectIModel selectedIModelId={selectedIModelId} setSelectedIModelId={setSelectediModelId} />
         <Table<MappingType>
           data={tableData}
           columns={mappingsColumns}
           className="rcw-add-mappings-table"
-          emptyTableContent={ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:NoMappingsAvailable"
-          )}
+          emptyTableContent={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:NoMappingsAvailable")}
           isSortable
           isSelectable
           isLoading={isLoading}
@@ -156,13 +130,7 @@ export const AddMappingsModal = ({
         />
       </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}
-        isLoading={isLoading}
-      />
+      <ActionPanel actionLabel={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Add")} onAction={onSave} isLoading={isLoading} />
     </Modal>
   );
 };

package/src/widget/components/BulkExtractor.ts

@@ -1,12 +1,12 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import { ExtractorState } from "@itwin/insights-client";
-import type { ExtractionClient, ReportMapping, ReportsClient } from "@itwin/insights-client";
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { ExtractionState } from "@itwin/insights-client";
 import { handleError } from "./utils";
 import { ExtractionStates } from "./ExtractionStatus";
 import { STATUS_CHECK_INTERVAL } from "./Constants";
+import type { ExtractionClient, ExtractionMapping, ExtractionRequestDetails, ReportMapping, ReportsClient } from "@itwin/insights-client";
 import type { AccessToken } from "@itwin/core-bentley";
 
 export type ReportMappingAndMapping = ReportMapping & {
@@ -15,13 +15,16 @@ export type ReportMappingAndMapping = ReportMapping & {
   iModelName: string;
 };
 
+/**
+ * @public
+ */
 export 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 _iModelStates = new Map<string, ExtractionState>(); // key: iModelId, value: state
   private _timeFetched = new Date();
   private _iModelRun = new Map<string, string>(); // key: iModelId, value: runId
   private _iModelToast = new Set<string>();
@@ -47,7 +50,7 @@ export class BulkExtractor {
   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) {
+      if (state === ExtractionState.Succeeded || state === ExtractionState.Failed) {
         this._iModelRun.delete(iModelId);
       }
       this._iModelStates.set(iModelId, state);
@@ -55,14 +58,14 @@ export class BulkExtractor {
   }
 
   public async getReportState(reportId: string): Promise<ExtractionStates> {
-    if ((new Date().getTime() - this._timeFetched.getTime()) > STATUS_CHECK_INTERVAL) {
+    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[] = [];
+    const states: ExtractionState[] = [];
     for (const iModelId of iModels) {
       const state = this._iModelStates.get(iModelId);
       if (!state) continue;
@@ -72,7 +75,7 @@ export class BulkExtractor {
   }
 
   public async getIModelState(iModelId: string, iModelName: string, odataFeedUrl: string): Promise<ExtractionStates> {
-    if ((new Date().getTime() - this._timeFetched.getTime()) > STATUS_CHECK_INTERVAL) {
+    if (new Date().getTime() - this._timeFetched.getTime() > STATUS_CHECK_INTERVAL) {
       this._timeFetched = new Date();
       await this.fetchStates();
     }
@@ -80,11 +83,11 @@ export class BulkExtractor {
     const state = this._iModelStates.get(iModelId);
     if (!state) return ExtractionStates.None;
     if (!this._iModelToast.has(iModelId)) {
-      if (state === ExtractorState.Succeeded) {
+      if (state === ExtractionState.Succeeded) {
         this._successfulExtractionToast(iModelName, odataFeedUrl);
         this._iModelToast.add(iModelId);
         this.checkRunning();
-      } else if (state === ExtractorState.Failed) {
+      } else if (state === ExtractionState.Failed) {
         this._failedExtractionToast(iModelName);
         this._iModelToast.add(iModelId);
         this.checkRunning();
@@ -93,23 +96,19 @@ export class BulkExtractor {
     return BulkExtractor.getFinalState([state]);
   }
 
-  private static getFinalState(states: ExtractorState[]): ExtractionStates {
-    if (states.includes(ExtractorState.Failed))
-      return ExtractionStates.Failed;
+  private static getFinalState(states: ExtractionState[]): ExtractionStates {
+    if (states.includes(ExtractionState.Failed)) return ExtractionStates.Failed;
 
-    if (states.includes(ExtractorState.Queued))
-      return ExtractionStates.Queued;
+    if (states.includes(ExtractionState.Queued)) return ExtractionStates.Queued;
 
-    if (states.includes(ExtractorState.Running))
-      return ExtractionStates.Running;
+    if (states.includes(ExtractionState.Running)) return ExtractionStates.Running;
 
-    if (states.includes(ExtractorState.Succeeded))
-      return ExtractionStates.Succeeded;
+    if (states.includes(ExtractionState.Succeeded)) return ExtractionStates.Succeeded;
 
     return ExtractionStates.Failed;
   }
 
-  private async getState(runId: string): Promise<ExtractorState> {
+  private async getState(runId: string): Promise<ExtractionState> {
     try {
       const accessToken = await this._accessToken();
       const response = await this._extractionClientApi.getExtractionStatus(accessToken, runId);
@@ -117,7 +116,7 @@ export class BulkExtractor {
     } catch (error: any) {
       handleError(error.status);
     }
-    return ExtractorState.Failed;
+    return ExtractionState.Failed;
   }
 
   private checkRunning(): void {
@@ -125,7 +124,7 @@ export class BulkExtractor {
       let allFinished = true;
       this._iModels.forEach((iModelId) => {
         const state = this._iModelStates.get(iModelId);
-        if (state === ExtractorState.Queued || state === ExtractorState.Running) {
+        if (state === ExtractionState.Queued || state === ExtractionState.Running) {
           allFinished = false;
         }
       });
@@ -135,26 +134,31 @@ export class BulkExtractor {
   }
 
   public async runReportExtractions(reportIds: string[]): Promise<void> {
-    const reportIModelIds = new Map<string, string[]>();
+    const extractionDetailsIModelIdMap = new Map<string, ExtractionMapping[]>();
     for (const reportId of reportIds) {
-      const reportIModels = await this.fetchReportIModels(reportId);
-      reportIModelIds.set(reportId, reportIModels);
+      const reportExtractionDetails = await this.fetchReportExtractionRequestDetails(reportId);
+      const reportIModels = reportExtractionDetails.map((reportExtractionDetail) => reportExtractionDetail.iModelId);
       this._reportIModels.set(reportId, reportIModels);
+      reportExtractionDetails.forEach((extractionDetail) => {
+        const existingMappings = extractionDetailsIModelIdMap.get(extractionDetail.iModelId) || [];
+        extractionDetailsIModelIdMap.set(extractionDetail.iModelId, [...existingMappings, ...extractionDetail.mappings]);
+      });
     }
-    const iModels = new Set(Array.from(reportIModelIds.values()).flat());
 
-    for (const iModel of iModels) {
-      await this.runIModelExtractions([iModel]);
-    }
+    const extractionDetails: ExtractionRequestDetails[] = Array.from(extractionDetailsIModelIdMap.entries()).map(([iModelId, mappings]) => {
+      const mappingSetArray: ExtractionMapping[] = Array.from(new Set(mappings.map((m) => m.id))).map((id) => ({ id }));
+      return {
+        iModelId,
+        mappings: mappingSetArray,
+      };
+    });
+    await this.runIModelExtractions(extractionDetails);
   }
 
-  private async runExtraction(iModelId: string): Promise<string | undefined> {
+  private async runExtraction(extractionRequestDetails: ExtractionRequestDetails): Promise<string | undefined> {
     try {
-      const response = await this._extractionClientApi.runExtraction(
-        await this._accessToken(),
-        iModelId
-      );
-      this._iModelToast.delete(iModelId);
+      const response = await this._extractionClientApi.runExtraction(await this._accessToken(), extractionRequestDetails);
+      this._iModelToast.delete(extractionRequestDetails.iModelId);
       return response.id;
     } catch (error: any) {
       handleError(error.status);
@@ -162,8 +166,8 @@ export class BulkExtractor {
     return undefined;
   }
 
-  public async runIModelExtraction(iModelId: string): Promise<void> {
-    return this.runIModelExtractions([iModelId]);
+  public async runIModelExtraction(extractionRequestDetails: ExtractionRequestDetails): Promise<void> {
+    return this.runIModelExtractions([extractionRequestDetails]);
   }
 
   public setHook(setJobRunning: React.Dispatch<React.SetStateAction<boolean>>, iModels: string[]): void {
@@ -172,22 +176,27 @@ export class BulkExtractor {
     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();
-    }
+  public async runIModelExtractions(extractionRequestsDetails: ExtractionRequestDetails[]): Promise<void> {
+    await Promise.all(
+      extractionRequestsDetails.map(async (details) => {
+        const run = await this.runExtraction(details);
+        if (run) {
+          this._iModelStates.set(details.iModelId, ExtractionState.Queued);
+          this._iModelRun.set(details.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);
+  private async fetchReportExtractionRequestDetails(reportId: string): Promise<ExtractionRequestDetails[]> {
+    const reportMappings = await this._reportsClientApi.getReportMappings(await this._accessToken(), reportId);
+    const extractionRequestDetails: ExtractionRequestDetails[] = reportMappings.map((reportMapping) => {
+      return {
+        iModelId: reportMapping.imodelId,
+        mappings: [{ id: reportMapping.mappingId }],
+      };
+    });
+    return extractionRequestDetails;
   }
 }

package/src/widget/components/Constants.ts

@@ -1,7 +1,9 @@
 /*---------------------------------------------------------------------------------------------
-* 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.
+ *--------------------------------------------------------------------------------------------*/
 export const STATUS_CHECK_INTERVAL = 5000;
 export const ANIMATION_DELAY = "5s";
 export const ANIMATION_DURATION = "1s";
+
+export const IMODELS_BASE_URL = "https://api.bentley.com/imodels";

package/src/widget/components/DeleteModal.scss

@@ -8,11 +8,11 @@
   gap: var(--iui-size-2xs);
   flex-wrap: wrap;
 
-  >strong {
+  > strong {
     min-width: 0px;
   }
 }
 
 .rcw-loading-delete {
   margin-right: var(--iui-size-xs);
-}
+}

package/src/widget/components/DeleteModal.tsx

@@ -1,15 +1,8 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import {
-  Button,
-  MiddleTextTruncation,
-  Modal,
-  ModalButtonBar,
-  ModalContent,
-  Text,
-} 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 { Button, MiddleTextTruncation, Modal, ModalButtonBar, ModalContent, Text } from "@itwin/itwinui-react";
 import React, { useState } from "react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 import "./DeleteModal.scss";
@@ -22,12 +15,7 @@ export interface DeleteModalProps {
   refresh: () => Promise<void>;
 }
 
-export const DeleteModal = ({
-  entityName,
-  onClose,
-  onDelete,
-  refresh,
-}: DeleteModalProps) => {
+export const DeleteModal = ({ entityName, onClose, onDelete, refresh }: DeleteModalProps) => {
   const [isDeleting, setIsDeleting] = useState<boolean>(false);
 
   const deleteCallback = async () => {
@@ -45,20 +33,14 @@ export const DeleteModal = ({
 
   return (
     <Modal
-      title={ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:Confirm"
-      )}
+      title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Confirm")}
       isOpen={!!entityName}
       isDismissible={!isDeleting}
       onClose={onClose}
     >
       <ModalContent>
         <div className="rcw-delete-modal-body-text">
-          <Text variant='leading'>
-            {ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:AreYouSureYouWantToDelete"
-            )}
-          </Text>
+          <Text variant="leading">{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:AreYouSureYouWantToDelete")}</Text>
           <strong>{<MiddleTextTruncation text={`${entityName}?`} />}</strong>
         </div>
       </ModalContent>
@@ -68,23 +50,11 @@ export const DeleteModal = ({
             <LoadingSpinner />
           </div>
         )}
-        <Button
-          styleType="high-visibility"
-          onClick={deleteCallback}
-          disabled={isDeleting}
-        >
-          {ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:Delete"
-          )}
+        <Button styleType="high-visibility" onClick={deleteCallback} disabled={isDeleting}>
+          {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Delete")}
         </Button>
-        <Button
-          styleType="default"
-          onClick={onClose}
-          disabled={isDeleting}
-        >
-          {ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:Cancel"
-          )}
+        <Button styleType="default" onClick={onClose} disabled={isDeleting}>
+          {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Cancel")}
         </Button>
       </ModalButtonBar>
     </Modal>

package/src/widget/components/ExtractionStates/FailedExtractionState.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 from "react";
 import { SvgStatusError } from "@itwin/itwinui-icons-color-react";
 import { ReportsConfigWidget } from "../../../ReportsConfigWidget";
@@ -13,12 +13,7 @@ interface ExtractionStateProps {
 }
 
 export const FailedExtractionState = ({ animation, onAnimationEnd }: ExtractionStateProps) => (
-  <div
-    title={ReportsConfigWidget.localization.getLocalizedString(
-      "ReportsConfigWidget:Failed"
-    )}
-    className="rcw-extraction-status"
-  >
+  <div title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Failed")} className="rcw-extraction-status">
     <div
       className={`rcw-status-icon`}
       style={{

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

@@ -1,18 +1,13 @@
 /*---------------------------------------------------------------------------------------------
-* 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 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 title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Queued")} className="rcw-extraction-status">
     <div className="rcw-status-icon">
       <SvgStatusPending />
     </div>

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

@@ -1,18 +1,13 @@
 /*---------------------------------------------------------------------------------------------
-* 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 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"
-  >
+  <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

@@ -1,20 +1,13 @@
 /*---------------------------------------------------------------------------------------------
-* 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 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 title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Starting")} className="rcw-extraction-status">
     <div className="rcw-status-icon">
       <SvgStatusPendingHollow />
     </div>

package/src/widget/components/ExtractionStates/SucceededExtractionState.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 from "react";
 import { SvgStatusSuccess } from "@itwin/itwinui-icons-color-react";
 import { ReportsConfigWidget } from "../../../ReportsConfigWidget";
@@ -13,12 +13,7 @@ interface ExtractionStateProps {
 }
 
 export const SucceededExtractionState = ({ animation, onAnimationEnd }: ExtractionStateProps) => (
-  <div
-    title={ReportsConfigWidget.localization.getLocalizedString(
-      "ReportsConfigWidget:Success"
-    )}
-    className="rcw-extraction-status"
-  >
+  <div title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Success")} className="rcw-extraction-status">
     <div
       className={`rcw-status-icon`}
       data-testid="rcw-success-animation"

package/src/widget/components/ExtractionStatus.scss

@@ -37,4 +37,4 @@
   100% {
     opacity: 0;
   }
-}
+}