(core) Add tip for calendar widget configuration

Summary:
The tip is shown in the creator panel, in the subtab that lists the column
mapping configuration for the calendar widget. The panel now  automatically
opens the first time a calendar widget is added to a page (via the Add New menu).

Test Plan: Manual.

Reviewers: JakubSerafin

Reviewed By: JakubSerafin

Subscribers: JakubSerafin, jarek

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

app/client/components/BehavioralPromptsManager.ts

@@ -21,6 +21,7 @@ export interface AttachOptions {
   showOnMobile?: boolean;
   popupOptions?: IPopupOptions;
   onDispose?(): void;
+  shouldShow?(): boolean;
 }
 
 interface QueuedTip {
@@ -146,6 +147,7 @@ export class BehavioralPromptsManager extends Disposable {
   private _shouldQueueTip(prompt: BehavioralPrompt, options: AttachOptions) {
     if (
       this._isDisabled ||
+      options.shouldShow?.() === false ||
       (isNarrowScreen() && !options.showOnMobile) ||
       (this._prefs.get().dontShowTips && !options.forceShow) ||
       this.hasSeenTip(prompt)

app/client/components/GristDoc.ts

@@ -47,7 +47,7 @@ import {IPageWidget, toPageWidget} from 'app/client/ui/PageWidgetPicker';
 import {linkFromId, selectBy} from 'app/client/ui/selectBy';
 import {WebhookPage} from 'app/client/ui/WebhookPage';
 import {startWelcomeTour} from 'app/client/ui/WelcomeTour';
-import {IWidgetType} from 'app/common/widgetTypes';
+import {AttachedCustomWidgets, IAttachedCustomWidget, IWidgetType} from 'app/common/widgetTypes';
 import {PlayerState, YouTubePlayer} from 'app/client/ui/YouTubePlayer';
 import {isNarrowScreen, mediaSmall, mediaXSmall, testId, theme} from 'app/client/ui2018/cssVars';
 import {IconName} from 'app/client/ui2018/IconList';
@@ -837,6 +837,10 @@ export class GristDoc extends DisposableWithEvents {
     this.viewModel.activeSectionId(res.sectionRef);
 
     this._maybeShowEditCardLayoutTip(val.type).catch(reportError);
+
+    if (AttachedCustomWidgets.guard(val.type)) {
+      this._handleNewAttachedCustomWidget(val.type).catch(reportError);
+    }
   }
 
   /**
@@ -881,6 +885,10 @@ export class GristDoc extends DisposableWithEvents {
       this.viewModel.activeSectionId(result.sectionRef);
 
       this._maybeShowEditCardLayoutTip(val.type).catch(reportError);
+
+      if (AttachedCustomWidgets.guard(val.type)) {
+        this._handleNewAttachedCustomWidget(val.type).catch(reportError);
+      }
     }
   }
 
@@ -1438,6 +1446,19 @@ export class GristDoc extends DisposableWithEvents {
     });
   }
 
+  private async _handleNewAttachedCustomWidget(widget: IAttachedCustomWidget) {
+    switch (widget) {
+      case 'custom.calendar': {
+        // Open the right panel to the calendar subtab.
+        commands.allCommands.viewTabOpen.run();
+
+        // Wait for the right panel to finish animation if it was collapsed before.
+        await commands.allCommands.rightPanelOpen.run();
+        break;
+      }
+    }
+  }
+
   private async _promptForName() {
     return await invokePrompt("Table name", "Create", '', "Default table name");
   }