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

package/src/widget/components/AddMappingsModal.scss

@@ -2,12 +2,11 @@
 * 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-add-mappings-container {
   display: flex;
   flex-direction: column;
-  gap: $iui-baseline;
+  gap: var(--iui-size-s);
   width: 45vw;
   min-width: 100%;
   overflow: auto;

package/src/widget/components/AddMappingsModal.tsx

@@ -15,6 +15,7 @@ import type { CreateTypeFromInterface } from "./utils";
 import { handleError } from "./utils";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 import type { AccessToken } from "@itwin/core-bentley";
+import type { Column } from "react-table";
 
 export type MappingType = CreateTypeFromInterface<Mapping>;
 
@@ -74,29 +75,23 @@ export const AddMappingsModal = ({
   }, [getAccessToken, mappingsClient, selectedIModelId, setIsLoading]);
 
   const mappingsColumns = useMemo(
-    () => [
+    (): Column<CreateTypeFromInterface<Mapping>>[] => [
       {
-        Header: "Table",
-        columns: [
-          {
-            id: "mappingName",
-            Header: ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:MappingName"
-            ),
-            accessor: "mappingName",
-            Filter: tableFilters.TextFilter(),
-          },
-          {
-            id: "description",
-            Header: ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:Description"
-            ),
-            accessor: "description",
-            Filter: tableFilters.TextFilter(),
-          },
-        ],
+        id: "mappingName",
+        Header: ReportsConfigWidget.localization.getLocalizedString(
+          "ReportsConfigWidget:MappingName"
+        ),
+        accessor: "mappingName",
+        Filter: tableFilters.TextFilter(),
       },
-    ],
+      {
+        id: "description",
+        Header: ReportsConfigWidget.localization.getLocalizedString(
+          "ReportsConfigWidget:Description"
+        ),
+        accessor: "description",
+        Filter: tableFilters.TextFilter(),
+      }],
     []
   );
 

package/src/widget/components/DeleteModal.scss

@@ -2,11 +2,10 @@
 * 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-delete-modal-body-text {
   display: flex;
-  gap: $iui-xs;
+  gap: var(--iui-size-2xs);
   flex-wrap: wrap;
 
   >strong {
@@ -15,5 +14,5 @@
 }
 
 .rcw-loading-delete {
-  margin-right: $iui-s;
+  margin-right: var(--iui-size-xs);
 }

package/src/widget/components/DeleteModal.tsx

@@ -4,11 +4,11 @@
 *--------------------------------------------------------------------------------------------*/
 import {
   Button,
-  Leading,
   MiddleTextTruncation,
   Modal,
   ModalButtonBar,
   ModalContent,
+  Text,
 } from "@itwin/itwinui-react";
 import React, { useState } from "react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
@@ -54,11 +54,11 @@ export const DeleteModal = ({
     >
       <ModalContent>
         <div className="rcw-delete-modal-body-text">
-          <Leading>
+          <Text variant='leading'>
             {ReportsConfigWidget.localization.getLocalizedString(
               "ReportsConfigWidget:AreYouSureYouWantToDelete"
             )}
-          </Leading>
+          </Text>
           <strong>{<MiddleTextTruncation text={`${entityName}?`} />}</strong>
         </div>
       </ModalContent>

package/src/widget/components/ExtractionStatus.scss

@@ -2,7 +2,6 @@
 * 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;
@@ -10,10 +9,10 @@
   display: flex;
 
   .rcw-status-icon {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
+    width: var(--iui-size-m);
+    height: var(--iui-size-m);
     align-items: center;
-    margin: auto $iui-xs * 3;
+    margin: auto calc(var(--iui-size-2xs) * 3);
     display: flex;
   }
 }
@@ -22,11 +21,11 @@
   align-items: center;
   height: 38px;
   display: flex;
-  margin: auto $iui-xs * 3;
+  margin: auto calc(var(--iui-size-2xs) * 3);
 
   .rcw-status-icon {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
+    width: var(--iui-size-m);
+    height: var(--iui-size-m);
   }
 }
 

package/src/widget/components/HorizontalTile.scss

@@ -2,18 +2,14 @@
 * 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";
-@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;
-    min-height: 44px;
-    padding: 5.5px $iui-s;
+    background-color: var(--iui-color-background-backdrop);
+    min-height: calc(var(--iui-size-s) * 5);
+    padding: 5.5px var(--iui-size-xs);
 
     .rcw-body-container {
       display: flex;
@@ -38,18 +34,16 @@
       align-self: center;
       min-width: 36px;
       flex-shrink: 0;
-      display: flex;
+      margin-right: var(--iui-size-2xs);
     }
   }
 
   &-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));
-    }
+    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))
+      ),
+      linear-gradient(var(--iui-color-background), var(--iui-color-background));
   }
 }

package/src/widget/components/ReportAction.scss

@@ -2,7 +2,6 @@
 * 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-details-form-container {
   overflow-x: auto;
@@ -11,6 +10,6 @@
   .rcw-details-form {
     display: flex;
     flex-direction: column;
-    gap: $iui-baseline;
+    gap: var(--iui-size-);
   }
 }

package/src/widget/components/ReportAction.tsx

@@ -2,7 +2,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { Fieldset, LabeledInput, Small } from "@itwin/itwinui-react";
+import { Fieldset, LabeledInput, Text } from "@itwin/itwinui-react";
 import React, { useState } from "react";
 import ActionPanel from "./ActionPanel";
 import useValidator, { NAME_REQUIREMENTS } from "../hooks/useValidator";
@@ -70,11 +70,11 @@ export const ReportAction = ({ report, onSaveSuccess, onClickCancel }: ReportAct
           )}
           className="rcw-details-form"
         >
-          <Small className="field-legend">
+          <Text variant='small' className="field-legend">
             {ReportsConfigWidget.localization.getLocalizedString(
               "ReportsConfigWidget:MandatoryFields"
             )}
-          </Small>
+          </Text>
           <LabeledInput
             name="name"
             label={ReportsConfigWidget.localization.getLocalizedString(

package/src/widget/components/ReportHorizontalTile.tsx

@@ -111,7 +111,7 @@ export const ReportHorizontalTile = (props: ReportHorizontalTileProps) => {
               </MenuItem>,
             ].flat()}
           >
-            <IconButton styleType="borderless">
+            <IconButton styleType="borderless" title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ReportOptions")}>
               <SvgMore />
             </IconButton>
           </DropdownMenu>

package/src/widget/components/ReportMappingHorizontalTile.tsx

@@ -11,7 +11,7 @@ import { ReportsConfigWidget } from "../../ReportsConfigWidget";
 import { IconButton } from "@itwin/itwinui-react";
 import {
   SvgDelete,
-  SvgRefresh,
+  SvgPlay,
 } from "@itwin/itwinui-icons-react";
 import { HorizontalTile } from "./HorizontalTile";
 import type { ReportMappingAndMapping } from "./ReportMappings";
@@ -86,20 +86,33 @@ export const ReportMappingHorizontalTile = (props: ReportMappingHorizontalTilePr
           data-testid="tile-action-button">
           {extractionState === ExtractionStates.None ?
             (
-              <IconButton
-                styleType="borderless"
-                title={ReportsConfigWidget.localization.getLocalizedString(
-                  "ReportsConfigWidget:UpdateDataset"
-                )}
-                onClick={async () => {
-                  setExtractionState(ExtractionStates.Starting);
-                  await props.bulkExtractor.runIModelExtraction(props.mapping.imodelId);
-                  props.jobStartEvent.raiseEvent(props.mapping.imodelId);
-                }}
-                disabled={jobStarted}
-              >
-                <SvgRefresh />
-              </IconButton>
+              <>
+                <IconButton
+                  styleType="borderless"
+                  title={ReportsConfigWidget.localization.getLocalizedString(
+                    "ReportsConfigWidget:UpdateDataset"
+                  )}
+                  onClick={async () => {
+                    setExtractionState(ExtractionStates.Starting);
+                    await props.bulkExtractor.runIModelExtraction(props.mapping.imodelId);
+                    props.jobStartEvent.raiseEvent(props.mapping.imodelId);
+                  }}
+                  disabled={jobStarted}
+                >
+                  <SvgPlay />
+                </IconButton>
+                <IconButton
+                  styleType="borderless"
+                  title={ReportsConfigWidget.localization.getLocalizedString(
+                    "ReportsConfigWidget:Remove"
+                  )}
+                  onClick={() => {
+                    props.onClickDelete();
+                  }}
+                >
+                  <SvgDelete />
+                </IconButton>
+              </>
             ) : (
               <ExtractionStatus
                 state={extractionState}
@@ -108,18 +121,6 @@ export const ReportMappingHorizontalTile = (props: ReportMappingHorizontalTilePr
                 }}
               ></ExtractionStatus>
             )}
-          <IconButton
-            styleType="borderless"
-            title={ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:Remove"
-            )}
-            onClick={() => {
-              props.onClickDelete();
-            }}
-            disabled={jobStarted}
-          >
-            <SvgDelete />
-          </IconButton>
         </div >
       )}
     />

package/src/widget/components/ReportMappings.scss

@@ -2,31 +2,29 @@
 * 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-report-mapping-misc {
   display: flex;
   flex-direction: column;
-  gap: $iui-baseline;
+  gap: var(--iui-size-s);
 }
 
 .rcw-report-mappings-container {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: $iui-baseline $iui-m;
   min-height: 0;
 
   .rcw-odata-url-input {
-    margin-bottom: $iui-baseline * 2;
+    margin-bottom: calc(var(--iui-size-s) * 2);
   }
 
   .rcw-toolbar {
     display: flex;
     justify-content: space-between;
-    gap: $iui-s;
-    border-bottom: 1px solid var(--iui-color-background-4);
-    padding-bottom: $iui-baseline;
+    gap: var(--iui-size-xs);
+    border-bottom: 1px solid var(--iui-color-border-subtle);
+    padding-bottom: var(--iui-size-s);
     flex-wrap: wrap;
   }
 
@@ -34,13 +32,14 @@
     display: flex;
     flex-direction: column;
     overflow-y: overlay;
-    gap: 8px;
-    margin-top: 8px;
+    gap: var(--iui-size-xs);
+    margin-top: var(--iui-size-xs);
   }
 
   .rcw-search-bar-container {
-    flex-basis: $iui-3xl;
+    flex-basis: var(--iui-size-3xl);
     flex-shrink: 1;
     flex-grow: 1;
+    display: flex;
   }
 }

package/src/widget/components/ReportMappings.tsx

@@ -11,7 +11,6 @@ import {
   Button,
   IconButton,
   LabeledInput,
-  Surface,
   Text,
   toaster,
 } from "@itwin/itwinui-react";
@@ -182,7 +181,7 @@ export const ReportMappings = ({ report, onClickClose, defaultIModelId }: Report
 
   return (
     <>
-      <Surface className="rcw-report-mappings-container">
+      <div className="rcw-report-mappings-container">
         <LabeledInput
           label={ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:ODataFeedURL"
@@ -195,7 +194,6 @@ export const ReportMappings = ({ report, onClickClose, defaultIModelId }: Report
               title={ReportsConfigWidget.localization.getLocalizedString(
                 "ReportsConfigWidget:Copy"
               )}
-              styleType="borderless"
               onClick={async (_) => {
                 await navigator.clipboard.writeText(odataFeedUrl);
                 toaster.positive(
@@ -273,7 +271,7 @@ export const ReportMappings = ({ report, onClickClose, defaultIModelId }: Report
             ))}
           </div>
         )}
-      </Surface>
+      </div>
       <AddMappingsModal
         show={showAddMapping}
         reportId={report.id}

package/src/widget/components/Reports.scss

@@ -2,39 +2,39 @@
 * 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-reports-list-container {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: $iui-baseline $iui-m;
   min-height: 0;
 
   .rcw-toolbar {
     display: flex;
     justify-content: space-between;
-    gap: $iui-s;
-    border-bottom: 1px solid var(--iui-color-background-4);
-    padding-bottom: $iui-baseline;
+    gap: var(--iui-size-xs);
+    border-bottom: 1px solid var(--iui-color-border-subtle);
+    padding-bottom: var(--iui-size-s);
     flex-wrap: wrap;
-  }
 
-  .rcw-search-bar-container {
-    flex-basis: $iui-3xl;
-    flex-shrink: 1;
-    flex-grow: 1;
+    .rcw-search-bar-container {
+      flex-shrink: 1;
+      flex-grow: 0;
+      display: flex;
+    }
+
+    .rcw-button-spacing {
+      display: flex;
+      gap: var(--iui-size-xs);
+    }
   }
 
   .rcw-reports-list {
     display: flex;
     flex-direction: column;
     overflow-y: overlay;
-    gap: 7.5px;
-    margin-top: 7.5px;
+    gap: var(--iui-size-xs);
+    margin-top: var(--iui-size-xs);
   }
 }
 
-.rcw-button-container {
-  display: flex;
-}

package/src/widget/components/Reports.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { SvgAdd, SvgPlay, SvgRefresh } from "@itwin/itwinui-icons-react";
-import { Button, IconButton, Surface } from "@itwin/itwinui-react";
+import { Button, IconButton } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { CreateTypeFromInterface } from "./utils";
 import {
@@ -121,28 +121,31 @@ export const Reports = ({
 
   return (
     <>
-      <Surface className="rcw-reports-list-container">
+      <div className="rcw-reports-list-container">
         <div className="rcw-toolbar">
-          {onClickAddReport && (
-            <Button
-              startIcon={<SvgAdd />}
-              onClick={onClickAddReport}
-              styleType="high-visibility"
-            >
-              {ReportsConfigWidget.localization.getLocalizedString(
-                "ReportsConfigWidget:New"
-              )}
-            </Button>
-          )}
-          <IconButton
-            title={ReportsConfigWidget.localization.getLocalizedString(
-              "ReportsConfigWidget:UpdateDatasets"
+          <div className="rcw-button-spacing">
+            {onClickAddReport && (
+              <Button
+                startIcon={<SvgAdd />}
+                onClick={onClickAddReport}
+                styleType="high-visibility"
+                title="New Report"
+              >
+                {ReportsConfigWidget.localization.getLocalizedString(
+                  "ReportsConfigWidget:New"
+                )}
+              </Button>
             )}
-            onClick={updateDatasets}
-            disabled={selectedReportIds.length === 0}
-          >
-            <SvgPlay />
-          </IconButton>
+            <IconButton
+              title={ReportsConfigWidget.localization.getLocalizedString(
+                "ReportsConfigWidget:UpdateDatasets"
+              )}
+              onClick={updateDatasets}
+              disabled={selectedReportIds.length === 0}
+            >
+              <SvgPlay />
+            </IconButton>
+          </div>
           <div
             className="rcw-search-bar-container"
             data-testid="rcw-search-bar"
@@ -202,7 +205,7 @@ export const Reports = ({
             ))}
           </div>
         )}
-      </Surface>
+      </div>
       <DeleteModal
         entityName={showDeleteModal?.displayName}
         onClose={() => setShowDeleteModal(undefined)}

package/src/widget/components/ReportsContainer.scss

@@ -2,7 +2,6 @@
 * 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-reports-container {
   position: absolute;
@@ -10,9 +9,8 @@
   left: 0;
   display: flex;
   flex-direction: column;
-  padding: $iui-baseline $iui-m;
+  padding: var(--iui-size-s) var(--iui-size-m);
   box-sizing: border-box;
   height: 100%;
   overflow: auto;
-  gap: $iui-baseline;
 }

package/src/widget/components/SearchBar.scss

@@ -2,7 +2,6 @@
 * 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";
 
 @keyframes rcw-expand {
   0% {

package/src/widget/components/SearchBar.tsx

@@ -44,6 +44,7 @@ export const SearchBar = ({
           <IconButton
             onClick={() => setSearchBarClosing(true)}
             styleType="borderless"
+            title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ClearSearch")}
           >
             <SvgCloseSmall />
           </IconButton>
@@ -55,7 +56,11 @@ export const SearchBar = ({
       />
     </div>
   ) : (
-    <IconButton styleType="borderless" data-testid="rcw-search-button" onClick={() => setSearchBarOpened(true)}>
+    <IconButton
+      styleType="borderless"
+      data-testid="rcw-search-button"
+      title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:SearchReport")}
+      onClick={() => setSearchBarOpened(true)}>
       <SvgSearch />
     </IconButton>
   );

package/src/widget/components/SelectIModel.scss

@@ -2,15 +2,14 @@
 * 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-select-imodel {
   position: relative;
-  margin-bottom: $iui-baseline * 2;
+  margin-bottom: calc(var(--iui-size-s) * 2);
 
   .rcw-combobox {
     display: flex;
-    gap: $iui-s;
+    gap: var(--iui-size-xs);
     width: 100%;
   }
 }

package/src/widget/components/utils.scss

@@ -2,20 +2,28 @@
 * 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";
-@import "~@itwin/itwinui-css/scss/icon/index";
-@import "~@itwin/itwinui-css/scss/button/index";
 
 .rcw-widget-header-container {
   display: flex;
-  margin-bottom: $iui-baseline;
-  align-items: center;
+  margin-bottom: calc(var(--iui-size-s) * 2);
+
+  .rcw-chevron {
+    cursor: pointer;
+    align-self: center;
+    margin-right: var(--iui-size-xs);
+  }
+
+  .rcw-chevron-disabled {
+    fill: var(--iui-color-icon-muted);
+    cursor: not-allowed;
+    align-self: center;
+    margin-right: var(--iui-size-xs);
+  }
 
   .rcw-title {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    margin-bottom: 3px;
   }
 }
 
@@ -29,11 +37,11 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  gap: $iui-baseline;
+  gap: var(--iui-size-s);
   height: 100%;
 }
 
 .rcw-skeleton-block {
-  height: $iui-baseline * 3;
+  height: calc(var(--iui-size-s) * 3);
   width: 100%;
 }