feat(ColumnDesc): create column description in database and link it to visual behaviors

app/client/components/DetailView.js

@@ -259,8 +259,7 @@ DetailView.prototype.buildFieldDom = function(field, row) {
     dom.autoDispose(isCellActive),
     kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }),
     dom('div.g_record_detail_label', kd.text(field.displayLabel)),
-    // TODO : show the real description
-    dom('div.g_record_detail_description', kd.text("Description testing")),
+    dom('div.g_record_detail_description', kd.text(field.description)),
     dom('div.g_record_detail_value',
       kd.toggleClass('scissors', isCopyActive),
       kd.toggleClass('record-add', row._isAddRow),

app/client/models/entities/ViewFieldRec.ts

@@ -20,6 +20,7 @@ export interface ViewFieldRec extends IRowModel<"_grist_Views_section_field">, R
   origCol: ko.Computed<ColumnRec>;
   colId: ko.Computed<string>;
   label: ko.Computed<string>;
+  description: ko.Computed<string>;
 
   // displayLabel displays label by default but switches to the more helpful colId whenever a
   // formula field in the view is being edited.
@@ -108,6 +109,7 @@ export function createViewFieldRec(this: ViewFieldRec, docModel: DocModel): void
   this.origCol = ko.pureComputed(() => this.column().origCol());
   this.colId = ko.pureComputed(() => this.column().colId());
   this.label = ko.pureComputed(() => this.column().label());
+  this.description = ko.pureComputed(() => this.column().description());
 
   // displayLabel displays label by default but switches to the more helpful colId whenever a
   // formula field in the view is being edited.

app/client/ui/FieldConfig.ts

@@ -95,11 +95,34 @@ export function buildDescriptionConfig(
   cursor: ko.Computed<CursorPos>,
 ) {
   const editedDescription = Observable.create(owner, '');
+  const saveDescription = async (val: string) => {
+    await origColumn.description.saveOnly(val);
+    editedDescription.set('');
+  }
+
+  // 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(
-      cssTextArea(editedDescription, {})
+      editor = cssTextArea(fromKo(origColumn.description),
+        { onInput: false },
+        { placeholder: t("If necesary, describe the column") },
+        dom.on('input', (e, elem) => {
+          editedDescription.set(elem.value);
+          saveDescription(elem.value)
+        }),
+      )
     ),
 
   ];

app/client/ui/RightPanel.ts

@@ -237,7 +237,7 @@ export class RightPanel extends Disposable {
             dom.create(buildNameConfig, origColumn, cursor, isMultiSelect),
           ),
           cssSection(
-            dom.create(buildDescriptionConfig, origColumn, cursor, isMultiSelect),
+            dom.create(buildDescriptionConfig, origColumn, cursor),
           ),
           cssSeparator(),
           cssSection(