Taboule fixes

.husky/pre-push

@@ -15,7 +15,7 @@ yarn yt:backend clean-test-db
 # yarn pm2 save
 
 # run tests one after the other to be sure the data doesn't overlap and make some of them fail
-yarn test --ci --bail --forceExit
+yarn test --ci --bail --forceExit --coverage
 
 # restart backends and parsers with 'development' environment
 # yarn pm2 restart -a --env development platforms/ecosystem.dev.config.js

jest.config.base.js

@@ -30,9 +30,9 @@ module.exports = {
   coverageThreshold: {
     global: {
       branches: 30,
-      functions: 60,
-      lines: 60,
-      statements: 60,
+      functions: 44,
+      lines: 53,
+      statements: 54,
     },
   },
   coveragePathIgnorePatterns: [

package.json

@@ -84,7 +84,7 @@
     "@types/react": "^17"
   },
   "dependencies": {
-    "@react-theming/storybook-addon": "^1.1.7",
+    "@react-theming/storybook-addon": "^1.1.10",
     "pm2": "^5.2.2"
   }
 }

packages/shared/jest.config.js

@@ -3,9 +3,11 @@ const jestBaseConfig = require('../../jest.config.base');
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   ...jestBaseConfig,
-  rootDir: __dirname,
   testEnvironment: 'jsdom',
   displayName: '@shared',
+  moduleNameMapper: {
+    '\\.(css)$': '<rootDir>/../../__mocks__/styleMock.js',
+  },
   modulePathIgnorePatterns: [
     ...jestBaseConfig.modulePathIgnorePatterns,
     'profiles',

packages/shared/src/components/Error/ErrorBox.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, Typography } from '@material-ui/core';
+import { Card } from '@material-ui/core';
 import { Alert, AlertTitle } from '@material-ui/lab';
 import * as React from 'react';
 import { isAPIError } from '../../errors/APIError';
@@ -10,25 +10,20 @@ export const ErrorBox = (e: unknown): React.ReactElement<any, string> => {
   const errorName = isAPIError(e) ? e.name : 'Error';
   const message = isAPIError(e) ? e.message : 'Unknown Error';
   return (
-    <Card>
-      <Alert severity="error">
+    <Card style={{ height: '100%' }}>
+      <Alert severity="error" style={{ height: '50%' }}>
         <AlertTitle>{errorName}</AlertTitle>
         <p>{message}</p>
         {isAPIError(e) && e.details?.kind === 'DecodingError' ? (
-          <ul>
-            {(e.details.errors ?? []).map((d: any) => (
-              <li key={d}>{d}</li>
-            ))}
-          </ul>
+          <div style={{ overflow: 'auto', height: '100%' }}>
+            <ul>
+              {((e.details.errors as any[]) ?? []).map((d: any) => (
+                <li key={d}>{d}</li>
+              ))}
+            </ul>
+          </div>
         ) : null}
       </Alert>
-
-      <CardContent>
-        <Typography variant="h6">Debug</Typography>
-        <pre style={{ backgroundColor: 'white' }}>
-          <code>{JSON.stringify(e, null, 2)}</code>
-        </pre>
-      </CardContent>
     </Card>
   );
 };

packages/shared/src/components/ErrorModal/errorModal.css

@@ -1,7 +1,8 @@
-.ErrorModal{
+.ErrorModal {
   width: 100%;
   max-width: 500px;
   overflow: hidden;
+  background: white;
   border: 2px solid #de605f;
   border-radius: 3px;
   justify-content: space-between;

packages/shared/src/components/ErrorModal/index.tsx

@@ -10,11 +10,12 @@ export interface ErrorModalProps {
   message: string;
   details: string[];
   position?: string[];
+  style?: React.CSSProperties;
   onClick: (action: string) => void;
 }
 
 const ErrorModal = (props: ErrorModalProps): JSX.Element => {
-  const { name, message, details, position, onClick } = props;
+  const { name, message, details, position, style, onClick } = props;
   const [detailsShown, setDetailsShown] = React.useState(false);
 
   const handleDetailsClick = (): void => {
@@ -25,7 +26,7 @@ const ErrorModal = (props: ErrorModalProps): JSX.Element => {
   };
 
   return (
-    <Box className={`ErrorModal ${position}`}>
+    <Box className={`ErrorModal ${position}`} style={style}>
       <div className="ErrorModal__container">
         <div
           className="ErrorModal__container__content"
@@ -43,8 +44,8 @@ const ErrorModal = (props: ErrorModalProps): JSX.Element => {
             })}
           >
             <ul className="ErrorModal__container__details__box__detail">
-              {details.map((d) => (
-                <li key={d}>
+              {details.map((d, i) => (
+                <li key={i}>
                   <Typography>{d}</Typography>
                 </li>
               ))}

packages/shared/src/errors/AppError.ts

@@ -6,7 +6,6 @@ export class AppError extends IOError {
 }
 
 export const toAppError = (e: unknown): AppError => {
-
   if (isAPIError(e)) {
     return {
       ...e,
@@ -34,3 +33,11 @@ export const toAppError = (e: unknown): AppError => {
     },
   };
 };
+
+export const appErrorDetailsToString = (e: AppError): string[] => {
+  if (e.details.kind === 'DecodingError') {
+    return e.details.errors as string[];
+  }
+
+  return [e.details.kind, e.details.status, JSON.stringify(e.details.meta)];
+};

packages/shared/src/extension/app.ts

@@ -20,6 +20,7 @@ import log from './logger';
 import HubEvent from './models/HubEvent';
 import { ServerLookup } from './models/Message';
 import UserSettings from './models/UserSettings';
+import { addCommonPageUI } from './ui';
 import { bo } from './utils/browser.utils';
 
 // instantiate a proper logger
@@ -88,6 +89,12 @@ export interface BootOpts {
     onRegister: (h: Hub<HubEvent>, config: UserSettings) => void;
   };
   onAuthenticated: (res: any) => void;
+  ui?: {
+    common: {
+      id?: string;
+      errors?: boolean;
+    };
+  };
 }
 
 /**
@@ -107,7 +114,7 @@ let oldHref: string;
  */
 function setupObserver(
   { handlers: _handlers, platformMatch, onLocationChange }: SetupObserverOpts,
-  config: UserSettings
+  settings: UserSettings
 ): MutationObserver {
   // group handlers by type and `ObserverHandler.observe?`
   // to subscribe them to proper DOM and location changes
@@ -147,7 +154,7 @@ function setupObserver(
     appLog.debug('handler listen for mutation %O', handler);
     dom.on(handler.match.selector, (node) =>
       handle(node, handler, h, {
-        ...config,
+        ...settings,
         href: window.location.toString(),
       } as any)
     );
@@ -171,7 +178,7 @@ function setupObserver(
                   // appLog.debug('Mutation target %s', (r.target as Element).id);
                   if (`#${(r.target as any).id}` === handler.match.selector) {
                     // appLog.debug('Target match %O', (r.target as any).id);
-                    handle(r.target as any, handler, h, config);
+                    handle(r.target as any, handler, h, settings);
                   }
                 });
               }
@@ -205,7 +212,7 @@ function setupObserver(
               );
 
               handle(window.document.body, routeHandlerOpts, routeHandler[0], {
-                ...config,
+                ...settings,
                 href: window.location.toString(),
               } as any);
             }
@@ -225,9 +232,9 @@ function setupObserver(
 
   window.addEventListener('unload', () => {
     appLog.debug('Window unloading, disconnect the observer...');
-    if (observer) {
-      observer.disconnect();
-    }
+    observer?.disconnect();
+    // TODO: maybe destroy the app?
+    // app?.destroy();
   });
 
   if (body) {
@@ -249,8 +256,6 @@ export interface App {
   destroy: () => void;
 }
 
-let config: any;
-
 /**
  * Transform functions that send messages to background
  * to promises for better code flow.
@@ -269,6 +274,8 @@ const serverHandshakeP = (
 
 let loading = false;
 let app: App | undefined;
+let config: any;
+
 export async function boot(opts: BootOpts): Promise<App> {
   if (app) {
     appLog.debug('App already booted!');
@@ -326,8 +333,8 @@ export async function boot(opts: BootOpts): Promise<App> {
 
   // merge settings taken from db with ones defined in settings.json, giving the precedence to the latter
   const settings: UserSettings = {
-    ...localSettings.result,
     ...jsonSettings.result,
+    ...localSettings.result,
   } as any;
 
   if (!settings.publicKey || !settings.secretKey) {
@@ -374,6 +381,14 @@ export async function boot(opts: BootOpts): Promise<App> {
   // register platform specific event handlers
   opts.hub.onRegister(opts.hub.hub, config);
 
+  // enable the ui
+
+  addCommonPageUI(
+    opts.ui?.common.id ?? 'trex-extension-common-ui',
+    opts.hub.hub,
+    { errors: true }
+  );
+
   // emergency button should be used when a supported with
   // UX hack in place didn't see any UX change, so they
   // can report the problem and we can handle it.
@@ -401,22 +416,27 @@ export async function boot(opts: BootOpts): Promise<App> {
   const handshakeResponse = await serverHandshakeP(config);
 
   appLog.info('Server lookup cb %O', handshakeResponse);
+  let observer: MutationObserver | undefined;
   if (handshakeResponse.type === 'Error') {
-    throw handshakeResponse.error;
-  }
-
-  // setup the dom mutation observer
-  let observer = setupObserver(opts.observe, config);
+    opts.hub.hub.dispatch({
+      type: 'ErrorEvent',
+      payload: handshakeResponse.error,
+    });
+    // throw handshakeResponse.error;
+  } else {
+    // invoke callback for successful authentication
+    opts.onAuthenticated(handshakeResponse.result);
 
-  // invoke callback for successful authentication
-  opts.onAuthenticated(handshakeResponse.result);
+    // setup the dom mutation observer
+    observer = setupObserver(opts.observe, config);
+  }
 
   // define the app context to return
   app = {
     config,
     reload: (c) => {
       appLog.debug('Reloading app with config %O', c);
-      observer.disconnect();
+      observer?.disconnect();
       opts.hub.hub.dispatch({
         type: 'WindowUnload',
       });
@@ -426,7 +446,7 @@ export async function boot(opts: BootOpts): Promise<App> {
       observer = setupObserver(opts.observe, c);
     },
     destroy: () => {
-      observer.disconnect();
+      observer?.disconnect();
       opts.hub.hub.clear();
       app = undefined;
     },

packages/shared/src/extension/background/account.ts

@@ -87,11 +87,13 @@ export async function handleSettingsLookup(
 
   log.info(
     'Loaded experiment info from file experiment.json: %j',
-    settingsJson
+    experimentInfo
   );
 
   const settings = { ...DEFAULT_SETTINGS, ...settingsJson, ...experimentInfo };
 
+  log.info('Final settings: %j', settings);
+
   return sendResponse(settings);
 }
 

packages/shared/src/extension/background/sendMessage.ts

@@ -1,12 +1,13 @@
 /* eslint-disable node/no-callback-literal */
-import { isLeft } from 'fp-ts/lib/Either';
 import * as t from 'io-ts';
-import { PathReporter } from 'io-ts/lib/PathReporter';
+import { isAPIError } from '../../errors/APIError';
 import { HandshakeResponse } from '../../models/HandshakeBody';
 import log from '../logger';
 import { Message, ServerLookup } from '../models/Message';
 import { UserSettings } from '../models/UserSettings';
 import { bo } from '../utils/browser.utils';
+import * as E from 'fp-ts/Either';
+import { toValidationError } from '../../errors/ValidationError';
 
 interface ErrorResponse {
   type: 'Error';
@@ -26,25 +27,26 @@ const ifValid =
   (m: Message['type'], cb: SendResponse<t.TypeOf<C>>) =>
   (x: unknown): void => {
     log.debug('Check response is valid %O', x);
+    if (isAPIError(x)) {
+      // eslint-disable-next-line n/no-callback-literal
+      cb({ type: 'Error', error: x });
+      return;
+    }
+
     const v = codec.decode(x);
 
-    if (isLeft(v)) {
-      const msg = `Error decoding backend response:\n${PathReporter.report(
-        v
-      ).join('\n')}`;
-      log.error(msg);
+    if (E.isLeft(v)) {
       // eslint-disable-next-line n/no-callback-literal
       cb({
         type: 'Error',
-        error: new Error(
-          `Error during '${m}' on codec ${codec.name} validation \n\n`.concat(
-            PathReporter.report(v).join('\n')
-          )
+        error: toValidationError(
+          `Error decoding ${m} output with ${codec.name}`,
+          v.left
         ),
       });
     } else {
       // eslint-disable-next-line n/no-callback-literal
-      cb({ type: 'Success', result: v.right });
+      cb({ type: 'Success', result: x });
     }
   };
 

packages/shared/src/extension/models/HubEvent.ts

@@ -3,6 +3,11 @@ export interface HubEventBase {
   payload?: unknown;
 }
 
+export interface ErrorEvent extends HubEventBase {
+  type: 'ErrorEvent';
+  payload: unknown;
+}
+
 export interface APIEvent extends HubEventBase {
   type: 'APIEvent';
   payload: {
@@ -57,8 +62,9 @@ export interface WindowUnloadEvent extends HubEventBase {
 }
 
 export type HubEvent =
+  | ErrorEvent
   | WindowUnloadEvent
-/*  | FullSaveEvent<any>  -- issue #444 */
+  /*  | FullSaveEvent<any>  -- issue #444 */
   | SyncResponseEvent
   | APISyncResponseEvent
   | APIEvent;