(core) Improving experience when editing group-by column.

Summary:
Improving experience when editing group-by column:
- Disable column rename
- Allow changing most widget properties:
 - Color/Background
 - Number format
 - Date/DateTime format (but not the timezone)
 - All toggle options (for toggle column)
- Remove Edit button on Choice Edit
- Changing the underlying column should reset all those options back to the original column.

Test Plan: nbrowser

Reviewers: alexmojaki

Reviewed By: alexmojaki

Subscribers: alexmojaki

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

app/client/widgets/ChoiceListEntry.ts

@@ -91,7 +91,8 @@ export class ChoiceListEntry extends Disposable {
   constructor(
     private _values: Observable<string[]>,
     private _choiceOptionsByName: Observable<ChoiceOptionsByName>,
-    private _onSave: (values: string[], choiceOptions: ChoiceOptionsByName, renames: Record<string, string>) => void
+    private _onSave: (values: string[], choiceOptions: ChoiceOptionsByName, renames: Record<string, string>) => void,
+    private _disabled: Observable<boolean>
   ) {
     super();
 
@@ -177,12 +178,15 @@ export class ChoiceListEntry extends Disposable {
               )
             ),
             dom.on('click', () => this._startEditing()),
+            cssListBoxInactive.cls("-disabled", this._disabled),
             testId('choice-list-entry')
           ),
-          cssButtonRow(
-            primaryButton('Edit',
-              dom.on('click', () => this._startEditing()),
-              testId('choice-list-entry-edit')
+          dom.maybe(use => !use(this._disabled), () =>
+            cssButtonRow(
+              primaryButton('Edit',
+                dom.on('click', () => this._startEditing()),
+                testId('choice-list-entry-edit')
+              )
             )
           )
         );
@@ -191,7 +195,9 @@ export class ChoiceListEntry extends Disposable {
   }
 
   private _startEditing(): void {
-    this._isEditing.set(true);
+    if (!this._disabled.get()) {
+      this._isEditing.set(true);
+    }
   }
 
   private _save(): void {
@@ -369,6 +375,9 @@ const cssListBoxInactive = styled(cssListBox, `
   &:hover {
     border: 1px solid ${colors.hover};
   }
+  &-disabled {
+    cursor: default;
+  }
 `);
 
 const cssListRow = styled('div', `

app/client/widgets/ChoiceTextBox.ts

@@ -5,7 +5,7 @@ import {KoSaveableObservable} from 'app/client/models/modelUtil';
 import {cssLabel, cssRow} from 'app/client/ui/RightPanel';
 import {testId} from 'app/client/ui2018/cssVars';
 import {NTextBox} from 'app/client/widgets/NTextBox';
-import {Computed, dom, styled} from 'grainjs';
+import {Computed, dom, fromKo, styled} from 'grainjs';
 import {choiceToken, DEFAULT_FILL_COLOR, DEFAULT_TEXT_COLOR} from 'app/client/widgets/ChoiceToken';
 
 export interface IChoiceOptions {
@@ -73,7 +73,8 @@ export class ChoiceTextBox extends NTextBox {
           ChoiceListEntry,
           this._choiceValues,
           this._choiceOptionsByName,
-          this.save.bind(this)
+          this.save.bind(this),
+          fromKo(this.field.column().disableEditData)
         )
       )
     ];

app/client/widgets/DateTimeTextBox.js

@@ -66,7 +66,10 @@ DateTimeTextBox.prototype.buildConfigDom = function(isTransformConfig) {
   var self = this;
   return dom('div',
     cssLabel("Timezone"),
-    cssRow(gdom.create(buildTZAutocomplete, moment, fromKo(this._timezone), this._setTimezone)),
+    cssRow(
+      gdom.create(buildTZAutocomplete, moment, fromKo(this._timezone), this._setTimezone,
+        { disabled : fromKo(this.field.column().disableEditData)}),
+      ),
     self.buildDateConfigDom(),
     cssLabel("Time Format"),
     cssRow(dom(select(fromKo(self.standardTimeFormat), self.timeFormatOptions), dom.testId("Widget_timeFormat"))),

app/client/widgets/TZAutocomplete.ts

@@ -47,7 +47,8 @@ export function buildTZAutocomplete(
   owner: IDisposableOwner,
   moment: MomentTimezone,
   valueObs: Observable<string>,
-  save: (value: string) => Promise<void>|void
+  save: (value: string) => Promise<void>|void,
+  options?: { disabled?: Observable<boolean> }
 ) {
   // Set a large maxResults, since it's sometimes nice to see all supported timezones (there are
   // fewer than 1000 in practice).
@@ -69,7 +70,7 @@ export function buildTZAutocomplete(
     }
   };
   return buildACSelect(owner,
-    {acIndex, valueObs, save: saveTZ},
+    {...options, acIndex, valueObs, save: saveTZ},
     testId("tz-autocomplete")
   );
 }