Update main package versions

.github/workflows/CI.yml

@@ -20,12 +20,12 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8.0.0
+          version: 9
 
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: "pnpm"
 
       - name: Install dependencies
@@ -37,6 +37,9 @@ jobs:
       - name: Typecheck
         run: npm run typecheck
 
+      - name: Prettier
+        run: npm run prettier
+
       - name: Build presentation-rules-editor-react package
         run: npm run build --prefix ./presentation-rules-editor-react
 

.vscode/settings.json

@@ -29,8 +29,11 @@
     "sidenav",
     "signin",
     "signout",
+    "tablist",
     "testid",
+    "threagile",
     "twinjs",
+    "typecheck",
     "unicodes",
     "unmangled",
     "unregisters",
@@ -52,7 +55,7 @@
     "wdth",
     "wght"
   ],
-  "cSpell.ignorePaths": ["package.json", ".vscode", "*.yaml"],
+  "cSpell.ignorePaths": ["package.json", ".vscode", "*.yaml", "*.yml"],
   "cSpell.ignoreRegExpList": ["from\\s\".*\";"],
 
   "editor.insertSpaces": true,
@@ -61,7 +64,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit"
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
   },
 
   "eslint.useFlatConfig": true,

app/backend/package.json

@@ -15,19 +15,19 @@
   },
   "dependencies": {
     "@app/common": "workspace:*",
-    "@itwin/core-backend": "^4.7.2",
-    "@itwin/core-bentley": "^4.7.2",
-    "@itwin/core-common": "^4.7.2",
-    "@itwin/core-geometry": "^4.7.2",
-    "@itwin/core-quantity": "^4.7.2",
-    "@itwin/ecschema-metadata": "^4.7.2",
-    "@itwin/ecschema-rpcinterface-common": "^4.7.2",
-    "@itwin/ecschema-rpcinterface-impl": "^4.7.2",
+    "@itwin/core-backend": "^4.9.7",
+    "@itwin/core-bentley": "^4.9.7",
+    "@itwin/core-common": "^4.9.7",
+    "@itwin/core-geometry": "^4.9.7",
+    "@itwin/core-quantity": "^4.9.7",
+    "@itwin/ecschema-metadata": "^4.9.7",
+    "@itwin/ecschema-rpcinterface-common": "^4.9.7",
+    "@itwin/ecschema-rpcinterface-impl": "^4.9.7",
     "@itwin/eslint-plugin": "^4.1.1",
-    "@itwin/express-server": "^4.7.2",
+    "@itwin/express-server": "^4.9.7",
     "@itwin/imodels-access-backend": "^4.1.5",
-    "@itwin/presentation-backend": "^4.7.2",
-    "@itwin/presentation-common": "^4.7.2",
+    "@itwin/presentation-backend": "^4.9.7",
+    "@itwin/presentation-common": "^4.9.7",
     "@types/node": "^18.19.24",
     "dotenv": "^10.0.0",
     "eslint": "^8.57.1",

app/common/package.json

@@ -11,14 +11,14 @@
     "lint": "eslint **/*.{ts,tsx}"
   },
   "dependencies": {
-    "@itwin/core-bentley": "^4.7.2",
-    "@itwin/core-common": "^4.7.2",
-    "@itwin/core-geometry": "^4.7.2",
-    "@itwin/core-quantity": "^4.7.2",
-    "@itwin/ecschema-metadata": "^4.7.2",
-    "@itwin/ecschema-rpcinterface-common": "^4.7.2",
+    "@itwin/core-bentley": "^4.9.7",
+    "@itwin/core-common": "^4.9.7",
+    "@itwin/core-geometry": "^4.9.7",
+    "@itwin/core-quantity": "^4.9.7",
+    "@itwin/ecschema-metadata": "^4.9.7",
+    "@itwin/ecschema-rpcinterface-common": "^4.9.7",
     "@itwin/eslint-plugin": "^4.1.1",
-    "@itwin/presentation-common": "^4.7.2",
+    "@itwin/presentation-common": "^4.9.7",
     "eslint": "^8.57.1",
     "typescript": "^4.9.5"
   }

app/e2e-tests/package.json

@@ -29,7 +29,7 @@
     "jest-dev-server": "^10.0.0",
     "mocha": "^10.3.0",
     "mocha-junit-reporter": "^2.2.1",
-    "playwright": "^1.42.1",
+    "playwright": "^1.48.2",
     "ts-node": "^10.9.2",
     "typescript": "^4.9.5"
   }

app/e2e-tests/src/header.test.ts

@@ -13,19 +13,20 @@ describe("header #local", () => {
   });
 
   it("populates header with opened snapshot information", async () => {
-    const header = await page.waitForSelector(".iui-page-header nav");
-    expect(await header.waitForSelector('text="Local snapshots"'));
-    expect(await header.waitForSelector("text=Baytown.bim"));
+    const header = page.locator(".page-header nav");
+    expect(await header.getByText("Local snapshots").isVisible()).to.be.true;
+    expect(await header.getByText("Baytown.bim").isVisible()).to.be.true;
   });
 
   it("allows navigating to snapshot iModels browser", async () => {
-    await page.click('text="Local snapshots"');
-    expect(await page.waitForSelector("button.iui-tab.iui-active >> text='Local snapshots'"));
+    await page.getByText("Local snapshots").click();
+    await page.getByRole("tab", { name: "Local snapshots", selected: true }).waitFor();
   });
 
   it("clears breadcrumbs after navigating to home", async () => {
-    await page.click('text="Local snapshots"');
-    const header = await page.waitForSelector(".iui-page-header nav", { state: "attached" });
+    await page.getByText("Local snapshots").click();
+    const header = page.locator(".page-header nav");
+    await header.waitFor({ state: "attached" });
     expect(await header.textContent()).to.be.empty;
   });
 });
@@ -36,19 +37,21 @@ describe("header #web", () => {
   });
 
   it("populates header with opened demo iModel information", async () => {
-    const header = await page.waitForSelector(".iui-page-header nav");
-    expect(header.$('text="Demo iModel"'));
-    expect(header.$('text="Bay Town Process Plant"'));
+    const header = page.locator(".page-header nav");
+    await header.waitFor();
+    expect(await header.getByText("Demo iModel").isVisible()).to.be.true;
+    expect(await header.getByText("Bay Town Process Plant").isVisible()).to.be.true;
   });
 
   it("allows navigating to demo iModels browser", async () => {
-    await page.click('text="Demo iModels"');
-    expect(await page.waitForSelector("button.iui-tab.iui-active >> text='Demo iModels'"));
+    await page.getByText("Demo iModels").click();
+    await page.getByRole("tab", { name: "Demo iModels", selected: true }).waitFor();
   });
 
   it("clears breadcrumbs after navigating to home", async () => {
-    await page.click('text="Presentation Rules Editor"');
-    const header = await page.waitForSelector(".iui-page-header nav", { state: "attached" });
+    await page.getByText("Presentation Rules Editor").click();
+    const header = page.locator(".page-header nav");
+    await header.waitFor({ state: "attached" });
     expect(await header.textContent()).to.be.empty;
   });
 });

app/e2e-tests/src/imodel-browser.test.ts

@@ -12,15 +12,19 @@ describe("iModel browser #local", () => {
   });
 
   it("gives options for browsing snapshots, iTwins and demo iModels", async () => {
-    await page.waitForSelector(".iui-tabs >> text=Local snapshots");
-    await page.waitForSelector(".iui-tabs >> text=My iTwins");
-    await page.waitForSelector(".iui-tabs >> text=Demo iModels");
+    const tabList = page.getByRole("tablist");
+    await tabList.waitFor();
+    await Promise.all([
+      page.getByRole("tab", { name: "Local snapshots" }).waitFor(),
+      page.getByRole("tab", { name: "My iTwins" }).waitFor(),
+      page.getByRole("tab", { name: "Demo iModels" }).waitFor(),
+    ]);
   });
 
   it("allows opening a snapshot iModel", async () => {
-    await page.click("text=Local snapshots");
-    await page.click("text=Baytown.bim");
-    await page.waitForSelector("text=Submit ruleset");
+    await page.getByRole("tab", { name: "Local snapshots" }).click();
+    await page.getByText("Baytown.bim").click();
+    await page.getByText("Submit ruleset").waitFor();
   });
 });
 
@@ -30,13 +34,14 @@ describe("iModel browser #web", () => {
   });
 
   it("gives options for browsing iTwins and demo iModels", async () => {
-    await page.waitForSelector(".iui-tabs >> text=My iTwins");
-    await page.waitForSelector(".iui-tabs >> text=Demo iModels");
+    const tabList = page.getByRole("tablist");
+    await tabList.waitFor();
+    await Promise.all([page.getByRole("tab", { name: "My iTwins" }).waitFor(), page.getByRole("tab", { name: "Demo iModels" }).waitFor()]);
   });
 
   it("allows opening a demo iModel", async () => {
-    await page.click("text=Demo iModels");
-    await page.click("text=Bay Town Process Plant");
-    await page.waitForSelector("text=Submit ruleset");
+    await page.getByRole("tab", { name: "Demo iModels" }).click();
+    await page.getByText("Bay Town Process Plant").click();
+    await page.getByText("Submit ruleset").waitFor();
   });
 });

app/e2e-tests/src/share.test.ts

@@ -86,15 +86,19 @@ describe("opening shared link #local #web", () => {
   it("offers user to sign in when link points to a private iModel", async () => {
     await page.goto(`${getServiceUrl()}/open-imodel?iTwinId=test_itwin&iModelId=test_imodel`);
 
-    const appHeader = await page.waitForSelector(".iui-page-header");
-    const options = await page.waitForSelector(".landing-page-options");
-    expect(await options?.textContent()).to.contain(process.env.WEB_TEST || (await appHeader.$('text="Offline mode"')) === null ? "Sign In" : "Go to homepage");
+    const appHeader = page.locator(".page-header");
+    const options = page.locator(".landing-page-options");
+    await Promise.all([appHeader.waitFor(), options.waitFor()]);
+
+    const offlineMode = appHeader.getByText("Offline mode");
+    const isOfflineModeVisible = await offlineMode.isVisible();
+    expect(await options?.textContent()).to.contain(process.env.WEB_TEST || isOfflineModeVisible === false ? "Sign In" : "Go to homepage");
   });
 });
 
 describe("opening snapshot link in #web", () => {
   it("shows user 404 error", async () => {
     await page.goto(`${getServiceUrl()}/open-imodel?snapshot=test_snapshot`);
-    await page.waitForSelector('text="Page Not Found"');
+    await page.getByText("Page Not Found").waitFor();
   });
 });

app/e2e-tests/src/utils.ts

@@ -11,7 +11,7 @@ export function getServiceUrl(): string {
 
 export async function loadHomepage(page: Page): Promise<void> {
   await page.goto(getServiceUrl());
-  await page.waitForSelector("text=Presentation Rules Editor");
+  await page.getByText("Presentation Rules Editor").waitFor();
 }
 
 export async function openIModelBrowser(page: Page): Promise<void> {
@@ -21,14 +21,14 @@ export async function openIModelBrowser(page: Page): Promise<void> {
 
 export async function openTestIModel(page: Page): Promise<void> {
   await page.goto(`${getServiceUrl()}/open-imodel?snapshot=Baytown.bim`);
-  await page.waitForSelector("id=app-loader", { state: "detached" });
+  await page.locator("id=app-loader").waitFor({ state: "detached" });
 }
 
 export async function openDemoIModel(page: Page): Promise<void> {
   const iTwinId = "b27dc251-0e53-4a36-9a38-182fc309be07";
   const iModelId = "f30566da-8fdf-4cba-b09a-fd39f5397ae6";
   await page.goto(`${getServiceUrl()}/open-imodel?iTwinId=${iTwinId}&iModelId=${iModelId}`);
-  await page.waitForSelector("id=app-loader", { state: "detached" });
+  await page.locator("id=app-loader").waitFor({ state: "detached" });
 }
 
 export function getWidget(page: Page, widget: string): Locator {

app/frontend/package.json

@@ -16,22 +16,22 @@
   },
   "dependencies": {
     "@app/common": "workspace:*",
-    "@itwin/appui-abstract": "^4.7.2",
+    "@itwin/appui-abstract": "^4.9.7",
     "@itwin/appui-layout-react": "^4.8.3",
     "@itwin/appui-react": "^4.14.1",
     "@itwin/components-react": "^4.14.1",
-    "@itwin/core-bentley": "^4.7.2",
-    "@itwin/core-common": "^4.7.2",
-    "@itwin/core-frontend": "^4.7.2",
-    "@itwin/core-geometry": "^4.7.2",
-    "@itwin/core-i18n": "^4.7.2",
-    "@itwin/core-markup": "^4.7.2",
-    "@itwin/core-orbitgt": "^4.7.2",
-    "@itwin/core-quantity": "^4.7.2",
+    "@itwin/core-bentley": "^4.9.7",
+    "@itwin/core-common": "^4.9.7",
+    "@itwin/core-frontend": "^4.9.7",
+    "@itwin/core-geometry": "^4.9.7",
+    "@itwin/core-i18n": "^4.9.7",
+    "@itwin/core-markup": "^4.9.7",
+    "@itwin/core-orbitgt": "^4.9.7",
+    "@itwin/core-quantity": "^4.9.7",
     "@itwin/core-react": "^4.14.1",
-    "@itwin/core-telemetry": "^4.7.2",
-    "@itwin/ecschema-metadata": "^4.7.2",
-    "@itwin/ecschema-rpcinterface-common": "^4.7.2",
+    "@itwin/core-telemetry": "^4.9.7",
+    "@itwin/ecschema-metadata": "^4.9.7",
+    "@itwin/ecschema-rpcinterface-common": "^4.9.7",
     "@itwin/eslint-plugin": "^4.1.1",
     "@itwin/imodel-browser-react": "^1.2.2",
     "@itwin/imodel-components-react": "^4.14.1",
@@ -41,12 +41,11 @@
     "@itwin/itwinui-illustrations-react": "^2.1.0",
     "@itwin/itwinui-layouts-css": "^0.2.0",
     "@itwin/itwinui-layouts-react": "^0.2.0",
-    "@itwin/itwinui-react": "~2.12.25",
-    "@itwin/presentation-common": "^4.7.2",
+    "@itwin/presentation-common": "^4.9.7",
     "@itwin/presentation-components": "^4.4.1",
-    "@itwin/presentation-frontend": "^4.7.2",
+    "@itwin/presentation-frontend": "^4.9.7",
     "@itwin/presentation-rules-editor-react": "workspace:*",
-    "@itwin/webgl-compatibility": "^4.7.2",
+    "@itwin/webgl-compatibility": "^4.9.7",
     "@microsoft/applicationinsights-web": "^2.8.18",
     "@types/copy-webpack-plugin": "^8.0.1",
     "@types/node": "^16.18.89",
@@ -84,5 +83,8 @@
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
+  },
+  "devDependencies": {
+    "@itwin/itwinui-react": "3.15.5"
   }
 }

app/frontend/src/app/App.tsx

@@ -5,6 +5,7 @@
 
 import "./App.scss";
 import "@itwin/itwinui-layouts-css/styles.css";
+import "@itwin/itwinui-react/styles.css";
 import * as React from "react";
 import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { SvgDeveloper, SvgFolderOpened } from "@itwin/itwinui-icons-react";