From a825115c0444915aeccd1dcf7ac83f893ff27892 Mon Sep 17 00:00:00 2001
From: George Gevoian <george@gevoian.com>
Date: Tue, 31 Aug 2021 11:04:45 -0700
Subject: [PATCH] (core) Limit number of errors shown on narrow screens

Summary: We still show up to 5 on regular-width screens.

Test Plan: Browser tests.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D3008
---
 app/client/models/NotifyModel.ts | 24 +++++++++++----
 test/nbrowser/gristUtils.ts      | 51 +++++++++++++++++++++++++++-----
 2 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/app/client/models/NotifyModel.ts b/app/client/models/NotifyModel.ts
index e5b1771a..dbced044 100644
--- a/app/client/models/NotifyModel.ts
+++ b/app/client/models/NotifyModel.ts
@@ -8,6 +8,7 @@ import {bundleChanges, Disposable, Holder, IDisposable, IDisposableOwner } from
 import {Computed, dom, DomElementArg, MutableObsArray, obsArray, Observable} from 'grainjs';
 import clamp = require('lodash/clamp');
 import defaults = require('lodash/defaults');
+import {isNarrowScreenObs, testId} from 'app/client/ui2018/cssVars';
 
 // When rendering app errors, we'll only show the last few.
 const maxAppErrors = 5;
@@ -341,11 +342,24 @@ export class Notifier extends Disposable implements INotifier {
   private _createAppErrorItem(where: 'toast' | 'dropdown') {
     return this.createNotification({
       // Building DOM here in NotifyModel seems wrong, but I haven't come up with a better way.
-      message: () => dom.forEach(this._appErrorList, (appErr: IAppError) =>
-        (where === 'toast' && appErr.seen ? null :
-          dom('div', timeFormat('T', new Date(appErr.timestamp)), ' ', appErr.error.message)
-        )
-      ),
+      message: () => dom.domComputed((use) => {
+        let appErrors = use(this._appErrorList);
+
+        // On narrow screens, only show the most recent error in toasts to conserve space.
+        if (where === 'toast' && use(isNarrowScreenObs())) {
+          appErrors = appErrors.length > 0 ? [appErrors[appErrors.length - 1]] : [];
+        }
+
+        return dom('div',
+          dom.forEach(appErrors, (appErr: IAppError) =>
+            (where === 'toast' && appErr.seen ? null :
+              dom('div', timeFormat('T', new Date(appErr.timestamp)), ' ',
+                  appErr.error.message, testId('notification-app-error'))
+            )
+          ),
+          testId('notification-app-errors')
+        );
+      }),
       title: 'Unexpected error',
       canUserClose: true,
       inToast: where === 'toast',
diff --git a/test/nbrowser/gristUtils.ts b/test/nbrowser/gristUtils.ts
index 98831e1a..937e403f 100644
--- a/test/nbrowser/gristUtils.ts
+++ b/test/nbrowser/gristUtils.ts
@@ -7,7 +7,7 @@ import * as fse from 'fs-extra';
 import escapeRegExp = require('lodash/escapeRegExp');
 import noop = require('lodash/noop');
 import startCase = require('lodash/startCase');
-import { assert, driver, error, IRectangle, Key, WebElement, WebElementPromise } from 'mocha-webdriver';
+import { assert, driver, error, Key, WebElement, WebElementPromise } from 'mocha-webdriver';
 import { stackWrapFunc, stackWrapOwnMethods } from 'mocha-webdriver';
 import * as path from 'path';
 
@@ -920,7 +920,7 @@ export async function toggleSidePanel(which: 'right'|'left', goal: 'open'|'close
   const delta = 0.1;
 
   // Adds '-ns' when narrow screen
-  const suffix = (await driver.manage().window().getRect()).width < 768 ? '-ns' : '';
+  const suffix = (await getWindowDimensions()).width < 768 ? '-ns' : '';
 
   // click the opener and wait for the duration of the transition
   await driver.find(`.test-${which}-opener${suffix}`).doClick();
@@ -1524,20 +1524,55 @@ export async function selectColumnRange(col1: string, col2: string) {
   await driver.mouseUp();
 }
 
+export interface WindowDimensions {
+  width: number;
+  height: number;
+}
+
 /**
- * Changes browser window dimension to FullHd for a test suit.
+ * Gets browser window dimensions.
  */
-export function bigScreen() {
-  let oldRect!: IRectangle;
+ export async function getWindowDimensions(): Promise<WindowDimensions> {
+  const {width, height} = await driver.manage().window().getRect();
+  return {width, height};
+}
+
+/**
+ * Sets browser window dimensions.
+ */
+export function setWindowDimensions(width: number, height: number) {
+  return driver.manage().window().setRect({width, height});
+}
+
+/**
+ * Changes browser window dimensions for the duration of a test suite.
+ */
+export function resizeWindowForSuite(width: number, height: number) {
+  let oldDimensions: WindowDimensions;
   before(async function () {
-    oldRect = await driver.manage().window().getRect();
-    await driver.manage().window().setRect({ width: 1920, height: 1080 });
+    oldDimensions = await getWindowDimensions();
+    await setWindowDimensions(width, height);
   });
   after(async function () {
-    await driver.manage().window().setRect(oldRect);
+    await setWindowDimensions(oldDimensions.width, oldDimensions.height);
   });
 }
 
+/**
+ * Changes browser window dimensions to FullHd for a test suite.
+ */
+export function bigScreen() {
+  resizeWindowForSuite(1920, 1080);
+}
+
+/**
+ * Shrinks browser window dimensions to trigger mobile mode for a test suite.
+ */
+ export function narrowScreen() {
+  resizeWindowForSuite(400, 750);
+
+}
+
 /**
  * Adds samples to the Examples & Templates page.
  */