(core) updates from grist-core

app/client/boot.ts

@@ -0,0 +1,259 @@
+import { AppModel } from 'app/client/models/AppModel';
+import { createAppPage } from 'app/client/ui/createAppPage';
+import { pagePanels } from 'app/client/ui/PagePanels';
+import { BootProbeInfo, BootProbeResult } from 'app/common/BootProbe';
+import { removeTrailingSlash } from 'app/common/gutil';
+import { getGristConfig } from 'app/common/urlUtils';
+import { Disposable, dom, Observable, styled, UseCBOwner } from 'grainjs';
+
+const cssBody = styled('div', `
+  padding: 20px;
+  overflow: auto;
+`);
+
+const cssHeader = styled('div', `
+  padding: 20px;
+`);
+
+const cssResult = styled('div', `
+  max-width: 500px;
+`);
+
+/**
+ *
+ * A "boot" page for inspecting the state of the Grist installation.
+ *
+ * TODO: deferring using any localization machinery so as not
+ * to have to worry about its failure modes yet, but it should be
+ * fine as long as assets served locally are used.
+ *
+ */
+export class Boot extends Disposable {
+
+  // The back end will offer a set of probes (diagnostics) we
+  // can use. Probes have unique IDs.
+  public probes: Observable<BootProbeInfo[]>;
+
+  // Keep track of probe results we have received, by probe ID.
+  public results: Map<string, Observable<BootProbeResult>>;
+
+  // Keep track of probe requests we are making, by probe ID.
+  public requests: Map<string, BootProbe>;
+
+  constructor(_appModel: AppModel) {
+    super();
+    // Setting title in constructor seems to be how we are doing this,
+    // based on other similar pages.
+    document.title = 'Booting Grist';
+    this.probes = Observable.create(this, []);
+    this.results = new Map();
+    this.requests = new Map();
+  }
+
+  /**
+   * Set up the page. Uses the generic Grist layout with an empty
+   * side panel, just for convenience. Could be made a lot prettier.
+   */
+  public buildDom() {
+    const config = getGristConfig();
+    const errMessage = config.errMessage;
+    if (!errMessage) {
+      // Probe tool URLs are relative to the current URL. Don't trust configuration,
+      // because it may be buggy if the user is here looking at the boot page
+      // to figure out some problem.
+      const url = new URL(removeTrailingSlash(document.location.href));
+      url.pathname += '/probe';
+      fetch(url.href).then(async resp => {
+        const _probes = await resp.json();
+        this.probes.set(_probes.probes);
+      }).catch(e => reportError(e));
+    }
+
+    const rootNode = dom('div',
+      dom.domComputed(
+        use => {
+          return pagePanels({
+            leftPanel: {
+              panelWidth: Observable.create(this, 240),
+              panelOpen: Observable.create(this, false),
+              hideOpener: true,
+              header: null,
+              content: null,
+            },
+            headerMain: cssHeader(dom('h1', 'Grist Boot')),
+            contentMain: this.buildBody(use, {errMessage}),
+          });
+        }
+      ),
+      );
+    return rootNode;
+  }
+
+  /**
+   * The body of the page is very simple right now, basically a
+   * placeholder.  Make a section for each probe, and kick them off in
+   * parallel, showing results as they come in.
+   */
+  public buildBody(use: UseCBOwner, options: {errMessage?: string}) {
+    if (options.errMessage) {
+      return cssBody(cssResult(this.buildError()));
+    }
+    return cssBody([
+      ...use(this.probes).map(probe => {
+        const {id} = probe;
+        let result = this.results.get(id);
+        if (!result) {
+          result = Observable.create(this, {});
+          this.results.set(id, result);
+        }
+        let request = this.requests.get(id);
+        if (!request) {
+          request = new BootProbe(id, this);
+          this.requests.set(id, request);
+        }
+        request.start();
+        return cssResult(
+          this.buildResult(probe, use(result), probeDetails[id]));
+      }),
+    ]);
+  }
+
+  /**
+   * This is used when there is an attempt to access the boot page
+   * but something isn't right - either the page isn't enabled, or
+   * the key in the URL is wrong. Give the user some information about
+   * how to set things up.
+   */
+  public buildError() {
+    return dom(
+      'div',
+      dom('p',
+          'A diagnostics page can be made available at:',
+          dom('blockquote', '/boot/GRIST_BOOT_KEY'),
+          'GRIST_BOOT_KEY is an environment variable ',
+          ' set before Grist starts. It should only',
+          ' contain characters that are valid in a URL.',
+          ' It should be a secret, since no authentication is needed',
+          ' to visit the diagnostics page.'),
+      dom('p',
+          'You are seeing this page because either the key is not set,',
+          ' or it is not in the URL.'),
+    );
+  }
+
+  /**
+   * An ugly rendering of information returned by the probe.
+   */
+  public buildResult(info: BootProbeInfo, result: BootProbeResult,
+                     details: ProbeDetails|undefined) {
+    const out: (HTMLElement|string|null)[] = [];
+    out.push(dom('h2', info.name));
+    if (details) {
+      out.push(dom('p', '> ', details.info));
+    }
+    if (result.verdict) {
+      out.push(dom('pre', result.verdict));
+    }
+    if (result.success !== undefined) {
+      out.push(result.success ? '✅' : '❌');
+    }
+    if (result.done === true) {
+      out.push(dom('p', 'no fault detected'));
+    }
+    if (result.details) {
+      for (const [key, val] of Object.entries(result.details)) {
+        out.push(dom(
+          'div',
+          key,
+          dom('input', dom.prop('value', JSON.stringify(val)))));
+      }
+    }
+    return out;
+  }
+}
+
+/**
+ * Represents a single diagnostic.
+ */
+export class BootProbe {
+  constructor(public id: string, public boot: Boot) {
+    const url = new URL(removeTrailingSlash(document.location.href));
+    url.pathname = url.pathname + '/probe/' + id;
+    fetch(url.href).then(async resp => {
+      const _probes: BootProbeResult = await resp.json();
+      const ob = boot.results.get(id);
+      if (ob) {
+        ob.set(_probes);
+      }
+    }).catch(e => console.error(e));
+  }
+
+  public start() {
+    let result = this.boot.results.get(this.id);
+    if (!result) {
+      result = Observable.create(this.boot, {});
+      this.boot.results.set(this.id, result);
+    }
+  }
+}
+
+/**
+ * Create a stripped down page to show boot information.
+ * Make sure the API isn't used since it may well be unreachable
+ * due to a misconfiguration, especially in multi-server setups.
+ */
+createAppPage(appModel => {
+  return dom.create(Boot, appModel);
+}, {
+  useApi: false,
+});
+
+/**
+ * Basic information about diagnostics is kept on the server,
+ * but it can be useful to show extra details and tips in the
+ * client.
+ */
+const probeDetails: Record<string, ProbeDetails> = {
+  'boot-page': {
+    info: `
+This boot page should not be too easy to access. Either turn
+it off when configuration is ok (by unsetting GRIST_BOOT_KEY)
+or make GRIST_BOOT_KEY long and cryptographically secure.
+`,
+  },
+
+  'health-check': {
+    info: `
+Grist has a small built-in health check often used when running
+it as a container.
+`,
+  },
+
+  'host-header': {
+    info: `
+Requests arriving to Grist should have an accurate Host
+header. This is essential when GRIST_SERVE_SAME_ORIGIN
+is set.
+`,
+  },
+
+  'system-user': {
+    info: `
+It is good practice not to run Grist as the root user.
+`,
+  },
+
+  'reachable': {
+    info: `
+The main page of Grist should be available.
+`
+  },
+};
+
+/**
+ * Information about the probe.
+ */
+interface ProbeDetails {
+  info: string;
+}
+

app/client/lib/dispose.js

@@ -2,7 +2,7 @@
  * dispose.js provides tools to components that needs to dispose of resources, such as
  * destroy DOM, and unsubscribe from events. The motivation with examples is presented here:
  *
- *    https://phab.getgrist.com/w/disposal/
+ *    /documentation/disposal/disposal.md
  */
 
 
@@ -191,7 +191,7 @@ Object.assign(Disposable.prototype, {
     }
 
     // Finish by wiping out the object, since nothing should use it after dispose().
-    // See https://phab.getgrist.com/w/disposal/ for more motivation.
+    // See /documentation/disposal.md for more motivation.
     wipeOutObject(this);
   }
 });

app/client/models/AppModel.ts

@@ -146,6 +146,11 @@ export interface AppModel {
   switchUser(user: FullUser, org?: string): Promise<void>;
 }
 
+export interface TopAppModelOptions {
+  /** Defaults to true. */
+  useApi?: boolean;
+}
+
 export class TopAppModelImpl extends Disposable implements TopAppModel {
   public readonly isSingleOrg: boolean;
   public readonly productFlavor: ProductFlavor;
@@ -163,14 +168,16 @@ export class TopAppModelImpl extends Disposable implements TopAppModel {
   // up new widgets - that seems ok.
   private readonly _widgets: AsyncCreate<ICustomWidget[]>;
 
-  constructor(window: {gristConfig?: GristLoadConfig}, public readonly api: UserAPI = newUserAPIImpl()) {
+  constructor(window: {gristConfig?: GristLoadConfig},
+              public readonly api: UserAPI = newUserAPIImpl(),
+              public readonly options: TopAppModelOptions = {}) {
     super();
     setErrorNotifier(this.notifier);
     this.isSingleOrg = Boolean(window.gristConfig && window.gristConfig.singleOrg);
     this.productFlavor = getFlavor(window.gristConfig && window.gristConfig.org);
     this._gristConfig = window.gristConfig;
     this._widgets = new AsyncCreate<ICustomWidget[]>(async () => {
-      const widgets = await this.api.getWidgets();
+      const widgets = this.options.useApi === false ? [] : await this.api.getWidgets();
       this.customWidgets.set(widgets);
       return widgets;
     });
@@ -180,7 +187,9 @@ export class TopAppModelImpl extends Disposable implements TopAppModel {
     this.autoDispose(subscribe(this.currentSubdomain, (use) => this.initialize()));
     this.plugins = this._gristConfig?.plugins || [];
 
-    this.fetchUsersAndOrgs().catch(reportError);
+    if (this.options.useApi !== false) {
+      this.fetchUsersAndOrgs().catch(reportError);
+    }
   }
 
   public initialize(): void {
@@ -237,6 +246,10 @@ export class TopAppModelImpl extends Disposable implements TopAppModel {
 
   private async _doInitialize() {
     this.appObs.set(null);
+    if (this.options.useApi === false) {
+      AppModelImpl.create(this.appObs, this, null, null, {error: 'no-api', status: 500});
+      return;
+    }
     try {
       const {user, org, orgError} = await this.api.getSessionActive();
       if (this.isDisposed()) { return; }

app/client/ui/ColumnFilterMenu.ts

@@ -17,7 +17,7 @@ import {TableData} from 'app/client/models/TableData';
 import {ColumnFilterCalendarView} from 'app/client/ui/ColumnFilterCalendarView';
 import {relativeDatesControl} from 'app/client/ui/ColumnFilterMenuUtils';
 import {cssInput} from 'app/client/ui/cssInput';
-import {DateRangeOptions, IDateRangeOption} from 'app/client/ui/DateRangeOptions';
+import {getDateRangeOptions, IDateRangeOption} from 'app/client/ui/DateRangeOptions';
 import {cssPinButton} from 'app/client/ui/RightPanelStyles';
 import {basicButton, primaryButton, textButton} from 'app/client/ui2018/buttons';
 import {cssLabel as cssCheckboxLabel, cssCheckboxSquare,
@@ -176,16 +176,16 @@ export function columnFilterMenu(owner: IDisposableOwner, opts: IFilterMenuOptio
           cssLinkRow(
             testId('presets-links'),
             cssLink(
-              DateRangeOptions[0].label,
-              dom.on('click', () => action(DateRangeOptions[0]))
+              getDateRangeOptions()[0].label,
+              dom.on('click', () => action(getDateRangeOptions()[0]))
             ),
             cssLink(
-              DateRangeOptions[1].label,
-              dom.on('click', () => action(DateRangeOptions[1]))
+              getDateRangeOptions()[1].label,
+              dom.on('click', () => action(getDateRangeOptions()[1]))
             ),
             cssLink(
               'More ', icon('Dropdown'),
-              menu(() => DateRangeOptions.map(
+              menu(() => getDateRangeOptions().map(
                 (option) => menuItem(() => action(option), option.label)
               ), {attach: '.' + cssMenu.className})
             ),

app/client/ui/DateRangeOptions.ts

@@ -1,41 +1,55 @@
+import {makeT} from 'app/client/lib/localization';
 import { CURRENT_DATE, IRelativeDateSpec } from "app/common/RelativeDates";
 
+const t = makeT('DateRangeOptions');
+
 export interface IDateRangeOption {
   label: string;
   min: IRelativeDateSpec;
   max: IRelativeDateSpec;
 }
 
-export const DateRangeOptions: IDateRangeOption[] = [{
-  label: 'Today',
-  min: CURRENT_DATE,
-  max: CURRENT_DATE,
-}, {
-  label: 'Last 7 days',
-  min: [{quantity: -7, unit: 'day'}],
-  max: [{quantity: -1, unit: 'day'}],
-}, {
-  label: 'Next 7 days',
-  min: [{quantity: 1, unit: 'day'}],
-  max: [{quantity: 7, unit: 'day'}],
-}, {
-  label: 'Last Week',
-  min: [{quantity: -1, unit: 'week'}],
-  max: [{quantity: -1, unit: 'week', endOf: true}],
-}, {
-  label: 'Last 30 days',
-  min: [{quantity: -30, unit: 'day'}],
-  max: [{quantity: -1, unit: 'day'}],
-}, {
-  label: 'This week',
-  min: [{quantity: 0, unit: 'week'}],
-  max: [{quantity: 0, unit: 'week', endOf: true}],
-}, {
-  label: 'This month',
-  min: [{quantity: 0, unit: 'month'}],
-  max: [{quantity: 0, unit: 'month', endOf: true}],
-}, {
-  label: 'This year',
-  min: [{quantity: 0, unit: 'year'}],
-  max: [{quantity: 0, unit: 'year', endOf: true}],
-}];
+export function getDateRangeOptions(): IDateRangeOption[] {
+  return [
+    {
+      label: t('Today'),
+      min: CURRENT_DATE,
+      max: CURRENT_DATE,
+    },
+    {
+      label: t('Last 7 days'),
+      min: [{quantity: -7, unit: 'day'}],
+      max: [{quantity: -1, unit: 'day'}],
+    },
+    {
+      label: t('Next 7 days'),
+      min: [{quantity: 1, unit: 'day'}],
+      max: [{quantity: 7, unit: 'day'}],
+    },
+    {
+      label: t('Last Week'),
+      min: [{quantity: -1, unit: 'week'}],
+      max: [{quantity: -1, unit: 'week', endOf: true}],
+    },
+    {
+      label: t('Last 30 days'),
+      min: [{quantity: -30, unit: 'day'}],
+      max: [{quantity: -1, unit: 'day'}],
+    },
+    {
+      label: t('This week'),
+      min: [{quantity: 0, unit: 'week'}],
+      max: [{quantity: 0, unit: 'week', endOf: true}],
+    },
+    {
+      label: t('This month'),
+      min: [{quantity: 0, unit: 'month'}],
+      max: [{quantity: 0, unit: 'month', endOf: true}],
+    },
+    {
+      label: t('This year'),
+      min: [{quantity: 0, unit: 'year'}],
+      max: [{quantity: 0, unit: 'year', endOf: true}],
+    },
+  ];
+}

app/client/ui/GristTooltips.ts

@@ -85,7 +85,7 @@ export const GristTooltips: Record<Tooltip, TooltipContentFunc> = {
       t('Try out changes in a copy, then decide whether to replace the original with your edits.')
     ),
     dom('div',
-      cssLink({href: commonUrls.helpTryingOutChanges, target: '_blank'}, 'Learn more.'),
+      cssLink({href: commonUrls.helpTryingOutChanges, target: '_blank'}, t('Learn more.')),
     ),
     ...args,
   ),

app/client/ui/MakeCopyMenu.ts

@@ -303,7 +303,7 @@ export function downloadDocModal(doc: Document, pageModel: DocPageModel) {
     const selected = Observable.create<DownloadOption>(owner, 'full');
 
     return [
-      cssModalTitle(`Download document`),
+      cssModalTitle(t(`Download document`)),
       cssRadioCheckboxOptions(
           radioCheckboxOption(selected, 'full', t("Download full document and history")),
           radioCheckboxOption(selected, 'nohistory', t("Remove document history (can significantly reduce file size)")),
@@ -311,7 +311,7 @@ export function downloadDocModal(doc: Document, pageModel: DocPageModel) {
       ),
       cssModalButtons(
         dom.domComputed(use =>
-          bigPrimaryButtonLink(`Download`, hooks.maybeModifyLinkAttrs({
+          bigPrimaryButtonLink(t(`Download`), hooks.maybeModifyLinkAttrs({
               href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadUrl({
                 template: use(selected) === "template",
                 removeHistory: use(selected) === "nohistory" || use(selected) === "template",
@@ -325,7 +325,7 @@ export function downloadDocModal(doc: Document, pageModel: DocPageModel) {
             testId('download-button-link'),
           ),
         ),
-        bigBasicButton('Cancel', dom.on('click', () => {
+        bigBasicButton(t('Cancel'), dom.on('click', () => {
           ctl.close();
         }))
       )

app/client/ui/WelcomeCoachingCall.ts

@@ -8,6 +8,7 @@ import {cardPopup, cssPopupBody, cssPopupButtons, cssPopupCloseButton,
 import {icon} from 'app/client/ui2018/icons';
 import {getGristConfig} from 'app/common/urlUtils';
 import {dom, styled} from 'grainjs';
+import { commonUrls } from 'app/common/gristUrls';
 
 const t = makeT('WelcomeCoachingCall');
 
@@ -103,7 +104,7 @@ We can show you the Grist basics, or start working with your data right away to
             logTelemetryEvent('clickedScheduleCoachingCall');
           }),
           {
-            href: getGristConfig().freeCoachingCallUrl,
+            href: commonUrls.freeCoachingCall,
             target: '_blank',
           },
           testId('popup-primary-button'),

app/client/ui/createAppPage.ts

@@ -1,6 +1,6 @@
 import {get as getBrowserGlobals} from 'app/client/lib/browserGlobals';
 import {setupLocale} from 'app/client/lib/localization';
-import {AppModel, TopAppModelImpl} from 'app/client/models/AppModel';
+import {AppModel, TopAppModelImpl, TopAppModelOptions} from 'app/client/models/AppModel';
 import {reportError, setUpErrorHandling} from 'app/client/models/errors';
 import {buildSnackbarDom} from 'app/client/ui/NotifyUI';
 import {addViewportTag} from 'app/client/ui/viewport';
@@ -14,10 +14,12 @@ const G = getBrowserGlobals('document', 'window');
  * Sets up the application model, error handling, and global styles, and replaces
  * the DOM body with the result of calling `buildAppPage`.
  */
-export function createAppPage(buildAppPage: (appModel: AppModel) => DomContents) {
+export function createAppPage(
+  buildAppPage: (appModel: AppModel) => DomContents,
+  modelOptions: TopAppModelOptions = {}) {
   setUpErrorHandling();
 
-  const topAppModel = TopAppModelImpl.create(null, {});
+  const topAppModel = TopAppModelImpl.create(null, {}, undefined, modelOptions);
 
   addViewportTag();
   attachCssRootVars(topAppModel.productFlavor);

app/client/ui/errorPages.ts

@@ -7,7 +7,7 @@ import {pagePanels} from 'app/client/ui/PagePanels';
 import {createTopBarHome} from 'app/client/ui/TopBar';
 import {bigBasicButtonLink, bigPrimaryButtonLink} from 'app/client/ui2018/buttons';
 import {theme, vars} from 'app/client/ui2018/cssVars';
-import {getPageTitleSuffix} from 'app/common/gristUrls';
+import {commonUrls, getPageTitleSuffix} from 'app/common/gristUrls';
 import {getGristConfig} from 'app/common/urlUtils';
 import {dom, DomElementArg, makeTestId, observable, styled} from 'grainjs';
 
@@ -94,7 +94,7 @@ export function createNotFoundPage(appModel: AppModel, message?: string) {
     })),
     cssButtonWrap(bigPrimaryButtonLink(t("Go to main page"), testId('error-primary-btn'),
       urlState().setLinkUrl({}))),
-    cssButtonWrap(bigBasicButtonLink(t("Contact support"), {href: 'https://getgrist.com/contact'})),
+    cssButtonWrap(bigBasicButtonLink(t("Contact support"), {href: commonUrls.contactSupport})),
   ]);
 }
 
@@ -109,7 +109,7 @@ export function createOtherErrorPage(appModel: AppModel, message?: string) {
       t('There was an unknown error.')),
     cssButtonWrap(bigPrimaryButtonLink(t("Go to main page"), testId('error-primary-btn'),
       urlState().setLinkUrl({}))),
-    cssButtonWrap(bigBasicButtonLink(t("Contact support"), {href: 'https://getgrist.com/contact'})),
+    cssButtonWrap(bigBasicButtonLink(t("Contact support"), {href: commonUrls.contactSupport})),
   ]);
 }