(core) Focusing the creator panel on the table wiget for charts and custom views

Summary:
When a chart page/section is added and the creator panel is already open, focus is set to a "table" tab.
When a custom view is added as a page/section, the same thing happens, but there is also a behavioral tooltip shown
for the custom URL.

Test Plan: Updated and added.

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/ui/CustomSectionConfig.ts

@@ -238,7 +238,7 @@ export class CustomSectionConfig extends Disposable {
   // Does widget has custom configuration.
   private _hasConfiguration: Computed<boolean>;
 
-  constructor(private _section: ViewSectionRec, _gristDoc: GristDoc) {
+  constructor(private _section: ViewSectionRec, private _gristDoc: GristDoc) {
     super();
 
     const api = _gristDoc.app.topAppModel.api;
@@ -411,7 +411,12 @@ export class CustomSectionConfig extends Disposable {
             async value => this._url.set(value),
             dom.attr('placeholder', t("Enter Custom URL")),
             testId('url')
-          )
+          ),
+          this._gristDoc.behavioralPromptsManager.attachTip('customURL', {
+            popupOptions: {
+              placement: 'left-start',
+            }
+          })
         ),
       ]),
       dom.maybe(prompt, () =>

app/client/ui/GristTooltips.ts

@@ -217,5 +217,18 @@ export const GristBehavioralPrompts: Record<BehavioralPrompt, BehavioralPromptCo
       ),
       ...args,
     ),
-  }
+  },
+  customURL: {
+    title: () => t('Custom Widgets'),
+    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.'
+        ),
+      ),
+      dom('div', cssLink({href: commonUrls.helpCustomWidgets, target: '_blank'}, t('Learn more.'))),
+      ...args,
+    ),
+  },
 };

app/client/ui/RightPanel.ts

@@ -104,6 +104,7 @@ export class RightPanel extends Disposable {
     this.autoDispose(commands.createGroup({
       fieldTabOpen: () => this._openFieldTab(),
       viewTabOpen: () => this._openViewTab(),
+      viewTabFocus: () => this._viewTabFocus(),
       sortFilterTabOpen: () => this._openSortFilter(),
       dataSelectionTabOpen: () => this._openDataSelection()
     }, this, true));
@@ -117,6 +118,11 @@ export class RightPanel extends Disposable {
     this._open('pageWidget', 'widget');
   }
 
+  private _viewTabFocus() {
+    // If the view tab is already open, focus on the first input.
+    this._focus('pageWidget');
+  }
+
   private _openSortFilter() {
     this._open('pageWidget', 'sortAndFilter');
   }
@@ -135,6 +141,14 @@ export class RightPanel extends Disposable {
     });
   }
 
+  private _focus(topTab: typeof TopTab.type) {
+    bundleChanges(() => {
+      if (!this._isOpen.get()) { return; }
+      this._isOpen.set(true);
+      this._topTab.set(topTab);
+    });
+  }
+
   private _buildHeaderDom() {
     return dom.domComputed((use) => {
       if (!use(this._isOpen)) { return null; }