Add router to merge connected and standalone test apps (#964)

* Add @tanstack/react-router * Add layouts * Render README.md in index page * Render tile for eah bim file * Ability to open snapshot. * Add WidgetApi frontstage. * Remove translation string. * Add breadcrumb button * Add blank route * Fix widget-state tests * Fix more tests. * WIP register old stuff * Fix Custom Content frontstage. * Fix tests * Fix MyCustomViewOverlay * Sync frontstageId search param * Update snaps * Do not modify auto-generated routeTree.gen.ts * Reload AppUI routes on enter only. * Add a separate briefcase route for electron * Setup checkpoint route. * Move test-app and providers to test-apps dir * Rename standalone to test-app * Remove connected test app * Rename test-appps to apps * Rename appui-test-providers to test-providers * Handle path changes * Remove variants * Rename env vars * rush change * Fix tests * Fix strict mode * Fix conditional strict mode. * Extract SignInPage * Remove unused getUrlParam * Update CONTRIBUTING.md Co-authored-by: Ignas Kasinskas <138560995+ignas-k@users.noreply.github.com> * Update apps/test-app/.env.template Co-authored-by: Ignas Kasinskas <138560995+ignas-k@users.noreply.github.com> * Update apps/test-app/.env.template Co-authored-by: Ignas Kasinskas <138560995+ignas-k@users.noreply.github.com> * Update README.md * Update README.md * Update apps/test-app/README.md Co-authored-by: Ignas Kasinskas <138560995+ignas-k@users.noreply.github.com> * Update apps/test-app/README.md Co-authored-by: Ignas Kasinskas <138560995+ignas-k@users.noreply.github.com> * Update apps/test-app/README.md Co-authored-by: Ignas Kasinskas <138560995+ignas-k@users.noreply.github.com> * Update apps/test-providers/README.md Co-authored-by: Ignas Kasinskas <138560995+ignas-k@users.noreply.github.com> * Fix path * Add back synchronized viewport frontstage. * Add back popout windows frontstage. * Register element stacking frontsage once. * Use web env in npm start * Fix ConditionalStrictMode * rush update * Update backstage snaps * Fix docs. * Fix e2e test * Remove backported change from NextVersion * Use v4 of upload-artifact --------- Co-authored-by: Ignas Kasinskas <138560995+ignas-k@users.noreply.github.com>
iTwin · Sep 4, 2024 · a5e1d97 · a5e1d97
1 parent e4a5c8c
commit a5e1d97
Show file tree

Hide file tree

Showing 261 changed files with 4,564 additions and 23,334 deletions.
diff --git a/.github/workflows/extract-api.yaml b/.github/workflows/extract-api.yaml
@@ -40,7 +40,7 @@ jobs:
         run: node common/scripts/install-run-rush.js extract-api
 
       - name: Publish extracted api
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: extracted-api
           path: common/api
diff --git a/.prettierignore b/.prettierignore
@@ -25,3 +25,9 @@ __testfixtures__
 
 # storybook specific
 storybook-static
+
+# playwright specific
+playwright-report
+
+# test-app specific
+routeTree.gen.ts
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -72,146 +72,94 @@
     },
     // TEST APPS
     {
-      /* PARTIAL */ "name": "[BACKEND] appui-test-app/standalone (chrome)",
+      /* PARTIAL */ "name": "[BACKEND] test-app (chrome)",
       "presentation": {
         "hidden": true
       },
-      "cwd": "${workspaceFolder}/test-apps/appui-test-app/standalone",
+      "cwd": "${workspaceFolder}/apps/test-app",
       "type": "node",
       "request": "launch",
-      "program": "${workspaceFolder}/test-apps/appui-test-app/standalone/lib/backend/main.js",
+      "program": "${workspaceFolder}/apps/test-app/lib/backend/main.js",
       "outFiles": [
-        "${workspaceFolder}/test-apps/appui-test-app/standalone/lib/**/*.js",
+        "${workspaceFolder}/apps/test-app/lib/**/*.js",
         "${workspaceFolder}/{core,clients,editor,presentation}/*/lib/**/*.js"
       ],
-      "cascadeTerminateToConfigurations": [
-        "[FRONTEND] appui-test-app/standalone (chrome)"
-      ]
+      "cascadeTerminateToConfigurations": ["[FRONTEND] test-app (chrome)"]
     },
     {
-      /* PARTIAL */ "name": "[FRONTEND] appui-test-app/standalone (chrome)",
+      /* PARTIAL */ "name": "[FRONTEND] test-app (chrome)",
       "presentation": {
         "hidden": true
       },
       "type": "chrome",
       "request": "launch",
       "url": "http://localhost:3000/",
       "outFiles": [
-        "${workspaceFolder}/test-apps/appui-test-app/standalone/lib/**/*.js",
+        "${workspaceFolder}/apps/test-app/lib/**/*.js",
         "${workspaceFolder}/{core,clients,editor,ui,presentation}/*/lib/**/*.js"
       ],
-      "cascadeTerminateToConfigurations": [
-        "[BACKEND] appui-test-app/standalone (chrome)"
-      ]
+      "cascadeTerminateToConfigurations": ["[BACKEND] test-app (chrome)"]
     },
     {
-      /* PARTIAL */ "name": "[BACKEND] appui-test-app/standalone (electron)",
+      /* PARTIAL */ "name": "[BACKEND] test-app (electron)",
       "presentation": {
         "hidden": true
       },
-      "cwd": "${workspaceFolder}/test-apps/appui-test-app/standalone",
+      "cwd": "${workspaceFolder}/apps/test-app",
       "type": "node",
       "request": "launch",
-      "runtimeExecutable": "${workspaceFolder}/test-apps/appui-test-app/standalone/node_modules/.bin/electron",
+      "runtimeExecutable": "${workspaceFolder}/apps/test-app/node_modules/.bin/electron",
       "runtimeArgs": [
-        "${workspaceFolder}/test-apps/appui-test-app/standalone/lib/backend/main.js",
+        "${workspaceFolder}/apps/test-app/lib/backend/main.js",
         "--remote-debugging-port=9223"
       ],
       "env": {
         "IMJS_LOG_LEVEL": "TRACE",
-        "IMJS_NO_DEV_TOOLS": "1",
+        "IMJS_ELECTRON_NO_DEV_TOOLS": "1",
         "NODE_ENV": "development"
       },
       "outFiles": [
-        "${workspaceFolder}/test-apps/appui-test-app/standalone/lib/**/*.js",
+        "${workspaceFolder}/apps/test-app/lib/**/*.js",
         "${workspaceFolder}/{core,clients,editor,presentation}/*/lib/**/*.js"
       ],
-      "cascadeTerminateToConfigurations": [
-        "[FRONTEND] appui-test-app/standalone (electron)"
-      ]
+      "cascadeTerminateToConfigurations": ["[FRONTEND] test-app (electron)"]
     },
     {
-      /* PARTIAL */ "name": "[FRONTEND] appui-test-app/standalone (electron)",
+      /* PARTIAL */ "name": "[FRONTEND] test-app (electron)",
       "presentation": {
         "hidden": true
       },
       "type": "chrome",
       "request": "attach",
       "port": 9223,
       "outFiles": [
-        "${workspaceFolder}/test-apps/appui-test-app/standalone/lib/**/*.js",
+        "${workspaceFolder}/apps/test-app/lib/**/*.js",
         "${workspaceFolder}/{core,clients,editor,ui,presentation}/*/lib/**/*.js"
       ],
-      "cascadeTerminateToConfigurations": [
-        "[BACKEND] appui-test-app/standalone (electron)"
-      ]
-    },
-    {
-      /* PARTIAL */ "name": "[BACKEND] appui-test-app/connected (chrome)",
-      "presentation": {
-        "hidden": true
-      },
-      "cwd": "${workspaceFolder}/test-apps/appui-test-app/connected",
-      "type": "node",
-      "request": "launch",
-      "program": "${workspaceFolder}/test-apps/appui-test-app/connected/lib/backend/main.js",
-      "outFiles": [
-        "${workspaceFolder}/test-apps/appui-test-app/connected/lib/**/*.js",
-        "${workspaceFolder}/{core,clients,editor,presentation}/*/lib/**/*.js"
-      ],
-      "cascadeTerminateToConfigurations": [
-        "[FRONTEND] appui-test-app/connected (chrome)"
-      ]
-    },
-    {
-      /* PARTIAL */ "name": "[FRONTEND] appui-test-app/connected (chrome)",
-      "presentation": {
-        "hidden": true
-      },
-      "type": "chrome",
-      "request": "launch",
-      "url": "http://localhost:3000/",
-      "outFiles": [
-        "${workspaceFolder}/test-apps/appui-test-app/connected/lib/**/*.js",
-        "${workspaceFolder}/{core,clients,editor,ui,presentation}/*/lib/**/*.js"
-      ],
-      "cascadeTerminateToConfigurations": [
-        "[BACKEND] appui-test-app/connected (chrome)"
-      ]
+      "cascadeTerminateToConfigurations": ["[BACKEND] test-app (electron)"]
     }
   ],
   "compounds": [
     {
-      "name": "appui-test-app/connected (chrome)",
-      "presentation": {
-        "group": "1_TestApps",
-        "order": 1
-      },
-      "configurations": [
-        "[BACKEND] appui-test-app/connected (chrome)",
-        "[FRONTEND] appui-test-app/connected (chrome)"
-      ]
-    },
-    {
-      "name": "appui-test-app/standalone (chrome)",
+      "name": "test-app (chrome)",
       "presentation": {
         "group": "1_TestApps",
         "order": 1
       },
       "configurations": [
-        "[BACKEND] appui-test-app/standalone (chrome)",
-        "[FRONTEND] appui-test-app/standalone (chrome)"
+        "[BACKEND] test-app (chrome)",
+        "[FRONTEND] test-app (chrome)"
       ]
     },
     {
-      "name": "appui-test-app/standalone (electron)",
+      "name": "test-app (electron)",
       "presentation": {
         "group": "1_TestApps",
         "order": 1
       },
       "configurations": [
-        "[BACKEND] appui-test-app/standalone (electron)",
-        "[FRONTEND] appui-test-app/standalone (electron)"
+        "[BACKEND] test-app (electron)",
+        "[FRONTEND] test-app (electron)"
       ]
     }
   ]

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -67,8 +67,8 @@ You can read more about [Contributor License Agreements](https://en.wikipedia.or
 
 1. Install dependencies using `rush install`.
 2. Run build using `rush rebuild`.
-3. While in the desired packages' folder, run `npm start` to enter build in watch mode for easy validation along the `test-apps` or `storybook` (see [Testing options](#testing-options)).
-4. In a new terminal, `cd` into `test-apps/appui-test-app/standalone` and run `npm run start:webserver`.
+3. While in the desired packages' folder, run `npm start` to enter build in watch mode for easy validation along the `test-app` or `storybook` (see [Testing options](#testing-options)).
+4. In a new terminal, `cd` into `apps/test-app` and run `npm run start:webserver`.
 
 ## Commands
 
@@ -107,7 +107,7 @@ If any differences are in packages not modified on this branch, revert the chang
 
 `rush change`
 
-Follow prompts to enter a change description or press ENTER if the change does not warrant a changelog entry. If multiple packages have changed, multiple sets of prompts will be presented. If the changes are only to non-published packages (like the **test-apps**), then `rush change` will indicate that a changelog entry is not needed.
+Follow prompts to enter a change description or press ENTER if the change does not warrant a changelog entry. If multiple packages have changed, multiple sets of prompts will be presented. If the changes are only to non-published packages (like the **test-app**), then `rush change` will indicate that a changelog entry is not needed.
 
 Completing the `rush change` prompts will cause new changelog entry JSON files to be created.
 
@@ -124,19 +124,13 @@ Here is a sample [changelog](https://github.com/microsoft/rushstack/blob/master/
 
 The repository is set up to allow 2 different ways of testing changes with manual interactions.
 
-### Test apps
+### Test app
 
-In the `test-apps` folder there are 2 apps that can be used to test changes to the packages in this repository. Each app can be run with `npm start` from the app's folder.
+In the `apps/test-app` directory there is a test app that can be used to test changes to the packages in this repository. The `test-app` is an iTwin.js application that allows you to open both local `.bim` files and remote iModels from the iTwin Hub. [See README.md for more info](./apps/test-app/README.md)
 
-Most of the features should be the same in both apps as they are both being configured by the `appui-test-providers` package. New features should be added through this package.
+The `apps/test-providers` package currently used by the `test-app` should eventually be merged into the `test-app`.
 
-The apps are:
-
-- `standalone` is an iTwin.js application that is using IPC and is useful for testing with local `.bim` files that are on your machine. [See Readme for more info](./test-apps/appui-test-app/standalone/README.md)
-
-- `connected` is an iTwin.js application that is using RPC and is useful for testing with iModels that are on the iTwin Hub. This application requires a log in. [See Readme for more info](./test-apps/appui-test-app/connected/README.md)
-
-> Note: `standalone` is used by the [end-to-end tests](./e2e-tests/README.md).
+> Note: `test-app` is used by the [end-to-end tests](./e2e-tests/README.md).
 
 ### Storybook
 

diff --git a/Dockerfile b/Dockerfile
@@ -17,9 +17,8 @@ COPY common/scripts common/scripts
 COPY common/config common/config
 COPY docs/storybook/package.json docs/storybook/
 COPY e2e-tests/package.json e2e-tests/
-COPY test-apps/appui-test-app/appui-test-providers/package.json test-apps/appui-test-app/appui-test-providers/
-COPY test-apps/appui-test-app/connected/package.json test-apps/appui-test-app/connected/
-COPY test-apps/appui-test-app/standalone/package.json test-apps/appui-test-app/standalone/
+COPY apps/test-providers/package.json apps/test-providers/
+COPY apps/test-app/package.json apps/test-app/
 COPY tools/codemod/package.json tools/codemod/
 COPY ui/appui-react/package.json ui/appui-react/
 COPY ui/components-react/package.json ui/components-react/
@@ -31,7 +30,7 @@ RUN rush install --to e2e-tests
 
 # Copy for `rush build`
 COPY ui ui
-COPY test-apps test-apps
+COPY apps apps
 
 # Build
 RUN rush build --to e2e-tests

diff --git a/Dockerfile.dockerignore b/Dockerfile.dockerignore
@@ -9,7 +9,7 @@
 !e2e-tests/tests
 !e2e-tests/playwright.config.ts
 !e2e-tests/package.json
-!test-apps
+!apps
 !ui
 !tools
 !rush.json
@@ -36,3 +36,6 @@
 # Environment variables
 **/.env
 **/.env.*
+
+# Include specific files
+!apps/test-app/README.md
diff --git a/apps/test-app/.env.template b/apps/test-app/.env.template
@@ -0,0 +1,29 @@
+# test-app environment variables
+
+#-------------------------------------
+# Recommended
+#-------------------------------------
+# Set to directory containing your local `.bim` files.
+IMJS_BIM_DIR=
+# Application client ID used by the authorization client. Find at developer.bentley.com.
+IMJS_APP_CLIENT_ID=
+# Application redirect URI used by the authorization client. Find at developer.bentley.com.
+IMJS_APP_REDIRECT_URI=
+# Application scopes used by the authorization client. Find at developer.bentley.com.
+IMJS_APP_SCOPE=
+# Access token for the `MapboxImagery` used in the map layer options.
+IMJS_MAPBOX_KEY=
+# Key for the `BingMaps`used in the map layer options.
+IMJS_BING_MAPS_KEY=
+# The API key supplying access to Cesium ION assets. Used by the `IModelApp.tileAdmin`.
+IMJS_CESIUM_ION_KEY=
+
+#-------------------------------------
+# Optional
+#-------------------------------------
+# ID (in form "0x1a8") of the view to display. If not specified a default view ID is located and used.
+IMJS_IMODEL_VIEWID=
+# If defined, do not open the electron dev tools on startup.
+IMJS_ELECTRON_NO_DEV_TOOLS=
+# Used to toggle the environments.
+IMJS_URL_PREFIX=
diff --git a/apps/test-app/README.md b/apps/test-app/README.md
@@ -0,0 +1,43 @@
+# AppUI Test App
+
+## About this Application
+
+The application contained within this directory provides a test environment for developers working on a react based AppUI functionality of iTwin.js and allow to access both local `.bim` files and remote iModels from the iTwin Hub. It is **not** intended to serve as an example or template for the design of "real" iTwin.js applications.
+
+## Getting Started
+
+The application may be run as an Electron app or within a browser. The following steps outline the procedure for successfully building the application as part of a larger monorepo, and then starting the application via npm scripts.
+
+1. To get started, follow the instructions to setup the entire repository, located [here](../../README.md#build-instructions).
+2. Optionally, set other environment variables to configure the application prior to startup. The full list of supported variables is [below](#environment-variables).
+3. There are two ways to start the application:
+
+- In a browser:
+
+  ```cmd
+  cd apps/test-app
+  npm start
+  ```
+
+- In Electron:
+
+  ```cmd
+  cd apps/test-app
+  npm run electron
+  ```
+
+## Environment Variables
+
+You can set environment variables to alter the default behavior of various aspects of the application. To set the environment variables create a `.env` file in the `apps/test-app` directory. For a full list of variables see the [.env.template](.env.template) file.
+
+### URL parameters
+
+_Optionally_ used to load an application in a specific configuration:
+
+- `strict` - allows disabling of `React.StrictMode` if `0` is specified, i.e. <http://localhost:3000/?strict=0>.
+- `menu` - allows disabling the rendering of menus if `0` is specified, i.e. <http://localhost:3000/?menu=0>.
+- `frontstageId` - opens a frontstage by specified frontstage id, uses a blank connection, i.e. <http://localhost:3000/blank?frontstageId=widget-api>.
+
+Preview features:
+
+- `reparentPopoutWidgets` - overrides if the preview feature is enabled: `0` | `1`, i.e. <http://localhost:3000/?reparentPopoutWidgets=1>.
diff --git a/...ppui-test-app/standalone/eslint.config.js → apps/test-app/eslint.config.js b/...ppui-test-app/standalone/eslint.config.js → apps/test-app/eslint.config.js
diff --git a/...-apps/appui-test-app/connected/index.html → apps/test-app/index.html b/...-apps/appui-test-app/connected/index.html → apps/test-app/index.html
@@ -9,7 +9,7 @@
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="manifest" href="/manifest.json" />
-    <title>AppUI Connected Test App</title>
+    <title>AppUI Test App</title>
     <style>
       html,
       body {
@@ -29,6 +29,6 @@
   <body>
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
-    <script type="module" src="/src/frontend/index.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>