(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/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.