(core) Adding UI for reverse columns

Summary: - Adding an UI for two-way reference column. - Reusing table name as label for the reverse column Test Plan: Updated Reviewers: georgegevoian Reviewed By: georgegevoian Differential Revision: https://phab.getgrist.com/D4344
2026-03-02 04:09:24 +00:00 · 2024-09-13 15:20:18 +02:00
parent da6c39aa50
commit e97a45143f
25 changed files with 1356 additions and 137 deletions
--- a/test/nbrowser/TwoWayReference.ts
+++ b/test/nbrowser/TwoWayReference.ts
@@ -7,12 +7,12 @@ describe('TwoWayReference', function() {
  this.timeout('3m');
  let session: Session;
  let docId: string;
+  let revert: () => Promise<void>;
  const cleanup = setupTestSuite();
  afterEach(() => gu.checkForErrors());
  before(async function() {
    session = await gu.session().login();
    docId = await session.tempNewDoc(cleanup);
-    await gu.toggleSidePanel('left', 'close');
    await petsSetup();
  });

@@ -34,12 +34,124 @@ describe('TwoWayReference', function() {
    await gu.addNewSection('Table', 'Pets');
    await gu.openColumnPanel('Owner');
    await gu.setRefShowColumn('Name');
-    await addReverseColumn('Pets', 'Owner');
+    await addReverseColumn();
  }

+  it('works after reload', async function() {
+    const revert = await gu.begin();
+    await gu.selectSectionByTitle('OWNERS');
+    assert.deepEqual(await gu.getVisibleGridCells('Pets', [1, 2]), ['', 'Rex']);
+    await session.createHomeApi().getDocAPI(docId).forceReload();
+    await driver.navigate().refresh();
+    await gu.waitForDocToLoad();
+    // Change Rex owner to Alice.
+    await gu.selectSectionByTitle('PETS');
+    await gu.getCell('Owner', 1).click();
+    await gu.sendKeys('Alice', Key.ENTER);
+    await gu.waitForServer();
+    await gu.selectSectionByTitle('OWNERS');
+    assert.deepEqual(await gu.getVisibleGridCells('Pets', [1, 2]), ['Rex', '']);
+    await revert();
+  });
+
+
+  it('creates proper names when labels are not standard', async function() {
+    const revert = await gu.begin();
+    await gu.toggleSidePanel('left', 'close');
+
+    // Remove the reverse column, then rename the table to contain illegal characters
+    // in label, and add ref columns to it.
+    await gu.selectSectionByTitle('PETS');
+    await gu.openColumnPanel('Owner');
+    await removeTwoWay();
+    await removeModal.wait();
+    await removeModal.confirm();
+    await gu.waitForServer();
+
+    // Now add another Ref:Owners column to Pets table.
+    await gu.sendActions([
+      ['AddVisibleColumn', 'Pets', 'Friend', {type: 'Ref:Owners'}],
+    ]);
+    await gu.selectColumn('Friend');
+    await gu.setRefShowColumn('Name');
+    await gu.getCell('Friend', 1).click();
+    await gu.enterCell('Bob', Key.ENTER);
+    await gu.waitForServer();
+
+    // Now rename the Pets table to start with a number and contain a space + person emoji.
+    const LABEL = '2 🧑 + 🐕';
+    await gu.renameTable('Pets', LABEL);
+
+    // Now create reverse column for Owner and Friend.
+    await gu.openColumnPanel('Owner');
+    await addReverseColumn();
+    await gu.openColumnPanel('Friend');
+    await addReverseColumn();
+
+    // Hide side panels.
+    await gu.toggleSidePanel('left', 'close');
+    await gu.toggleSidePanel('right', 'close');
+
+    // Make sure we see proper data.
+    await gu.assertGridData(LABEL, [
+      [0, "Name", "Owner", "Friend"],
+      [1, "Rex",  "Alice", "Bob"],
+    ]);
+
+    await gu.assertGridData("OWNERS", [
+      [0, "Name", LABEL, `${LABEL}-Friend`],
+      [1, "Alice", "Rex", ""],
+      [2, "Bob",   "", "Rex"],
+    ]);
+
+    await gu.selectSectionByTitle("OWNERS");
+    // Check that creator panel contains proper names.
+    await gu.openColumnPanel(LABEL);
+    assert.equal(await driver.find('.test-field-col-id').value(), '$c2_');
+
+    await revert();
+  });
+
+  it('properly reasings reflists', async function() {
+    const revert = await gu.begin();
+
+    // Add two more dogs and move all of them to Alice
+    await gu.sendActions([
+      ['AddRecord', 'Pets', null, {Name: 'Pluto', Owner: 1}],
+      ['AddRecord', 'Pets', null, {Name: 'Azor', Owner: 1}],
+      ['UpdateRecord', 'Pets', 1, {Owner: 1}],
+    ]);
+
+    // Now reasign Azor to Bob using Owners table.
+    await gu.selectSectionByTitle('OWNERS');
+    await gu.getCell('Pets', 2).click();
+    await gu.sendKeys(Key.ENTER, 'Azor', Key.ENTER, Key.ENTER);
+    await gu.waitForServer();
+
+    // Make sure we see it.
+    assert.deepEqual(await gu.getVisibleGridCells('Pets', [1, 2]), ['Rex\nPluto\nAzor', '']);
+
+    // We are now in a modal dialog.
+    assert.equal(
+      await driver.findWait('.test-modal-dialog label', 100).getText(),
+      'Reassign to Owners record Bob.'
+    );
+
+    // Reassign it.
+    await driver.findWait('.test-modal-dialog input', 100).click();
+    await driver.findWait('.test-modal-dialog button', 100).click();
+    await gu.waitForServer();
+
+    // Make sure we see correct value.
+    assert.deepEqual(await gu.getVisibleGridCells('Pets', [1, 2]), ['Rex\nPluto', 'Azor']);
+
+    await revert();
+  });
+
  it('deletes tables with 2 way references', async function() {
    const revert = await gu.begin();
-    await gu.toggleSidePanel('left', 'open');
+
+    const beforeRemove = await gu.begin();
    await driver.find('.test-tools-raw').click();
    const removeTable = async (tableId: string) => {
      await driver.findWait(`.test-raw-data-table-menu-${tableId}`, 1000).click();
@@ -48,10 +160,11 @@ describe('TwoWayReference', function() {
      await gu.waitForServer();
    };
    await removeTable('Pets');
-    await revert();
+    await beforeRemove();
    await removeTable('Owners');
    await gu.checkForErrors();
    await revert();
+    await gu.toggleSidePanel('left', 'open');
    await gu.openPage('Table1');
  });

@@ -59,7 +172,7 @@ describe('TwoWayReference', function() {
    const revert = await gu.begin();

    await gu.selectSectionByTitle('Owners');
-    await gu.selectColumn('Pets');
+    await gu.openColumnPanel('Pets');
    await gu.setType('Reference', {apply: true});
    await gu.setType('Reference List', {apply: true});

@@ -79,6 +192,16 @@ describe('TwoWayReference', function() {
    await gu.toggleSidePanel('left', 'close');
    await gu.toggleSidePanel('right', 'close');

+    await gu.assertGridData('OWNERS', [
+      [0, "Name", "Pets"],
+      [1, "Alice", "Rex"],
+      [2, "Bob", ""],
+    ]);
+    await gu.assertGridData("PETS", [
+      [0, "Name", "Owner"],
+      [1, "Rex",  "Alice"],
+    ]);
+
    // Remove the reverse column.
    await gu.selectSectionByTitle('OWNERS');
    await gu.deleteColumn('Pets');
@@ -89,46 +212,74 @@ describe('TwoWayReference', function() {
      ['Name'],
      ['Name', 'Owner']
    ]);
-    assert.deepEqual(await gu.getVisibleGridCells('Owner', [1], 'PETS'), ['Bob']);
+    await gu.assertGridData("PETS", [
+      [0, "Name", "Owner"],
+      [1, "Rex",  "Alice"],
+    ]);
    await gu.undo();

    // Check data.
-    assert.deepEqual(await columns(), [
-      ['Name', 'Pets'],
-      ['Name', 'Owner']
+    await gu.assertGridData('OWNERS', [
+      [0, "Name", "Pets"],
+      [1, "Alice", "Rex"],
+      [2, "Bob", ""],
+    ]);
+    await gu.assertGridData("PETS", [
+      [0, "Name", "Owner"],
+      [1, "Rex",  "Alice"],
    ]);
-    assert.deepEqual(await gu.getVisibleGridCells('Pets', [1, 2], 'OWNERS'), ['', 'Rex']);
-    assert.deepEqual(await gu.getVisibleGridCells('Owner', [1], 'PETS'), ['Bob']);

    // Check that connection works.

    // Make sure we can change data.
    await gu.selectSectionByTitle('PETS');
    await gu.getCell('Owner', 1).click();
-    await gu.enterCell('Alice', Key.ENTER);
+    await gu.enterCell('Bob', Key.ENTER);
    await gu.waitForServer();
    await gu.checkForErrors();

    // Check data.
-    assert.deepEqual(await gu.getVisibleGridCells('Owner', [1], 'PETS'), ['Alice']);
-    assert.deepEqual(await gu.getVisibleGridCells('Pets', [1, 2], 'OWNERS'), ['Rex', '']);
+    await gu.assertGridData('OWNERS', [
+      [0, "Name", "Pets"],
+      [1, "Alice", ""],
+      [2, "Bob", "Rex"],
+    ]);
+    await gu.assertGridData("PETS", [
+      [0, "Name", "Owner"],
+      [1, "Rex",  "Bob"],
+    ]);

    // Now delete Owner column, and redo it
    await gu.selectSectionByTitle('Pets');
    await gu.deleteColumn('Owner');
    await gu.checkForErrors();
    await gu.undo();
+    await gu.redo();
+    await gu.undo();
    await gu.checkForErrors();

    // Check data.
-    assert.deepEqual(await gu.getVisibleGridCells('Owner', [1], 'PETS'), ['Alice']);
-    assert.deepEqual(await gu.getVisibleGridCells('Pets', [1, 2], 'OWNERS'), ['Rex', '']);
+    await gu.assertGridData('OWNERS', [
+      [0, "Name", "Pets"],
+      [1, "Alice", ""],
+      [2, "Bob", "Rex"],
+    ]);
+    await gu.assertGridData("PETS", [
+      [0, "Name", "Owner"],
+      [1, "Rex",  "Bob"],
+    ]);
    await revert();
  });

  it('breaks connection after removing reverseCol', async function() {
    const revert = await gu.begin();

+    // Move Rex to Bob.
+    await gu.selectSectionByTitle('PETS');
+    await gu.getCell('Owner', 1).click();
+    await gu.enterCell('Bob', Key.ENTER);
+    await gu.waitForServer();
+
    // Make sure Rex is owned by Bob, in both tables.
    await gu.assertGridData('OWNERS', [
      [0, "Name", "Pets"],
@@ -206,25 +357,7 @@ describe('TwoWayReference', function() {
    await revert();
  });

-  it('works after reload', async function() {
-    const revert = await gu.begin();
-
-    await gu.selectSectionByTitle('OWNERS');
-    assert.deepEqual(await gu.getVisibleGridCells('Pets', [1, 2]), ['', 'Rex']);
-    await session.createHomeApi().getDocAPI(docId).forceReload();
-    await driver.navigate().refresh();
-    await gu.waitForDocToLoad();
-    // Change Rex owner to Alice.
-    await gu.selectSectionByTitle('PETS');
-    await gu.getCell('Owner', 1).click();
-    await gu.sendKeys('Alice', Key.ENTER);
-    await gu.waitForServer();
-    await gu.selectSectionByTitle('OWNERS');
-    assert.deepEqual(await gu.getVisibleGridCells('Pets', [1, 2]), ['Rex', '']);
-    await revert();
-  });
-
-  async function projectSetup() {
+  it('common setup', async function() {
    await gu.sendActions([
      ['AddTable', 'Projects', []],
      ['AddTable', 'People', []],
@@ -239,17 +372,104 @@ describe('TwoWayReference', function() {
    await gu.selectSectionByTitle('Projects');
    await gu.openColumnPanel();
    await gu.toggleSidePanel('left', 'close');
-  }
+    revert = await gu.begin();
+  });

-  it('undo works for adding reverse column', async function() {
-    await projectSetup();
-    const revert = await gu.begin();
+  it('clicking show on creates a new column', async function() {
+    await gu.selectColumn('Owner');
+    await addReverseColumn();
+    assert.deepEqual(await columns(), [
+      ['Name', 'Owner'],
+      ['Name', 'Projects']
+    ]);

+    await gu.selectSectionByTitle('People');
+    await gu.openColumnPanel('Projects');
+    assert.equal(await configText(), 'Projects.Owner(Ref)');
+  });
+
+  it('can remove two way reference', async function() {
+    await gu.selectSectionByTitle('Projects');
+    await gu.openColumnPanel('Owner');
+    await removeTwoWay();
+    await removeModal.wait();
+    await removeModal.confirm();
+    await gu.waitForServer();
    assert.deepEqual(await columns(), [
      ['Name', 'Owner'],
      ['Name']
    ]);
-    await addReverseColumn('Projects', 'Owner');
+  });
+
+  it('right column looks ok', async function() {
+    await addReverseColumn();
+    await gu.waitForServer();
+
+    await gu.selectSectionByTitle('People');
+    await gu.openColumnPanel('Projects');
+
+    assert.equal(await gu.getType(), 'Reference List');
+    assert.equal(await gu.getRefTable(), 'Projects');
+  });
+
+  it('right column has same options', async function() {
+    await gu.openColumnPanel('Projects');
+    assert.equal(await gu.getType(), 'Reference List');
+    assert.equal(await configText(), 'Projects.Owner(Ref)');
+  });
+
+  it('reloading the page keeps the options', async function() {
+    await gu.reloadDoc();
+    await gu.selectSectionByTitle('Projects');
+    await gu.openColumnPanel('Owner');
+    assert.equal(await configText(), 'People.Projects(RefList)');
+
+    await gu.selectSectionByTitle('People');
+    await gu.openColumnPanel('Projects');
+    assert.equal(await configText(), 'Projects.Owner(Ref)');
+  });
+
+  it('relationship can be removed through the right column', async function() {
+    await removeTwoWay();
+    await removeModal.confirm();
+    await gu.waitForServer();
+    assert.deepEqual(await columns(), [
+      ['Name'],
+      ['Name', 'Projects']
+    ]);
+  });
+
+  it('undo works', async function() {
+    // First revert all changes.
+    await revert();
+    await gu.checkForErrors();
+    assert.deepEqual(await columns(), [
+      ['Name', 'Owner'],
+      ['Name']
+    ]);
+
+    // Now redo all changes.
+    await gu.redoAll();
+    await gu.checkForErrors();
+    assert.deepEqual(await columns(), [
+      ['Name'],
+      ['Name', 'Projects']
+    ]);
+
+    await revert();
+    await gu.checkForErrors();
+    assert.deepEqual(await columns(), [
+      ['Name', 'Owner'],
+      ['Name']
+    ]);
+
+    // And now check individual changes.
+    await gu.selectSectionByTitle('Projects');
+    await gu.openColumnPanel('Owner');
+    assert.isTrue(await canAddReverseColumn());
+
+    // Now add and do a single undo to make sure it is bundled.
+    await addReverseColumn();
    assert.deepEqual(await columns(), [
      ['Name', 'Owner'],
      ['Name', 'Projects']
@@ -259,17 +479,145 @@ describe('TwoWayReference', function() {
      ['Name', 'Owner'],
      ['Name']
    ]);
-    await gu.redo(1);
+  });
+
+  it('can delete left column', async function() {
+    await gu.selectSectionByTitle('Projects');
+    await gu.openColumnPanel('Owner');
+    await addReverseColumn();
+    await gu.deleteColumn('Owner');
+    await gu.checkForErrors();
    assert.deepEqual(await columns(), [
-      ['Name', 'Owner'],
+      ['Name'],
      ['Name', 'Projects']
    ]);
+    await gu.selectSectionByTitle('People');
+    await gu.openColumnPanel('Projects');
+    assert.isTrue(await canAddReverseColumn());
+    await gu.deleteColumn('Projects');
+    await gu.checkForErrors();
    await revert();
+    assert.deepEqual(await columns(), [
+      ['Name', 'Owner'],
+      ['Name']
+    ]);
  });

+  it('can delete right column', async function() {
+    await gu.selectSectionByTitle('Projects');
+    await gu.openColumnPanel('Owner');
+    await addReverseColumn();
+    await gu.selectSectionByTitle('People');
+    await gu.openColumnPanel('Projects');
+    await gu.deleteColumn('Projects');
+    await gu.checkForErrors();
+    assert.deepEqual(await columns(), [
+      ['Name', 'Owner'],
+      ['Name']
+    ]);
+    await gu.selectSectionByTitle('Projects');
+    await gu.openColumnPanel('Owner');
+    assert.isFalse(await isConfigured());
+  });
+
+  it('syncs columns', async function() {
+    await gu.selectSectionByTitle('Projects');
+    await gu.openColumnPanel('Owner');
+    await gu.setRefShowColumn('Name');
+    await addReverseColumn();
+
+    // Show better names.
+    await gu.selectSectionByTitle('People');
+    await gu.openColumnPanel('Projects');
+    await gu.setRefShowColumn('Name');
+
+    // Add two projects.
+    await gu.sendActions([
+      ['AddRecord', 'Projects', null, {Name: 'Apps'}],
+      ['AddRecord', 'Projects', null, {Name: 'Backend'}],
+    ]);
+    // Add two people.
+    await gu.sendActions([
+      ['AddRecord', 'People', null, {Name: 'Alice'}],
+      ['AddRecord', 'People', null, {Name: 'Bob'}],
+    ]);
+
+    // Now assign Bob to Backend and Alice to Apps.
+    await gu.selectSectionByTitle('Projects');
+    await gu.getCell('Owner', 1).click();
+    await gu.enterCell('Alice');
+    await gu.getCell('Owner', 2).click();
+    await gu.enterCell('Bob');
+
+    // And now make sure the reverse reference is correct.
+    await gu.selectSectionByTitle('People');
+    assert.deepEqual(await gu.getVisibleGridCells('Name', [1, 2]), ['Alice', 'Bob']);
+    assert.deepEqual(await gu.getVisibleGridCells('Projects', [1, 2]), ['Apps', 'Backend']);
+  });
+
+  it('sync columns when edited from right', async function() {
+    await gu.getCell('Projects', 1).click();
+    // Remove the project from Alice.
+    await gu.sendKeys(Key.DELETE);
+    await gu.waitForServer();
+    assert.deepEqual(await gu.getVisibleGridCells('Projects', [1, 2], 'People'), ['', 'Backend']);
+    assert.deepEqual(await gu.getVisibleGridCells('Owner', [1, 2], 'Projects'), ['', 'Bob']);
+    // Single undo restores it.
+    await gu.undo(1);
+    assert.deepEqual(await gu.getVisibleGridCells('Projects', [1, 2], 'People'), ['Apps', 'Backend']);
+    assert.deepEqual(await gu.getVisibleGridCells('Owner', [1, 2], 'Projects'), ['Alice', 'Bob']);
+
+    await gu.redo(1);
+    assert.deepEqual(await gu.getVisibleGridCells('Projects', [1, 2], 'People'), ['', 'Backend']);
+    assert.deepEqual(await gu.getVisibleGridCells('Owner', [1, 2], 'Projects'), ['', 'Bob']);
+
+    await gu.undo(1);
+    assert.deepEqual(await gu.getVisibleGridCells('Projects', [1, 2], 'People'), ['Apps', 'Backend']);
+    assert.deepEqual(await gu.getVisibleGridCells('Owner', [1, 2], 'Projects'), ['Alice', 'Bob']);
+  });
+
+  it('honors relations from list to single', async function() {
+    // Now make Alice owner of Backend project. Apps project should now have no owner,
+    // and Bob shouldn't be owner of Backend.
+
+    const checkInitial = async () => {
+      assert.deepEqual(await gu.getVisibleGridCells('Owner', [1, 2], 'Projects'), ['Alice', 'Bob']);
+      assert.deepEqual(await gu.getVisibleGridCells('Projects', [1, 2], 'People'), ['Apps', 'Backend']);
+    };
+    await checkInitial();
+
+    await gu.selectSectionByTitle('People');
+    await gu.getCell('Projects', 1).click();
+    await gu.sendKeys('Backend');
+    await gu.sendKeys(Key.ENTER);
+    await gu.sendKeys(Key.ENTER);
+    await gu.waitForServer();
+
+    // We should see a modal dialog
+    await driver.findWait('.test-modal-dialog', 100);
+
+    // We should have an option there.
+    assert.equal(
+      await driver.findWait('.test-modal-dialog label', 100).getText(),
+      'Reassign to People record Alice.'
+    );
+
+    // Reassign it.
+    await driver.findWait('.test-modal-dialog input', 100).click();
+    await driver.findWait('.test-modal-dialog button', 100).click();
+    await gu.waitForServer();
+
+    assert.deepEqual(await gu.getVisibleGridCells('Owner', [1, 2], 'Projects'), ['', 'Alice']);
+    assert.deepEqual(await gu.getVisibleGridCells('Projects', [1, 2], 'People'), ['Backend', '']);
+
+    // Single undo restores it.
+    await gu.undo(1);
+    await checkInitial();
+  });
+
+
  it('creates proper names when added multiple times', async function() {
    const revert = await gu.begin();
-    await addReverseColumn('Projects', 'Owner');

    // Add another reference to Projects from People.
    await gu.selectSectionByTitle('Projects');
@@ -278,22 +626,22 @@ describe('TwoWayReference', function() {
    await gu.setRefShowColumn('Name');

    // And now show it on People.
-    await addReverseColumn('Projects', 'Tester');
+    await addReverseColumn();

    // We should now see 3 columns on People.
    await gu.selectSectionByTitle('People');
-    assert.deepEqual(await gu.getColumnNames(), ['Name', 'Projects', 'Projects_Tester']);
+    assert.deepEqual(await gu.getColumnNames(), ['Name', 'Projects', 'Projects-Tester']);

    // Add yet another one.
    await gu.selectSectionByTitle('Projects');
    await gu.addColumn('PM', 'Reference');
    await gu.setRefTable('People');
    await gu.setRefShowColumn('Name');
-    await addReverseColumn('Projects', 'PM');
+    await addReverseColumn();

    // We should now see 4 columns on People.
    await gu.selectSectionByTitle('People');
-    assert.deepEqual(await gu.getColumnNames(), ['Name', 'Projects', 'Projects_Tester', 'Projects_PM']);
+    assert.deepEqual(await gu.getColumnNames(), ['Name', 'Projects', 'Projects-Tester', 'Projects-PM']);

    await revert();
  });
@@ -318,7 +666,7 @@ describe('TwoWayReference', function() {
      ['AddRecord', 'Tasks', null, {Name: 'Child', Parent: -1}],
    ]);
    await gu.openColumnPanel('Parent');
-    await addReverseColumn('Tasks', 'Parent');
+    await addReverseColumn();

    // We should now see 3 columns on Tasks.
    assert.deepEqual(await gu.getColumnNames(), ['Name', 'Parent', 'Tasks']);
@@ -362,11 +710,36 @@ describe('TwoWayReference', function() {
  });
 });

-async function addReverseColumn(tableId: string, colId: string) {
-  await gu.sendActions([
-    ['AddReverseColumn', tableId, colId],
-  ]);
-}
+const canAddReverseColumn = async () => {
+  return await driver.findWait('.test-add-reverse-columm', 100).isPresent();
+};
+
+const isConfigured = async () => {
+  if (!await driver.find('.test-reverse-column-label').isPresent()) {
+    return false;
+  }
+  return await driver.findWait('.test-reverse-column-label', 100).isDisplayed();
+};
+
+const addReverseColumn = () => driver.findWait('.test-add-reverse-columm', 100)
+                              .click().then(() => gu.waitForServer());
+
+const removeTwoWay = () => driver.findWait('.test-remove-reverse-column', 100).click()
+                                  .then(() => gu.waitForServer());
+
+const configText = async () => {
+  const text = await driver.findWait('.test-reverse-column-label', 100).getText();
+  return text.trim().split('\n').join('').replace('COLUMN', '.').replace("TABLE", "");
+};
+
+const removeModal = {
+  wait: async () => assert.isTrue(await driver.findWait('.test-modal-confirm', 100).isDisplayed()),
+  confirm: () => driver.findWait('.test-modal-confirm', 100).click().then(() => gu.waitForServer()),
+  cancel: () => driver.findWait('.test-modal-cancel', 100).click(),
+  checkUnlink: () => driver.findWait('.test-option-unlink', 100).click(),
+  checkRemove: () => driver.findWait('.test-option-remove', 100).click(),
+};
+

 /**
 * Returns an array of column headers for each table in the document.