(core) Show tooltips in other Grist flavors

Summary:
This enables tooltips in other Grist deployment types (e.g. grist-core). Previously,
most of these tooltips were only enabled in the SaaS offering of Grist.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D4097

app/client/components/BehavioralPromptsManager.ts

@@ -74,20 +74,27 @@ export class BehavioralPromptsManager extends Disposable {
     return this._dismissedTips.get().has(prompt);
   }
 
-  public shouldShowTips() {
-    return !this._prefs.get().dontShowTips;
-  }
-
   public shouldShowTip(prompt: BehavioralPrompt): boolean {
     if (this._isDisabled) { return false; }
 
+    // For non-SaaS flavors of Grist, don't show tips if the Help Center is explicitly
+    // disabled. A separate opt-out feature could be added down the road for more granularity,
+    // but will require communication in advance to avoid disrupting users.
+    const {deploymentType, features} = getGristConfig();
+    if (
+      !features?.includes('helpCenter') &&
+      // This one is an easter egg, so we make an exception.
+      prompt !== 'rickRow'
+    ) {
+      return false;
+    }
+
     const {
       showContext = 'desktop',
       showDeploymentTypes,
       forceShow = false,
     } = GristBehavioralPrompts[prompt];
 
-    const {deploymentType} = getGristConfig();
     if (
       showDeploymentTypes !== '*' &&
       (!deploymentType || !showDeploymentTypes.includes(deploymentType))

app/client/components/GristDoc.ts

@@ -67,6 +67,7 @@ import {undef, waitObs} from 'app/common/gutil';
 import {LocalPlugin} from "app/common/plugin";
 import {StringUnion} from 'app/common/StringUnion';
 import {TableData} from 'app/common/TableData';
+import {getGristConfig} from 'app/common/urlUtils';
 import {DocStateComparison} from 'app/common/UserAPI';
 import {AttachedCustomWidgets, IAttachedCustomWidget, IWidgetType} from 'app/common/widgetTypes';
 import {CursorPos} from 'app/plugin/GristAPI';
@@ -1644,6 +1645,14 @@ export class GristDoc extends DisposableWithEvents {
    * a doc tutorial or tour isn't available.
    */
   private _shouldAutoStartWelcomeTour(): boolean {
+    // For non-SaaS flavors of Grist, don't show the tour if the Help Center is explicitly
+    // disabled. A separate opt-out feature could be added down the road for more granularity,
+    // but will require communication in advance to avoid disrupting users.
+    const {features} = getGristConfig();
+    if (!features?.includes('helpCenter')) {
+      return false;
+    }
+
     // If a doc tutorial or tour are available, leave the welcome tour for another
     // doc (e.g. a new one).
     if (this._disableAutoStartingTours || this.docModel.isTutorial() || this.docModel.hasDocTour()) {

app/client/ui/GristTooltips.ts

@@ -144,7 +144,7 @@ export const GristBehavioralPrompts: Record<BehavioralPrompt, BehavioralPromptCo
       ),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   referenceColumnsConfig: {
     title: () => t('Reference Columns'),
@@ -159,7 +159,7 @@ record in that table, but you may select which column from that record to show.'
       ),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   rawDataPage: {
     title: () => t('Raw Data page'),
@@ -169,7 +169,7 @@ including summary tables and tables not included in page layouts.')),
       dom('div', cssLink({href: commonUrls.helpRawData, target: '_blank'}, t('Learn more.'))),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   accessRules: {
     title: () => t('Access Rules'),
@@ -179,7 +179,7 @@ to determine who can see or edit which parts of your document.')),
       dom('div', cssLink({href: commonUrls.helpAccessRules, target: '_blank'}, t('Learn more.'))),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   filterButtons: {
     title: () => t('Pinning Filters'),
@@ -189,7 +189,7 @@ to determine who can see or edit which parts of your document.')),
       dom('div', cssLink({href: commonUrls.helpFilterButtons, target: '_blank'}, t('Learn more.'))),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   nestedFiltering: {
     title: () => t('Nested Filtering'),
@@ -198,7 +198,7 @@ to determine who can see or edit which parts of your document.')),
       dom('div', t('Only those rows will appear which match all of the filters.')),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   pageWidgetPicker: {
     title: () => t('Selecting Data'),
@@ -207,7 +207,7 @@ to determine who can see or edit which parts of your document.')),
       dom('div', t('Use the 𝚺 icon to create summary (or pivot) tables, for totals or subtotals.')),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   pageWidgetPickerSelectBy: {
     title: () => t('Linking Widgets'),
@@ -217,7 +217,7 @@ to determine who can see or edit which parts of your document.')),
       dom('div', cssLink({href: commonUrls.helpLinkingWidgets, target: '_blank'}, t('Learn more.'))),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   editCardLayout: {
     title: () => t('Editing Card Layout'),
@@ -228,7 +228,7 @@ to determine who can see or edit which parts of your document.')),
       })),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   addNew: {
     title: () => t('Add New'),
@@ -236,7 +236,7 @@ to determine who can see or edit which parts of your document.')),
       dom('div', t('Click the Add New button to create new documents or workspaces, or import data.')),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   rickRow: {
     title: () => t('Anchor Links'),
@@ -261,13 +261,13 @@ to determine who can see or edit which parts of your document.')),
     content: (...args: DomElementArg[]) => cssTooltipContent(
       dom('div',
         t(
-          'You can choose one of our pre-made widgets or embed your own by providing its full URL.'
+          'You can choose from widgets available to you in the dropdown, or embed your own by providing its full URL.'
         ),
       ),
       dom('div', cssLink({href: commonUrls.helpCustomWidgets, target: '_blank'}, t('Learn more.'))),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
   calendarConfig: {
     title: () => t('Calendar'),
@@ -279,6 +279,6 @@ data.")),
       dom('div', cssLink({href: commonUrls.helpCalendarWidget, target: '_blank'}, t('Learn more.'))),
       ...args,
     ),
-    showDeploymentTypes: ['saas'],
+    showDeploymentTypes: ['saas', 'core', 'enterprise', 'electron'],
   },
 };

app/client/ui/LeftPanelCommon.ts

@@ -19,6 +19,7 @@ import {AppModel} from 'app/client/models/AppModel';
 import {testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {commonUrls, isFeatureEnabled} from 'app/common/gristUrls';
+import {getGristConfig} from 'app/common/urlUtils';
 import {dom, DomContents, Observable, styled} from 'grainjs';
 
 const t = makeT('LeftPanelCommon');
@@ -31,12 +32,15 @@ export function createHelpTools(appModel: AppModel): DomContents {
   if (!isFeatureEnabled("helpCenter")) {
     return [];
   }
+  const {deploymentType} = getGristConfig();
   return cssSplitPageEntry(
     cssPageEntryMain(
       cssPageLink(cssPageIcon('Help'),
         cssLinkText(t("Help Center")),
         dom.cls('tour-help-center'),
-        dom.on('click', (ev) => beaconOpenMessage({appModel})),
+        deploymentType === 'saas'
+          ? dom.on('click', () => beaconOpenMessage({appModel}))
+          : {href: commonUrls.help, target: '_blank'},
         testId('left-feedback'),
       ),
     ),

app/client/ui/WelcomeCoachingCall.ts

@@ -13,12 +13,9 @@ export function shouldShowWelcomeCoachingCall(appModel: AppModel) {
   const {deploymentType} = getGristConfig();
   if (deploymentType !== 'saas') { return false; }
 
-  const {behavioralPromptsManager, dismissedWelcomePopups} = appModel;
-
   // Defer showing coaching call until Add New tip is dismissed.
-  const hasSeenAddNewTip = behavioralPromptsManager.hasSeenTip('addNew');
+  const {behavioralPromptsManager, dismissedWelcomePopups} = appModel;
-  const shouldShowTips = behavioralPromptsManager.shouldShowTips();
+  if (behavioralPromptsManager.shouldShowTip('addNew')) { return false; }
-  if (!hasSeenAddNewTip && shouldShowTips) { return false; }
 
   const popup = dismissedWelcomePopups.get().find(p => p.id === 'coachingCall');
   return (

app/client/ui/WelcomeTour.ts

@@ -6,98 +6,101 @@ import { ShortcutKey, ShortcutKeyContent } from 'app/client/ui/ShortcutKey';
 import { theme } from 'app/client/ui2018/cssVars';
 import { icon } from "app/client/ui2018/icons";
 import { cssLink } from "app/client/ui2018/links";
+import { getGristConfig } from "app/common/urlUtils";
 import { dom, styled } from "grainjs";
 
 const t = makeT('WelcomeTour');
 
-export const WelcomeTour: IOnBoardingMsg[] = [
+export function getOnBoardingMessages(): IOnBoardingMsg[] {
-  {
+  const {features} = getGristConfig();
-    title: t('Editing Data'),
+  return [
-    body: () => [
+    {
-      dom('p',
+      title: t('Editing Data'),
-        t('Double-click or hit {{enter}} on a cell to edit it. ', {
+      body: () => [
-          enter: ShortcutKey(ShortcutKeyContent(t('Enter'))),
+        dom('p',
-        }),
+          t('Double-click or hit {{enter}} on a cell to edit it. ', {
-        t('Start with {{equal}} to enter a formula.', {
+            enter: ShortcutKey(ShortcutKeyContent(t('Enter'))),
-          equal: ShortcutKey(ShortcutKeyContent('=')),
+          }),
-        })),
+          t('Start with {{equal}} to enter a formula.', {
-    ],
+            equal: ShortcutKey(ShortcutKeyContent('=')),
-    selector: '.field_clip',
-    placement: 'bottom',
-  },
-  {
-    selector: '.tour-creator-panel',
-    title: t('Configuring your document'),
-    body: () => [
-      dom('p',
-          t('Toggle the {{creatorPanel}} to format columns, ', {creatorPanel: dom('em', t('creator panel'))}),
-          t('convert to card view, select data, and more.')
-         )
-    ],
-    placement: 'left',
-    cropPadding: true,
-  },
-  {
-    selector: '.tour-type-selector',
-    title: t('Customizing columns'),
-    body: () => [
-      dom('p',
-          t('Set formatting options, formulas, or column types, such as dates, choices, or attachments. ')),
-      dom('p',
-          t('Make it relational! Use the {{ref}} type to link tables. ', {
-            ref: ShortcutKey(t('Reference')),
           })),
-    ],
+      ],
-    placement: 'right',
+      selector: '.field_clip',
-  },
+      placement: 'bottom',
-  {
+    },
-    selector: '.tour-add-new',
+    {
-    title: t('Building up'),
+      selector: '.tour-creator-panel',
-    body: () => [
+      title: t('Configuring your document'),
-      dom('p', t('Use {{addNew}} to add widgets, pages, or import more data. ', {
+      body: () => [
-        addNew: ShortcutKey(t('Add New')),
+        dom('p',
-      })),
+            t('Toggle the {{creatorPanel}} to format columns, ', {creatorPanel: dom('em', t('creator panel'))}),
-    ],
+            t('convert to card view, select data, and more.')
-    placement: 'right',
+          )
-  },
+      ],
-  {
+      placement: 'left',
-    selector: '.tour-share-icon',
+      cropPadding: true,
-    title: t('Sharing'),
+    },
-    body: () => [
+    {
-      dom('p', t('Use the Share button ({{share}}) to share the document or export data.',
+      selector: '.tour-type-selector',
-      {share: TopBarButtonIcon(t('Share'))}))
+      title: t('Customizing columns'),
-    ],
+      body: () => [
-    placement: 'bottom',
+        dom('p',
-    cropPadding: true,
+            t('Set formatting options, formulas, or column types, such as dates, choices, or attachments. ')),
-  },
+        dom('p',
-  {
+            t('Make it relational! Use the {{ref}} type to link tables. ', {
-    selector: '.tour-help-center',
+              ref: ShortcutKey(t('Reference')),
-    title: t('Flying higher'),
+            })),
-    body: () => [
+      ],
-      dom('p', t('Use {{helpCenter}} for documentation or questions.',
+      placement: 'right',
-      {helpCenter: ShortcutKey(GreyIcon('Help'), t('Help Center'))}))
+    },
-    ],
+    {
-    placement: 'right',
+      selector: '.tour-add-new',
-  },
+      title: t('Building up'),
-  {
+      body: () => [
-    selector: '.tour-welcome',
+        dom('p', t('Use {{addNew}} to add widgets, pages, or import more data. ', {
-    title: t('Welcome to Grist!'),
+          addNew: ShortcutKey(t('Add New')),
-    body: () => [
+        })),
-      dom('p', t("Browse our {{templateLibrary}} to discover what's possible and get inspired.",
+      ],
-        {
+      placement: 'right',
-          templateLibrary: cssLink({ target: '_blank', href: urlState().makeUrl({ homePage: "templates" }) },
+    },
-            t('template library'), cssInlineIcon('FieldLink'))
+    {
-        }
+      selector: '.tour-share-icon',
-      )),
+      title: t('Sharing'),
-    ],
+      body: () => [
-    showHasModal: true,
+        dom('p', t('Use the Share button ({{share}}) to share the document or export data.',
-  }
+        {share: TopBarButtonIcon(t('Share'))}))
-
+      ],
-];
+      placement: 'bottom',
+      cropPadding: true,
+    },
+    {
+      selector: '.tour-help-center',
+      title: t('Flying higher'),
+      body: () => [
+        dom('p', t('Use {{helpCenter}} for documentation or questions.',
+        {helpCenter: ShortcutKey(GreyIcon('Help'), t('Help Center'))}))
+      ],
+      placement: 'right',
+    },
+    ...(features?.includes('templates') && Boolean(getGristConfig().templateOrg) ? [{
+      selector: '.tour-welcome',
+      title: t('Welcome to Grist!'),
+      body: () => [
+        dom('p', t("Browse our {{templateLibrary}} to discover what's possible and get inspired.",
+          {
+            templateLibrary: cssLink({ target: '_blank', href: urlState().makeUrl({ homePage: "templates" }) },
+              t('template library'), cssInlineIcon('FieldLink'))
+          }
+        )),
+      ],
+      showHasModal: true,
+    }] : []),
+  ];
+}
 
 export function startWelcomeTour(onFinishCB: () => void) {
   commands.allCommands.fieldTabOpen.run();
-  startOnBoarding(WelcomeTour, onFinishCB);
+  startOnBoarding(getOnBoardingMessages(), onFinishCB);
 }
 
 const TopBarButtonIcon = styled(icon, `