(core) Fix test util and upgrade fixtures

Summary:
Fixes a test util that broke after a sync with grist-core, and upgrades
fixtures after a migration was added.

Test Plan: N/A

Reviewers: paulfitz

Reviewed By: paulfitz

Subscribers: paulfitz

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

app/client/components/DetailView.js

@@ -229,9 +229,10 @@ DetailView.prototype.buildFieldDom = function(field, row) {
     return dom('div.g_record_detail_el.flexitem',
       kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }),
       dom('div.g_record_detail_label_container',
-        dom('div.g_record_detail_label', kd.text(field.displayLabel)),
+        dom('div.g_record_detail_label', kd.text(field.label)),
         kd.scope(field.description, desc => desc ? columnInfoTooltip(kd.text(field.description)) : null)
       ),
+      dom('div.g_record_detail_value'),
     );
   }
 

app/client/ui/DescriptionConfig.ts

@@ -0,0 +1,61 @@
+import {CursorPos} from 'app/client/components/Cursor';
+import {makeT} from 'app/client/lib/localization';
+import {ColumnRec} from 'app/client/models/DocModel';
+import {textarea} from 'app/client/ui/inputs';
+import {cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
+import {testId, theme} from 'app/client/ui2018/cssVars';
+import {dom, fromKo, MultiHolder, styled} from 'grainjs';
+
+const t = makeT('FieldConfig');
+
+export function buildDescriptionConfig(
+    owner: MultiHolder,
+    origColumn: ColumnRec,
+    cursor: ko.Computed<CursorPos>,
+  ) {
+
+    // We will listen to cursor position and force a blur event on
+    // the text input, which will trigger save before the column observable
+    // will change its value.
+    // Otherwise, blur will be invoked after column change and save handler will
+    // update a different column.
+    let editor: HTMLTextAreaElement | undefined;
+    owner.autoDispose(
+      cursor.subscribe(() => {
+        editor?.blur();
+      })
+    );
+
+    return [
+      cssLabel(t("DESCRIPTION")),
+      cssRow(
+        editor = cssTextArea(fromKo(origColumn.description),
+          { onInput: false },
+          { rows: '3' },
+          dom.on('blur', async (e, elem) => {
+            await origColumn.description.saveOnly(elem.value);
+          }),
+          testId('column-description'),
+        )
+      ),
+    ];
+  }
+
+const cssTextArea = styled(textarea, `
+  color: ${theme.inputFg};
+  background-color: ${theme.mainPanelBg};
+  border: 1px solid ${theme.inputBorder};
+  width: 100%;
+  outline: none;
+  border-radius: 3px;
+  padding: 3px 7px;
+
+  &::placeholder {
+    color: ${theme.inputPlaceholderFg};
+  }
+
+  &[readonly] {
+    background-color: ${theme.inputDisabledBg};
+    color: ${theme.inputDisabledFg};
+  }
+`);

app/client/ui/FieldConfig.ts

@@ -5,10 +5,10 @@ import {BEHAVIOR, ColumnRec} from 'app/client/models/entities/ColumnRec';
 import {buildHighlightedCode, cssCodeBlock} from 'app/client/ui/CodeHighlight';
 import {GristTooltips} from 'app/client/ui/GristTooltips';
 import {cssBlockedCursor, cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
-import { withInfoTooltip } from 'app/client/ui/tooltips';
+import {withInfoTooltip} from 'app/client/ui/tooltips';
 import {buildFormulaTriggers} from 'app/client/ui/TriggerFormulas';
 import {textButton} from 'app/client/ui2018/buttons';
-import { testId, theme } from 'app/client/ui2018/cssVars';
+import {testId, theme} from 'app/client/ui2018/cssVars';
 import {textInput} from 'app/client/ui2018/editableLabel';
 import {cssIconButton, icon} from 'app/client/ui2018/icons';
 import {IconName} from 'app/client/ui2018/IconList';
@@ -18,7 +18,6 @@ import {sanitizeIdent} from 'app/common/gutil';
 import {bundleChanges, Computed, dom, DomContents, DomElementArg, fromKo, MultiHolder,
         Observable, styled} from 'grainjs';
 import * as ko from 'knockout';
-import { textarea } from './inputs';
 
 const t = makeT('FieldConfig');
 
@@ -89,40 +88,6 @@ export function buildNameConfig(
   ];
 }
 
-export function buildDescriptionConfig(
-  owner: MultiHolder,
-  origColumn: ColumnRec,
-  cursor: ko.Computed<CursorPos>,
-) {
-
-  // We will listen to cursor position and force a blur event on
-  // the text input, which will trigger save before the column observable
-  // will change its value.
-  // Otherwise, blur will be invoked after column change and save handler will
-  // update a different column.
-  let editor: HTMLTextAreaElement | undefined;
-  owner.autoDispose(
-    cursor.subscribe(() => {
-      editor?.blur();
-    })
-  );
-
-  return [
-    cssLabel(t("DESCRIPTION")),
-    cssRow(
-      editor = cssTextArea(fromKo(origColumn.description),
-        { onInput: false },
-        { rows: '3' },
-        dom.on('blur', async (e, elem) => {
-          await origColumn.description.saveOnly(elem.value);
-        }),
-        testId('column-description'),
-      )
-    ),
-
-  ];
-}
-
 type SaveHandler = (column: ColumnRec, formula: string) => Promise<void>;
 type BuildEditor = (
   cellElem: Element,
@@ -529,22 +494,3 @@ const cssInput = styled(textInput, `
     color: ${theme.inputDisabledFg};
   }
 `);
-
-const cssTextArea = styled(textarea, `
-  color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
-  border: 1px solid ${theme.inputBorder};
-  width: 100%;
-  outline: none;
-  border-radius: 3px;
-  padding: 3px 7px;
-
-  &::placeholder {
-    color: ${theme.inputPlaceholderFg};
-  }
-
-  &[readonly] {
-    background-color: ${theme.inputDisabledBg};
-    color: ${theme.inputDisabledFg};
-  }
-`);

app/client/ui/RightPanel.ts

@@ -28,6 +28,7 @@ import {GridOptions} from 'app/client/ui/GridOptions';
 import {attachPageWidgetPicker, IPageWidget, toPageWidget} from 'app/client/ui/PageWidgetPicker';
 import {linkId, selectBy} from 'app/client/ui/selectBy';
 import {CustomSectionConfig} from 'app/client/ui/CustomSectionConfig';
+import {buildDescriptionConfig} from 'app/client/ui/DescriptionConfig';
 import {cssLabel} from 'app/client/ui/RightPanelStyles';
 import {VisibleFieldsConfig} from 'app/client/ui/VisibleFieldsConfig';
 import {IWidgetType, widgetTypes} from 'app/client/ui/widgetTypes';
@@ -43,7 +44,6 @@ import {bundleChanges, Computed, Disposable, dom, domComputed, DomContents,
         DomElementArg, DomElementMethod, IDomComponent} from 'grainjs';
 import {MultiHolder, Observable, styled, subscribe} from 'grainjs';
 import * as ko from 'knockout';
-import { buildDescriptionConfig } from './FieldConfig';
 
 const t = makeT('RightPanel');
 

app/common/ThemePrefs-ti.ts

@@ -296,6 +296,9 @@ export const ThemeColors = t.iface([], {
   "menu-toggle-active-fg": "string",
   "menu-toggle-bg": "string",
   "menu-toggle-border": "string",
+  "info-button-fg": "string",
+  "info-button-hover-fg": "string",
+  "info-button-active-fg": "string",
   "button-group-fg": "string",
   "button-group-light-fg": "string",
   "button-group-bg": "string",

app/common/ThemePrefs.ts

@@ -387,6 +387,11 @@ export interface ThemeColors {
   'menu-toggle-bg': string;
   'menu-toggle-border': string;
 
+  /* Info Button */
+  'info-button-fg': string;
+  'info-button-hover-fg': string;
+  'info-button-active-fg': string;
+
   /* Button Groups */
   'button-group-fg': string;
   'button-group-light-fg': string;

app/common/themes/GristDark.ts

@@ -366,6 +366,11 @@ export const GristDark: ThemeColors = {
   'menu-toggle-bg': '#32323F',
   'menu-toggle-border': '#A4A4A4',
 
+  /* Info Button */
+  'info-button-fg': '#8F8F8F',
+  'info-button-hover-fg': '#707070',
+  'info-button-active-fg': '#5C5C5C',
+
   /* Button Groups */
   'button-group-fg': '#EFEFEF',
   'button-group-light-fg': '#A4A4A4',

app/common/themes/GristLight.ts

@@ -366,6 +366,11 @@ export const GristLight: ThemeColors = {
   'menu-toggle-bg': 'white',
   'menu-toggle-border': '#929299',
 
+  /* Info Button */
+  'info-button-fg': '#8F8F8F',
+  'info-button-hover-fg': '#707070',
+  'info-button-active-fg': '#5C5C5C',
+
   /* Button Groups */
   'button-group-fg': '#262633',
   'button-group-light-fg': '#929299',