npm - @corva/create-app - Versions diffs - 0.0.0-73c49372 → 0.0.0-9a3cf8e - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/lib/helpers/cli-version.js CHANGED Viewed

@@ -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) {
@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,104 +1 @@
-{
-  "name": "@corva/create-app",
-  "version": "0.0.0-73c49372",
-  "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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);
   });