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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/reports-config-widget-react",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "An iTwin.js 3D Viewer Widget that interfaces with the iTwin Reporting Platform.",
   "keywords": [
     "Bentley",
@@ -30,7 +30,9 @@
     "rules": {
       "no-duplicate-imports": "off",
       "@typescript-eslint/consistent-type-imports": "error",
-      "deprecation/deprecation": "off"
+      "deprecation/deprecation": "off",
+      "jsx-a11y/no-static-element-interactions": "off",
+      "jsx-a11y/click-events-have-key-events": "off"
     }
   },
   "dependencies": {
@@ -40,6 +42,7 @@
     "@itwin/itwinui-icons-color-react": "^1.0.1",
     "@itwin/itwinui-icons-react": "^1.7.0",
     "@itwin/itwinui-react": "~1.42.0",
+    "classnames": "^2.3.1",
     "simple-react-validator": "^1.6.1"
   },
   "devDependencies": {

package/public/locales/en/ReportsConfigWidget.json

@@ -65,6 +65,7 @@
     "RowsPerPage": "Rows per page"
   },
   "UpdateDataset": "Update your dataset",
+  "UpdateDatasets": "Update your datasets for selected reports",
   "UpdateInProgress": "Update in progress...",
   "Validators": {
     "NoDuplicateUnderscore": "Remove duplicate \"_\"",
@@ -73,4 +74,4 @@
     "CharLimit": "There is an 128 character limit.",
     "ThisFieldIsRequired": "This field is required"
   }
-}
+}

package/reports-config-widget-react.build.error.log

@@ -1,10 +1,10 @@
-PASS src/test/ReportMappings.test.tsx (41.279 s)
-PASS src/test/Reports.test.tsx (9.785 s)
-PASS src/test/ReportAction.test.tsx (6.544 s)
+PASS src/test/ReportMappings.test.tsx (44.264 s)
+PASS src/test/Reports.test.tsx (10.883 s)
+PASS src/test/ReportAction.test.tsx (6.943 s)
 PASS src/test/WidgetHeader.test.tsx
 
 Test Suites: 4 passed, 4 total
 Tests:       22 passed, 22 total
 Snapshots:   0 total
-Time:        62.23 s
+Time:        67.274 s
 Ran all test suites.

package/reports-config-widget-react.build.log

@@ -1,45 +1,55 @@
 Invoking: npm test -- --coverage 
 
 
-> @itwin/reports-config-widget-react@0.0.7 test /home/vsts/work/1/s/packages/itwin/reports-config-widget
+> @itwin/reports-config-widget-react@0.0.8 test /home/vsts/work/1/s/packages/itwin/reports-config-widget
 > jest "--coverage"
 
-PASS src/test/ReportMappings.test.tsx (41.279 s)
-PASS src/test/Reports.test.tsx (9.785 s)
-PASS src/test/ReportAction.test.tsx (6.544 s)
+PASS src/test/ReportMappings.test.tsx (44.264 s)
+PASS src/test/Reports.test.tsx (10.883 s)
+PASS src/test/ReportAction.test.tsx (6.943 s)
 PASS src/test/WidgetHeader.test.tsx
-------------------------------|---------|----------|---------|---------|-------------------------------
-File                          | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s             
-------------------------------|---------|----------|---------|---------|-------------------------------
-All files                     |   88.02 |    69.53 |   85.71 |   88.12 |                               
- src                          |     100 |       75 |     100 |     100 |                               
-  ReportsConfigWidget.ts      |     100 |       75 |     100 |     100 | 21                            
- src/test                     |     100 |    66.66 |     100 |     100 |                               
-  test-utils.tsx              |     100 |    66.66 |     100 |     100 | 56                            
- src/widget                   |      40 |        0 |       0 |      40 |                               
-  ReportsConfigUiProvider.tsx |      40 |        0 |       0 |      40 | 23-65                         
- src/widget/components        |   88.46 |    71.07 |   86.86 |   88.67 |                               
-  ActionPanel.tsx             |     100 |    77.77 |     100 |     100 | 25-26                         
-  AddMappingsModal.tsx        |   91.66 |    83.33 |   88.88 |   93.47 | 40,120,134                    
-  DeleteModal.tsx             |      85 |      100 |      50 |   84.21 | 42,56-87                      
-  Extraction.tsx              |   85.41 |    79.48 |   85.71 |   85.71 | 51-53,138,200-203,226-229,295 
-  HorizontalTile.tsx          |     100 |      100 |     100 |     100 |                               
-  LocalizedTablePaginator.tsx |     100 |       50 |     100 |     100 | 25                            
-  ReportAction.tsx            |   94.28 |    81.48 |     100 |   94.28 | 59-60                         
-  ReportMappings.tsx          |   96.34 |    73.68 |   94.44 |   96.29 | 100,122,271                   
-  Reports.tsx                 |   98.57 |    78.94 |     100 |     100 | 56-72,112-124,177-178,240     
-  ReportsContainer.tsx        |   57.14 |        0 |       0 |   61.53 | 19,25-37                      
-  SearchBar.tsx               |   70.58 |    71.42 |      60 |   68.75 | 31-45                         
-  SelectIModel.tsx            |   97.05 |    81.81 |   85.71 |   96.87 | 92                            
-  utils.tsx                   |    64.7 |    30.76 |     100 |   58.13 | 51-94                         
- src/widget/context           |      80 |        0 |      50 |   77.77 |                               
-  ReportsApiConfigContext.tsx |      80 |        0 |      50 |   77.77 | 15,22                         
- src/widget/hooks             |     100 |      100 |     100 |     100 |                               
-  useValidator.ts             |     100 |      100 |     100 |     100 |                               
-------------------------------|---------|----------|---------|---------|-------------------------------
+----------------------------------------|---------|----------|---------|---------|-------------------------------
+File                                    | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s             
+----------------------------------------|---------|----------|---------|---------|-------------------------------
+All files                               |   77.63 |    62.45 |   70.73 |   77.55 |                               
+ src                                    |     100 |       75 |     100 |     100 |                               
+  ReportsConfigWidget.ts                |     100 |       75 |     100 |     100 | 21                            
+ src/test                               |     100 |    66.66 |     100 |     100 |                               
+  test-utils.tsx                        |     100 |    66.66 |     100 |     100 | 56                            
+ src/widget                             |      40 |        0 |       0 |      40 |                               
+  ReportsConfigUiProvider.tsx           |      40 |        0 |       0 |      40 | 23-65                         
+ src/widget/components                  |   76.48 |    64.31 |   71.94 |    76.6 |                               
+  ActionPanel.tsx                       |     100 |    77.77 |     100 |     100 | 25-26                         
+  AddMappingsModal.tsx                  |   91.66 |    83.33 |   88.88 |   93.47 | 40,120,134                    
+  BulkExtractor.ts                      |   16.45 |        0 |    6.66 |   16.66 | 36-154                        
+  Constants.ts                          |     100 |      100 |     100 |     100 |                               
+  DeleteModal.tsx                       |      85 |      100 |      50 |   84.21 | 42,56-87                      
+  Extraction.tsx                        |   85.41 |    79.48 |   85.71 |   85.71 | 51-53,138,200-203,226-229,295 
+  ExtractionStatus.tsx                  |   51.42 |       20 |   16.66 |   53.12 | 33-68                         
+  HorizontalTile.tsx                    |     100 |      100 |     100 |     100 |                               
+  LocalizedTablePaginator.tsx           |     100 |       50 |     100 |     100 | 25                            
+  ReportAction.tsx                      |   94.28 |    81.48 |     100 |   94.28 | 59-60                         
+  ReportHorizontalTile.tsx              |   70.73 |       56 |   72.72 |   69.23 | 43-45,57-63,124-125           
+  ReportMappings.tsx                    |   96.34 |    73.68 |   94.44 |   96.29 | 98,120,265                    
+  Reports.tsx                           |   92.04 |    78.84 |   83.33 |   95.18 | 124,131-133                   
+  ReportsContainer.tsx                  |   57.14 |        0 |       0 |   61.53 | 19,25-37                      
+  SearchBar.tsx                         |   70.58 |    71.42 |      60 |   68.75 | 31-45                         
+  SelectIModel.tsx                      |   97.05 |    81.81 |   85.71 |   96.87 | 92                            
+  utils.tsx                             |    64.7 |    30.76 |     100 |   58.13 | 51-94                         
+ src/widget/components/ExtractionStates |   84.37 |        0 |       0 |   81.48 |                               
+  FailedExtractionState.tsx             |   85.71 |        0 |       0 |   83.33 | 16                            
+  QueuedExtractionState.tsx             |   83.33 |      100 |       0 |      80 | 10                            
+  RunningExtractionState.tsx            |   83.33 |      100 |       0 |      80 | 10                            
+  StartingExtractionState.tsx           |   83.33 |      100 |       0 |      80 | 10                            
+  SucceededExtractionState.tsx          |   85.71 |        0 |       0 |   83.33 | 16                            
+ src/widget/context                     |      80 |        0 |      50 |   77.77 |                               
+  ReportsApiConfigContext.tsx           |      80 |        0 |      50 |   77.77 | 15,22                         
+ src/widget/hooks                       |     100 |      100 |     100 |     100 |                               
+  useValidator.ts                       |     100 |      100 |     100 |     100 |                               
+----------------------------------------|---------|----------|---------|---------|-------------------------------
 
 Test Suites: 4 passed, 4 total
 Tests:       22 passed, 22 total
 Snapshots:   0 total
-Time:        62.23 s
+Time:        67.274 s
 Ran all test suites.

package/src/widget/components/BulkExtractor.ts

@@ -0,0 +1,156 @@
+/*---------------------------------------------------------------------------------------------
+* 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 _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[]) {
+    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;
+  }
+
+  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);
+        }
+      }
+      const finalState = BulkExtractor.getFinalState(states);
+      stateByReportId.set(reportId, finalState);
+    }
+    return stateByReportId;
+  }
+
+  private async fetchStates(): Promise<void> {
+    this._reportStates = await this.getStates(this._reportIds);
+  }
+
+  public getState(reportId: string): 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)
+      );
+    }
+    return this._reportStates.get(reportId) ?? ExtractionStates.None;
+  }
+
+  public clearJob(reportId: string): void {
+    this._reportRunIds.delete(reportId);
+  }
+
+  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 getSingleState(runId: string, accessToken: string): Promise<ExtractorState> {
+    try {
+      const response = await this._extractionClientApi.getExtractionStatus(accessToken, runId);
+      return response.state;
+    } catch (error: any) {
+      handleError(error.status);
+    }
+    return ExtractorState.Failed;
+  }
+
+  public async startJobs(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);
+    }
+    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);
+    });
+  }
+
+  private async runExtraction(iModelId: string): Promise<string | undefined> {
+    try {
+      const response = await this._extractionClientApi.runExtraction(
+        await this._accessToken(),
+        iModelId
+      );
+      return response.id;
+    } catch (error: any) {
+      handleError(error.status);
+    }
+    return undefined;
+  }
+
+  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/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"
+  >
+    <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,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 { 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`}
+      style={{
+        animationName: animation ? "rcw-fade-out" : "",
+        animationDelay: ANIMATION_DELAY,
+        animationDuration: ANIMATION_DURATION,
+      }}
+      onAnimationEnd={onAnimationEnd}
+    >
+      <SvgStatusSuccess />
+    </div>
+  </div>
+);

package/src/widget/components/ExtractionStatus.scss

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/variables";
+
+.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;
+  }
+}
+
+@keyframes rcw-fade-out {
+  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/HorizontalTile.scss

@@ -3,30 +3,50 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-css/scss/variables";
+@import "~@itwin/itwinui-css/scss/icon/index";
 
-.rcw-horizontal-tile-container {
-  display: flex;
-  justify-content: space-between;
-  border-radius: 5px;
-  background-color: var(--iui-color-background-2);
-  height: $iui-baseline * 4;
-  padding: 5.5px $iui-s;
-  .body {
+.rcw-horizontal-tile {
+  &-container {
     display: flex;
-    flex-direction: column;
-    min-width: 0;
-    justify-content: center;
-    &-text {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    justify-content: space-between;
+    border-radius: 5px;
+    background-color: var(--iui-color-background-2);
+    height: $iui-baseline * 4;
+    padding: 5.5px $iui-s;
+
+    .rcw-body-container {
+      display: flex;
+      min-width: 0;
+
+      .rcw-body {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        justify-content: center;
+
+        &-text {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .rcw-action-button {
+      margin-left: 0;
+      align-self: center;
+      min-width: 36px;
+      margin-right: $iui-xs;
+      flex-shrink: 0;
     }
   }
-  .action-button {
-    margin-left: 0;
-    align-self: center;
-    min-width: 36px;
-    margin-right: $iui-xs;
-    flex-shrink: 0;
+
+  &-selected {
+    @include themed {
+      border: 1px solid t(iui-color-foreground-primary);
+      background: linear-gradient(rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6)),
+          rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6))),
+        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
+    }
   }
-}
+}