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

package/src/test/AddMappingModal.test.tsx

@@ -7,6 +7,11 @@ import faker from "@faker-js/faker";
 import "@testing-library/jest-dom";
 import { ReportsConfigWidget } from "../ReportsConfigWidget";
 import {
+  mockIModelId1,
+  mockIModelId2,
+  mockIModelsResponse,
+  mockITwinId,
+  mockReportId,
   render,
   screen,
   waitFor,
@@ -20,65 +25,10 @@ import type {
   ReportsClient,
 } from "@itwin/insights-client";
 import type { ReportMappingAndMapping } from "../widget/components/ReportMappings";
-import type { GetSingleIModelParams, IModelOperations, IModelsClient, OperationOptions } from "@itwin/imodels-client-management";
-import { IModelState } from "@itwin/imodels-client-management";
+import type { GetSingleIModelParams, IModelsClient } from "@itwin/imodels-client-management";
 import { AddMappingsModal } from "../widget/components/AddMappingsModal";
 import { EmptyLocalization } from "@itwin/core-common";
-
-const mockITwinId = faker.datatype.uuid();
-const mockIModelId1 = faker.datatype.uuid();
-const mockIModelId2 = faker.datatype.uuid();
-
-const mockReportId = faker.datatype.uuid();
-
-const mockIModelsResponse = [
-  {
-    iModel: {
-      id: mockIModelId1,
-      displayName: "rAnDoMdIsPlAynAmE1",
-      name: "rAnDomName1",
-      description: "rAnDoMDeScRiPtIoN1",
-      createdDateTime: "2021-10-04T22:13:50.397Z",
-      state: IModelState.Initialized,
-      projectId: mockITwinId,
-      extent: null,
-      _links: {
-        creator: {
-          href: "",
-        },
-        namedVersions: {
-          href: "",
-        },
-        changesets: {
-          href: "",
-        },
-      },
-    },
-  },
-  {
-    iModel: {
-      id: mockIModelId2,
-      displayName: "rAnDoMdIsPlAynAmE2",
-      name: "rAnDomName2",
-      description: "rAnDoMDeScRiPtIoN2",
-      createdDateTime: "2021-10-04T22:13:50.397Z",
-      state: IModelState.Initialized,
-      projectId: mockITwinId,
-      extent: null,
-      _links: {
-        creator: {
-          href: "",
-        },
-        namedVersions: {
-          href: "",
-        },
-        changesets: {
-          href: "",
-        },
-      },
-    },
-  },
-];
+import type { IModelOperations, OperationOptions } from "@itwin/imodels-client-management/lib/operations";
 
 const mockProjectIModels = {
   iModels: mockIModelsResponse.map((iModel) => ({

package/src/test/ReportMappingHorizontalTile.test.tsx

@@ -8,6 +8,9 @@ import "@testing-library/jest-dom";
 import { ReportsConfigWidget } from "../ReportsConfigWidget";
 import {
   fireEvent,
+  mockIModelId1,
+  mockIModelsResponse,
+  mockReportId,
   render,
   screen,
   waitFor,
@@ -19,69 +22,13 @@ import type {
   ReportMappingCollection,
 } from "@itwin/insights-client";
 import type { ReportMappingAndMapping } from "../widget/components/ReportMappings";
-import type { GetSingleIModelParams, IModelOperations, OperationOptions } from "@itwin/imodels-client-management";
-import { IModelState } from "@itwin/imodels-client-management";
+import type { GetSingleIModelParams } from "@itwin/imodels-client-management";
 import { BeEvent } from "@itwin/core-bentley";
 import { ExtractionStates } from "../widget/components/ExtractionStatus";
 import { ReportMappingHorizontalTile } from "../widget/components/ReportMappingHorizontalTile";
 import { EmptyLocalization } from "@itwin/core-common";
 import type { BulkExtractor } from "../widget/components/BulkExtractor";
-
-const mockITwinId = faker.datatype.uuid();
-// Lets work with two iModels for now.
-const mockIModelId1 = faker.datatype.uuid();
-const mockIModelId2 = faker.datatype.uuid();
-
-const mockReportId = faker.datatype.uuid();
-
-const mockIModelsResponse = [
-  {
-    iModel: {
-      id: mockIModelId1,
-      displayName: "rAnDoMdIsPlAynAmE1",
-      name: "rAnDomName1",
-      description: "rAnDoMDeScRiPtIoN1",
-      createdDateTime: "2021-10-04T22:13:50.397Z",
-      state: IModelState.Initialized,
-      projectId: mockITwinId,
-      extent: null,
-      _links: {
-        creator: {
-          href: "",
-        },
-        namedVersions: {
-          href: "",
-        },
-        changesets: {
-          href: "",
-        },
-      },
-    },
-  },
-  {
-    iModel: {
-      id: mockIModelId2,
-      displayName: "rAnDoMdIsPlAynAmE2",
-      name: "rAnDomName2",
-      description: "rAnDoMDeScRiPtIoN2",
-      createdDateTime: "2021-10-04T22:13:50.397Z",
-      state: IModelState.Initialized,
-      projectId: mockITwinId,
-      extent: null,
-      _links: {
-        creator: {
-          href: "",
-        },
-        namedVersions: {
-          href: "",
-        },
-        changesets: {
-          href: "",
-        },
-      },
-    },
-  },
-];
+import type { IModelOperations, OperationOptions } from "@itwin/imodels-client-management/lib/operations";
 
 const mockProjectIModels = {
   iModels: mockIModelsResponse.map((iModel) => ({
@@ -191,6 +138,7 @@ const mockBulkExtractor = moq.Mock.ofType<BulkExtractor>();
 const mockIModelsClient = moq.Mock.ofType<IModelOperations<OperationOptions>>();
 
 jest.mock("../widget/components/Constants.ts", () => ({
+  ...jest.requireActual("../widget/components/Constants.ts"),
   STATUS_CHECK_INTERVAL: 10,
 }));
 

package/src/test/ReportMappings.test.tsx

@@ -7,7 +7,10 @@ import "@testing-library/jest-dom";
 import { ReportsConfigWidget } from "../ReportsConfigWidget";
 import {
   act,
-  mockITwinId,
+  mockIModelId1,
+  mockIModelId2,
+  mockIModelsResponse,
+  mockReportId,
   render,
   screen,
   waitFor,
@@ -26,68 +29,13 @@ import {
   ReportsClient,
 } from "@itwin/insights-client";
 import { ReportMappings } from "../widget/components/ReportMappings";
-import type { GetSingleIModelParams, IModelOperations, IModelsClient, OperationOptions } from "@itwin/imodels-client-management";
-import { IModelState } from "@itwin/imodels-client-management";
+import type { GetSingleIModelParams, IModelsClient } from "@itwin/imodels-client-management";
 import { BulkExtractor } from "../widget/components/BulkExtractor";
 import type { ReportMappingHorizontalTileProps } from "../widget/components/ReportMappingHorizontalTile";
 import { Text } from "@itwin/itwinui-react";
 import { EmptyLocalization } from "@itwin/core-common";
 import type { AddMappingsModalProps } from "../widget/components/AddMappingsModal";
-
-// Lets work with two iModels for now.
-const mockIModelId1 = "mockIModelId1";
-const mockIModelId2 = "mockIModelId2";
-
-const mockReportId = "mockReportId";
-
-const mockIModelsResponse = [
-  {
-    iModel: {
-      id: mockIModelId1,
-      displayName: "rAnDoMdIsPlAynAmE1",
-      name: "rAnDomName1",
-      description: "rAnDoMDeScRiPtIoN1",
-      createdDateTime: "2021-10-04T22:13:50.397Z",
-      state: IModelState.Initialized,
-      projectId: mockITwinId,
-      extent: null,
-      _links: {
-        creator: {
-          href: "",
-        },
-        namedVersions: {
-          href: "",
-        },
-        changesets: {
-          href: "",
-        },
-      },
-    },
-  },
-  {
-    iModel: {
-      id: mockIModelId2,
-      displayName: "rAnDoMdIsPlAynAmE2",
-      name: "rAnDomName2",
-      description: "rAnDoMDeScRiPtIoN2",
-      createdDateTime: "2021-10-04T22:13:50.397Z",
-      state: IModelState.Initialized,
-      projectId: mockITwinId,
-      extent: null,
-      _links: {
-        creator: {
-          href: "",
-        },
-        namedVersions: {
-          href: "",
-        },
-        changesets: {
-          href: "",
-        },
-      },
-    },
-  },
-];
+import type { IModelOperations, OperationOptions } from "@itwin/imodels-client-management/lib/operations";
 
 const mockProjectIModels = {
   iModels: mockIModelsResponse.map((iModel) => ({
@@ -188,6 +136,7 @@ const mockMappingsFactory = (
 };
 
 jest.mock("../widget/components/Constants.ts", () => ({
+  ...jest.requireActual("../widget/components/Constants.ts"),
   STATUS_CHECK_INTERVAL: 10,
 }));
 

package/src/test/Reports.test.tsx

@@ -12,13 +12,11 @@ import {
 } 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(
@@ -43,38 +41,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 +75,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 +90,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");
@@ -144,16 +116,9 @@ describe("Reports View", () => {
 
   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));
 
@@ -169,27 +134,10 @@ 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));
 
@@ -208,29 +156,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));
 
@@ -265,16 +201,9 @@ describe("Reports View", () => {
 
   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));
 
@@ -289,16 +218,9 @@ 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));
 

package/src/test/WidgetHeader.test.tsx

@@ -7,8 +7,15 @@ import "@testing-library/jest-dom";
 import { render, screen } from "../test/test-utils";
 import { WidgetHeader } from "../widget/components/utils";
 import { faker } from "@faker-js/faker";
+import { EmptyLocalization } from "@itwin/core-common";
+import { ReportsConfigWidget } from "../ReportsConfigWidget";
 
 describe("Widget Header Component", () => {
+  beforeAll(async () => {
+    const localization = new EmptyLocalization();
+    await ReportsConfigWidget.initialize(localization);
+  });
+
   it("title renders", async () => {
     const fakeTitle = faker.word.interjection();
     render(<WidgetHeader title={fakeTitle} />);
@@ -20,9 +27,9 @@ describe("Widget Header Component", () => {
 
   it("header allows return callback", async () => {
     const mockReturnFn = jest.fn();
-    const { user } = render(<WidgetHeader title="" returnFn={mockReturnFn} />);
+    const { user, container } = render(<WidgetHeader title="" returnFn={mockReturnFn} />);
 
-    const returnBtn = screen.getByRole("button");
+    const returnBtn = container.getElementsByClassName("rcw-chevron")[0];
     await user.click(returnBtn);
     expect(mockReturnFn).toHaveBeenCalledTimes(1);
   });

package/src/test/test-utils.tsx

@@ -7,13 +7,74 @@ 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 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,
+      },
+    },
+  },
+];
+
 interface WrapperProps {
   children?: React.ReactNode;
 }
-export const mockITwinId: string = "mockiTwinId";
 
 function render(ui: React.ReactElement, contextProps?: Partial<ReportsConfigContextProps>, { ...options } = {}) {
   const Wrapper = ({ children }: WrapperProps) => (

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

@@ -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 />}

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;