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

package/src/test/Reports.test.tsx

@@ -1,15 +1,10 @@
 /*---------------------------------------------------------------------------------------------
-* 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 "@testing-library/jest-dom";
-import {
-  render,
-  screen,
-  waitForElementToBeRemoved,
-  within,
-} from "../test/test-utils";
+import { render, screen, waitForElementToBeRemoved, within } from "../test/test-utils";
 import { Reports } from "../widget/components/Reports";
 import { ReportsConfigWidget } from "../ReportsConfigWidget";
 import faker from "@faker-js/faker";
@@ -19,20 +14,17 @@ import { EmptyLocalization } from "@itwin/core-common";
 import * as moq from "typemoq";
 
 const reportsFactory = (): ReportCollection => ({
-  reports: Array.from(
-    { length: faker.datatype.number({ min: 3, max: 5 }) },
-    (_, index) => ({
-      id: `${faker.datatype.uuid()}`,
-      displayName: `mOcKRePoRT${index}`,
-      description: `mOcKRePoRTDeScRiPtIoN${index}`,
-      deleted: false,
-      _links: {
-        project: {
-          href: "",
-        },
+  reports: Array.from({ length: faker.datatype.number({ min: 3, max: 5 }) }, (_, index) => ({
+    id: `${faker.datatype.uuid()}`,
+    displayName: `mOcKRePoRT${index}`,
+    description: `mOcKRePoRTDeScRiPtIoN${index}`,
+    deleted: false,
+    _links: {
+      project: {
+        href: "",
       },
-    })
-  ),
+    },
+  })),
   _links: {
     next: undefined,
     self: {
@@ -78,7 +70,7 @@ describe("Reports View", () => {
     mockGetReports.mockReturnValueOnce([]);
 
     const onClickAddMock = jest.fn();
-    const { user } = render(<Reports onClickAddReport={onClickAddMock} />,  { reportsClient: mockReportsClient.object });
+    const { user } = render(<Reports onClickAddReport={onClickAddMock} />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
     const newButton = screen.getByRole("button", {
@@ -92,7 +84,7 @@ describe("Reports View", () => {
     const mockedReports: ReportCollection = reportsFactory();
     mockGetReports.mockReturnValueOnce(mockedReports.reports);
 
-    render(<Reports />,  { reportsClient: mockReportsClient.object });
+    render(<Reports />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
     const horizontalTiles = screen.getAllByTestId("horizontal-tile");
@@ -101,16 +93,8 @@ describe("Reports View", () => {
 
     for (const [index, horizontalTile] of horizontalTiles.entries()) {
       const reportMappingTile = within(horizontalTile);
-      expect(
-        reportMappingTile.getByText(
-          mockedReports?.reports[index].displayName ?? ""
-        )
-      ).toBeInTheDocument();
-      expect(
-        reportMappingTile.getByTitle(
-          mockedReports?.reports[index].description ?? ""
-        )
-      ).toBeInTheDocument();
+      expect(reportMappingTile.getByText(mockedReports?.reports[index].displayName ?? "")).toBeInTheDocument();
+      expect(reportMappingTile.getByTitle(mockedReports?.reports[index].description ?? "")).toBeInTheDocument();
     }
   });
 
@@ -118,13 +102,11 @@ describe("Reports View", () => {
     const mockedReports: ReportCollection = reportsFactory();
     mockGetReports.mockReturnValueOnce(mockedReports.reports);
     const onClickModifyMock = jest.fn();
-    const { user } = render(<Reports onClickReportModify={onClickModifyMock} />,  { reportsClient: mockReportsClient.object });
+    const { user } = render(<Reports onClickReportModify={onClickModifyMock} />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
 
-    const firstMenuDropdown = within(
-      screen.getAllByTestId(/tile-action-button/i)[0]
-    ).getByRole("button");
+    const firstMenuDropdown = within(screen.getAllByTestId(/tile-action-button/i)[0]).getByRole("button");
     await user.click(firstMenuDropdown);
     const modifyButton = screen.getByRole("menuitem", { name: /modify/i });
     await user.click(modifyButton);
@@ -137,13 +119,11 @@ describe("Reports View", () => {
 
     mockGetReports.mockReturnValue(mockedReports.reports);
 
-    const { user } = render(<Reports />,  { reportsClient: mockReportsClient.object });
+    const { user } = render(<Reports />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
 
-    const firstMenuDropdown = within(
-      screen.getAllByTestId(/tile-action-button/i)[0]
-    ).getByRole("button");
+    const firstMenuDropdown = within(screen.getAllByTestId(/tile-action-button/i)[0]).getByRole("button");
     await user.click(firstMenuDropdown);
     const removeButton = screen.getByRole("menuitem", { name: /remove/i });
     await user.click(removeButton);
@@ -178,38 +158,26 @@ describe("Reports View", () => {
     });
 
     // Be an exact match on display name.
-    await userEvent.type(
-      searchInput,
-      mockedReports.reports[0].displayName
-    );
+    await userEvent.type(searchInput, mockedReports.reports[0].displayName);
     expect(screen.getAllByTestId("horizontal-tile")).toHaveLength(1);
-    expect(
-      screen.getByText(mockedReports.reports[0].displayName)
-    ).toBeInTheDocument();
+    expect(screen.getByText(mockedReports.reports[0].displayName)).toBeInTheDocument();
 
     // Be an exact match on description.
     await userEvent.clear(searchInput);
-    await userEvent.type(
-      searchInput,
-      mockedReports.reports[0].description ?? ""
-    );
+    await userEvent.type(searchInput, mockedReports.reports[0].description ?? "");
     expect(screen.getAllByTestId("horizontal-tile")).toHaveLength(1);
-    expect(
-      screen.getByText(mockedReports.reports[0].displayName)
-    ).toBeInTheDocument();
+    expect(screen.getByText(mockedReports.reports[0].displayName)).toBeInTheDocument();
   });
 
   it("modify a report", async () => {
     const mockedReports: ReportCollection = reportsFactory();
     mockGetReports.mockReturnValueOnce(mockedReports.reports);
     const onClickModifyMock = jest.fn();
-    const { user } = render(<Reports onClickReportModify={onClickModifyMock} />,  { reportsClient: mockReportsClient.object });
+    const { user } = render(<Reports onClickReportModify={onClickModifyMock} />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
 
-    const firstMenuDropdown = within(
-      screen.getAllByTestId(/tile-action-button/i)[0]
-    ).getByRole("button");
+    const firstMenuDropdown = within(screen.getAllByTestId(/tile-action-button/i)[0]).getByRole("button");
     await user.click(firstMenuDropdown);
     const modifyButton = screen.getByRole("menuitem", { name: /modify/i });
     await user.click(modifyButton);
@@ -220,13 +188,11 @@ describe("Reports View", () => {
     const mockedReports: ReportCollection = reportsFactory();
     mockGetReports.mockReturnValueOnce(mockedReports.reports);
     const onClickTitleMock = jest.fn();
-    const { user } = render(<Reports onClickReportTitle={onClickTitleMock} />,  { reportsClient: mockReportsClient.object });
+    const { user } = render(<Reports onClickReportTitle={onClickTitleMock} />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
 
-    const reportName = screen.getByText(
-      mockedReports.reports[0].displayName
-    );
+    const reportName = screen.getByText(mockedReports.reports[0].displayName);
     await user.click(reportName);
     expect(onClickTitleMock).toBeCalled();
   });

package/src/test/WidgetHeader.test.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 "@testing-library/jest-dom";
 import { render, screen } from "../test/test-utils";

package/src/test/test-utils.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 { render as rtlRender } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -14,6 +14,9 @@ export const mockAccessToken = async () => "Bearer eyJhbGci";
 export const mockIModelId1 = "mockIModelId1";
 export const mockIModelId2 = "mockIModelId2";
 
+export const mockMappingId1 = "mockMappingId1";
+export const mockMappingId2 = "mockMappingId2";
+
 export const mockReportId = "mockReportId";
 export const mockITwinId: string = "mockiTwinId";
 
@@ -72,17 +75,24 @@ export const mockIModelsResponse = [
   },
 ];
 
+export const mockExtractionRequestDetails = [
+  {
+    iModelId: mockIModelId1,
+    mappings: [{ id: mockMappingId1 }],
+  },
+  {
+    iModelId: mockIModelId2,
+    mappings: [{ id: mockMappingId2 }],
+  },
+];
+
 interface WrapperProps {
   children?: React.ReactNode;
 }
 
 function render(ui: React.ReactElement, contextProps?: Partial<ReportsConfigContextProps>, { ...options } = {}) {
   const Wrapper = ({ children }: WrapperProps) => (
-    <ReportsConfigContext
-      getAccessToken={mockAccessToken}
-      iTwinId={contextProps?.iTwinId ?? mockITwinId}
-      {...contextProps}
-    >
+    <ReportsConfigContext getAccessToken={mockAccessToken} iTwinId={contextProps?.iTwinId ?? mockITwinId} {...contextProps}>
       {children}
     </ReportsConfigContext>
   );

package/src/widget/ReportsConfigUiProvider.tsx

@@ -1,55 +1,36 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import type {
-  UiItemsProvider,
-  Widget,
-} from "@itwin/appui-react";
-import {
-  StagePanelLocation,
-  StagePanelSection,
-  StageUsage,
-} from "@itwin/appui-react";
-import type { AccessToken } from "@itwin/core-bentley";
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import type { UiItemsProvider, Widget } from "@itwin/appui-react";
+import { StagePanelLocation, StagePanelSection, StageUsage } from "@itwin/appui-react";
 
 import * as React from "react";
 import { ReportsConfigWidget } from "../ReportsConfigWidget";
+import type { ReportsContainerProps } from "./components/ReportsContainer";
 import ReportsContainer from "./components/ReportsContainer";
 
+/**
+ * @internal
+ */
 export const REPORTS_CONFIG_BASE_URL = "https://api.bentley.com";
 
+/**
+ * Reports Config Widget UI Provider
+ * @public
+ */
 export class ReportsConfigProvider implements UiItemsProvider {
   public readonly id = "ReportsConfigProvider";
-  private readonly _getAccessToken?: () => Promise<AccessToken>;
-  private readonly _baseUrl: string;
 
-  constructor(
-    getAccessToken?: () => Promise<AccessToken>,
-    baseUrl: string = REPORTS_CONFIG_BASE_URL
-  ) {
-    this._getAccessToken = getAccessToken;
-    this._baseUrl = baseUrl;
-  }
+  constructor(private _props?: ReportsContainerProps) { }
 
-  public provideWidgets(
-    _stageId: string,
-    stageUsage: string,
-    location: StagePanelLocation,
-    section?: StagePanelSection
-  ): ReadonlyArray<Widget> {
+  public provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection): ReadonlyArray<Widget> {
     const widgets: Widget[] = [];
-    if (
-      location === StagePanelLocation.Left &&
-      section === StagePanelSection.Start &&
-      stageUsage === StageUsage.General
-    ) {
+    if (location === StagePanelLocation.Left && section === StagePanelSection.Start && stageUsage === StageUsage.General) {
       const ReportsWidget: Widget = {
         id: "reports-config-widget",
-        label: ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:ReportsConfig"
-        ),
-        content: <ReportsContainer getAccessToken={this._getAccessToken} baseUrl={this._baseUrl} />,
+        label: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ReportsConfig"),
+        content: <ReportsContainer {...this._props} />,
       };
 
       widgets.push(ReportsWidget);

package/src/widget/components/ActionPanel.tsx

@@ -28,23 +28,12 @@ const ActionPanel = ({
   return (
     <div className="rcw-action-panel">
       {isLoading && <LoadingSpinner />}
-      <Button
-        disabled={isSavingDisabled || isLoading}
-        styleType="high-visibility"
-        onClick={onAction}
-      >
+      <Button disabled={isSavingDisabled || isLoading} styleType="high-visibility" onClick={onAction}>
         {actionLabel}
       </Button>
       {onCancel && (
-        <Button
-          styleType="default"
-          type="button"
-          onClick={onCancel}
-          disabled={isCancelDisabled || isLoading}
-        >
-          {ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:Cancel"
-          )}
+        <Button styleType="default" type="button" onClick={onCancel} disabled={isCancelDisabled || isLoading}>
+          {ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Cancel")}
         </Button>
       )}
     </div>

package/src/widget/components/AddMappingsModal.scss

@@ -15,4 +15,4 @@
     flex-grow: 1;
     overflow: auto;
   }
-}
+}

package/src/widget/components/AddMappingsModal.tsx

@@ -1,10 +1,10 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 import { Modal, Table, tableFilters } from "@itwin/itwinui-react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { Mapping, MappingsClient } from "@itwin/insights-client";
+import type { IMappingsClient, Mapping } from "@itwin/insights-client";
 import ActionPanel from "./ActionPanel";
 import "./AddMappingsModal.scss";
 import { LocalizedTablePaginator } from "./LocalizedTablePaginator";
@@ -23,17 +23,14 @@ const fetchMappings = async (
   setMappings: (mappings: Mapping[]) => void,
   iModelId: string,
   setIsLoading: (isLoading: boolean) => void,
-  mappingsClient: MappingsClient,
-  getAccessToken: () => Promise<AccessToken>
+  mappingsClient: IMappingsClient,
+  getAccessToken: () => Promise<AccessToken>,
 ) => {
   try {
     setIsLoading(true);
     const accessToken = await getAccessToken();
-    const mappings = await mappingsClient.getMappings(
-      accessToken,
-      iModelId
-    );
-    setMappings(mappings);
+    const mappings = await mappingsClient.getMappings(accessToken, iModelId);
+    setMappings(mappings.mappings);
   } catch (error: any) {
     handleError(error.status);
   } finally {
@@ -49,13 +46,7 @@ export interface AddMappingsModalProps {
   defaultIModelId?: string;
 }
 
-export const AddMappingsModal = ({
-  reportId,
-  existingMappings,
-  show,
-  onClose,
-  defaultIModelId,
-}: AddMappingsModalProps) => {
+export const AddMappingsModal = ({ reportId, existingMappings, show, onClose, defaultIModelId }: AddMappingsModalProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const selectedMappings = useRef<Mapping[]>([]);
   const [selectedIModelId, setSelectediModelId] = useState<string | undefined>(defaultIModelId);
@@ -64,13 +55,7 @@ export const AddMappingsModal = ({
 
   useEffect(() => {
     if (selectedIModelId) {
-      void fetchMappings(
-        setMappings,
-        selectedIModelId,
-        setIsLoading,
-        mappingsClient,
-        getAccessToken
-      );
+      void fetchMappings(setMappings, selectedIModelId, setIsLoading, mappingsClient, getAccessToken);
     }
   }, [getAccessToken, mappingsClient, selectedIModelId, setIsLoading]);
 
@@ -78,21 +63,18 @@ export const AddMappingsModal = ({
     (): Column<CreateTypeFromInterface<Mapping>>[] => [
       {
         id: "mappingName",
-        Header: ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:MappingName"
-        ),
+        Header: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:MappingName"),
         accessor: "mappingName",
         Filter: tableFilters.TextFilter(),
       },
       {
         id: "description",
-        Header: ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:Description"
-        ),
+        Header: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Description"),
         accessor: "description",
         Filter: tableFilters.TextFilter(),
-      }],
-    []
+      },
+    ],
+    [],
   );
 
   const onSave = async () => {
@@ -119,15 +101,12 @@ export const AddMappingsModal = ({
     if (selectData) selectedMappings.current = selectData;
   }, []);
 
-  const tableData = useMemo(() => isLoading ? [] : mappings, [isLoading, mappings]);
-  const isRowDisabled = useCallback((rowData: MappingType) =>
-    existingMappings.some((v) => v.mappingId === rowData.id), [existingMappings]);
+  const tableData = useMemo(() => (isLoading ? [] : mappings), [isLoading, mappings]);
+  const isRowDisabled = useCallback((rowData: MappingType) => existingMappings.some((v) => v.mappingId === rowData.id), [existingMappings]);
 
   return (
     <Modal
-      title={ReportsConfigWidget.localization.getLocalizedString(
-        "ReportsConfigWidget:AddMappings"
-      )}
+      title={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:AddMappings")}
       isOpen={show}
       isDismissible={!isLoading}
       onClose={async () => {
@@ -136,17 +115,12 @@ export const AddMappingsModal = ({
       style={{ display: "flex", flexDirection: "column", maxHeight: "77vh" }}
     >
       <div className="rcw-add-mappings-container">
-        <SelectIModel
-          selectedIModelId={selectedIModelId}
-          setSelectedIModelId={setSelectediModelId}
-        />
+        <SelectIModel selectedIModelId={selectedIModelId} setSelectedIModelId={setSelectediModelId} />
         <Table<MappingType>
           data={tableData}
           columns={mappingsColumns}
           className="rcw-add-mappings-table"
-          emptyTableContent={ReportsConfigWidget.localization.getLocalizedString(
-            "ReportsConfigWidget:NoMappingsAvailable"
-          )}
+          emptyTableContent={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:NoMappingsAvailable")}
           isSortable
           isSelectable
           isLoading={isLoading}
@@ -156,13 +130,7 @@ export const AddMappingsModal = ({
         />
       </div>
       {/* Add button permanently enabled as a workaround to the warning stating that the table and parent component are being rendered at the same time. */}
-      <ActionPanel
-        actionLabel={ReportsConfigWidget.localization.getLocalizedString(
-          "ReportsConfigWidget:Add"
-        )}
-        onAction={onSave}
-        isLoading={isLoading}
-      />
+      <ActionPanel actionLabel={ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:Add")} onAction={onSave} isLoading={isLoading} />
     </Modal>
   );
 };