(core) Fixing map-fields button on formview

Summary:
Map and unmap fields button on forms stopped working after recent navigation improvments. Those
function were put in the keyboard actions section before, now they are registered globally as
they are button handlers not affected by the focus.

Also unified testIds used in mappings between forms and other widgets

Test Plan: Added new tests

Reviewers: paulfitz

Reviewed By: paulfitz

Subscribers: paulfitz

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

Author: berhalak

app/client/components/Forms/FormView.ts

@@ -271,18 +271,6 @@ export class FormView extends Disposable {
           await selected.deleteSelf();
         }).catch(reportError);
       },
-      hideFields: (colId: [string]) => {
-        // Get the ref from colId.
-        const existing: Array<[number, string]> =
-          this.viewSection.viewFields().all().map(f => [f.id(), f.column().colId()]);
-        const ref = existing.filter(([_, c]) => colId.includes(c)).map(([r, _]) => r);
-        if (!ref.length) { return; }
-        const box = Array.from(this._root.filter(b => ref.includes(b.prop('leaf')?.get())));
-        box.forEach(b => b.removeSelf());
-        this._root.save(async () => {
-          await this.viewSection.removeField(ref);
-        }).catch(reportError);
-      },
       insertFieldBefore: (what: NewBox) => {
         const selected = this.selectedBox.get();
         if (!selected) { return; }
@@ -314,6 +302,32 @@ export class FormView extends Disposable {
           this.save().catch(reportError);
         }
       },
+    };
+    this.autoDispose(commands.createGroup({
+      ...keyboardActions,
+      cursorDown: keyboardActions.nextField,
+      cursorUp: keyboardActions.prevField,
+      cursorLeft: keyboardActions.prevField,
+      cursorRight: keyboardActions.nextField,
+      shiftDown: keyboardActions.lastField,
+      shiftUp: keyboardActions.firstField,
+      editField: keyboardActions.edit,
+      deleteFields: keyboardActions.clearValues,
+    }, this, this.viewSection.hasRegionFocus));
+
+    const commandHandlers = {
+      hideFields: (colId: [string]) => {
+        // Get the ref from colId.
+        const existing: Array<[number, string]> =
+          this.viewSection.viewFields().all().map(f => [f.id(), f.column().colId()]);
+        const ref = existing.filter(([_, c]) => colId.includes(c)).map(([r, _]) => r);
+        if (!ref.length) { return; }
+        const box = Array.from(this._root.filter(b => ref.includes(b.prop('leaf')?.get())));
+        box.forEach(b => b.removeSelf());
+        this._root.save(async () => {
+          await this.viewSection.removeField(ref);
+        }).catch(reportError);
+      },
       showColumns: (colIds: string[]) => {
         // Sanity check that type is correct.
         if (!colIds.every(c => typeof c === 'string')) { throw new Error('Invalid column id'); }
@@ -345,18 +359,8 @@ export class FormView extends Disposable {
         }).catch(reportError);
       },
     };
-    this.autoDispose(commands.createGroup({
-      ...keyboardActions,
-      cursorDown: keyboardActions.nextField,
-      cursorUp: keyboardActions.prevField,
-      cursorLeft: keyboardActions.prevField,
-      cursorRight: keyboardActions.nextField,
-      shiftDown: keyboardActions.lastField,
-      shiftUp: keyboardActions.firstField,
-      editField: keyboardActions.edit,
-      deleteFields: keyboardActions.clearValues,
-      hideFields: keyboardActions.hideFields,
-    }, this, this.viewSection.hasRegionFocus));
+
+    this.autoDispose(commands.createGroup(commandHandlers, this, this.viewSection.hasFocus));
 
     this._previewUrl = Computed.create(this, use => {
       const doc = use(this.gristDoc.docPageModel.currentDoc);

app/client/components/Forms/MappedFieldsConfig.ts

@@ -86,7 +86,7 @@ export class MappedFieldsConfig extends Disposable {
           primaryButton(
             dom.text(t("Unmap fields")),
             dom.on('click', unMapSelected),
-            testId('visible-hide')
+            testId('visible-hide'),
           ),
           basicButton(
             t("Clear"),
@@ -116,12 +116,12 @@ export class MappedFieldsConfig extends Disposable {
           primaryButton(
             dom.text(t("Map fields")),
             dom.on('click', mapSelected),
-            testId('visible-hide')
+            testId('hidden-show'),
           ),
           basicButton(
             t("Clear"),
             dom.on('click', () => unmappedColumns.get().forEach((col) => col.selected.set(false))),
-            testId('visible-clear')
+            testId('hidden-clear')
           ),
           testId('visible-batch-buttons')
         ),

app/client/ui/VisibleFieldsConfig.ts

@@ -371,6 +371,7 @@ export class VisibleFieldsConfig extends Disposable {
     const selection = this._hiddenFieldsSelection;
 
     return cssFieldEntry(
+      testId('hidden-field'),
       cssFieldLabel(dom.text(column.label)),
       cssHideIcon('EyeShow',
         dom.on('click', () => this.addField(column)),
@@ -391,6 +392,7 @@ export class VisibleFieldsConfig extends Disposable {
     const selection = this._visibleFieldsSelection;
 
     return cssFieldEntry(
+      testId('visible-field'),
       cssFieldLabel(dom.text(field.label)),
       // TODO: we need a "cross-out eye" icon here.
       cssHideIcon('EyeHide',

test/nbrowser/FormView2.ts

@@ -21,6 +21,35 @@ describe('FormView2', function() {
 
   gu.withClipboardTextArea();
 
+  describe('general', function() {
+    before(async function() {
+      session = await gu.session().login();
+      api = session.createHomeApi();
+      await session.tempNewDoc(cleanup);
+      await gu.addNewPage('Form', 'Table1');
+    });
+
+    it('properly maps fields in the creator panel', async function() {
+      assert.deepEqual(await labels(), ['A', 'B', 'C']);
+
+      // Check A column and use `Unmap fields` button to check it works properly.
+      await gu.toggleVisibleColumn('A');
+      await gu.toggleVisibleColumn('B');
+      await gu.hideColumns();
+
+      // Check that the field is no longer in the form.
+      assert.deepEqual(await labels(), ['C']);
+
+      // Now map them back.
+      await gu.toggleHiddenColumn('A');
+      await gu.toggleHiddenColumn('B');
+      await gu.showColumns();
+
+      // Check that the fields are back.
+      assert.deepEqual(await labels(), ['C', 'A', 'B']);
+    });
+  });
+
   describe('form borders', function() {
     before(async function() {
       session = await gu.session().login();

test/nbrowser/LinkingSelector.ts

@@ -37,7 +37,7 @@ describe('LinkingSelector', function() {
     await gu.openWidgetPanel();
     await gu.selectAllVisibleColumns();
     await gu.toggleVisibleColumn('Start_Date');
-    await gu.hideVisibleColumns();
+    await gu.hideColumns();
 
     // Make sure we see the same date.
     await gu.getCell('Start_Date', 1, 'CLASSES').click();
@@ -61,7 +61,7 @@ describe('LinkingSelector', function() {
     await gu.openWidgetPanel();
     await gu.selectAllVisibleColumns();
     await gu.toggleVisibleColumn('Start_Date');
-    await gu.hideVisibleColumns();
+    await gu.hideColumns();
 
     // Rename it to list.
     await gu.renameActiveSection('List');
@@ -73,7 +73,7 @@ describe('LinkingSelector', function() {
     await gu.renameActiveSection('Card');
     await gu.selectAllVisibleColumns();
     await gu.toggleVisibleColumn('Start_Date');
-    await gu.hideVisibleColumns();
+    await gu.hideColumns();
 
     // Select the second row.
     await gu.selectSectionByTitle('List');

test/nbrowser/gristUtils.ts

@@ -1581,15 +1581,25 @@ export async function selectAllVisibleColumns() {
  * Toggle checkbox for a column in visible columns section.
  */
 export async function toggleVisibleColumn(col: string) {
-  const row = await driver.findContent(".test-vfc-visible-fields .kf_draggable_content", exactMatch(col));
+  await openWidgetPanel('widget');
+  const row = await driver.findContent(".test-vfc-visible-field", exactMatch(col));
+  await row.find('input').click();
+}
+
+/**
+ * Toggle checkbox for a column in hidden columns section.
+ */
+export async function toggleHiddenColumn(col: string) {
+  await openWidgetPanel('widget');
+  const row = await driver.findContent(".test-vfc-hidden-field", exactMatch(col));
   await row.find('input').click();
 }
 
 /**
  * Lists all columns in the visible columns section.
  */
 export async function getVisibleColumns() {
-  return await driver.findAll(".test-vfc-visible-fields .kf_draggable_content", async (row) => {
+  return await driver.findAll(".test-vfc-visible-field", async (row) => {
     return row.getText();
   });
 }
@@ -1598,19 +1608,24 @@ export async function getVisibleColumns() {
  * Lists all columns in the hidden columns section.
  */
 export async function getHiddenColumns() {
-  return await driver.findAll(".test-vfc-hidden-fields .kf_draggable_content", async (row) => {
+  return await driver.findAll(".test-vfc-hidden-field", async (row) => {
     return row.getText();
   });
 }
 
 /**
  * Clicks `Hide Columns` button in visible columns section.
  */
-export async function hideVisibleColumns() {
+export async function hideColumns() {
   await driver.find('.test-vfc-visible-hide').click();
   await waitForServer();
 }
 
+export async function showColumns() {
+  await driver.find('.test-vfc-hidden-show').click();
+  await waitForServer();
+}
+
 export async function search(what: string) {
   await driver.find('.test-tb-search-icon').click();
   await driver.sleep(500);