@corva/create-app 0.0.0-73c49372-test → 0.0.0-ae3a727

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

package/templates/ui/typescript/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/typescript/src/App.completion.tsx

@@ -1,63 +1,53 @@
-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 { AppProps, CustomAppSettings } from './types';
 import logo from './assets/logo.svg';
 
 import styles from './App.css';
 
-type AppProps = {
-  appHeaderProps: {
-    [key: string]: any;
-    app: any;
-  };
-  isExampleCheckboxChecked?: boolean;
-  fracFleet?: { name: string };
-  well?: { name: string };
-  wells?: { name: string }[];
-};
-
 function App({
-  appHeaderProps,
   isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
   fracFleet,
   well,
   wells,
-}: AppProps): JSX.Element {
+}: AppProps & CustomAppSettings): JSX.Element {
+  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="exampleCheckboxState">
           {isExampleCheckboxChecked ? 'checked' : 'unchecked'}
-        </div>
+        </span>
       </div>
-    </div>
+    </AppContainer>
   );
 }
 

package/templates/ui/typescript/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/typescript/src/App.drilling.tsx

@@ -1,57 +1,48 @@
-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 { AppProps, CustomAppSettings } from './types';
 import logo from './assets/logo.svg';
 
 import styles from './App.css';
 
-type AppProps = {
-  appHeaderProps: {
-    [key: string]: any;
-    app: any;
-  };
-  isExampleCheckboxChecked?: boolean;
-  rig: { name: string };
-  well: { name: string };
-};
-
 function App({
-  appHeaderProps,
   isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
   rig,
   well,
-}: AppProps): JSX.Element {
+}: AppProps & CustomAppSettings): JSX.Element {
+  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/typescript/src/AppSettings.tsx

@@ -1,19 +1,9 @@
 import { Checkbox, FormControlLabel } from '@material-ui/core';
 
 import { DEFAULT_SETTINGS } from './constants';
+import { AppSettingsProps, CustomAppSettings } from './types';
 
-type AppSettingsProps = {
-  app: { [key: string]: any };
-  appData: { [key: string]: any };
-  company: { [key: string]: any };
-  onSettingChange: (key: string, value: any) => void;
-  settings: {
-    isExampleCheckboxChecked: boolean;
-  };
-  user: { [key: string]: any };
-};
-
-const AppSettings = (props: AppSettingsProps): JSX.Element => {
+const AppSettings = (props: AppSettingsProps & CustomAppSettings): JSX.Element => {
   const { settings: apiSettings, onSettingChange } = props;
   const settings = { ...DEFAULT_SETTINGS, ...apiSettings };