mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
(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:
parent
ef5da42378
commit
a825115c04
@ -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',
|
||||
|
@ -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.
|
||||
*/
|
||||
|
Loading…
Reference in New Issue
Block a user