(core) Two way reference polish

Summary:
- Fixing BulkRemoveRecord bug
- Rewriting copy on the `delete reverse column` dialog
- Rewriting text on the `reassign reference dialog`
- Adding tooltip that explains why 2-way references are not enabled for formula columns

Test Plan: Added tests

Reviewers: georgegevoian

Reviewed By: georgegevoian

Subscribers: paulfitz

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

app/client/ui/DocTutorial.ts

@@ -503,3 +503,14 @@ const cssSkipIcon = styled(icon, `
   height: 20px;
   margin: 0px -3px;
 `);
+
+// This is aligned with css in ./DocTutorial.css
+export const cssCode = styled('code', `
+  padding: 2px 5px;
+  color: ${theme.tutorialsPopupCodeFg};
+  background: ${theme.tutorialsPopupCodeBg};
+  border: 1px solid ${theme.tutorialsPopupCodeBorder};
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-size: max(12.6px, 90%); /* 90% of 13px */
+`);

app/client/ui/GristTooltips.ts

@@ -45,6 +45,7 @@ export type Tooltip =
   | 'setRefDropdownCondition'
   | 'communityWidgets'
   | 'twoWayReferences'
+  | 'twoWayReferencesDisabled'
   | 'reasignTwoWayReference';
 
 export type TooltipContentFunc = (...domArgs: DomElementArg[]) => DomContents;
@@ -166,16 +167,23 @@ see or edit which parts of your document.')
   ),
   twoWayReferences: (...args: DomElementArg[]) => cssTooltipContent(
     dom('div',
-      t('Creates a reverse column in target table that can be edited from either end.')
+      t('Creates a new Reference List column in the target table, with both this ' +
+        'and the target columns editable and synchronized.')
+    ),
+    ...args,
+  ),
+  twoWayReferencesDisabled: (...args: DomElementArg[]) => cssTooltipContent(
+    dom('div',
+      t('Two-way references are not currently supported for Formula or Trigger Formula columns')
     ),
     ...args,
   ),
   reasignTwoWayReference: (...args: DomElementArg[]) => cssTooltipContent(
     dom('div',
-      t('This limitation occurs when one end of a two-way reference is configured as a single Reference.')
+      t('This limitation occurs when one column in a two-way reference has the Reference type.')
     ),
     dom('div',
-      t('To allow multiple assignments, change the type of the Reference column to Reference List.')
+      t(`To allow multiple assignments, change the referenced column's type to Reference List.`)
     ),
     ...args,
   ),

app/client/ui/buildReassignModal.ts

@@ -1,6 +1,7 @@
 import * as commands from 'app/client/components/commands';
 import {makeT} from 'app/client/lib/localization';
 import {ColumnRec, DocModel} from 'app/client/models/DocModel';
+import {cssCode} from 'app/client/ui/DocTutorial';
 import {withInfoTooltip} from 'app/client/ui/tooltips';
 import {bigBasicButton, bigPrimaryButton, textButton} from 'app/client/ui2018/buttons';
 import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
@@ -101,10 +102,10 @@ export async function buildReassignModal(options: {
         `{{targetTable}} record {{targetName}} is already assigned to {{sourceTable}} record \
          {{oldSourceName}}.`,
         {
-          targetTable: dom('i', Pets),
-          sourceTable: dom('i', Owners),
-          targetName: dom('b', Azor),
-          oldSourceName: dom('b', Bob),
+          targetTable: cssCode(Pets),
+          sourceTable: cssCode(Owners),
+          targetName: cssName(Azor),
+          oldSourceName: cssName(Bob),
         });
 
       return cssBulletLine(text);
@@ -117,11 +118,11 @@ export async function buildReassignModal(options: {
       // Task is the name of the revRec table
       const Pets = revRec.table().tableNameDef();
       const Owners = colRec.table().tableNameDef();
-      return dom('div', [
+      return cssHigherLine([
         t(`Each {{targetTable}} record may only be assigned to a single {{sourceTable}} record.`,
           {
-            targetTable: dom('i', Pets),
-            sourceTable: dom('i', Owners),
+            targetTable: cssCode(Pets),
+            sourceTable: cssCode(Owners),
           })
       ]);
     }
@@ -151,14 +152,14 @@ export async function buildReassignModal(options: {
       const Ann = rowDisplay(colRec.table().tableId(), newRowId, colRec.colId()) as string;
       const singleText = () => t(`Reassign to {{sourceTable}} record {{sourceName}}.`,
         {
-          sourceTable: dom('i', colRec.table().tableNameDef()),
-          sourceName: dom('b', Ann),
+          sourceTable: cssCode(colRec.table().tableNameDef()),
+          sourceName: cssName(Ann),
         });
       const multiText = () => t(`Reassign to new {{sourceTable}} records.`,
         {
-          sourceTable: dom('i', colRec.table().tableNameDef()),
+          sourceTable: cssCode(colRec.table().tableNameDef()),
         });
-      return labeledSquareCheckbox(checked, multiple ? multiText() : singleText());
+      return cssCheckbox(checked, multiple ? multiText() : singleText());
     }
   }
 
@@ -368,9 +369,23 @@ function* bulkToSingle(actions: DocAction[]): Iterable<DocAction> {
 
 const cssBulletLine = styled('div', `
   margin-bottom: 8px;
+  line-height: 22px;
   &::before {
     content: '•';
     margin-right: 4px;
     color: ${theme.lightText};
   }
 `);
+
+const cssHigherLine = styled('div', `
+  line-height: 22px;
+`);
+
+const cssName = (text: string) => dom('span', `"${text}"`);
+
+const cssCheckbox = styled(labeledSquareCheckbox, `
+  line-height: 22px;
+  & > span {
+    overflow: unset; /* make some room for cssCode */
+  }
+`);

app/client/ui/tooltips.ts

@@ -6,13 +6,13 @@
  */
 
 import {logTelemetryEvent} from 'app/client/lib/telemetry';
-import {GristTooltips, Tooltip, TooltipContentFunc} from 'app/client/ui/GristTooltips';
+import {GristTooltips, Tooltip} from 'app/client/ui/GristTooltips';
 import {prepareForTransition} from 'app/client/ui/transitions';
 import {testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {makeLinks} from 'app/client/ui2018/links';
 import {menuCssClass} from 'app/client/ui2018/menus';
-import {dom, DomContents, DomElementArg, DomElementMethod, styled} from 'grainjs';
+import {BindableValue, dom, DomContents, DomElementArg, DomElementMethod, styled} from 'grainjs';
 import Popper from 'popper.js';
 import {cssMenu, cssMenuItem, defaultMenuOptions, IPopupOptions, setPopupToCreateDom} from 'popweasel';
 import merge = require('lodash/merge');
@@ -324,12 +324,12 @@ export type InfoTooltipVariant = 'click' | 'hover';
  * Renders an info icon that shows a tooltip with the specified `content`.
  */
 export function infoTooltip(
-  tooltip: Tooltip|TooltipContentFunc,
+  tooltip: BindableValue<Tooltip>,
   options: InfoTooltipOptions = {},
   ...domArgs: DomElementArg[]
 ) {
   const {variant = 'click'} = options;
-  const content = typeof tooltip === 'function' ? tooltip() : GristTooltips[tooltip]();
+  const content = dom.domComputed(tooltip, (t) => GristTooltips[t]());
   const onOpen = () => logTelemetryEvent('viewedTip', {full: {tipName: tooltip}});
   switch (variant) {
     case 'click': {
@@ -433,7 +433,7 @@ export interface WithInfoTooltipOptions {
  */
 export function withInfoTooltip(
   domContents: DomContents,
-  tooltip: Tooltip,
+  tooltip: BindableValue<Tooltip>,
   options: WithInfoTooltipOptions = {},
 ) {
   const {variant = 'click', domArgs, iconDomArgs, popupOptions} = options;

app/client/widgets/ReverseReferenceConfig.ts

@@ -2,6 +2,8 @@ import {allCommands} from 'app/client/components/commands';
 import {makeT} from 'app/client/lib/localization';
 import {TableRec} from 'app/client/models/DocModel';
 import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
+import {cssCode} from 'app/client/ui/DocTutorial';
+import {Tooltip} from 'app/client/ui/GristTooltips';
 import {
   cssLabelText,
   cssRow,
@@ -27,6 +29,7 @@ export class ReverseReferenceConfig extends Disposable {
   private _reverseColumn: Computed<string>;
   private _reverseType: Computed<string>;
   private _disabled: Computed<boolean>;
+  private _tooltip: Computed<Tooltip>;
 
   constructor(private _field: ViewFieldRec) {
     super();
@@ -54,6 +57,11 @@ export class ReverseReferenceConfig extends Disposable {
       const column = use(this._field.column);
       return Boolean(use(column.formula));
     });
+    this._tooltip = Computed.create(this, (use) => {
+      return use(this._disabled)
+        ? 'twoWayReferencesDisabled'
+        : 'twoWayReferences';
+    });
   }
 
   public buildDom() {
@@ -69,8 +77,8 @@ export class ReverseReferenceConfig extends Disposable {
               testId('add-reverse-columm'),
               dom.prop('disabled', this._disabled),
             ),
-            'twoWayReferences'
-          ),
+            this._tooltip
+          )
         ),
       ]),
       dom.maybe(this._isConfigured, () => cssTwoWayConfig(
@@ -94,7 +102,7 @@ export class ReverseReferenceConfig extends Disposable {
           cssContent(
             cssClipLine(
               cssClipItem(
-                cssCapitalize(t('Table'), dom.style('margin-right', '8px')),
+                cssCapitalize(t('Target table'), dom.style('margin-right', '8px')),
                 dom('span', dom.text(this._reverseTable)),
               ),
             ),
@@ -135,20 +143,21 @@ export class ReverseReferenceConfig extends Disposable {
       await column.removeReverseColumn();
     };
 
-    const revColumnLabel = column.reverseColModel.peek().label.peek() || column.reverseColModel.peek().colId.peek();
-    const revTableName = column.reverseColModel.peek().table.peek().tableNameDef.peek();
+    const refCol = column.reverseColModel.peek().label.peek() || column.reverseColModel.peek().colId.peek();
+    const refTable = column.reverseColModel.peek().table.peek().tableNameDef.peek();
 
-    const promptTitle = t('Delete column {{column}} in table {{table}}?', {
-      column: dom('b', revColumnLabel),
-      table: dom('b', revTableName),
-    });
+    const promptTitle = t('Delete two-way reference?');
 
     const myTable = column.table.peek().tableNameDef.peek();
     const myName = column.label.peek() || column.colId.peek();
 
-    const explanation = t('It is the reverse of the reference column {{column}} in table {{table}}.', {
-      column: dom('b', myName),
-      table: dom('b', myTable)
+    const explanation = t(
+      'This will delete the reference column {{refCol}} in table {{refTable}}. The reference column ' +
+      '{{myName}} will remain in the current table {{myTable}}.', {
+      refCol: dom('b', refCol),
+      refTable: cssCode(refTable),
+      myName: dom('b', myName),
+      myTable: cssCode(myTable),
     });
 
     confirmModal(
@@ -156,7 +165,7 @@ export class ReverseReferenceConfig extends Disposable {
       t('Delete'),
       onConfirm,
       {
-        explanation,
+        explanation: cssHigherLine(explanation),
         width: 'fixed-wide'
       }
     );
@@ -234,3 +243,7 @@ const cssGrayText = styled('span', `
 const cssIconAccent = styled(icon, `
   --icon-color: ${theme.accentIcon};
 `);
+
+const cssHigherLine = styled('div', `
+  line-height: 1.5;
+`);