(core) updates from grist-core

app/client/ui/CreateTeamModal.ts

@@ -0,0 +1,362 @@
+import {autoFocus} from 'app/client/lib/domUtils';
+import {ValidationGroup, Validator} from 'app/client/lib/Validator';
+import {AppModel, getHomeUrl} from 'app/client/models/AppModel';
+import {reportError, UserError} from 'app/client/models/errors';
+import {urlState} from 'app/client/models/gristUrlState';
+import {bigBasicButton, bigPrimaryButton, bigPrimaryButtonLink} from 'app/client/ui2018/buttons';
+import {mediaSmall, theme, vars} from 'app/client/ui2018/cssVars';
+import {icon} from 'app/client/ui2018/icons';
+import {IModalControl, modal} from 'app/client/ui2018/modals';
+import {TEAM_PLAN} from 'app/common/Features';
+import {checkSubdomainValidity} from 'app/common/orgNameUtils';
+import {UserAPIImpl} from 'app/common/UserAPI';
+import {
+  Disposable, dom, DomArg, DomContents, DomElementArg, IDisposableOwner, input, makeTestId,
+  Observable, styled
+} from 'grainjs';
+import { makeT } from '../lib/localization';
+
+const t = makeT('CreateTeamModal');
+const testId = makeTestId('test-create-team-');
+
+export function buildNewSiteModal(context: Disposable, options: {
+  planName: string,
+  selectedPlan?: string,
+  onCreate?: () => void
+}) {
+  const { onCreate } = options;
+
+  return showModal(
+    context,
+    (_owner: Disposable, ctrl: IModalControl) => dom.create(NewSiteModalContent, ctrl, onCreate),
+    dom.cls(cssModalIndex.className),
+  );
+}
+
+class NewSiteModalContent extends Disposable {
+  private _page = Observable.create(this, 'createTeam');
+  private _team = Observable.create(this, '');
+  private _domain = Observable.create(this, '');
+  private _ctrl: IModalControl;
+
+  constructor(
+    ctrl: IModalControl,
+    private _onCreate?: (planName: string) => void) {
+    super();
+    this._ctrl = ctrl;
+  }
+
+  public buildDom() {
+    const team = this._team;
+    const domain = this._domain;
+    const ctrl = this._ctrl;
+    return dom.domComputed(this._page, pageValue => {
+
+      switch (pageValue) {
+        case 'createTeam': return buildTeamPage({
+          team,
+          domain,
+          create: () => this._createTeam(),
+          ctrl
+        });
+        case 'teamSuccess': return buildConfirm({domain: domain.get()});
+      }
+    });
+  }
+
+  private async _createTeam() {
+    const api = new UserAPIImpl(getHomeUrl());
+    try {
+      await api.newOrg({name: this._team.get(), domain: this._domain.get()});
+      this._page.set('teamSuccess');
+      if (this._onCreate) {
+        this._onCreate(TEAM_PLAN);
+      }
+    } catch (err) {
+      reportError(err as Error);
+    }
+  }
+}
+
+export function buildUpgradeModal(owner: Disposable, planName: string): void {
+  throw new UserError(t(`Billing is not supported in grist-core`));
+}
+
+export interface UpgradeButton  {
+  showUpgradeCard(...args: DomArg<HTMLElement>[]): DomContents;
+  showUpgradeButton(...args: DomArg<HTMLElement>[]): DomContents;
+}
+
+export function buildUpgradeButton(owner: IDisposableOwner, app: AppModel): UpgradeButton {
+  return {
+    showUpgradeCard: () => null,
+    showUpgradeButton: () => null,
+  };
+}
+
+export function buildConfirm({
+  domain,
+}: {
+  domain: string;
+}) {
+  return cssConfirmWrapper(
+    cssSparks(),
+    hspace('1.5em'),
+    cssHeaderLine(t('Team site created'), testId("confirmation")),
+    hspace('2em'),
+    bigPrimaryButtonLink(
+      urlState().setLinkUrl({org: domain || undefined}), t('Go to your site'), testId("confirmation-link")
+    )
+  );
+}
+
+function buildTeamPage({
+  team,
+  domain,
+  create,
+  ctrl
+}: {
+  team: Observable<string>;
+  domain: Observable<string>;
+  create: () => any;
+  ctrl: IModalControl;
+}) {
+  const disabled = Observable.create(null, false);
+  const group = new ValidationGroup();
+  async function click() {
+    disabled.set(true);
+    try {
+      if (!await group.validate()) {
+        return;
+      }
+      await create();
+    } finally {
+      disabled.set(false);
+    }
+  }
+  const clickOnEnter = dom.onKeyPress({
+    Enter: () => click(),
+  });
+  return cssWide(
+    dom.autoDispose(disabled),
+    cssHeaderLine(t("Work as a Team"), testId("creation-title")),
+    cssSubHeaderLine(t("Choose a name and url for your team site")),
+    hspace('1.5em'),
+    cssColumns(
+      cssSetup(
+        cssLabel(t('Team name')),
+        cssRow(cssField(cssInput(
+          team,
+          {onInput: true},
+          autoFocus(),
+          group.inputReset(),
+          clickOnEnter,
+          testId('name')))),
+        dom.create(Validator, group, t("Team name is required"), () => !!team.get()),
+        hspace('2em'),
+        cssLabel(t('Team url')),
+        cssRow(
+          {style: 'align-items: baseline'},
+          cssField(
+            {style: 'flex: 0 1 0; min-width: auto; margin-right: 5px'},
+            dom.text(`${window.location.origin}/o/`)),
+          cssField(cssInput(
+            domain, {onInput: true}, clickOnEnter, group.inputReset(), testId('domain')
+          )),
+        ),
+        dom.create(Validator, group, t("Domain name is required"), () => !!domain.get()),
+        dom.create(Validator, group, t("Domain name is invalid"), () => checkSubdomainValidity(domain.get())),
+        cssButtonsRow(
+          bigBasicButton(
+            t('Cancel'),
+            dom.on('click', () => ctrl.close()),
+            testId('cancel')),
+          bigPrimaryButton(t("Create site"),
+            dom.on('click', click),
+            dom.prop('disabled', disabled),
+            testId('confirm')
+          ),
+        )
+      )
+    )
+  );
+}
+
+function showModal(
+  context: Disposable,
+  content: (owner: Disposable, ctrl: IModalControl) => DomContents,
+  ...args: DomElementArg[]
+) {
+  let control!: IModalControl;
+  modal((ctrl, modalScope) => {
+    control = ctrl;
+    // When parent is being disposed and we are still visible, close the modal.
+    context.onDispose(() => {
+      // If the modal is already closed (disposed, do nothing)
+      if (modalScope.isDisposed()) {
+        return;
+      }
+      // If not, and parent is going away, close the modal.
+      ctrl.close();
+    });
+    return [
+      cssCreateTeamModal.cls(''),
+      cssCloseButton(testId("close-modal"), cssBigIcon('CrossBig'), dom.on('click', () => ctrl.close())),
+      content(modalScope, ctrl)
+    ];
+  }, {backerDomArgs: args});
+  return control;
+}
+
+function hspace(height: string) {
+  return dom('div', {style: `height: ${height}`});
+}
+
+export const cssCreateTeamModal = styled('div', `
+  position: relative;
+  @media ${mediaSmall} {
+    & {
+      width: 100%;
+      min-width: unset;
+      padding: 24px 16px;
+    }
+  }
+`);
+
+const cssConfirmWrapper = styled('div', `
+  text-align: center;
+`);
+
+const cssSparks = styled('div', `
+  height: 48px;
+  width: 48px;
+  background-image: var(--icon-Sparks);
+  display: inline-block;
+  background-repeat: no-repeat;
+  &-small {
+    height: 20px;
+    width: 20px;
+    background-size: cover;
+  }
+`);
+
+const cssColumns = styled('div', `
+  display: flex;
+  gap: 60px;
+  flex-wrap: wrap;
+`);
+
+const cssSetup = styled('div', `
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`);
+
+const cssHeaderLine = styled('div', `
+  text-align: center;
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 16px;
+`);
+
+const cssSubHeaderLine = styled('div', `
+  text-align: center;
+  margin-bottom: 7px;
+`);
+
+const cssLabel = styled('label', `
+  font-weight: ${vars.headerControlTextWeight};
+  font-size: ${vars.mediumFontSize};
+  color: ${theme.text};
+  line-height: 1.5em;
+  margin: 0px;
+  margin-bottom: 0.3em;
+`);
+
+
+const cssWide = styled('div', `
+  min-width: 760px;
+  @media ${mediaSmall} {
+    & {
+      min-width: unset;
+    }
+  }
+`);
+
+const cssRow = styled('div', `
+  display: flex;
+`);
+
+const cssField = styled('div', `
+  display: block;
+  flex: 1 1 0;
+  margin: 4px 0;
+  min-width: 120px;
+`);
+
+
+const cssButtonsRow = styled('div', `
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  min-width: 250px;
+  gap: 10px;
+  flex-wrap: wrap;
+  @media ${mediaSmall} {
+    & {
+      margin-top: 60px;
+    }
+  }
+`);
+
+const cssCloseButton = styled('div', `
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  --icon-color: ${theme.modalCloseButtonFg};
+
+  &:hover {
+    background-color: ${theme.hover};
+  }
+`);
+
+const cssBigIcon = styled(icon, `
+  padding: 12px;
+`);
+
+const cssModalIndex = styled('div', `
+  z-index: ${vars.pricingModalZIndex}
+`);
+
+const cssInput = styled(input, `
+  color: ${theme.inputFg};
+  background-color: ${theme.inputBg};
+  font-size: ${vars.mediumFontSize};
+  height: 42px;
+  line-height: 16px;
+  width: 100%;
+  padding: 13px;
+  border: 1px solid ${theme.inputBorder};
+  border-radius: 3px;
+  outline: none;
+
+  &-invalid {
+    color: ${theme.inputInvalid};
+  }
+
+  &[type=number] {
+    -moz-appearance: textfield;
+  }
+  &[type=number]::-webkit-inner-spin-button,
+  &[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
+`);

app/client/ui/HomeIntro.ts

@@ -93,7 +93,10 @@ function makeTeamSiteIntro(homeModel: HomeModel) {
     cssIntroLine(t("Get started by inviting your team and creating your first Grist document.")),
     (!isFeatureEnabled('helpCenter') ? null :
       cssIntroLine(
-        'Learn more in our ', helpCenterLink(), ', or find an expert via our ', sproutsProgram, '.',  // TODO i18n
+        t(
+          'Learn more in our {{helpCenterLink}}, or find an expert via our {{sproutsProgram}}.',
+          {helpCenterLink: helpCenterLink(), sproutsProgram}
+        ),
         testId('welcome-text')
       )
     ),

app/client/ui/ProductUpgradesStub.ts

@@ -1,30 +0,0 @@
-import type {AppModel} from 'app/client/models/AppModel';
-import {commonUrls} from 'app/common/gristUrls';
-import {Disposable, DomArg, DomContents, IDisposableOwner} from 'grainjs';
-
-export function buildNewSiteModal(context: Disposable, options: {
-  planName: string,
-  selectedPlan?: string,
-  onCreate?: () => void
-}) {
-  window.location.href = commonUrls.plans;
-}
-
-export function buildUpgradeModal(owner: Disposable, planName: string)  {
-  window.location.href = commonUrls.plans;
-}
-
-export function showTeamUpgradeConfirmation(owner: Disposable) {
-}
-
-export interface UpgradeButton  {
-  showUpgradeCard(...args: DomArg<HTMLElement>[]): DomContents;
-  showUpgradeButton(...args: DomArg<HTMLElement>[]): DomContents;
-}
-
-export function buildUpgradeButton(owner: IDisposableOwner, app: AppModel): UpgradeButton {
-  return {
-    showUpgradeCard : () => null,
-    showUpgradeButton : () => null,
-  };
-}

app/client/ui/SupportGristNudge.ts

@@ -149,8 +149,8 @@ export class SupportGristNudge extends Disposable {
       cssCenterAlignedHeader(t('Opted In')),
       cssParagraph(
         t(
-          'Thank you! Your trust and support is greatly appreciated. ' +
-          'Opt out any time from the {{link}} in the user menu.',
+          'Thank you! Your trust and support is greatly appreciated.\
+ Opt out any time from the {{link}} in the user menu.',
           {link: adminPanelLink()},
         ),
       ),

app/client/ui/WebhookPage.ts

@@ -37,7 +37,7 @@ const WEBHOOK_COLUMNS = [
     id: 'vt_webhook_fc1',
     colId: 'tableId',
     type: 'Choice',
-    label: 'Table',
+    label: t('Table'),
     // widgetOptions are configured later, since the choices depend
     // on the user tables in the document.
   },
@@ -45,13 +45,13 @@ const WEBHOOK_COLUMNS = [
     id: 'vt_webhook_fc2',
     colId: 'url',
     type: 'Text',
-    label: 'URL',
+    label: t('URL'),
   },
   {
     id: 'vt_webhook_fc3',
     colId: 'eventTypes',
     type: 'ChoiceList',
-    label: 'Event Types',
+    label: t('Event Types'),
     widgetOptions: JSON.stringify({
       widget: 'TextBox',
       alignment: 'left',
@@ -59,11 +59,17 @@ const WEBHOOK_COLUMNS = [
       choiceOptions: {},
     }),
   },
+  {
+    id: 'vt_webhook_fc10',
+    colId: 'watchedColIdsText',
+    type: 'Text',
+    label: t('Filter for changes in these columns (semicolon-separated ids)'),
+  },
   {
     id: 'vt_webhook_fc4',
     colId: 'enabled',
     type: 'Bool',
-    label: 'Enabled',
+    label: t('Enabled'),
     widgetOptions: JSON.stringify({
       widget: 'Switch',
     }),
@@ -72,31 +78,31 @@ const WEBHOOK_COLUMNS = [
     id: 'vt_webhook_fc5',
     colId: 'isReadyColumn',
     type: 'Text',
-    label: 'Ready Column',
+    label: t('Ready Column'),
   },
   {
     id: 'vt_webhook_fc6',
     colId: 'webhookId',
     type: 'Text',
-    label: 'Webhook Id',
+    label: t('Webhook Id'),
   },
   {
     id: 'vt_webhook_fc7',
     colId: 'name',
     type: 'Text',
-    label: 'Name',
+    label: t('Name'),
   },
   {
     id: 'vt_webhook_fc8',
     colId: 'memo',
     type: 'Text',
-    label: 'Memo',
+    label: t('Memo'),
   },
   {
     id: 'vt_webhook_fc9',
     colId: 'status',
     type: 'Text',
-    label: 'Status',
+    label: t('Status'),
   },
 ] as const;
 
@@ -107,8 +113,8 @@ const WEBHOOK_VIEW_FIELDS: Array<(typeof WEBHOOK_COLUMNS)[number]['colId']> = [
   'name', 'memo',
   'eventTypes', 'url',
   'tableId', 'isReadyColumn',
-  'webhookId', 'enabled',
-  'status'
+  'watchedColIdsText', 'webhookId',
+  'enabled', 'status'
 ];
 
 /**
@@ -127,9 +133,9 @@ class WebhookExternalTable implements IExternalTable {
   public name = 'GristHidden_WebhookTable';
   public initialActions = _prepareWebhookInitialActions(this.name);
   public saveableFields = [
-    'tableId', 'url', 'eventTypes', 'enabled', 'name', 'memo', 'isReadyColumn',
+    'tableId', 'watchedColIdsText', 'url', 'eventTypes', 'enabled', 'name', 'memo', 'isReadyColumn',
   ];
-  public webhooks: ObservableArray<WebhookSummary> =  observableArray<WebhookSummary>([]);
+  public webhooks: ObservableArray<UIWebhookSummary> = observableArray<UIWebhookSummary>([]);
 
   public constructor(private _docApi: DocAPI) {
   }
@@ -151,7 +157,7 @@ class WebhookExternalTable implements IExternalTable {
         }
         const colIds = new Set(getColIdsFromDocAction(d) || []);
         if (colIds.has('webhookId') || colIds.has('status')) {
-          throw new Error(`Sorry, not all fields can be edited.`);
+          throw new Error(t(`Sorry, not all fields can be edited.`));
         }
       }
     }
@@ -162,7 +168,7 @@ class WebhookExternalTable implements IExternalTable {
         continue;
       }
       await this._removeWebhook(rec);
-      reportMessage(`Removed webhook.`);
+      reportMessage(t(`Removed webhook.`));
     }
     const updates = new Set(delta.updateRows);
     const t2 = editor;
@@ -227,6 +233,7 @@ class WebhookExternalTable implements IExternalTable {
     for (const webhook of webhooks) {
       const values = _mapWebhookValues(webhook);
       const rowId = rowMap.get(webhook.id);
+
       if (rowId) {
         toRemove.delete(rowId);
         actions.push(
@@ -269,7 +276,12 @@ class WebhookExternalTable implements IExternalTable {
   private _initalizeWebhookList(webhooks: WebhookSummary[]){
 
     this.webhooks.removeAll();
-    this.webhooks.push(...webhooks);
+    this.webhooks.push(
+      ...webhooks.map(webhook => {
+        const uiWebhook: UIWebhookSummary = {...webhook};
+        uiWebhook.fields.watchedColIdsText = webhook.fields.watchedColIds ? webhook.fields.watchedColIds.join(";") : "";
+        return uiWebhook;
+      }));
   }
 
   private _getErrorString(e: ApiError): string {
@@ -308,6 +320,9 @@ class WebhookExternalTable implements IExternalTable {
     if (fields.eventTypes) {
       fields.eventTypes = without(fields.eventTypes, 'L');
     }
+    fields.watchedColIds = fields.watchedColIdsText
+      ? fields.watchedColIdsText.split(";").filter((colId: string) => colId.trim() !== "")
+      : [];
     return fields;
   }
 }
@@ -355,12 +370,12 @@ export class WebhookPage extends DisposableWithEvents {
 
   public async reset() {
     await this.docApi.flushWebhooks();
-    reportSuccess('Cleared webhook queue.');
+    reportSuccess(t('Cleared webhook queue.'));
   }
 
   public async resetSelected(id: string) {
     await this.docApi.flushWebhook(id);
-    reportSuccess(`Cleared webhook ${id} queue.`);
+    reportSuccess(t(`Cleared webhook ${id} queue.`));
   }
 }
 
@@ -440,16 +455,21 @@ function _prepareWebhookInitialActions(tableId: string): DocAction[] {
 /**
  * Map a webhook summary to a webhook table raw record.  The main
  * difference is that `eventTypes` is tweaked to be in a cell format,
- * and `status` is converted to a string.
+ * `status` is converted to a string,
+ * and `watchedColIdsText` is converted to list in a cell format.
  */
-function _mapWebhookValues(webhookSummary: WebhookSummary): Partial<WebhookSchemaType> {
+function _mapWebhookValues(webhookSummary: UIWebhookSummary): Partial<WebhookSchemaType> {
   const fields = webhookSummary.fields;
-  const {eventTypes} = fields;
+  const {eventTypes, watchedColIdsText} = fields;
+  const watchedColIds = watchedColIdsText
+    ? watchedColIdsText.split(";").filter(colId => colId.trim() !== "")
+    : [];
   return {
     ...fields,
     webhookId: webhookSummary.id,
     status: JSON.stringify(webhookSummary.usage),
     eventTypes: [GristObjCode.List, ...eventTypes],
+    watchedColIds: [GristObjCode.List, ...watchedColIds],
   };
 }
 
@@ -457,6 +477,11 @@ type WebhookSchemaType = {
   [prop in keyof WebhookSummary['fields']]: WebhookSummary['fields'][prop]
 } & {
   eventTypes: [GristObjCode, ...unknown[]];
+  watchedColIds: [GristObjCode, ...unknown[]];
   status: string;
   webhookId: string;
 }
+
+type UIWebhookSummary = WebhookSummary & {
+  fields: {watchedColIdsText?: string;}
+}