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

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

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

@@ -1,20 +1,94 @@
 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(<App {...mockAppProps} />);
+    render(
+      <AppTestWrapper
+        app={{}}
+        appId={123}
+        maximized={false}
+        appSettings={{}}
+        onSettingChange={() => {
+          /* noop */
+        }}
+      >
+        <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>
+    );
 
     screen.getByText(/checked/i);
   });
 
   it('should show correct layout when settings are not provided', () => {
-    const propsWithoutSettings = mockAppProps;
-    delete propsWithoutSettings.isExampleCheckboxChecked;
-
-    render(<App {...propsWithoutSettings} />);
+    render(
+      <AppTestWrapper
+        app={{}}
+        appId={123}
+        maximized={false}
+        appSettings={{}}
+        onSettingChange={() => {
+          /* noop */
+        }}
+      >
+        <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>
+    );
 
     screen.getByText(/unchecked/i);
   });

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