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

package/src/widget/ReportsConfigUiProvider.tsx

@@ -3,14 +3,14 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import type {
-  AbstractWidgetProps,
   UiItemsProvider,
-} from "@itwin/appui-abstract";
+  Widget,
+} from "@itwin/appui-react";
 import {
   StagePanelLocation,
   StagePanelSection,
   StageUsage,
-} from "@itwin/appui-abstract";
+} from "@itwin/appui-react";
 import type { AccessToken } from "@itwin/core-bentley";
 
 import * as React from "react";
@@ -37,26 +37,19 @@ export class ReportsConfigProvider implements UiItemsProvider {
     stageUsage: string,
     location: StagePanelLocation,
     section?: StagePanelSection
-  ): ReadonlyArray<AbstractWidgetProps> {
-    const widgets: AbstractWidgetProps[] = [];
+  ): ReadonlyArray<Widget> {
+    const widgets: Widget[] = [];
     if (
       location === StagePanelLocation.Left &&
       section === StagePanelSection.Start &&
       stageUsage === StageUsage.General
     ) {
-      const ReportsWidget: AbstractWidgetProps = {
+      const ReportsWidget: Widget = {
         id: "reports-config-widget",
         label: ReportsConfigWidget.localization.getLocalizedString(
           "ReportsConfigWidget:ReportsConfig"
         ),
-        getWidgetContent: () => {
-          return (
-            <ReportsContainer
-              getAccessToken={this._getAccessToken}
-              baseUrl={this._baseUrl}
-            />
-          );
-        },
+        content: <ReportsContainer getAccessToken={this._getAccessToken} baseUrl={this._baseUrl} />,
       };
 
       widgets.push(ReportsWidget);

package/src/widget/components/ActionPanel.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-action-panel {
   display: flex;
   justify-content: right;
-  padding: $iui-baseline * 2 $iui-m $iui-baseline;
-  gap: $iui-s;
+  padding: calc(var(--iui-size-s) * 2) var(--iui-size-m) var(--iui-size-s);
+  gap: var(--iui-size-xs);
 }

package/src/widget/components/ActionPanel.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 { Button } from "@itwin/itwinui-react";
 import * as React from "react";
 import { ReportsConfigWidget } from "../../ReportsConfigWidget";
@@ -11,7 +11,7 @@ import { LoadingSpinner } from "./utils";
 export interface ActionPanelProps {
   actionLabel: string;
   onAction: () => Promise<void>;
-  onCancel: () => void;
+  onCancel?: () => void;
   isCancelDisabled?: boolean;
   isSavingDisabled?: boolean;
   isLoading?: boolean;
@@ -24,7 +24,7 @@ const ActionPanel = ({
   isCancelDisabled = false,
   isSavingDisabled = false,
   isLoading = false,
-}: ActionPanelProps): JSX.Element => {
+}: ActionPanelProps): React.ReactElement => {
   return (
     <div className="rcw-action-panel">
       {isLoading && <LoadingSpinner />}
@@ -35,16 +35,18 @@ const ActionPanel = ({
       >
         {actionLabel}
       </Button>
-      <Button
-        styleType="default"
-        type="button"
-        onClick={onCancel}
-        disabled={isCancelDisabled || isLoading}
-      >
-        {ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:Cancel"
-        )}
-      </Button>
+      {onCancel && (
+        <Button
+          styleType="default"
+          type="button"
+          onClick={onCancel}
+          disabled={isCancelDisabled || isLoading}
+        >
+          {ReportsConfigWidget.localization.getLocalizedString(
+            "ReportsConfigWidget:Cancel"
+          )}
+        </Button>
+      )}
     </div>
   );
 };

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

@@ -3,35 +3,33 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import { Modal, Table, tableFilters } from "@itwin/itwinui-react";
-import React, { useEffect, useMemo, useState } from "react";
-import type { Mapping } from "@itwin/insights-client";
-import { MappingsClient, REPORTING_BASE_PATH, ReportsClient } from "@itwin/insights-client";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Mapping, MappingsClient } from "@itwin/insights-client";
 import ActionPanel from "./ActionPanel";
 import "./AddMappingsModal.scss";
 import { LocalizedTablePaginator } from "./LocalizedTablePaginator";
 import type { ReportMappingAndMapping } from "./ReportMappings";
-import type { ReportsApiConfig } from "../context/ReportsApiConfigContext";
-import { useReportsApiConfig } from "../context/ReportsApiConfigContext";
+import { useReportsConfigApi } from "../context/ReportsConfigApiContext";
 import { SelectIModel } from "./SelectIModel";
 import type { CreateTypeFromInterface } from "./utils";
-import { generateUrl, handleError } 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>;
 
 const fetchMappings = async (
-  setMappings: React.Dispatch<React.SetStateAction<Mapping[]>>,
+  setMappings: (mappings: Mapping[]) => void,
   iModelId: string,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-  apiContext: ReportsApiConfig
+  setIsLoading: (isLoading: boolean) => void,
+  mappingsClient: MappingsClient,
+  getAccessToken: () => Promise<AccessToken>
 ) => {
   try {
     setIsLoading(true);
-    const mappingsClientApi = new MappingsClient(
-      generateUrl(REPORTING_BASE_PATH, apiContext.baseUrl)
-    );
-    const accessToken = await apiContext.getAccessToken();
-    const mappings = await mappingsClientApi.getMappings(
+    const accessToken = await getAccessToken();
+    const mappings = await mappingsClient.getMappings(
       accessToken,
       iModelId
     );
@@ -43,24 +41,26 @@ const fetchMappings = async (
   }
 };
 
-interface AddMappingsModalProps {
+export interface AddMappingsModalProps {
   reportId: string;
   existingMappings: ReportMappingAndMapping[];
   show: boolean;
-  returnFn: () => Promise<void>;
+  onClose: () => Promise<void>;
+  defaultIModelId?: string;
 }
 
 export const AddMappingsModal = ({
   reportId,
   existingMappings,
   show,
-  returnFn,
+  onClose,
+  defaultIModelId,
 }: AddMappingsModalProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [selectedMappings, setSelectedMappings] = useState<Mapping[]>([]);
-  const [selectedIModelId, setSelectediModelId] = useState<string>("");
+  const selectedMappings = useRef<Mapping[]>([]);
+  const [selectedIModelId, setSelectediModelId] = useState<string | undefined>(defaultIModelId);
   const [mappings, setMappings] = useState<Mapping[]>([]);
-  const apiConfig = useReportsApiConfig();
+  const { getAccessToken, mappingsClient, reportsClient } = useReportsConfigApi();
 
   useEffect(() => {
     if (selectedIModelId) {
@@ -68,35 +68,30 @@ export const AddMappingsModal = ({
         setMappings,
         selectedIModelId,
         setIsLoading,
-        apiConfig
+        mappingsClient,
+        getAccessToken
       );
     }
-  }, [apiConfig, selectedIModelId, setIsLoading]);
+  }, [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(),
+      }],
     []
   );
 
@@ -104,18 +99,15 @@ export const AddMappingsModal = ({
     try {
       if (!selectedIModelId) return;
       setIsLoading(true);
-      const reportsClientApi = new ReportsClient(
-        generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl)
-      );
-      const accessToken = await apiConfig.getAccessToken();
-      for (const mapping of selectedMappings) {
-        await reportsClientApi.createReportMapping(accessToken, reportId, {
+      const accessToken = await getAccessToken();
+      for (const mapping of selectedMappings.current) {
+        await reportsClient.createReportMapping(accessToken, reportId, {
           imodelId: selectedIModelId,
           mappingId: mapping.id,
         });
       }
 
-      await returnFn();
+      await onClose();
     } catch (error: any) {
       handleError(error.status);
     } finally {
@@ -123,6 +115,14 @@ export const AddMappingsModal = ({
     }
   };
 
+  const onSelect = useCallback((selectData: Mapping[] | undefined) => {
+    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]);
+
   return (
     <Modal
       title={ReportsConfigWidget.localization.getLocalizedString(
@@ -131,7 +131,7 @@ export const AddMappingsModal = ({
       isOpen={show}
       isDismissible={!isLoading}
       onClose={async () => {
-        await returnFn();
+        await onClose();
       }}
       style={{ display: "flex", flexDirection: "column", maxHeight: "77vh" }}
     >
@@ -141,7 +141,7 @@ export const AddMappingsModal = ({
           setSelectedIModelId={setSelectediModelId}
         />
         <Table<MappingType>
-          data={isLoading ? [] : mappings}
+          data={tableData}
           columns={mappingsColumns}
           className="rcw-add-mappings-table"
           emptyTableContent={ReportsConfigWidget.localization.getLocalizedString(
@@ -150,22 +150,17 @@ export const AddMappingsModal = ({
           isSortable
           isSelectable
           isLoading={isLoading}
-          isRowDisabled={(rowData) =>
-            existingMappings.some((v) => v.mappingId === rowData.id)
-          }
-          onSelect={(selectData: Mapping[] | undefined) => {
-            selectData && setSelectedMappings(selectData);
-          }}
+          isRowDisabled={isRowDisabled}
+          onSelect={onSelect}
           paginatorRenderer={LocalizedTablePaginator}
         />
       </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}
-        onCancel={returnFn}
-        isSavingDisabled={selectedMappings.length === 0}
         isLoading={isLoading}
       />
     </Modal>

package/src/widget/components/BulkExtractor.ts

@@ -2,12 +2,12 @@
 * 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 { ExtractorState } from "@itwin/insights-client";
+import type { ExtractionClient, ReportMapping, ReportsClient } from "@itwin/insights-client";
+import { handleError } from "./utils";
 import { ExtractionStates } from "./ExtractionStatus";
 import { STATUS_CHECK_INTERVAL } from "./Constants";
+import type { AccessToken } from "@itwin/core-bentley";
 
 export type ReportMappingAndMapping = ReportMapping & {
   mappingName: string;
@@ -15,7 +15,7 @@ export type ReportMappingAndMapping = ReportMapping & {
   iModelName: string;
 };
 
-export default class BulkExtractor {
+export class BulkExtractor {
   private _reportsClientApi: ReportsClient;
   private _extractionClientApi: ExtractionClient;
   private _accessToken: () => Promise<string>;
@@ -31,14 +31,15 @@ export default class BulkExtractor {
   private _iModels: string[] = [];
 
   constructor(
-    apiConfig: ReportsApiConfig,
+    reportsClient: ReportsClient,
+    extractionClient: ExtractionClient,
+    getAccessToken: () => Promise<AccessToken>,
     successfulExtractionToast: (iModelName: string, odataFeedUrl: string) => void,
     failedExtractionToast: (iModelName: string) => void,
   ) {
-    const url = generateUrl(REPORTING_BASE_PATH, apiConfig.baseUrl);
-    this._reportsClientApi = new ReportsClient(url);
-    this._extractionClientApi = new ExtractionClient(url);
-    this._accessToken = apiConfig.getAccessToken;
+    this._reportsClientApi = reportsClient;
+    this._extractionClientApi = extractionClient;
+    this._accessToken = getAccessToken;
     this._successfulExtractionToast = successfulExtractionToast;
     this._failedExtractionToast = failedExtractionToast;
   }

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";
@@ -16,32 +16,30 @@ import "./DeleteModal.scss";
 import { handleError, LoadingSpinner } from "./utils";
 
 export interface DeleteModalProps {
-  entityName: string;
-  show: boolean;
-  setShow: React.Dispatch<React.SetStateAction<boolean>>;
+  entityName?: string;
+  onClose: () => void;
   onDelete: () => Promise<void>;
   refresh: () => Promise<void>;
 }
 
 export const DeleteModal = ({
   entityName,
-  show,
-  setShow,
+  onClose,
   onDelete,
   refresh,
 }: DeleteModalProps) => {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
 
   const deleteCallback = async () => {
     try {
-      setIsLoading(true);
+      setIsDeleting(true);
       await onDelete();
-      setShow(false);
       await refresh();
+      onClose();
     } catch (error: any) {
       handleError(error.status);
     } finally {
-      setIsLoading(false);
+      setIsDeleting(false);
     }
   };
 
@@ -50,24 +48,22 @@ export const DeleteModal = ({
       title={ReportsConfigWidget.localization.getLocalizedString(
         "ReportsConfigWidget:Confirm"
       )}
-      isOpen={show}
-      isDismissible={!isLoading}
-      onClose={() => {
-        setShow(false);
-      }}
+      isOpen={!!entityName}
+      isDismissible={!isDeleting}
+      onClose={onClose}
     >
       <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>
       <ModalButtonBar>
-        {isLoading && (
+        {isDeleting && (
           <div className="rcw-loading-delete" data-testid="rcw-loading-delete">
             <LoadingSpinner />
           </div>
@@ -75,7 +71,7 @@ export const DeleteModal = ({
         <Button
           styleType="high-visibility"
           onClick={deleteCallback}
-          disabled={isLoading}
+          disabled={isDeleting}
         >
           {ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:Delete"
@@ -83,10 +79,8 @@ export const DeleteModal = ({
         </Button>
         <Button
           styleType="default"
-          onClick={() => {
-            setShow(false);
-          }}
-          disabled={isLoading}
+          onClick={onClose}
+          disabled={isDeleting}
         >
           {ReportsConfigWidget.localization.getLocalizedString(
             "ReportsConfigWidget:Cancel"

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,17 +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;
-    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;
@@ -37,16 +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-);
   }
 }