@corva/create-app 0.0.0-73c49372-test → 0.0.0-9a3cf8e

package/lib/helpers/cli-version.js

@@ -4,9 +4,10 @@ import semver from 'semver';
 import inquirer from 'inquirer';
 import { join } from 'path';
 import * as url from 'url';
+import fs from 'fs-extra';
 
 import { logger } from './logger.js';
-import fs from 'fs-extra';
+import { StepError } from '../flows/lib/step-error.js';
 
 const npm = new NpmApi();
 
@@ -17,13 +18,41 @@ const asterisks = '*************************************************************
 
 const getCurrentVersion = async () =>
   (await fs.readJSON(join(url.fileURLToPath(new URL('.', import.meta.url)), '../../package.json'))).version;
-const getLatestVersion = async () => npm.repo('@corva/create-app').prop('version');
+
+const getLatestVersion = async () => {
+  try {
+    return await npm.repo('@corva/create-app').prop('version');
+  } catch (caughtError) {
+    if (caughtError.name === 'FetchError') {
+      throw new StepError(`The request to check the latest available version has failed due to the network error. Details:
+
+${caughtError}
+
+Please check your internet connection and that the above request is not blocked in your network 
+  `);
+    }
+
+    throw caughtError;
+  }
+};
+
+// Utility function to check if a version is a regular semver without prerelease identifiers
+const isRegularVersion = (version) => {
+  return semver.prerelease(version) === null;
+};
 
 // NOTE: Stop process and show error if version is outdated
 export async function ensureLatestVersion() {
   const currentVersion = await getCurrentVersion();
   const latestVersion = await getLatestVersion();
 
+  // Skip version check if current version is a prerelease (dev or next)
+  if (!isRegularVersion(currentVersion)) {
+    logger.write('Skipping version check for prerelease version.\n');
+
+    return;
+  }
+
   const isCurrentVersionOutdated = semver.gt(latestVersion, currentVersion);
 
   if (isCurrentVersionOutdated) {
@@ -37,7 +66,7 @@ export async function ensureLatestVersion() {
 
     `);
     console.log(error(asterisks));
-   //  process.exit(0);
+    process.exit(0);
   }
 }
 
@@ -48,6 +77,13 @@ export async function warnIfOutdated() {
   const currentVersion = await getCurrentVersion();
   const latestVersion = await getLatestVersion();
 
+  // Skip version check if current version is a prerelease (dev or next)
+  if (!isRegularVersion(currentVersion)) {
+    logger.write('  ⚠️  Skipping version check for prerelease version.\n');
+
+    return;
+  }
+
   const isCurrentVersionOutdated = semver.gt(latestVersion, currentVersion);
 
   if (isCurrentVersionOutdated) {

package/lib/helpers/manifest.js

@@ -1,4 +1,4 @@
-import { APP_RUNTIMES, APP_TYPES, TEMPLATE_TYPES } from '../constants/cli.js';
+import { APP_EXTENSIONS, APP_RUNTIMES, APP_TYPES, TEMPLATE_TYPES } from '../constants/cli.js';
 import * as manifestConstants from '../constants/manifest.js';
 
 export function fillManifest(answers) {
@@ -10,6 +10,13 @@ export function fillManifest(answers) {
     runtime,
   });
 
+  const enable_isolation =
+    answers.appType === APP_TYPES.UI &&
+    answers.runtime === APP_RUNTIMES.UI &&
+    answers.extensions.includes(APP_EXTENSIONS.CORVA)
+      ? false
+      : undefined;
+
   const manifest = {
     ...manifestConstants.defaultManifest,
     ...defaultManifestProperties,
@@ -35,6 +42,7 @@ export function fillManifest(answers) {
       ...defaultManifestProperties.settings,
       runtime,
       app: defaultAppSettings(answers),
+      enable_isolation,
     },
   };
 

package/lib/helpers/resolve-app-runtime.js

@@ -61,8 +61,8 @@ export const IS_WINDOWS = process.platform === 'win32';
 
 const semverVersionsMapping = {
   node: {
-    16: '16.19.0',
-    18: '18.13.0',
+    18: '18.14.0',
+    20: '20.16.0',
   },
   python: {
     '3.8': '3.8.16',
@@ -82,7 +82,7 @@ const semverVersionsMapping = {
  */
 export const resolveAppRuntime = (opts) => {
   if (opts.appType === APP_TYPES.UI) {
-    const version = '18';
+    const version = '20';
 
     return {
       language: opts.useTypescript ? 'typescript' : 'javascript',

package/lib/main.js

@@ -14,6 +14,7 @@ import { createCommand } from './commands/create.js';
 import { ERROR_ICON } from './constants/messages.js';
 import { StepError } from './flows/lib/step-error.js';
 import debugFn from 'debug';
+import { buildReleasePaasCommand } from './commands/build-release.js';
 
 const debug = debugFn('cca:main');
 
@@ -47,6 +48,7 @@ export async function run() {
     .addCommand(createCommand, { isDefault: true })
     .addCommand(zipCommand)
     .addCommand(releaseCommand)
+    .addCommand(buildReleasePaasCommand)
     .addCommand(rerunCommand)
     .addCommand(attachCommand)
     .showHelpAfterError()

package/package.json

@@ -1,104 +1 @@
-{
-  "name": "@corva/create-app",
-  "version": "0.0.0-73c49372-test",
-  "private": false,
-  "description": "Create an app to use it in CORVA.AI",
-  "keywords": [
-    "react"
-  ],
-  "bugs": {
-    "url": "https://github.com/facebook/create-react-app/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/corva-ai/create-corva-app",
-    "directory": "@corva/create-app"
-  },
-  "license": "MIT",
-  "type": "module",
-  "bin": {
-    "create-corva-app": "./bin/create-corva-app.cjs"
-  },
-  "files": [
-    "bin/**/*.cjs",
-    "bin/**/*.js",
-    "lib/**/*.js",
-    "templates",
-    "template_extensions",
-    "common"
-  ],
-  "scripts": {
-    "helper-cli": "npx @corva/fe-dev-helper-cli@latest",
-    "build": "echo \"build is not configured for package \\\"×\\\", skipping.\"",
-    "get-changelog": "conventional-changelog -r 2 -p angular",
-    "lint": "eslint . --resolve-plugins-relative-to $(pwd) --max-warnings 0",
-    "lint:fix": "eslint . --fix",
-    "release": "git add -A && standard-version -a",
-    "release-rc": "npm run release -- --prerelease",
-    "test": "NODE_OPTIONS='--experimental-vm-modules --no-warnings' jest"
-  },
-  "lint-staged": {
-    "*.js": "npm run lint:fix"
-  },
-  "dependencies": {
-    "archiver": "^5.3.0",
-    "chalk": "^4.1.0",
-    "commander": "^9.1.0",
-    "cross-spawn": "^7.0.3",
-    "debug": "^4.3.4",
-    "dotenv": "^16.0.0",
-    "figlet": "^1.5.0",
-    "form-data": "^4.0.0",
-    "fs-extra": "^9.0.1",
-    "glob": "^8.0.1",
-    "got": "^12.5.1",
-    "inquirer": "^8.2.3",
-    "is-glob": "^4.0.3",
-    "lodash": "^4.17.21",
-    "npm-api": "^1.0.0",
-    "semver": "^7.3.2",
-    "terminal-link": "^3.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.0",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-syntax-import-assertions": "^7.20.0",
-    "@babel/preset-react": "^7.18.6",
-    "@commitlint/cli": "^17.3.0",
-    "@commitlint/config-conventional": "^17.3.0",
-    "@corva/eslint-config-browser": "^0.1.7",
-    "@corva/eslint-config-node": "^5.1.1",
-    "@corva/node-sdk": "^8.0.1",
-    "@types/cross-spawn": "^6.0.2",
-    "@types/jest": "^29.5.4",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "conventional-changelog-cli": "^2.1.0",
-    "eslint": "^8.2.0",
-    "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-require-sort": "^1.3.0",
-    "husky": "^8.0.2",
-    "jest": "^29.6.4",
-    "prettier": "^2.0.0",
-    "prettier-plugin-packagejson": "^2.3.0",
-    "standard-version": "^9.0.0",
-    "typescript": "^4.8.4",
-    "zx": "^7.2.3"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "standard-version": {
-    "skip": {
-      "tag": true
-    }
-  }
-}
+{"name":"@corva/create-app","version":"0.0.0-9a3cf8e","private":false,"description":"Create an app to use it in CORVA.AI","keywords":["react"],"bugs":{"url":"https://github.com/facebook/create-react-app/issues"},"repository":{"type":"git","url":"https://github.com/corva-ai/create-corva-app","directory":"@corva/create-app"},"license":"MIT","type":"module","bin":{"create-corva-app":"./bin/create-corva-app.cjs"},"files":["bin/**/*.cjs","bin/**/*.js","lib/**/*.js","templates","template_extensions","common"],"scripts":{"build":"echo \"build is not configured for package \\\"×\\\", skipping.\"","get-changelog":"conventional-changelog -r 2 -p angular","lint":"eslint . --resolve-plugins-relative-to $(pwd) --max-warnings 0","lint:fix":"eslint . --fix","release":"git add -A && standard-version -a","release-rc":"npm run release -- --prerelease","run:local-ui-ts-completion":"node ./bin/create-corva-app.cjs ../test-app-ui-ts-completions --appName 'TestAppUiTsCompletions' --segments 'completion' --category 'analytics' --appKey 'corva.testappuitscompletions.ui' --appType 'ui' --runtime 'ui' -t --extensions corva","run:local-ui-ts-drilling":"node ./bin/create-corva-app.cjs ../test-app-ui-ts-drilling --appName 'TestAppUiTsDrilling' --segments 'drilling' --category 'analytics' --appKey 'corva.testappuitsdrilling.ui' --appType 'ui' --runtime 'ui' -t --extensions corva","test":"NODE_OPTIONS='--experimental-vm-modules --no-warnings' jest"},"lint-staged":{"*.js":"npm run lint:fix"},"dependencies":{"archiver":"^5.3.0","chalk":"^4.1.0","commander":"^9.1.0","cross-spawn":"^7.0.3","debug":"^4.3.4","dotenv":"^16.0.0","figlet":"^1.5.0","form-data":"^4.0.0","fs-extra":"^9.0.1","glob":"^8.0.1","got":"^12.5.1","inquirer":"^8.2.3","is-glob":"^4.0.3","lodash":"^4.17.21","npm-api":"^1.0.0","semver":"^7.3.2","terminal-link":"^3.0.0"},"devDependencies":{"@babel/core":"^7.11.0","@babel/eslint-parser":"^7.19.1","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-syntax-import-assertions":"^7.20.0","@babel/preset-react":"^7.18.6","@commitlint/cli":"^17.3.0","@commitlint/config-conventional":"^17.3.0","@corva/eslint-config-browser":"^0.1.7","@corva/eslint-config-node":"^5.1.1","@corva/node-sdk":"^8.0.1","@types/cross-spawn":"^6.0.2","@types/jest":"^29.5.4","@typescript-eslint/eslint-plugin":"^5.42.1","@typescript-eslint/parser":"^5.42.1","conventional-changelog-cli":"^2.1.0","eslint":"^8.2.0","eslint-config-google":"^0.14.0","eslint-config-prettier":"^8.5.0","eslint-plugin-import":"^2.26.0","eslint-plugin-jest":"^27.1.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-require-sort":"^1.3.0","husky":"^8.0.2","jest":"^29.6.4","prettier":"^2.0.0","prettier-plugin-packagejson":"^2.3.0","standard-version":"^9.0.0","typescript":"^4.8.4","zx":"^7.2.3"},"packageManager":"yarn@1.22.19+sha512.ff4579ab459bb25aa7c0ff75b62acebe576f6084b36aa842971cf250a5d8c6cd3bc9420b22ce63c7f93a0857bc6ef29291db39c3e7a23aab5adfd5a4dd6c5d71","engines":{"node":">=18"},"standard-version":{"skip":{"tag":true}}}

package/template_extensions/corva/.eslintrc

@@ -0,0 +1,32 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeature": {
+      "jsx": true
+    }
+  },
+  "extends": ["@corva/eslint-config-browser"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": [
+        "@corva/eslint-config-browser",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@tanstack/eslint-plugin-query/recommended"
+      ],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": 2,
+        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+        /* Turned off until adopted by @corva/eslint-config-browser */
+        "react/prop-types": 0,
+        "react/default-props-match-prop-types": 0,
+        "react/no-unused-prop-types": 0,
+        "react/require-default-props": 0
+        /* Turned off until adopted by @corva/eslint-config-browser */
+      }
+    }
+  ]
+}

package/template_extensions/corva/.github/workflows/develop.yml

@@ -11,6 +11,8 @@ jobs:
       - name: develop branch flow
         id: shared-workflow
         uses: corva-ai/gh-actions/shared-dc-workflows/develop@develop
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           qa-api-key: ${{ secrets.API_KEY_QA }}
           prod-api-key: ${{ secrets.API_KEY }}

package/templates/scheduler_data-time/javascript/__tests__/processor.spec.js

@@ -1,5 +1,5 @@
 const { ScheduledDataTimeEvent } = require('@corva/node-sdk');
-const { app_runner } = require('@corva/node-sdk/lib/testing');
+const { app_runner } = require('@corva/node-sdk/testing');
 
 const { processor } = require('..');
 

package/templates/scheduler_data-time/typescript/__tests__/processor.spec.ts

@@ -1,4 +1,4 @@
-import { app_runner } from '@corva/node-sdk/lib/testing';
+import { app_runner } from '@corva/node-sdk/testing';
 import { ScheduledDataTimeEvent } from '@corva/node-sdk';
 
 import { processor } from '..';

package/templates/scheduler_depth/javascript/__tests__/processor.spec.js

@@ -1,5 +1,5 @@
 const { ScheduledDepthEvent } = require('@corva/node-sdk');
-const { app_runner } = require('@corva/node-sdk/lib/testing');
+const { app_runner } = require('@corva/node-sdk/testing');
 
 const { processor } = require('..');
 

package/templates/scheduler_depth/typescript/__tests__/processor.spec.ts

@@ -1,4 +1,4 @@
-import { app_runner } from '@corva/node-sdk/lib/testing';
+import { app_runner } from '@corva/node-sdk/testing';
 import { ScheduledDepthEvent } from '@corva/node-sdk';
 
 import { processor } from '..';

package/templates/scheduler_natural-time/javascript/__tests__/processor.spec.js

@@ -1,5 +1,5 @@
 const { ScheduledNaturalTimeEvent } = require('@corva/node-sdk');
-const { app_runner } = require('@corva/node-sdk/lib/testing');
+const { app_runner } = require('@corva/node-sdk/testing');
 
 const { processor } = require('..');
 

package/templates/scheduler_natural-time/typescript/__tests__/processor.spec.ts

@@ -1,4 +1,4 @@
-import { app_runner } from '@corva/node-sdk/lib/testing';
+import { app_runner } from '@corva/node-sdk/testing';
 import { ScheduledNaturalTimeEvent } from '@corva/node-sdk';
 
 import { processor } from '..';

package/templates/stream_depth/javascript/__tests__/processor.spec.js

@@ -1,5 +1,5 @@
 const { StreamDepthEvent, StreamDepthRecord } = require('@corva/node-sdk');
-const { app_runner } = require('@corva/node-sdk/lib/testing');
+const { app_runner } = require('@corva/node-sdk/testing');
 
 const { processor } = require('..');
 

package/templates/stream_depth/typescript/__tests__/processor.spec.ts

@@ -1,4 +1,4 @@
-import { app_runner } from '@corva/node-sdk/lib/testing';
+import { app_runner } from '@corva/node-sdk/testing';
 import { StreamDepthEvent, StreamDepthRecord } from '@corva/node-sdk';
 
 import { processor } from '..';

package/templates/stream_time/javascript/__tests__/processor.spec.js

@@ -1,5 +1,5 @@
 const { StreamTimeEvent, StreamTimeRecord } = require('@corva/node-sdk');
-const { app_runner } = require('@corva/node-sdk/lib/testing');
+const { app_runner } = require('@corva/node-sdk/testing');
 
 const { processor } = require('..');
 

package/templates/stream_time/typescript/__tests__/processor.spec.ts

@@ -1,4 +1,4 @@
-import { app_runner } from '@corva/node-sdk/lib/testing';
+import { app_runner } from '@corva/node-sdk/testing';
 import { StreamTimeEvent, StreamTimeRecord } from '@corva/node-sdk';
 
 import { processor } from '..';

package/templates/task/javascript/__tests__/processor.spec.js

@@ -1,5 +1,5 @@
 const { TaskEvent } = require('@corva/node-sdk');
-const { app_runner } = require('@corva/node-sdk/lib/testing');
+const { app_runner } = require('@corva/node-sdk/testing');
 
 const { processor } = require('..');
 

package/templates/task/typescript/__tests__/processor.spec.ts

@@ -1,4 +1,4 @@
-import { app_runner } from '@corva/node-sdk/lib/testing';
+import { app_runner } from '@corva/node-sdk/testing';
 import { TaskEvent } from '@corva/node-sdk';
 
 import { processor } from '..';

package/templates/ui/javascript/config/jest/setupTests.js

@@ -9,3 +9,22 @@ import '@testing-library/jest-dom/extend-expect';
 
 // Set UTC timezone for tests to not use the environment timezone
 process.env.TZ = 'UTC';
+
+// Mock ResizeObserver & MutationObserver
+class FakeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+global.ResizeObserver = FakeObserver;
+global.MutationObserver = FakeObserver;
+
+// Suppressing "Could not parse CSS stylesheet" from JSDOM
+const originalConsoleError = global.console.error;
+global.console.error = (message, ...optionalParams) => {
+  if (message.includes('Could not parse CSS stylesheet')) {
+    return;
+  }
+  originalConsoleError(message, ...optionalParams);
+};

package/templates/ui/javascript/src/App.completion.js

@@ -1,4 +1,5 @@
-import { AppHeader } from '@corva/ui/components';
+import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
+import { useAppCommons } from '@corva/ui/effects';
 
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
@@ -8,54 +9,52 @@ import styles from './App.css';
 /**
  * @param {Object} props
  * @param {boolean} props.isExampleCheckboxChecked
- * @param {Object} props.appHeaderProps
  * @param {Object} props.fracFleet
  * @param {Object} props.well
  * @param {Object[]} props.wells
  * @returns
  */
 function App({
-  appHeaderProps,
   isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
   fracFleet,
   well,
   wells,
 }) {
+  const { appKey } = useAppCommons();
   // NOTE: On general type dashboard app receives wells array
   // on asset type dashboard app receives well object
   const wellsList = wells || [well];
 
   return (
-    <div className={styles.container}>
-      <AppHeader {...appHeaderProps} />
-      <div className={styles.content}>
-        <div>
-          <img src={logo} alt="logo" className={styles.logo} />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-            <br />
-            <br />
-          </p>
-          <p>
-            Frac Fleet: {fracFleet?.name || 'No Frac Fleet'}
-            <br />
-            Wells: {wellsList.map(well => well.name).join(', ')}
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </div>
-        <div>
-          Settings &quot;Example&quot; checkbox is{' '}
+    <AppContainer header={<AppHeader />} testId={appKey}>
+      <div className={styles.container}>
+        <img src={logo} alt="logo" className={styles.logo} />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+          <br />
+          <br />
+        </p>
+        <p>
+          Frac Fleet: <span data-testid="fracFleet">{fracFleet?.name || 'No Frac Fleet'}</span>
+          <br />
+          Wells: <span data-testid="wellsList">{wellsList.map(well => well?.name).join(', ')}</span>
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </div>
+      <div>
+        Settings &quot;Example&quot; checkbox is{' '}
+        <span data-testid="exampleCheckboxChecked">
           {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
-        </div>
+        </span>
       </div>
-    </div>
+    </AppContainer>
   );
 }
 

package/templates/ui/javascript/src/App.css

@@ -1,18 +1,5 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 12px 12px 30px 12px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
   text-align: center;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  overflow: auto;
 }
 
 @keyframes App-logo-spin {

package/templates/ui/javascript/src/App.drilling.js

@@ -1,4 +1,5 @@
-import { AppHeader } from '@corva/ui/components';
+import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
+import { useAppCommons } from '@corva/ui/effects';
 
 import { DEFAULT_SETTINGS } from './constants';
 import logo from './assets/logo.svg';
@@ -7,49 +8,43 @@ import styles from './App.css';
 
 /**
  * @param {Object} props
- * @param {Object} props.appHeaderProps
  * @param {boolean} props.isExampleCheckboxChecked
  * @param {Object} props.rig
  * @param {Object} props.well
  * @returns
  */
-function App({
-  appHeaderProps,
-  isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
-  rig,
-  well,
-}) {
+function App({ isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked, rig, well }) {
+  const { appKey } = useAppCommons();
   return (
-    <div className={styles.container}>
-      <AppHeader {...appHeaderProps} />
-      <div className={styles.content}>
-        <div>
-          <img src={logo} alt="logo" className={styles.logo} />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-            <br />
-            <br />
-          </p>
-          <p>
-            Rig: {rig.name}
-            <br />
-            Well: {well.name}
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </div>
-        <div>
-          Settings &quot;Example&quot; checkbox is{' '}
+    <AppContainer header={<AppHeader />} testId={appKey}>
+      <div className={styles.container}>
+        <img src={logo} alt="logo" className={styles.logo} />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+          <br />
+          <br />
+        </p>
+        <p>
+          Rig: <span data-testid="rig">{rig?.name}</span>
+          <br />
+          Well: <span data-testid="well">{well?.name}</span>
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </div>
+      <div>
+        Settings &quot;Example&quot; checkbox is{' '}
+        <span data-testid="exampleCheckboxState">
           {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
-        </div>
+        </span>
       </div>
-    </div>
+    </AppContainer>
   );
 }
 

package/templates/ui/javascript/src/__tests__/App.test.js

@@ -1,11 +1,24 @@
 import { render, screen } from '@testing-library/react';
+import { AppTestWrapper } from '@corva/ui/testing';
 
 import App from '../App';
 import { mockAppProps } from '../__mocks__/mockAppProps';
 
 describe('<App />', () => {
   it('should show correct layout', () => {
-    render(<App {...mockAppProps} />);
+    render(
+      <AppTestWrapper
+        app={mockAppProps.app}
+        appId={123}
+        maximized={false}
+        appSettings={mockAppProps.app.settings}
+        onSettingChange={() => {
+          /* noop */
+        }}
+      >
+        <App {...mockAppProps} />
+      </AppTestWrapper>
+    );
 
     screen.getByText(/checked/i);
   });
@@ -14,7 +27,19 @@ describe('<App />', () => {
     const propsWithoutSettings = mockAppProps;
     delete propsWithoutSettings.isExampleCheckboxChecked;
 
-    render(<App {...propsWithoutSettings} />);
+    render(
+      <AppTestWrapper
+        app={mockAppProps.app}
+        appId={123}
+        maximized={false}
+        appSettings={mockAppProps.app.settings}
+        onSettingChange={() => {
+          /* noop */
+        }}
+      >
+        <App {...propsWithoutSettings} />
+      </AppTestWrapper>
+    );
 
     screen.getByText(/unchecked/i);
   });