(core) Reference and ReferenceList should trigger RightMenu to show up on Column tab and display reference toolitp, if it wasn't dismissed yet

Summary:
few things is going here:
1. Added comand that can be called with intent to show behavioral popup somewhere else. I've added it to trigger showing reference popup from new colum menu, despite popup existing in FieldBuilder
2. Command for showing right panel get an argument to switch for choosen tab right after showing.

Test Plan: two test added - one to check if right side menu is shown after chosing ref or refList, and second to check if popup is shown.

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/components/GridView.js

@@ -891,6 +891,14 @@ GridView.prototype.insertColumn = async function(colId = null, options = {}) {
   const newColInfo = await this.viewSection.insertColumn(colId, {colInfo, index});
   this.selectColumn(index);
   if (!skipPopup) { this.currentEditingColumnIndex(index); }
+  // we want to show creator panel in some cases, but only when "rename panel" is dismissed
+  const sub = this.currentEditingColumnIndex.subscribe(state=>{
+    // if no column is edited we can assume that rename panel is closed
+    if(state<0){
+      options.onPopupClose?.();
+      sub.dispose();
+    }
+  });
   return newColInfo;
 };
 

app/client/components/commandList.ts

@@ -100,6 +100,7 @@ export type CommandName =
   | 'duplicateRows'
   | 'sortAsc'
   | 'sortDesc'
+  | 'showPopup'
   | 'addSortAsc'
   | 'addSortDesc'
   | 'filterByThisCellValue'
@@ -119,7 +120,6 @@ export type CommandName =
   | 'insertField'
   ;
 
-
 export interface CommandDef {
   name: CommandName;
   keys: string[];
@@ -283,6 +283,11 @@ export const groups: CommendGroupDef[] = [{
       keys: ['Space'],
       desc: 'Show the record card widget of the selected record',
     },
+    {
+      name: 'showPopup',
+      keys:[],
+      desc: 'showing a behavioral popup'
+    },
     {
       name: 'createForm',
       keys: [],
@@ -292,7 +297,7 @@ export const groups: CommendGroupDef[] = [{
       name: 'insertField',
       keys: [],
       desc: 'Insert new column in default location',
-    },
+    }
   ]
 }, {
   group: 'Navigation',

app/client/declarations.d.ts

@@ -63,6 +63,7 @@ declare module "app/client/components/BaseView" {
     public isTruncated: ko.Observable<boolean>;
     public tableModel: DataTableModel;
     public selectionSummary?: SelectionSummary;
+    public currentEditingColumnIndex: ko.Observable<number>;
 
     constructor(gristDoc: GristDoc, viewSectionModel: any, options?: {addNewRow?: boolean, isPreview?: boolean});
     public setCursorPos(cursorPos: CursorPos): void;
@@ -92,6 +93,7 @@ declare module 'app/client/components/GridView' {
     colInfo?: ColInfo;
     index?: number;
     skipPopup?: boolean;
+    onPopupClose?: () => void;
   }
 
   namespace GridView {}
@@ -102,7 +104,10 @@ declare module 'app/client/components/GridView' {
     public gristDoc: GristDoc;
 
     constructor(gristDoc: GristDoc, viewSectionModel: any, isPreview?: boolean);
-    public insertColumn(colId?: string|null, options?: InsertColOptions): Promise<NewColInfo>;
+    public insertColumn(
+      colId?: string|null,
+      options?: InsertColOptions,
+    ): Promise<NewColInfo>;
     public showColumn(colRef: number, index?: number): Promise<void>;
   }
   export = GridView;

app/client/ui/GridViewMenus.ts

@@ -6,7 +6,7 @@ import {ColumnRec} from "app/client/models/entities/ColumnRec";
 import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
 import {GristTooltips} from 'app/client/ui/GristTooltips';
 import {withInfoTooltip} from 'app/client/ui/tooltips';
-import {testId, theme, vars} from 'app/client/ui2018/cssVars';
+import {isNarrowScreen, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {IconName} from "app/client/ui2018/IconList";
 import {icon} from 'app/client/ui2018/icons';
 import {
@@ -24,7 +24,7 @@ import {
   SearchableMenuItem,
 } from 'app/client/ui2018/menus';
 import * as UserType from "app/client/widgets/UserType";
-import {isListType, RecalcWhen} from "app/common/gristTypes";
+import {isFullReferencingType, isListType, RecalcWhen} from "app/common/gristTypes";
 import {Sort} from 'app/common/SortSpec';
 import {dom, DomElementArg, styled} from 'grainjs';
 import * as weasel from 'popweasel';
@@ -59,12 +59,18 @@ export function getColumnTypes(gristDoc: GristDoc, tableId: string, pure = false
     `RefList:${tableId}`,
     "Attachments"];
   return typeNames.map(type => ({type, obj: UserType.typeDefs[type.split(':')[0]]}))
-    .map((ct): { displayName: string, colType: string, testIdName: string, icon: IconName | undefined } => ({
-      displayName: t(ct.obj.label),
-      colType: ct.type,
-      testIdName: ct.obj.label.toLowerCase().replace(' ', '-'),
-      icon: ct.obj.icon
-  })).map(ct => {
+      .map((ct): {
+        displayName: string,
+        colType: string,
+        testIdName: string,
+        icon: IconName | undefined,
+      openCreatorPanel: boolean } => ({
+          displayName: t(ct.obj.label),
+          colType: ct.type,
+          testIdName: ct.obj.label.toLowerCase().replace(' ', '-'),
+          icon: ct.obj.icon,
+          openCreatorPanel: isFullReferencingType(ct.type)
+        })).map(ct => {
     if (!pure) { return ct; }
     else {
       return {
@@ -94,7 +100,12 @@ function buildAddNewColumMenuSection(gridView: GridView, index?: number): DomEle
         ...columnTypes.map((colType) =>
           menuItem(
             async () => {
-              await gridView.insertColumn(null, {index, colInfo: {type: colType.colType}});
+              await gridView.insertColumn(null, {index, colInfo: {type: colType.colType}, onPopupClose: ()=> {
+                if(!colType.openCreatorPanel || isNarrowScreen()) { return; }
+                  commands.allCommands.fieldTabOpen.run();
+                  commands.allCommands.rightPanelOpen.run();
+                  commands.allCommands.showPopup.run({popup: "referenceColumnsConfig"});
+              }});
             },
             menuIcon(colType.icon as IconName),
             colType.displayName === 'Reference'?

app/client/ui/PagePanels.ts

@@ -109,6 +109,7 @@ export function pagePanels(page: PageContents) {
       const watcher = new TransitionWatcher(rightPaneDom);
       watcher.onDispose(() => resolve(undefined));
       right.panelOpen.set(true);
+
     }),
   }, null, true);
   let contentWrapper: HTMLElement;

app/client/ui/RightPanel.ts

@@ -13,7 +13,6 @@
  * All methods above return an object which may  be disposed to close and dispose that specific
  * tab from the outside (e.g. when GristDoc is disposed).
  */
-
 import * as commands from 'app/client/components/commands';
 import {FieldModel} from 'app/client/components/Forms/Field';
 import {FormView} from 'app/client/components/Forms/FormView';
@@ -147,7 +146,7 @@ export class RightPanel extends Disposable {
       viewTabOpen: () => this._openViewTab(),
       viewTabFocus: () => this._viewTabFocus(),
       sortFilterTabOpen: () => this._openSortFilter(),
-      dataSelectionTabOpen: () => this._openDataSelection()
+      dataSelectionTabOpen: () => this._openDataSelection(),
     }, this, true));
 
     // When a page widget is changed, subType might not be valid anymore, so reset it.

app/client/widgets/FieldBuilder.ts

@@ -40,6 +40,7 @@ import { bundleChanges, Computed, Disposable, fromKo,
 import isEqual from 'lodash/isEqual';
 import * as ko from 'knockout';
 import * as _ from 'underscore';
+import * as commands from "../components/commands";
 
 const testId = makeTestId('test-fbuilder-');
 const t = makeT('FieldBuilder');
@@ -110,6 +111,8 @@ export class FieldBuilder extends Disposable {
   private readonly _showRefConfigPopup: ko.Observable<boolean>;
   private readonly _isEditorActive = Observable.create(this, false);
 
+
+
   public constructor(public readonly gristDoc: GristDoc, public readonly field: ViewFieldRec,
                      private _cursor: Cursor, private _options: { isPreview?: boolean } = {}) {
     super();
@@ -205,6 +208,14 @@ export class FieldBuilder extends Disposable {
     this.diffImpl = this.autoDispose(DiffBox.create(this.field));
 
     this._showRefConfigPopup = ko.observable(false);
+
+    this.autoDispose(commands.createGroup({
+      showPopup: (args: any) => {
+        if(args.popup==='referenceColumnsConfig'){
+          this._showRefConfigPopup(true);
+        }
+      }
+    }, this, true));
   }
 
   public buildSelectWidgetDom() {
@@ -400,14 +411,17 @@ export class FieldBuilder extends Disposable {
     });
     return [
       cssLabel(t('DATA FROM TABLE'),
-        !this._showRefConfigPopup.peek() ? null : this.gristDoc.behavioralPromptsManager.attachTip(
-          'referenceColumnsConfig',
-          {
-            onDispose: () => this._showRefConfigPopup(false),
-            popupOptions: {
-              placement: 'left-start',
-            },
-          }
+        kd.maybe(this._showRefConfigPopup, () => {
+            return dom('div', this.gristDoc.behavioralPromptsManager.attachTip(
+              'referenceColumnsConfig',
+              {
+                onDispose: () => this._showRefConfigPopup(false),
+                popupOptions: {
+                  placement: 'left-start',
+                },
+              }
+            ));
+          },
         ),
       ),
       cssRow(