(core) Preserving rules when data is transformed

Summary: Rules where removed when data in column was transformed.

Test Plan: Added new test

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/components/ColumnTransform.ts

@@ -10,6 +10,7 @@ import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
 import {TableData} from 'app/client/models/TableData';
 import {FieldBuilder} from 'app/client/widgets/FieldBuilder';
 import {UserAction} from 'app/common/DocActions';
+import {GristObjCode} from 'app/plugin/GristData';
 import {Disposable, Observable} from 'grainjs';
 import isPlainObject from 'lodash/isPlainObject';
 import * as ko from 'knockout';
@@ -34,6 +35,7 @@ export class ColumnTransform extends Disposable {
   protected editor: AceEditor|null = null;              // Created when the dom is built by extending classes
   protected formulaUpToDate = Observable.create(this, true);
   protected _tableData: TableData;
+  protected rules: [GristObjCode.List, ...number[]]|null;
 
   // Whether _doFinalize should execute the transform, or cancel it.
   protected _shouldExecute: boolean = false;
@@ -53,6 +55,7 @@ export class ColumnTransform extends Disposable {
     this.origColumn = this.field.column();
     this.origDisplayCol = this.field.displayColModel();
     this.origWidgetOptions = this.field.widgetOptionsJson();
+    this.rules = this.origColumn.rules();
     this.isCallPending = _fieldBuilder.isCallPending;
 
     this._tableData = gristDoc.docData.getTable(this.origColumn.table().tableId())!;
@@ -169,6 +172,14 @@ export class ColumnTransform extends Disposable {
       formula: this.getIdentityFormula(),
       ...(this.origWidgetOptions ? {widgetOptions: JSON.stringify(this.origWidgetOptions)} : {}),
     }]);
+    if (this.rules) {
+      // We are in bundle, it is safe to just send another action.
+      // NOTE: We could add rules with AddColumn action, but there are some optimizations that converts array values.
+      await this.gristDoc.docData.sendActions([
+        ['UpdateRecord', '_grist_Tables_column', newColInfo.colRef, {rules: this.rules}]
+      ]);
+    }
+
     return newColInfo.colRef;
   }
 

app/client/widgets/FieldBuilder.ts

@@ -423,6 +423,7 @@ export class FieldBuilder extends Disposable {
                    kf.checkButton(transformButton,
                      dom('span.glyphicon.glyphicon-flash'),
                      dom.testId("FieldBuilder_editTransform"),
+                     testId('edit-transform'),
                      kd.toggleClass('disabled', () => this._isTransformingType() || this.origColumn.isFormula() ||
                        this.origColumn.disableModifyBase())
                    )

test/nbrowser/gristUtils.ts

@@ -2240,12 +2240,47 @@ export function setFillColor(color: string) {
   return setColor(driver.find('.test-fill-input'), color);
 }
 
+export async function styleRulesCount() {
+  const rules = await driver.findAll('.test-widget-style-conditional-rule');
+  return rules.length;
+}
+
+export async function addInitialStyleRule() {
+  await driver.find('.test-widget-style-add-conditional-style').click();
+  await waitForServer();
+}
+
+export async function removeStyleRuleAt(nr: number) {
+  await driver.find(`.test-widget-style-remove-rule-${nr}`).click();
+  await waitForServer();
+}
+
+export async function addAnotherStyleRule() {
+  await driver.find('.test-widget-style-add-another-rule').click();
+  await waitForServer();
+}
+
+export async function openStyleRuleFormula(nr: number) {
+  await driver
+    .findWait(`.test-widget-style-conditional-rule-${nr} .formula_field_sidepane`, 1000)
+    .click();
+  await waitAppFocus(false);
+}
+
 export async function clickAway() {
   await driver.find(".test-notifier-menu-btn").click();
   await driver.sendKeys(Key.ESCAPE);
 }
 
-export function openColorPicker() {
+/**
+ * Opens a color picker, either the default one or the one for a specific style rule.
+ */
+export function openColorPicker(nr?: number) {
+  if (nr !== undefined) {
+    return driver
+      .find(`.test-widget-style-conditional-rule-${nr} .test-color-select`)
+      .click();
+  }
   return driver.find('.test-color-select').click();
 }