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

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 { ExtractionMapping, ExtractionRequestDetails, IExtractionClient, IReportsClient, ReportMapping } from "@itwin/insights-client";
 import type { AccessToken } from "@itwin/core-bentley";
 
 export type ReportMappingAndMapping = ReportMapping & {
@@ -15,13 +15,15 @@ export type ReportMappingAndMapping = ReportMapping & {
   iModelName: string;
 };
 
+/**
+ * @public
+ */
 export class BulkExtractor {
-  private _reportsClientApi: ReportsClient;
-  private _extractionClientApi: ExtractionClient;
+  private _reportsClientApi: IReportsClient;
+  private _extractionClientApi: IExtractionClient;
   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>();
@@ -31,8 +33,8 @@ export class BulkExtractor {
   private _iModels: string[] = [];
 
   constructor(
-    reportsClient: ReportsClient,
-    extractionClient: ExtractionClient,
+    reportsClient: IReportsClient,
+    extractionClient: IExtractionClient,
     getAccessToken: () => Promise<AccessToken>,
     successfulExtractionToast: (iModelName: string, odataFeedUrl: string) => void,
     failedExtractionToast: (iModelName: string) => void,
@@ -47,7 +49,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 +57,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 +74,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 +82,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 +95,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 +115,7 @@ export class BulkExtractor {
     } catch (error: any) {
       handleError(error.status);
     }
-    return ExtractorState.Failed;
+    return ExtractionState.Failed;
   }
 
   private checkRunning(): void {
@@ -125,7 +123,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 +133,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 +165,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 +175,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,9 +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";
+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;
   }
-}
+}

package/src/widget/components/ExtractionStatus.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 * as React from "react";
 import { useEffect, useState } from "react";
 import "./ExtractionStatus.scss";
@@ -26,10 +26,7 @@ interface ExtractionStatusProps {
   clearExtractionState: () => void;
 }
 
-export const ExtractionStatus = ({
-  state,
-  clearExtractionState,
-}: ExtractionStatusProps) => {
+export const ExtractionStatus = ({ state, clearExtractionState }: ExtractionStatusProps) => {
   const [fadeOut, setFadeOut] = useState<boolean>(false);
 
   const onAnimationEnd = () => {
@@ -49,21 +46,15 @@ export const ExtractionStatus = ({
 
   switch (state) {
     case ExtractionStates.Starting:
-      return (<StartingExtractionState />);
+      return <StartingExtractionState />;
     case ExtractionStates.Queued:
-      return (<QueuedExtractionState />);
+      return <QueuedExtractionState />;
     case ExtractionStates.Running:
-      return (<RunningExtractionState />);
+      return <RunningExtractionState />;
     case ExtractionStates.Succeeded:
-      return (<SucceededExtractionState
-        animation={fadeOut}
-        onAnimationEnd={onAnimationEnd}
-      />);
+      return <SucceededExtractionState animation={fadeOut} onAnimationEnd={onAnimationEnd} />;
     case ExtractionStates.Failed:
-      return (<FailedExtractionState
-        animation={fadeOut}
-        onAnimationEnd={onAnimationEnd}
-      />);
+      return <FailedExtractionState animation={fadeOut} onAnimationEnd={onAnimationEnd} />;
     default:
       return <></>;
   }

package/src/widget/components/ExtractionToast.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 { Text } from "@itwin/itwinui-react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
@@ -21,11 +21,11 @@ export const SuccessfulExtractionToast = ({ iModelName, odataFeedUrl }: Successf
   };
   return (
     <div>
-      <Text>{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionSuccess")}{iModelName}</Text>
-      <a
-        href="#"
-        onClick={onClick}
-      >
+      <Text>
+        {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionSuccess")}
+        {iModelName}
+      </Text>
+      <a href="#" onClick={onClick}>
         {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:CopyODataUrl")}
       </a>
     </div>
@@ -35,7 +35,10 @@ export const SuccessfulExtractionToast = ({ iModelName, odataFeedUrl }: Successf
 export const FailedExtractionToast = ({ iModelName }: ExtractionToastProps) => {
   return (
     <div>
-      <Text>{ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionFailed")}{iModelName}</Text>
+      <Text>
+        {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ExtractionFailed")}
+        {iModelName}
+      </Text>
     </div>
   );
 };

package/src/widget/components/HorizontalTile.scss

@@ -40,10 +40,7 @@
 
   &-selected {
     border: 1px solid var(--iui-color-border-accent);
-    background: linear-gradient(
-        rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6)),
-        rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6))
-      ),
+    background: linear-gradient(rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6)), rgba(var(--iui-color-accent-hsl), var(--iui-opacity-6))),
       linear-gradient(var(--iui-color-background), var(--iui-color-background));
   }
 }