(core) Add tip for "Add New" button

Summary:
Adds a new tip for the doc menu's Add New button. The tip is
shown only when the current user is an editor or owner, and
the site is non-empty. The presence of welcome videos or
popups will also cause the tip to not be shown; it will instead
be shown the next time the doc menu is visited.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

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

app/client/components/BehavioralPromptsManager.ts

@@ -1,10 +1,11 @@
 import {showBehavioralPrompt} from 'app/client/components/modals';
 import {AppModel} from 'app/client/models/AppModel';
+import {getUserPrefObs} from 'app/client/models/UserPrefs';
 import {GristBehavioralPrompts} from 'app/client/ui/GristTooltips';
 import {isNarrowScreen} from 'app/client/ui2018/cssVars';
-import {BehavioralPrompt} from 'app/common/Prefs';
+import {BehavioralPrompt, BehavioralPromptPrefs} from 'app/common/Prefs';
 import {getGristConfig} from 'app/common/urlUtils';
-import {Computed, Disposable, dom} from 'grainjs';
+import {Computed, Disposable, dom, Observable} from 'grainjs';
 import {IPopupOptions} from 'popweasel';
 
 export interface AttachOptions {
@@ -25,12 +26,15 @@ interface QueuedTip {
  *
  * Tips are shown in the order that they are attached.
  */
-export class BehavioralPrompts extends Disposable {
-  private _prefs = this._appModel.behavioralPrompts;
+export class BehavioralPromptsManager extends Disposable {
+  private readonly _prefs = getUserPrefObs(this._appModel.userPrefsObs, 'behavioralPrompts',
+    { defaultValue: { dontShowTips: false, dismissedTips: [] } }) as Observable<BehavioralPromptPrefs>;
+
   private _dismissedTips: Computed<Set<BehavioralPrompt>> = Computed.create(this, use => {
     const {dismissedTips} = use(this._prefs);
     return new Set(dismissedTips.filter(BehavioralPrompt.guard));
   });
+
   private _queuedTips: QueuedTip[] = [];
 
   constructor(private _appModel: AppModel) {

app/client/components/GristDoc.ts

@@ -6,7 +6,6 @@
 import {AccessRules} from 'app/client/aclui/AccessRules';
 import {ActionLog} from 'app/client/components/ActionLog';
 import BaseView from 'app/client/components/BaseView';
-import {BehavioralPrompts} from 'app/client/components/BehavioralPrompts';
 import {isNumericLike, isNumericOnly} from 'app/client/components/ChartView';
 import {CodeEditorPanel} from 'app/client/components/CodeEditorPanel';
 import * as commands from 'app/client/components/commands';
@@ -166,7 +165,7 @@ export class GristDoc extends DisposableWithEvents {
   // If the doc has a docTour. Used also to enable the UI button to restart the tour.
   public readonly hasDocTour: Computed<boolean>;
 
-  public readonly behavioralPrompts = BehavioralPrompts.create(this, this.docPageModel.appModel);
+  public readonly behavioralPromptsManager = this.docPageModel.appModel.behavioralPromptsManager;
 
   private _actionLog: ActionLog;
   private _undoStack: UndoStack;
@@ -1100,7 +1099,7 @@ export class GristDoc extends DisposableWithEvents {
       // Don't show the tip if a non-card widget was selected.
       !['single', 'detail'].includes(selectedWidgetType) ||
       // Or if we've already seen it.
-      this.behavioralPrompts.hasSeenTip('editCardLayout')
+      this.behavioralPromptsManager.hasSeenTip('editCardLayout')
     ) {
       return;
     }
@@ -1114,7 +1113,7 @@ export class GristDoc extends DisposableWithEvents {
     const editLayoutButton = document.querySelector('.behavioral-prompt-edit-card-layout');
     if (!editLayoutButton) { throw new Error('GristDoc failed to find edit card layout button'); }
 
-    this.behavioralPrompts.showTip(editLayoutButton, 'editCardLayout', {
+    this.behavioralPromptsManager.showTip(editLayoutButton, 'editCardLayout', {
       popupOptions: {
         placement: 'left-start',
       }

app/client/components/RawDataPage.ts

@@ -42,7 +42,7 @@ export class RawDataPage extends Disposable {
 
   public buildDom() {
     return cssContainer(
-      dom('div', this._gristDoc.behavioralPrompts.attachTip('rawDataPage', {hideArrow: true})),
+      dom('div', this._gristDoc.behavioralPromptsManager.attachTip('rawDataPage', {hideArrow: true})),
       dom('div',
         dom.create(DataTables, this._gristDoc),
         dom.create(DocumentUsage, this._gristDoc.docPageModel),