(core) updates from grist-core

README.md

@@ -286,7 +286,8 @@ GRIST_SERVERS | the types of server to setup. Comma separated values which may c
 GRIST_SESSION_COOKIE | if set, overrides the name of Grist's cookie
 GRIST_SESSION_DOMAIN | if set, associates the cookie with the given domain - otherwise defaults to GRIST_DOMAIN
 GRIST_SESSION_SECRET | a key used to encode sessions
-GRIST_FORCE_LOGIN    | when set to 'true' disables anonymous access
+GRIST_ANON_PLAYGROUND    | When set to 'false' deny anonymous users access to the home page
+GRIST_FORCE_LOGIN    | Much like GRIST_ANON_PLAYGROUND but don't support anonymous access at all (features like sharing docs publicly requires authentication)
 GRIST_SINGLE_ORG | set to an org "domain" to pin client to that org
 GRIST_TEMPLATE_ORG | set to an org "domain" to show public docs from that org
 GRIST_HELP_CENTER | set the help center link ref

app/client/DefaultHooks.ts

@@ -1,11 +1,22 @@
 import { UrlTweaks } from 'app/common/gristUrls';
+import { IAttrObj } from 'grainjs';
 
 export interface IHooks {
   iframeAttributes?: Record<string, any>,
   fetch?: typeof fetch,
   baseURI?: string,
   urlTweaks?: UrlTweaks,
+
+  /**
+   * Modify the attributes of an <a> dom element.
+   * Convenient in grist-static to directly hook up a
+   * download link with the function that provides the data.
+   */
+  maybeModifyLinkAttrs(attrs: IAttrObj): IAttrObj;
 }
 
 export const defaultHooks: IHooks = {
+  maybeModifyLinkAttrs(attrs: IAttrObj) {
+    return attrs;
+  }
 };

app/client/models/DocPageModel.ts

@@ -209,7 +209,7 @@ export class DocPageModelImpl extends Disposable implements DocPageModel {
   public createLeftPane(leftPanelOpen: Observable<boolean>) {
     return cssLeftPanel(
       dom.maybe(this.gristDoc, (activeDoc) => [
-        addNewButton(leftPanelOpen,
+        addNewButton({ isOpen: leftPanelOpen },
           menu(() => addMenu(this.importSources, activeDoc, this.isReadonly.get()), {
             placement: 'bottom-start',
             // "Add New" menu should have the same width as the "Add New" button that opens it.

app/client/models/entities/ViewSectionRec.ts

@@ -1,5 +1,5 @@
 import BaseView from 'app/client/components/BaseView';
-import {LinkingState} from 'app/client/components/LinkingState';
+import {EmptyFilterColValues, LinkingState} from 'app/client/components/LinkingState';
 import {KoArray} from 'app/client/lib/koArray';
 import {ColumnToMapImpl} from 'app/client/models/ColumnToMap';
 import {
@@ -637,7 +637,7 @@ export function createViewSectionRec(this: ViewSectionRec, docModel: DocModel):
   }));
 
   this.linkingFilter = this.autoDispose(ko.pureComputed(() => {
-    return this.linkingState()?.filterColValues?.() || {filters: {}, operations: {}};
+    return this.linkingState()?.filterColValues?.() || EmptyFilterColValues;
   }));
 
   // If the view instance for this section is instantiated, it will be accessible here.

app/client/ui/AddNewButton.ts

@@ -5,14 +5,27 @@ import {dom, DomElementArg, Observable, styled} from "grainjs";
 
 const t = makeT(`AddNewButton`);
 
-export function addNewButton(isOpen: Observable<boolean> | boolean = true, ...args: DomElementArg[]) {
+export function addNewButton(
+  {
+    isOpen,
+    isDisabled = false,
+  }: {
+    isOpen: Observable<boolean> | boolean,
+    isDisabled?: boolean
+  },
+  ...args: DomElementArg[]
+) {
   return cssAddNewButton(
     cssAddNewButton.cls('-open', isOpen),
+    cssAddNewButton.cls('-disabled', isDisabled),
     // Setting spacing as flex items allows them to shrink faster when there isn't enough space.
     cssLeftMargin(),
     cssAddText(t("Add New")),
     dom('div', {style: 'flex: 1 1 16px'}),
-    cssPlusButton(cssPlusIcon('Plus')),
+    cssPlusButton(
+      cssPlusButton.cls('-disabled', isDisabled),
+      cssPlusIcon('Plus')
+    ),
     dom('div', {style: 'flex: 0 1 16px'}),
     ...args,
   );
@@ -47,6 +60,11 @@ export const cssAddNewButton = styled('div', `
     background-color: ${theme.controlPrimaryHoverBg};
     --circle-color: ${theme.addNewCircleHoverBg};
   }
+
+  &-disabled, &-disabled:hover {
+    color: ${theme.controlDisabledFg};
+    background-color: ${theme.controlDisabledBg}
+  }
 `);
 const cssLeftMargin = styled('div', `
   flex: 0 1 24px;
@@ -72,6 +90,9 @@ const cssPlusButton = styled('div', `
   border-radius: 14px;
   background-color: var(--circle-color);
   text-align: center;
+  &-disabled {
+    background-color: ${theme.controlDisabledBg};
+  }
 `);
 const cssPlusIcon = styled(icon, `
   background-color: ${theme.addNewCircleFg};

app/client/ui/HomeIntro.ts

@@ -1,5 +1,5 @@
 import {makeT} from 'app/client/lib/localization';
-import {getLoginOrSignupUrl, urlState} from 'app/client/models/gristUrlState';
+import {getLoginOrSignupUrl, getLoginUrl, getSignupUrl, urlState} from 'app/client/models/gristUrlState';
 import {HomeModel} from 'app/client/models/HomeModel';
 import {productPill} from 'app/client/ui/AppHeader';
 import * as css from 'app/client/ui/DocMenuCss';
@@ -12,6 +12,7 @@ import {cssLink} from 'app/client/ui2018/links';
 import {commonUrls, isFeatureEnabled} from 'app/common/gristUrls';
 import {FullUser} from 'app/common/LoginSessionAPI';
 import * as roles from 'app/common/roles';
+import {getGristConfig} from 'app/common/urlUtils';
 import {Computed, dom, DomContents, styled} from 'grainjs';
 
 const t = makeT('HomeIntro');
@@ -112,10 +113,36 @@ function makePersonalIntro(homeModel: HomeModel, user: FullUser) {
   ];
 }
 
+function makeAnonIntroWithoutPlayground(homeModel: HomeModel) {
+    return [
+      (!isFeatureEnabled('helpCenter') ? null : cssIntroLine(t("Visit our {{link}} to learn more about Grist.", {
+        link: helpCenterLink()
+      }), testId('welcome-text-no-playground'))),
+      cssIntroLine(t("To use Grist, please either sign up or sign in.")),
+      cssBtnGroup(
+        cssBtn(t("Sign up"), cssButton.cls('-primary'), testId('intro-sign-up'),
+          dom.on('click', () => location.href = getSignupUrl())
+        ),
+        cssBtn(t("Sign in"), testId('intro-sign-in'),
+          dom.on('click', () => location.href = getLoginUrl())
+        )
+      )
+    ];
+}
+
 function makeAnonIntro(homeModel: HomeModel) {
+  const welcomeToGrist = css.docListHeader(t("Welcome to Grist!"), testId('welcome-title'));
+
+  if (!getGristConfig().enableAnonPlayground) {
+    return [
+      welcomeToGrist,
+      ...makeAnonIntroWithoutPlayground(homeModel)
+    ];
+  }
+
   const signUp = cssLink({href: getLoginOrSignupUrl()}, t("Sign up"));
   return [
-    css.docListHeader(t("Welcome to Grist!"), testId('welcome-title')),
+    welcomeToGrist,
     cssIntroLine(t("Get started by exploring templates, or creating your first Grist document.")),
     cssIntroLine(t("{{signUp}} to save your work. ", {signUp}),
       (!isFeatureEnabled('helpCenter') ? null : t("Visit our {{link}} to learn more.", { link: helpCenterLink() })),

app/client/ui/HomeLeftPane.ts

@@ -30,16 +30,17 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
   const creating = observable<boolean>(false);
   const renaming = observable<Workspace|null>(null);
   const isAnonymous = !home.app.currentValidUser;
+  const canCreate = !isAnonymous || getGristConfig().enableAnonPlayground;
 
   return cssContent(
     dom.autoDispose(creating),
     dom.autoDispose(renaming),
-    addNewButton(leftPanelOpen,
-      menu(() => addMenu(home, creating), {
+    addNewButton({ isOpen: leftPanelOpen, isDisabled: !canCreate },
+      canCreate ? menu(() => addMenu(home, creating), {
         placement: 'bottom-start',
         // "Add New" menu should have the same width as the "Add New" button that opens it.
         stretchToSelector: `.${cssAddNewButton.className}`
-      }),
+      }) : null,
       dom.cls('behavioral-prompt-add-new'),
       testId('dm-add-new'),
     ),

app/client/ui/MakeCopyMenu.ts

@@ -3,6 +3,7 @@
  * the sample documents (those in the Support user's Examples & Templates workspace).
  */
 
+import {hooks} from 'app/client/Hooks';
 import {makeT} from 'app/client/lib/localization';
 import {AppModel, reportError} from 'app/client/models/AppModel';
 import {DocPageModel} from 'app/client/models/DocPageModel';
@@ -310,14 +311,14 @@ export function downloadDocModal(doc: Document, pageModel: DocPageModel) {
       ),
       cssModalButtons(
         dom.domComputed(use =>
-          bigPrimaryButtonLink(`Download`, {
+          bigPrimaryButtonLink(`Download`, hooks.maybeModifyLinkAttrs({
               href: pageModel.appModel.api.getDocAPI(doc.id).getDownloadUrl({
                 template: use(selected) === "template",
                 removeHistory: use(selected) === "nohistory" || use(selected) === "template",
               }),
               target: '_blank',
               download: ''
-            },
+            }),
             dom.on('click', () => {
               ctl.close();
             }),