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

package/src/test/Reports.test.tsx

@@ -1,40 +1,30 @@
 /*---------------------------------------------------------------------------------------------
-* 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 { rest } from "msw";
-import { setupServer } from "msw/node";
 import faker from "@faker-js/faker";
-import type { ReportCollection } from "@itwin/insights-client";
+import type { ReportCollection, ReportsClient } from "@itwin/insights-client";
 import userEvent from "@testing-library/user-event";
-import { REPORTS_CONFIG_BASE_URL } from "../widget/ReportsConfigUiProvider";
 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: {
@@ -43,38 +33,30 @@ const reportsFactory = (): ReportCollection => ({
   },
 });
 
-const server = setupServer();
+const mockGetReports = jest.fn();
+const mockDeleteReport = jest.fn();
+
+const mockReportsClient = moq.Mock.ofType<ReportsClient>();
 
 beforeAll(async () => {
   const localization = new EmptyLocalization();
   await ReportsConfigWidget.initialize(localization);
-  server.listen();
-});
 
-afterAll(() => {
-  server.close();
+  mockReportsClient.setup(async (x) => x.getReports(moq.It.isAny(), moq.It.isAny())).returns(mockGetReports);
+  mockReportsClient.setup(async (x) => x.deleteReport(moq.It.isAny(), moq.It.isAny())).returns(mockDeleteReport);
 });
 
-afterEach(() => server.resetHandlers());
+afterEach(() => {
+  mockGetReports.mockReset();
+  mockDeleteReport.mockReset();
+});
 
 describe("Reports View", () => {
   it("call to action button should be clickable with no reports", async () => {
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(500),
-            ctx.status(200),
-            ctx.json({ reports: [] })
-          );
-        }
-      )
-    );
-
+    mockGetReports.mockReturnValueOnce([]);
     const onClickAddMock = jest.fn();
 
-    const { user } = render(<Reports onClickAddReport={onClickAddMock} />);
+    const { user } = render(<Reports onClickAddReport={onClickAddMock} />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
     const ctaButton = screen.getByRole("button", {
@@ -85,21 +67,10 @@ describe("Reports View", () => {
   });
 
   it("be able to add new report", async () => {
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports`,
-        async (_req, res, ctx) => {
-          return res(
-            ctx.delay(500),
-            ctx.status(200),
-            ctx.json({ reports: [] })
-          );
-        }
-      )
-    );
+    mockGetReports.mockReturnValueOnce([]);
 
     const onClickAddMock = jest.fn();
-    const { user } = render(<Reports onClickAddReport={onClickAddMock} />);
+    const { user } = render(<Reports onClickAddReport={onClickAddMock} />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
     const newButton = screen.getByRole("button", {
@@ -111,16 +82,9 @@ describe("Reports View", () => {
 
   it("list all reports", async () => {
     const mockedReports: ReportCollection = reportsFactory();
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports`,
-        async (_req, res, ctx) => {
-          return res(ctx.delay(500), ctx.status(200), ctx.json(mockedReports));
-        }
-      )
-    );
+    mockGetReports.mockReturnValueOnce(mockedReports.reports);
 
-    render(<Reports />);
+    render(<Reports />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
     const horizontalTiles = screen.getAllByTestId("horizontal-tile");
@@ -129,37 +93,20 @@ 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();
     }
   });
 
   it("able to modify a report", async () => {
     const mockedReports: ReportCollection = reportsFactory();
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports`,
-        async (_req, res, ctx) => {
-          return res(ctx.delay(500), ctx.status(200), ctx.json(mockedReports));
-        }
-      )
-    );
+    mockGetReports.mockReturnValueOnce(mockedReports.reports);
     const onClickModifyMock = jest.fn();
-    const { user } = render(<Reports onClickReportModify={onClickModifyMock} />);
+    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);
@@ -169,33 +116,14 @@ describe("Reports View", () => {
 
   it("remove a report", async () => {
     const mockedReports: ReportCollection = reportsFactory();
-    const mockedReportsOriginalLength = mockedReports.reports.length;
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports`,
-        async (_req, res, ctx) => {
-          return res(ctx.delay(200), ctx.status(200), ctx.json(mockedReports));
-        }
-      ),
-      rest.delete(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports/${mockedReports.reports[0].id
-        }`,
-        async (_req, res, ctx) => {
-          mockedReports.reports = mockedReports.reports.filter(
-            (report) => report.id !== mockedReports.reports[0].id
-          );
-          return res(ctx.delay(100), ctx.status(204));
-        }
-      )
-    );
-
-    const { user } = render(<Reports />);
+
+    mockGetReports.mockReturnValue(mockedReports.reports);
+
+    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);
@@ -208,29 +136,17 @@ describe("Reports View", () => {
 
     await user.click(deleteButton);
 
-    await waitForElementToBeRemoved(() =>
-      screen.getByTestId(/rcw-loading-delete/i)
-    );
     await waitForElementToBeRemoved(() => screen.getByRole("dialog"));
 
-    // Should be one less report
-    expect(screen.getAllByTestId("horizontal-tile")).toHaveLength(
-      mockedReportsOriginalLength - 1
-    );
+    expect(mockDeleteReport).toBeCalled();
+    // Two calls, when it is first rendered and when it is refreshed.
+    expect(mockGetReports).toBeCalledTimes(2);
   });
 
   it("search for a report", async () => {
     const mockedReports: ReportCollection = reportsFactory();
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports`,
-        async (_req, res, ctx) => {
-          return res(ctx.delay(200), ctx.status(200), ctx.json(mockedReports));
-        }
-      )
-    );
-
-    const { user } = render(<Reports />);
+    mockGetReports.mockReturnValueOnce(mockedReports.reports);
+    const { user } = render(<Reports />, { reportsClient: mockReportsClient.object });
 
     await waitForElementToBeRemoved(() => screen.getByText(/loading/i));
 
@@ -242,45 +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();
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports`,
-        async (_req, res, ctx) => {
-          return res(ctx.delay(200), ctx.status(200), ctx.json(mockedReports));
-        }
-      )
-    );
+    mockGetReports.mockReturnValueOnce(mockedReports.reports);
     const onClickModifyMock = jest.fn();
-    const { user } = render(<Reports onClickReportModify={onClickModifyMock} />);
+    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);
@@ -289,22 +186,13 @@ describe("Reports View", () => {
 
   it("click a report", async () => {
     const mockedReports: ReportCollection = reportsFactory();
-    server.use(
-      rest.get(
-        `${REPORTS_CONFIG_BASE_URL}/insights/reporting/reports`,
-        async (_req, res, ctx) => {
-          return res(ctx.delay(200), ctx.status(200), ctx.json(mockedReports));
-        }
-      )
-    );
+    mockGetReports.mockReturnValueOnce(mockedReports.reports);
     const onClickTitleMock = jest.fn();
-    const { user } = render(<Reports onClickReportTitle={onClickTitleMock} />);
+    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,27 +1,98 @@
 /*---------------------------------------------------------------------------------------------
-* 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";
 import type { ReportsConfigContextProps } from "../widget/components/ReportsConfigContext";
 import { ReportsConfigContext } from "../widget/components/ReportsConfigContext";
+import { IModelState } from "@itwin/imodels-client-management";
 
 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";
+
+export const mockIModelsResponse = [
+  {
+    iModel: {
+      id: mockIModelId1,
+      displayName: "rAnDoMdIsPlAynAmE1",
+      name: "rAnDomName1",
+      description: "rAnDoMDeScRiPtIoN1",
+      createdDateTime: "2021-10-04T22:13:50.397Z",
+      state: IModelState.Initialized,
+      iTwinId: mockITwinId,
+      extent: null,
+      getCreator: async () => undefined,
+      _links: {
+        creator: {
+          href: "",
+        },
+        namedVersions: {
+          href: "",
+        },
+        changesets: {
+          href: "",
+        },
+        upload: undefined,
+        complete: undefined,
+      },
+    },
+  },
+  {
+    iModel: {
+      id: mockIModelId2,
+      displayName: "rAnDoMdIsPlAynAmE2",
+      name: "rAnDomName2",
+      description: "rAnDoMDeScRiPtIoN2",
+      createdDateTime: "2021-10-04T22:13:50.397Z",
+      state: IModelState.Initialized,
+      iTwinId: mockITwinId,
+      extent: null,
+      getCreator: async () => undefined,
+      _links: {
+        creator: {
+          href: "",
+        },
+        namedVersions: {
+          href: "",
+        },
+        changesets: {
+          href: "",
+        },
+        upload: undefined,
+        complete: undefined,
+      },
+    },
+  },
+];
+
+export const mockExtractionRequestDetails = [
+  {
+    iModelId: mockIModelId1,
+    mappings: [{ id: mockMappingId1 }],
+  },
+  {
+    iModelId: mockIModelId2,
+    mappings: [{ id: mockMappingId2 }],
+  },
+];
+
 interface WrapperProps {
   children?: React.ReactNode;
 }
-export const mockITwinId: string = "mockiTwinId";
 
 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,54 +1,40 @@
 /*---------------------------------------------------------------------------------------------
-* 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";
+ * 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";
 
 import * as React from "react";
 import { ReportsConfigWidget } from "../ReportsConfigWidget";
 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
-  ) {
+  constructor(getAccessToken?: () => Promise<AccessToken>, baseUrl: string = REPORTS_CONFIG_BASE_URL) {
     this._getAccessToken = getAccessToken;
     this._baseUrl = baseUrl;
   }
 
-  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"
-        ),
+        label: ReportsConfigWidget.localization.getLocalizedString("ReportsConfigWidget:ReportsConfig"),
         content: <ReportsContainer getAccessToken={this._getAccessToken} baseUrl={this._baseUrl} />,
       };
 

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;
   }
-}
+}