@corva/create-app 0.106.1 → 0.108.0

package/lib/constants/cli.js

@@ -6,12 +6,12 @@ export const APP_RUNTIMES = {
   NODE18: 'nodejs18.x',
   NODE20: 'nodejs20.x',
   NODE22: 'nodejs22.x',
-  PYTHON3_8: 'python3.8',
-  PYTHON3_9: 'python3.9',
-  PYTHON3_10: 'python3.10',
+  // PYTHON3_8: 'python3.8',
+  // PYTHON3_9: 'python3.9',
+  // PYTHON3_10: 'python3.10',
   PYTHON3_11: 'python3.11',
   PYTHON3_12: 'python3.12',
-  // PYTHON3_13: 'python3.13',
+  PYTHON3_13: 'python3.13',
 };
 
 export const TEMPLATE_TYPES = {

package/lib/constants/manifest.js

@@ -38,6 +38,7 @@ export const defaultUIAppManifest = {
       initial_size: { w: 4, h: 10 },
       multi_rig: false,
       full_screen_report: false,
+      use_app_header_v3: true,
     },
   },
   settings: {

package/lib/constants/package.js

@@ -56,11 +56,15 @@ const corvaUiExtension = {
   scripts: {
     prepare: 'husky install',
   },
+  dependencies: {
+    '@tanstack/react-query': '4.35.3',
+  },
   devDependencies: {
     '@commitlint/cli': '^17.0.0',
     '@commitlint/config-conventional': '^17.0.0',
     'husky': '^8.0.0',
     'lint-staged': '^13.0.0',
+    '@tanstack/eslint-plugin-query': '4.34.1',
   },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corva/create-app",
-  "version": "0.106.1",
+  "version": "0.108.0",
   "private": false,
   "description": "Create an app to use it in CORVA.AI",
   "keywords": [
@@ -34,6 +34,8 @@
     "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": {
@@ -92,6 +94,7 @@
     "typescript": "^4.8.4",
     "zx": "^7.2.3"
   },
+  "packageManager": "yarn@1.22.19+sha512.ff4579ab459bb25aa7c0ff75b62acebe576f6084b36aa842971cf250a5d8c6cd3bc9420b22ce63c7f93a0857bc6ef29291db39c3e7a23aab5adfd5a4dd6c5d71",
   "engines": {
     "node": ">=18"
   },
@@ -99,6 +102,5 @@
     "skip": {
       "tag": true
     }
-  },
-  "packageManager": "yarn@1.22.19+sha512.ff4579ab459bb25aa7c0ff75b62acebe576f6084b36aa842971cf250a5d8c6cd3bc9420b22ce63c7f93a0857bc6ef29291db39c3e7a23aab5adfd5a4dd6c5d71"
+  }
 }

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/templates/ui/javascript/src/App.completion.js

@@ -27,7 +27,7 @@ function App({
 
   return (
     <AppContainer header={<AppHeader />} testId={appKey}>
-      <div>
+      <div className={styles.container}>
         <img src={logo} alt="logo" className={styles.logo} />
         <p>
           Edit <code>src/App.js</code> and save to reload.
@@ -37,7 +37,7 @@ function App({
         <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>
+          Wells: <span data-testid="wellsList">{wellsList.map(well => well?.name).join(', ')}</span>
         </p>
         <a
           className="App-link"

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

@@ -1,3 +1,7 @@
+.container {
+  text-align: center;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

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

@@ -17,7 +17,7 @@ function App({ isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChec
   const { appKey } = useAppCommons();
   return (
     <AppContainer header={<AppHeader />} testId={appKey}>
-      <div>
+      <div className={styles.container}>
         <img src={logo} alt="logo" className={styles.logo} />
         <p>
           Edit <code>src/App.js</code> and save to reload.
@@ -25,9 +25,9 @@ function App({ isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChec
           <br />
         </p>
         <p>
-          Rig: <span data-testid="rig">{rig.name}</span>
+          Rig: <span data-testid="rig">{rig?.name}</span>
           <br />
-          Well: <span data-testid="well">{well.name}</span>
+          Well: <span data-testid="well">{well?.name}</span>
         </p>
         <a
           className="App-link"

package/templates/ui/typescript/src/App.completion.tsx

@@ -2,23 +2,17 @@ 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 = {
-  isExampleCheckboxChecked?: boolean;
-  fracFleet?: { name: string };
-  well?: { name: string };
-  wells?: { name: string }[];
-};
-
 function App({
   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
@@ -26,7 +20,7 @@ function App({
 
   return (
     <AppContainer header={<AppHeader />} testId={appKey}>
-      <div>
+      <div className={styles.container}>
         <img src={logo} alt="logo" className={styles.logo} />
         <p>
           Edit <code>src/App.js</code> and save to reload.
@@ -36,7 +30,7 @@ function App({
         <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>
+          Wells: <span data-testid="wellsList">{wellsList.map(well => well?.name).join(', ')}</span>
         </p>
         <a
           className="App-link"

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

@@ -1,3 +1,7 @@
+.container {
+  text-align: center;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

package/templates/ui/typescript/src/App.drilling.tsx

@@ -2,25 +2,20 @@ 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 = {
-  isExampleCheckboxChecked?: boolean;
-  rig: { name: string };
-  well: { name: string };
-};
-
 function App({
   isExampleCheckboxChecked = DEFAULT_SETTINGS.isExampleCheckboxChecked,
   rig,
   well,
-}: AppProps): JSX.Element {
+}: AppProps & CustomAppSettings): JSX.Element {
   const { appKey } = useAppCommons();
   return (
     <AppContainer header={<AppHeader />} testId={appKey}>
-      <div>
+      <div className={styles.container}>
         <img src={logo} alt="logo" className={styles.logo} />
         <p>
           Edit <code>src/App.js</code> and save to reload.
@@ -28,9 +23,9 @@ function App({
           <br />
         </p>
         <p>
-          Rig: <span data-testid="rig">{rig.name}</span>
+          Rig: <span data-testid="rig">{rig?.name}</span>
           <br />
-          Well: <span data-testid="well">{well.name}</span>
+          Well: <span data-testid="well">{well?.name}</span>
         </p>
         <a
           className="App-link"

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

package/templates/ui/typescript/src/__mocks__/mockData.ts

@@ -0,0 +1,194 @@
+import { AppInstance, AppInstanceData, User, AppHeaderData } from '../types';
+
+export const mockApp: AppInstance = {
+  app: { app_key: 'test', platform: 'test' },
+  id: 1,
+  package: {
+    manifest: {
+      format: 1,
+      license: { type: 'test', url: 'test' },
+      developer: { name: 'test', identifier: 'test', authors: [] },
+      application: {
+        type: 'test',
+        key: 'test',
+        visibility: 'test',
+        name: 'test',
+        description: 'test',
+        summary: 'test',
+        category: 'test',
+        website: 'test',
+        segments: ['test'],
+        ui: {
+          initial_size: { w: 100, h: 100 },
+          multi_rig: false,
+          full_screen_report: false,
+          use_app_header_v3: false,
+        },
+      },
+      settings: {
+        entrypoint: { file: 'test', function: 'test' },
+        environment: {},
+        runtime: 'test',
+        app: { log_type: 'test' },
+        enable_isolation: false,
+      },
+      datasets: {},
+    },
+    build: 'test',
+    version: 'test',
+  },
+  segment: ['test'],
+  settings: {},
+};
+
+export const mockUser: User = {
+  id: 1,
+  company_id: 1,
+  first_name: 'Test',
+  last_name: 'User',
+  email: 'test@test.com',
+  mobile: '1234567890',
+  created_at: '2023-01-01',
+  terms_acceptance_at: '2023-01-01',
+  profile_photo: null,
+  recently_viewed_asset_ids: [],
+  unit_system: null,
+  custom_unit_system: null,
+  role: 'test',
+  title: null,
+  group: null,
+  favorite_asset_id: null,
+  current_segment: 'test',
+  theme: 'test',
+  messaging_id: 'test',
+  restricted_assets: [],
+  restricted_programs: [],
+  settings: {
+    favorites: [],
+    home_page: { selected_assets_tab: 'test' },
+    onboarded: false,
+    beta_2_158: {},
+    uiSettings: {},
+    singleAsset: {
+      padId: 1,
+      rigId: 1,
+      wellId: null,
+      rigAssetId: 1,
+      fracFleetId: 1,
+      wellAssetId: null,
+      drilloutUnitId: 1,
+      completionWellAssetId: 1,
+    },
+    feed_filters: {
+      company_id: null,
+      start_date: '2023-01-01',
+      content_types: [],
+      selected_rigs_ids: [],
+      selected_user_ids: [],
+      users_radio_value: 'test',
+      assets_radio_value: 'test',
+      date_range_radio_value: 'test',
+    },
+    sms_blacklisted: false,
+    favorit_asset_ids: [],
+    restricted_assets: [],
+    alerts_list_filters: {
+      end_date: '2023-01-01',
+      segments: [],
+      alert_name: 'test',
+      start_date: '2023-01-01',
+      validation: 'test',
+      alert_levels: [],
+      subscription: 'test',
+      classification: 'test',
+      assets_radio_value: 'test',
+      date_range_radio_value: 'test',
+    },
+    restricted_programs: [],
+    is_dnd_feature_shown: false,
+    last_new_alerts_check: '2023-01-01',
+    notifications_filters: {
+      end_date: '2023-01-01',
+      start_date: '2023-01-01',
+      content_types: [],
+      date_range_radio_value: 'test',
+    },
+    directional_app_settings: {
+      curve_to_lat_threshold: 0,
+      vert_to_curve_threshold: 0,
+    },
+    last_new_feed_items_check: '2023-01-01',
+    participates_in_beta_apps: false,
+    'cross-plot__gradient-manager': [],
+    last_new_dashboard_shares_check: '2023-01-01',
+    formation_evaluation_lithology_types: {},
+    formation_evaluation_custom_gradients: [],
+  },
+  last_sign_in_at: '2023-01-01',
+  locked_access: false,
+  unit_ids: [],
+  intercom_admin_id: null,
+  resource: [],
+  consent_to_process_data: false,
+  identity_verification_enabled: null,
+  intercom_user_hash: 'test',
+  impersonating: false,
+  profile_groups: [],
+  preference: {
+    id: 1,
+    push_notifications_enabled: false,
+    emails_enabled: false,
+    sms_enabled: false,
+    alert_levels: [],
+    play_alerts_sound: false,
+    show_intercom_icon: false,
+    segment: [],
+    disable_create_dashboard: false,
+    disable_costs: false,
+    disable_documents: false,
+    realtime_operation_mode: false,
+    disable_file_upload: false,
+    stay_on_app_store: false,
+    new_navigation_beta: false,
+    new_mobile_app_enabled: false,
+  },
+  company: {
+    id: 1,
+    name: 'Test Company',
+    time_zone: 'UTC',
+    language: 'en',
+    provider: 'test',
+    unit_system: {},
+    custom_unit_system: {},
+    custom_units: {},
+    dev_center_enabled: false,
+    with_subscription: false,
+    competitor_analysis_enabled: false,
+    ai_model_scope: 'test',
+  },
+  groups: [],
+};
+
+export const mockAppData: AppInstanceData = {
+  id: 1,
+  rig: null,
+  well: null,
+  fracFleet: null,
+  program: {
+    id: null,
+    name: null,
+  },
+  wells: null,
+  isLoading: false,
+  appHash: 'test',
+};
+
+export const mockAppHeaderProps: AppHeaderData = {
+  app: mockApp,
+  appLastAnnotation: null,
+  appSettings: {},
+  coordinates: { w: 0, h: 0, x: 0, y: 0, pixelHeight: 0, pixelWidth: 0 },
+  currentUser: mockUser,
+  isMaximized: false,
+  layoutEnvironment: { type: 'test', pdfReportMode: false },
+};

package/templates/ui/typescript/src/__tests__/App.test.tsx

@@ -2,21 +2,47 @@ import { render, screen } from '@testing-library/react';
 import { AppTestWrapper } from '@corva/ui/testing';
 
 import App from '../App';
-import { mockAppProps } from '../__mocks__/mockAppProps';
+import { mockApp, mockUser, mockAppHeaderProps } from '../__mocks__/mockData';
 
 describe('<App />', () => {
   it('should show correct layout', () => {
     render(
       <AppTestWrapper
-        app={mockAppProps.app}
+        app={{}}
         appId={123}
         maximized={false}
-        appSettings={mockAppProps.app.settings}
+        appSettings={{}}
         onSettingChange={() => {
           /* noop */
         }}
       >
-        <App {...mockAppProps} />
+        <App
+          app={mockApp}
+          package="test"
+          coordinates={{ w: 0, h: 0, x: 0, y: 0, pixelHeight: 0, pixelWidth: 0 }}
+          currentUser={mockUser}
+          devCenterRouter={{ location: { pathname: '', query: {} } }}
+          segment="test"
+          appHeaderProps={mockAppHeaderProps}
+          isNative={false}
+          layoutEnvironment={{ type: 'test', pdfReportMode: false }}
+          onSettingChange={() => {
+            /* noop */
+          }}
+          onSettingsChange={() => {
+            /* noop */
+          }}
+          setIsFullscreenModalMode={() => Promise.resolve()}
+          setIsMaximized={() => {
+            /* noop */
+          }}
+          setMainMenuItems={() => {
+            /* noop */
+          }}
+          setSecondaryMenuItems={() => {
+            /* noop */
+          }}
+        />
       </AppTestWrapper>
     );
 
@@ -24,20 +50,43 @@ describe('<App />', () => {
   });
 
   it('should show correct layout when settings are not provided', () => {
-    const propsWithoutSettings = mockAppProps;
-    delete propsWithoutSettings.isExampleCheckboxChecked;
-
     render(
       <AppTestWrapper
-        app={mockAppProps.app}
+        app={{}}
         appId={123}
         maximized={false}
-        appSettings={mockAppProps.app.settings}
+        appSettings={{}}
         onSettingChange={() => {
           /* noop */
         }}
       >
-        <App {...propsWithoutSettings} />
+        <App
+          app={mockApp}
+          package="test"
+          coordinates={{ w: 0, h: 0, x: 0, y: 0, pixelHeight: 0, pixelWidth: 0 }}
+          currentUser={mockUser}
+          devCenterRouter={{ location: { pathname: '', query: {} } }}
+          segment="test"
+          appHeaderProps={mockAppHeaderProps}
+          isNative={false}
+          layoutEnvironment={{ type: 'test', pdfReportMode: false }}
+          onSettingChange={() => {
+            /* noop */
+          }}
+          onSettingsChange={() => {
+            /* noop */
+          }}
+          setIsFullscreenModalMode={() => Promise.resolve()}
+          setIsMaximized={() => {
+            /* noop */
+          }}
+          setMainMenuItems={() => {
+            /* noop */
+          }}
+          setSecondaryMenuItems={() => {
+            /* noop */
+          }}
+        />
       </AppTestWrapper>
     );
 

package/templates/ui/typescript/src/__tests__/AppSettings.test.tsx

@@ -2,15 +2,26 @@ import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import AppSettings from '../AppSettings';
-import { mockAppSettingsProps } from '../__mocks__/mockAppSettingsProps';
+import { mockApp, mockUser, mockAppData } from '../__mocks__/mockData';
 
 describe('<AppSettings />', () => {
   it('should call onChange with a changed setting on settings change', async () => {
     const handleSettingsChange = jest.fn();
+    const handleSettingsChangeAll = jest.fn();
 
-    render(<AppSettings {...mockAppSettingsProps} onSettingChange={handleSettingsChange} />);
+    render(
+      <AppSettings
+        app={mockApp}
+        appData={mockAppData}
+        settings={{ isExampleCheckboxChecked: true }}
+        layoutEnvironment={{ type: 'test', pdfReportMode: false }}
+        currentUser={mockUser}
+        onSettingChange={handleSettingsChange}
+        onSettingsChange={handleSettingsChangeAll}
+      />
+    );
 
-    const exampleCheckbox = screen.getByTestId('exampleCheckbox').querySelector('input');
+    const exampleCheckbox = screen.getByRole('checkbox', { name: /example/i });
 
     await act(async () => {
       await userEvent.click(exampleCheckbox);