(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
This commit is contained in:
George Gevoian 2021-08-31 11:04:45 -07:00
parent ef5da42378
commit a825115c04
2 changed files with 62 additions and 13 deletions

View File

@ -8,6 +8,7 @@ import {bundleChanges, Disposable, Holder, IDisposable, IDisposableOwner } from
import {Computed, dom, DomElementArg, MutableObsArray, obsArray, Observable} from 'grainjs'; import {Computed, dom, DomElementArg, MutableObsArray, obsArray, Observable} from 'grainjs';
import clamp = require('lodash/clamp'); import clamp = require('lodash/clamp');
import defaults = require('lodash/defaults'); import defaults = require('lodash/defaults');
import {isNarrowScreenObs, testId} from 'app/client/ui2018/cssVars';
// When rendering app errors, we'll only show the last few. // When rendering app errors, we'll only show the last few.
const maxAppErrors = 5; const maxAppErrors = 5;
@ -341,11 +342,24 @@ export class Notifier extends Disposable implements INotifier {
private _createAppErrorItem(where: 'toast' | 'dropdown') { private _createAppErrorItem(where: 'toast' | 'dropdown') {
return this.createNotification({ return this.createNotification({
// Building DOM here in NotifyModel seems wrong, but I haven't come up with a better way. // Building DOM here in NotifyModel seems wrong, but I haven't come up with a better way.
message: () => dom.forEach(this._appErrorList, (appErr: IAppError) => 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 : (where === 'toast' && appErr.seen ? null :
dom('div', timeFormat('T', new Date(appErr.timestamp)), ' ', appErr.error.message) dom('div', timeFormat('T', new Date(appErr.timestamp)), ' ',
appErr.error.message, testId('notification-app-error'))
) )
), ),
testId('notification-app-errors')
);
}),
title: 'Unexpected error', title: 'Unexpected error',
canUserClose: true, canUserClose: true,
inToast: where === 'toast', inToast: where === 'toast',

View File

@ -7,7 +7,7 @@ import * as fse from 'fs-extra';
import escapeRegExp = require('lodash/escapeRegExp'); import escapeRegExp = require('lodash/escapeRegExp');
import noop = require('lodash/noop'); import noop = require('lodash/noop');
import startCase = require('lodash/startCase'); 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 { stackWrapFunc, stackWrapOwnMethods } from 'mocha-webdriver';
import * as path from 'path'; import * as path from 'path';
@ -920,7 +920,7 @@ export async function toggleSidePanel(which: 'right'|'left', goal: 'open'|'close
const delta = 0.1; const delta = 0.1;
// Adds '-ns' when narrow screen // 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 // click the opener and wait for the duration of the transition
await driver.find(`.test-${which}-opener${suffix}`).doClick(); await driver.find(`.test-${which}-opener${suffix}`).doClick();
@ -1524,20 +1524,55 @@ export async function selectColumnRange(col1: string, col2: string) {
await driver.mouseUp(); 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() { export async function getWindowDimensions(): Promise<WindowDimensions> {
let oldRect!: IRectangle; 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 () { before(async function () {
oldRect = await driver.manage().window().getRect(); oldDimensions = await getWindowDimensions();
await driver.manage().window().setRect({ width: 1920, height: 1080 }); await setWindowDimensions(width, height);
}); });
after(async function () { 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. * Adds samples to the Examples & Templates page.
*/ */