(core) "add column with type" and "add formula column" options in new column menu

Summary: New Column menu was enhanced by "add column with type" and "add formula column" options. First one allow user to chose the type of newly created column, to save time for selecting this option in creator menu. "Add formula column" opens formula editor in popup state right after creating the column. In this case, renaming column popup is ignored to not overburden user with to many popup at once.

Test Plan: new nbrowser test was added to check validity of menu items, and output of menu action - if columns have given types or if formula editor popup is opened and functionin, accordingly.

Reviewers: georgegevoian

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

app/client/ui/GridViewMenus.ts

@@ -1,12 +1,15 @@
 import {allCommands} from 'app/client/components/commands';
 import GridView from 'app/client/components/GridView';
 import {makeT} from 'app/client/lib/localization';
+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 {IconName} from "app/client/ui2018/IconList";
 import {icon} from 'app/client/ui2018/icons';
 import {
+  menuCssClass,
   menuDivider,
   menuIcon,
   menuItem,
@@ -19,11 +22,12 @@ import {
   searchableMenu,
   SearchableMenuItem,
 } from 'app/client/ui2018/menus';
+import * as UserType from "app/client/widgets/UserType";
+import {isListType, RecalcWhen} from "app/common/gristTypes";
 import {Sort} from 'app/common/SortSpec';
 import {dom, DomElementArg, styled} from 'grainjs';
-import {isListType, RecalcWhen} from "app/common/gristTypes";
-import {ColumnRec} from "app/client/models/entities/ColumnRec";
 import * as weasel from 'popweasel';
+import * as commands from "../components/commands";
 import isEqual = require('lodash/isEqual');
 
 const t = makeT('GridViewMenus');
@@ -31,12 +35,7 @@ const t = makeT('GridViewMenus');
 export function buildAddColumnMenu(gridView: GridView, index?: number) {
   const isSummaryTable = Boolean(gridView.viewSection.table().summarySourceTable());
   return [
-    menuItem(
-      async () => { await gridView.insertColumn(null, {index}); },
-      menuIcon('Plus'),
-      t("Add Column"),
-      testId('new-columns-menu-add-new'),
-    ),
+    buildAddNewColumMenuSection(gridView, index),
     buildHiddenColumnsMenuItems(gridView, index),
     isSummaryTable ? null : [
       buildLookupSection(gridView, index),
@@ -45,6 +44,87 @@ export function buildAddColumnMenu(gridView: GridView, index?: number) {
   ];
 }
 
+function buildAddNewColumMenuSection(gridView: GridView, index?: number): DomElementArg[] {
+  function buildEmptyNewColumMenuItem() {
+    return menuItem(
+      async () => {
+        await gridView.insertColumn(null, {index});
+      },
+      t("Add Column"),
+      testId('new-columns-menu-add-new'),
+    );
+  }
+
+  function BuildNewColumnWithTypeSubmenu() {
+    const columnTypes = [
+      "Text",
+      "Numeric",
+      "Int",
+      "Bool",
+      "Date",
+      `DateTime:${gridView.gristDoc.docModel.docInfoRow.timezone()}`,
+      "Choice",
+      "ChoiceList",
+      `Ref:${gridView.tableModel.tableMetaRow.tableId()}`,
+      `RefList:${gridView.tableModel.tableMetaRow.tableId()}`,
+      "Attachments"].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
+      }));
+
+    return menuItemSubmenu(
+      (ctl) => [
+        ...columnTypes.map((colType) =>
+          menuItem(
+            async () => {
+              await gridView.insertColumn(null, {index, colInfo: {type: colType.colType}});
+            },
+            menuIcon(colType.icon as IconName),
+            colType.displayName === 'Reference'?
+                  gridView.gristDoc.behavioralPromptsManager.attachTip('referenceColumns', {
+                    popupOptions: {
+                      attach: `.${menuCssClass}`,
+                      placement: 'left-start',
+                    }
+                  }):null,
+            colType.displayName,
+            testId(`new-columns-menu-add-${colType.testIdName}`)),
+        ),
+        testId('new-columns-menu-add-with-type-submenu'),
+      ],
+      {allowNothingSelected: false},
+      t('Add column with type'),
+      testId('new-columns-menu-add-with-type')
+    );
+  }
+
+  function buildNewFunctionColumnMenuItem() {
+    return menuItem(
+      async () => {
+        await gridView.insertColumn(null, {index, skipPopup: true, colInfo: {isFormula: true}});
+        gridView.activateEditorAtCursor();
+        commands.allCommands.makeFormula.run();
+        commands.allCommands.detachEditor.run();
+      },
+      withInfoTooltip(
+        t('Add formula column'),
+        GristTooltips.formulaColumn(),
+        {variant: 'hover'}
+      ),
+      testId('new-columns-menu-add-formula'),
+    );
+  }
+
+  return [
+    buildEmptyNewColumMenuItem(),
+    BuildNewColumnWithTypeSubmenu(),
+    buildNewFunctionColumnMenuItem()
+  ];
+}
+
 function buildHiddenColumnsMenuItems(gridView: GridView, index?: number) {
   const {viewSection} = gridView;
   const hiddenColumns = viewSection.hiddenColumns();

app/client/ui/GristTooltips.ts

@@ -37,7 +37,8 @@ export type Tooltip =
   | 'addRowConditionalStyle'
   | 'addColumnConditionalStyle'
   | 'uuid'
-  | 'lookups';
+  | 'lookups'
+  | 'formulaColumn'
 
 export type TooltipContentFunc = (...domArgs: DomElementArg[]) => DomContents;
 
@@ -115,6 +116,13 @@ see or edit which parts of your document.')
     ),
     ...args,
   ),
+  formulaColumn: (...args: DomElementArg[]) => cssTooltipContent(
+    dom('div', t('Formulas support many Excel functions, full Python syntax, and include a helpful AI Assistant.')),
+    dom('div',
+      cssLink({href: commonUrls.formulas, target: '_blank'}, t('Learn more.')),
+    ),
+    ...args,
+  ),
 };
 
 export interface BehavioralPromptContent {

app/common/gristUrls.ts

@@ -88,6 +88,7 @@ export const commonUrls = {
   community: 'https://community.getgrist.com',
   functions: 'https://support.getgrist.com/functions',
   formulaSheet: 'https://support.getgrist.com/formula-cheat-sheet',
+  formulas: 'https://support.getgrist.com/formulas',
 
   basicTutorial: 'https://templates.getgrist.com/woXtXUBmiN5T/Grist-Basics',
   basicTutorialImage: 'https://www.getgrist.com/wp-content/uploads/2021/08/lightweight-crm.png',