diff --git a/app/client/components/DetailView.css b/app/client/components/DetailView.css index d7f4d876..5ca3fc0a 100644 --- a/app/client/components/DetailView.css +++ b/app/client/components/DetailView.css @@ -30,6 +30,17 @@ padding: .5rem; } +.g_record_detail_label_container { + display: flex; + justify-content: flex-start; + gap: 3px; +} + +.g_record_detail_label_container .info_toggle_icon { + width: 13px; + height: 13px; + margin-bottom: 3px; +} .g_record_detail_label { min-height: 1rem; color: #666; @@ -150,7 +161,7 @@ -webkit-flex-direction: column-reverse; } -.detail_theme_field_under > .g_record_detail_label { +.detail_theme_field_under .g_record_detail_label { border-top: 1px solid #333; } @@ -208,7 +219,7 @@ line-height: 1.2; } -.detail_theme_field_compact > .g_record_detail_label { +.detail_theme_field_compact .g_record_detail_label { font-weight: normal; font-size: var(--grist-small-font-size); color: var(--grist-theme-card-compact-label, var(--grist-color-slate)); @@ -230,7 +241,7 @@ padding: 1px 1px 1px 5px; } -.detail_theme_field_form > .g_record_detail_label { +.detail_theme_field_form .g_record_detail_label { font-size: var(--grist-small-font-size); color: var(--grist-theme-card-form-label, var(--grist-color-slate)); font-weight: bold; @@ -241,6 +252,10 @@ margin-right: -8px; } +.detail_theme_field_form .g_record_detail_label_container { + gap: 8px; +} + /* TODO want to style better the values themselves (e.g. more padding, rounded corners, move label * inside value box for compact view for better cursor looks, etc), but first the cell editor * needs to learn to match the value box's style. Right now, the cell editor style is hard-coded. @@ -288,7 +303,7 @@ border-radius: 2px; } -.detail_theme_field_blocks > .g_record_detail_label { +.detail_theme_field_blocks .g_record_detail_label { font-size: var(--grist-small-font-size); color: var(--grist-theme-card-blocks-label, var(--grist-color-slate)); font-weight: normal; diff --git a/app/client/components/DetailView.js b/app/client/components/DetailView.js index 6054a53d..75c11f53 100644 --- a/app/client/components/DetailView.js +++ b/app/client/components/DetailView.js @@ -15,6 +15,7 @@ const RecordLayout = require('./RecordLayout'); const commands = require('./commands'); const {RowContextMenu} = require('../ui/RowContextMenu'); const {parsePasteForView} = require("./BaseView2"); +const {columnInfoTooltip} = require("../ui/tooltips"); /** * DetailView component implements a list of record layouts. @@ -227,8 +228,10 @@ DetailView.prototype.buildFieldDom = function(field, row) { if (field.isNewField) { return dom('div.g_record_detail_el.flexitem', kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }), - dom('div.g_record_detail_label', field.label), - dom('div.g_record_detail_value', field.value) + dom('div.g_record_detail_label_container', + dom('div.g_record_detail_label', kd.text(field.displayLabel)), + kd.scope(field.description, desc => desc ? columnInfoTooltip(kd.text(field.description)) : null) + ), ); } @@ -257,7 +260,10 @@ DetailView.prototype.buildFieldDom = function(field, row) { dom.autoDispose(isCellSelected), dom.autoDispose(isCellActive), kd.cssClass(function() { return 'detail_theme_field_' + self.viewSection.themeDef(); }), - dom('div.g_record_detail_label', kd.text(field.displayLabel)), + dom('div.g_record_detail_label_container', + dom('div.g_record_detail_label', kd.text(field.displayLabel)), + kd.scope(field.description, desc => desc ? columnInfoTooltip(kd.text(field.description)) : null) + ), dom('div.g_record_detail_value', kd.toggleClass('scissors', isCopyActive), kd.toggleClass('record-add', row._isAddRow), diff --git a/app/client/models/entities/ViewFieldRec.ts b/app/client/models/entities/ViewFieldRec.ts index 68578fd4..30b5b0c0 100644 --- a/app/client/models/entities/ViewFieldRec.ts +++ b/app/client/models/entities/ViewFieldRec.ts @@ -20,6 +20,7 @@ export interface ViewFieldRec extends IRowModel<"_grist_Views_section_field">, R origCol: ko.Computed; colId: ko.Computed; label: ko.Computed; + description: ko.Computed; // 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. diff --git a/app/client/ui/FieldConfig.ts b/app/client/ui/FieldConfig.ts index 626ac49e..38a317d6 100644 --- a/app/client/ui/FieldConfig.ts +++ b/app/client/ui/FieldConfig.ts @@ -5,10 +5,10 @@ import {BEHAVIOR, ColumnRec} from 'app/client/models/entities/ColumnRec'; import {buildHighlightedCode, cssCodeBlock} from 'app/client/ui/CodeHighlight'; import {GristTooltips} from 'app/client/ui/GristTooltips'; import {cssBlockedCursor, cssLabel, cssRow} from 'app/client/ui/RightPanelStyles'; -import {withInfoTooltip} from 'app/client/ui/tooltips'; +import { withInfoTooltip } from 'app/client/ui/tooltips'; import {buildFormulaTriggers} from 'app/client/ui/TriggerFormulas'; import {textButton} from 'app/client/ui2018/buttons'; -import {testId, theme} from 'app/client/ui2018/cssVars'; +import { testId, theme } from 'app/client/ui2018/cssVars'; import {textInput} from 'app/client/ui2018/editableLabel'; import {cssIconButton, icon} from 'app/client/ui2018/icons'; import {IconName} from 'app/client/ui2018/IconList'; @@ -18,6 +18,7 @@ import {sanitizeIdent} from 'app/common/gutil'; import {bundleChanges, Computed, dom, DomContents, DomElementArg, fromKo, MultiHolder, Observable, styled} from 'grainjs'; import * as ko from 'knockout'; +import { textarea } from './inputs'; const t = makeT('FieldConfig'); @@ -88,6 +89,40 @@ export function buildNameConfig( ]; } +export function buildDescriptionConfig( + owner: MultiHolder, + origColumn: ColumnRec, + cursor: ko.Computed, +) { + + // 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( + editor = cssTextArea(fromKo(origColumn.description), + { onInput: false }, + { rows: '3' }, + dom.on('blur', async (e, elem) => { + await origColumn.description.saveOnly(elem.value); + }), + testId('column-description'), + ) + ), + + ]; +} + type SaveHandler = (column: ColumnRec, formula: string) => Promise; type BuildEditor = ( cellElem: Element, @@ -494,3 +529,22 @@ const cssInput = styled(textInput, ` color: ${theme.inputDisabledFg}; } `); + +const cssTextArea = styled(textarea, ` + color: ${theme.inputFg}; + background-color: ${theme.mainPanelBg}; + border: 1px solid ${theme.inputBorder}; + width: 100%; + outline: none; + border-radius: 3px; + padding: 3px 7px; + + &::placeholder { + color: ${theme.inputPlaceholderFg}; + } + + &[readonly] { + background-color: ${theme.inputDisabledBg}; + color: ${theme.inputDisabledFg}; + } +`); diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 8aceb998..50416ee3 100644 --- a/app/client/ui/RightPanel.ts +++ b/app/client/ui/RightPanel.ts @@ -43,6 +43,7 @@ import {bundleChanges, Computed, Disposable, dom, domComputed, DomContents, DomElementArg, DomElementMethod, IDomComponent} from 'grainjs'; import {MultiHolder, Observable, styled, subscribe} from 'grainjs'; import * as ko from 'knockout'; +import { buildDescriptionConfig } from './FieldConfig'; const t = makeT('RightPanel'); @@ -235,6 +236,9 @@ export class RightPanel extends Disposable { cssSection( dom.create(buildNameConfig, origColumn, cursor, isMultiSelect), ), + cssSection( + dom.create(buildDescriptionConfig, origColumn, cursor), + ), cssSeparator(), cssSection( dom.create(buildFormulaConfig, diff --git a/app/client/ui/tooltips.ts b/app/client/ui/tooltips.ts index 68d26655..af2bb767 100644 --- a/app/client/ui/tooltips.ts +++ b/app/client/ui/tooltips.ts @@ -242,7 +242,7 @@ export function tooltipCloseButton(ctl: ITooltipControl): HTMLElement { /** * Renders an info icon that shows a tooltip with the specified `content` on click. */ -function infoTooltip(content: DomContents, menuOptions?: IMenuOptions, ...domArgs: DomElementArg[]) { +export function infoTooltip(content: DomContents, menuOptions?: IMenuOptions, ...domArgs: DomElementArg[]) { return cssInfoTooltipButton('?', (elem) => { setPopupToCreateDom( @@ -314,6 +314,62 @@ export function withInfoTooltip( ); } +/** + * Renders an column info icon that shows a tooltip with the specified `content` on click. + */ + export function columnInfoTooltip(content: DomContents, menuOptions?: IMenuOptions, ...domArgs: DomElementArg[]) { + return cssColumnInfoTooltipButton( + icon('Info', dom.cls("info_toggle_icon")), + (elem) => { + setPopupToCreateDom( + elem, + (ctl) => { + return cssInfoTooltipPopup( + cssInfoTooltipPopupCloseButton( + icon('CrossSmall'), + dom.on('click', () => ctl.close()), + testId('column-info-tooltip-close'), + ), + cssInfoTooltipPopupBody( + content, + { style: 'white-space: pre-wrap;' }, + testId('column-info-tooltip-popup-body'), + ), + dom.cls(menuCssClass), + dom.cls(cssMenu.className), + dom.onKeyDown({ + Enter: () => ctl.close(), + Escape: () => ctl.close(), + }), + (popup) => { setTimeout(() => popup.focus(), 0); }, + testId('column-info-tooltip-popup'), + ); + }, + { ...defaultMenuOptions, ...{ placement: 'bottom-end' }, ...menuOptions }, + ); + }, + testId('column-info-tooltip'), + ...domArgs, + ); +} + +const cssColumnInfoTooltipButton = styled('div', ` + cursor: pointer; + --icon-color: ${theme.infoButtonFg}; + border-radius: 50%; + display: inline-block; + margin-left: 5px; + line-height: 0px; + + &:hover { + --icon-color: ${theme.infoButtonHoverFg}; + } + &:active { + --icon-color: ${theme.infoButtonActiveFg}; + } +`); + + const cssTooltip = styled('div', ` position: absolute; z-index: 5000; /* should be higher than a modal */ diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts index f1413f2a..983c2e68 100644 --- a/app/client/ui2018/cssVars.ts +++ b/app/client/ui2018/cssVars.ts @@ -605,6 +605,11 @@ export const theme = { menuToggleBg: new CustomProp('theme-menu-toggle-bg', undefined, 'white'), menuToggleBorder: new CustomProp('theme-menu-toggle-border', undefined, colors.slate), + /* Info Button */ + infoButtonFg: new CustomProp('theme-info-button-fg', undefined, "#8F8F8F"), + infoButtonHoverFg: new CustomProp('theme-info-button-hover-fg', undefined, "#707070"), + infoButtonActiveFg: new CustomProp('theme-info-button-active-fg', undefined, "#5C5C5C"), + /* Button Groups */ buttonGroupFg: new CustomProp('theme-button-group-fg', undefined, colors.dark), buttonGroupLightFg: new CustomProp('theme-button-group-light-fg', undefined, colors.slate), diff --git a/app/common/schema.ts b/app/common/schema.ts index 7e0912a1..c805d200 100644 --- a/app/common/schema.ts +++ b/app/common/schema.ts @@ -4,7 +4,7 @@ import { GristObjCode } from "app/plugin/GristData"; // tslint:disable:object-literal-key-quotes -export const SCHEMA_VERSION = 35; +export const SCHEMA_VERSION = 36; export const schema = { @@ -34,6 +34,7 @@ export const schema = { isFormula : "Bool", formula : "Text", label : "Text", + description : "Text", untieColIdFromLabel : "Bool", summarySourceCol : "Ref:_grist_Tables_column", displayCol : "Ref:_grist_Tables_column", @@ -239,6 +240,7 @@ export interface SchemaTypes { isFormula: boolean; formula: string; label: string; + description: string; untieColIdFromLabel: boolean; summarySourceCol: number; displayCol: number; diff --git a/app/server/lib/initialDocSql.ts b/app/server/lib/initialDocSql.ts index b986c9b1..eab77b4c 100644 --- a/app/server/lib/initialDocSql.ts +++ b/app/server/lib/initialDocSql.ts @@ -6,9 +6,9 @@ export const GRIST_DOC_SQL = ` PRAGMA foreign_keys=OFF; BEGIN TRANSACTION; CREATE TABLE IF NOT EXISTS "_grist_DocInfo" (id INTEGER PRIMARY KEY, "docId" TEXT DEFAULT '', "peers" TEXT DEFAULT '', "basketId" TEXT DEFAULT '', "schemaVersion" INTEGER DEFAULT 0, "timezone" TEXT DEFAULT '', "documentSettings" TEXT DEFAULT ''); -INSERT INTO _grist_DocInfo VALUES(1,'','','',35,'',''); +INSERT INTO _grist_DocInfo VALUES(1,'','','',36,'',''); CREATE TABLE IF NOT EXISTS "_grist_Tables" (id INTEGER PRIMARY KEY, "tableId" TEXT DEFAULT '', "primaryViewId" INTEGER DEFAULT 0, "summarySourceTable" INTEGER DEFAULT 0, "onDemand" BOOLEAN DEFAULT 0, "rawViewSectionRef" INTEGER DEFAULT 0); -CREATE TABLE IF NOT EXISTS "_grist_Tables_column" (id INTEGER PRIMARY KEY, "parentId" INTEGER DEFAULT 0, "parentPos" NUMERIC DEFAULT 1e999, "colId" TEXT DEFAULT '', "type" TEXT DEFAULT '', "widgetOptions" TEXT DEFAULT '', "isFormula" BOOLEAN DEFAULT 0, "formula" TEXT DEFAULT '', "label" TEXT DEFAULT '', "untieColIdFromLabel" BOOLEAN DEFAULT 0, "summarySourceCol" INTEGER DEFAULT 0, "displayCol" INTEGER DEFAULT 0, "visibleCol" INTEGER DEFAULT 0, "rules" TEXT DEFAULT NULL, "recalcWhen" INTEGER DEFAULT 0, "recalcDeps" TEXT DEFAULT NULL); +CREATE TABLE IF NOT EXISTS "_grist_Tables_column" (id INTEGER PRIMARY KEY, "parentId" INTEGER DEFAULT 0, "parentPos" NUMERIC DEFAULT 1e999, "colId" TEXT DEFAULT '', "type" TEXT DEFAULT '', "widgetOptions" TEXT DEFAULT '', "isFormula" BOOLEAN DEFAULT 0, "formula" TEXT DEFAULT '', "label" TEXT DEFAULT '', "description" TEXT DEFAULT '', "untieColIdFromLabel" BOOLEAN DEFAULT 0, "summarySourceCol" INTEGER DEFAULT 0, "displayCol" INTEGER DEFAULT 0, "visibleCol" INTEGER DEFAULT 0, "rules" TEXT DEFAULT NULL, "recalcWhen" INTEGER DEFAULT 0, "recalcDeps" TEXT DEFAULT NULL); CREATE TABLE IF NOT EXISTS "_grist_Imports" (id INTEGER PRIMARY KEY, "tableRef" INTEGER DEFAULT 0, "origFileName" TEXT DEFAULT '', "parseFormula" TEXT DEFAULT '', "delimiter" TEXT DEFAULT '', "doublequote" BOOLEAN DEFAULT 0, "escapechar" TEXT DEFAULT '', "quotechar" TEXT DEFAULT '', "skipinitialspace" BOOLEAN DEFAULT 0, "encoding" TEXT DEFAULT '', "hasHeaders" BOOLEAN DEFAULT 0); CREATE TABLE IF NOT EXISTS "_grist_External_database" (id INTEGER PRIMARY KEY, "host" TEXT DEFAULT '', "port" INTEGER DEFAULT 0, "username" TEXT DEFAULT '', "dialect" TEXT DEFAULT '', "database" TEXT DEFAULT '', "storage" TEXT DEFAULT ''); CREATE TABLE IF NOT EXISTS "_grist_External_table" (id INTEGER PRIMARY KEY, "tableRef" INTEGER DEFAULT 0, "databaseRef" INTEGER DEFAULT 0, "tableName" TEXT DEFAULT ''); @@ -43,14 +43,14 @@ export const GRIST_DOC_WITH_TABLE1_SQL = ` PRAGMA foreign_keys=OFF; BEGIN TRANSACTION; CREATE TABLE IF NOT EXISTS "_grist_DocInfo" (id INTEGER PRIMARY KEY, "docId" TEXT DEFAULT '', "peers" TEXT DEFAULT '', "basketId" TEXT DEFAULT '', "schemaVersion" INTEGER DEFAULT 0, "timezone" TEXT DEFAULT '', "documentSettings" TEXT DEFAULT ''); -INSERT INTO _grist_DocInfo VALUES(1,'','','',35,'',''); +INSERT INTO _grist_DocInfo VALUES(1,'','','',36,'',''); CREATE TABLE IF NOT EXISTS "_grist_Tables" (id INTEGER PRIMARY KEY, "tableId" TEXT DEFAULT '', "primaryViewId" INTEGER DEFAULT 0, "summarySourceTable" INTEGER DEFAULT 0, "onDemand" BOOLEAN DEFAULT 0, "rawViewSectionRef" INTEGER DEFAULT 0); INSERT INTO _grist_Tables VALUES(1,'Table1',1,0,0,2); -CREATE TABLE IF NOT EXISTS "_grist_Tables_column" (id INTEGER PRIMARY KEY, "parentId" INTEGER DEFAULT 0, "parentPos" NUMERIC DEFAULT 1e999, "colId" TEXT DEFAULT '', "type" TEXT DEFAULT '', "widgetOptions" TEXT DEFAULT '', "isFormula" BOOLEAN DEFAULT 0, "formula" TEXT DEFAULT '', "label" TEXT DEFAULT '', "untieColIdFromLabel" BOOLEAN DEFAULT 0, "summarySourceCol" INTEGER DEFAULT 0, "displayCol" INTEGER DEFAULT 0, "visibleCol" INTEGER DEFAULT 0, "rules" TEXT DEFAULT NULL, "recalcWhen" INTEGER DEFAULT 0, "recalcDeps" TEXT DEFAULT NULL); -INSERT INTO _grist_Tables_column VALUES(1,1,1,'manualSort','ManualSortPos','',0,'','manualSort',0,0,0,0,NULL,0,NULL); -INSERT INTO _grist_Tables_column VALUES(2,1,2,'A','Any','',1,'','A',0,0,0,0,NULL,0,NULL); -INSERT INTO _grist_Tables_column VALUES(3,1,3,'B','Any','',1,'','B',0,0,0,0,NULL,0,NULL); -INSERT INTO _grist_Tables_column VALUES(4,1,4,'C','Any','',1,'','C',0,0,0,0,NULL,0,NULL); +CREATE TABLE IF NOT EXISTS "_grist_Tables_column" (id INTEGER PRIMARY KEY, "parentId" INTEGER DEFAULT 0, "parentPos" NUMERIC DEFAULT 1e999, "colId" TEXT DEFAULT '', "type" TEXT DEFAULT '', "widgetOptions" TEXT DEFAULT '', "isFormula" BOOLEAN DEFAULT 0, "formula" TEXT DEFAULT '', "label" TEXT DEFAULT '', "description" TEXT DEFAULT '', "untieColIdFromLabel" BOOLEAN DEFAULT 0, "summarySourceCol" INTEGER DEFAULT 0, "displayCol" INTEGER DEFAULT 0, "visibleCol" INTEGER DEFAULT 0, "rules" TEXT DEFAULT NULL, "recalcWhen" INTEGER DEFAULT 0, "recalcDeps" TEXT DEFAULT NULL); +INSERT INTO _grist_Tables_column VALUES(1,1,1,'manualSort','ManualSortPos','',0,'','manualSort','',0,0,0,0,NULL,0,NULL); +INSERT INTO _grist_Tables_column VALUES(2,1,2,'A','Any','',1,'','A','',0,0,0,0,NULL,0,NULL); +INSERT INTO _grist_Tables_column VALUES(3,1,3,'B','Any','',1,'','B','',0,0,0,0,NULL,0,NULL); +INSERT INTO _grist_Tables_column VALUES(4,1,4,'C','Any','',1,'','C','',0,0,0,0,NULL,0,NULL); CREATE TABLE IF NOT EXISTS "_grist_Imports" (id INTEGER PRIMARY KEY, "tableRef" INTEGER DEFAULT 0, "origFileName" TEXT DEFAULT '', "parseFormula" TEXT DEFAULT '', "delimiter" TEXT DEFAULT '', "doublequote" BOOLEAN DEFAULT 0, "escapechar" TEXT DEFAULT '', "quotechar" TEXT DEFAULT '', "skipinitialspace" BOOLEAN DEFAULT 0, "encoding" TEXT DEFAULT '', "hasHeaders" BOOLEAN DEFAULT 0); CREATE TABLE IF NOT EXISTS "_grist_External_database" (id INTEGER PRIMARY KEY, "host" TEXT DEFAULT '', "port" INTEGER DEFAULT 0, "username" TEXT DEFAULT '', "dialect" TEXT DEFAULT '', "database" TEXT DEFAULT '', "storage" TEXT DEFAULT ''); CREATE TABLE IF NOT EXISTS "_grist_External_table" (id INTEGER PRIMARY KEY, "tableRef" INTEGER DEFAULT 0, "databaseRef" INTEGER DEFAULT 0, "tableName" TEXT DEFAULT ''); diff --git a/sandbox/grist/migrations.py b/sandbox/grist/migrations.py index f04ad057..b58031b8 100644 --- a/sandbox/grist/migrations.py +++ b/sandbox/grist/migrations.py @@ -1188,3 +1188,11 @@ def migration35(tdset): )) return tdset.apply_doc_actions(doc_actions) + + +@migration(schema_version=36) +def migration36(tdset): + """ + Add description to column + """ + return tdset.apply_doc_actions([add_column('_grist_Tables_column', 'description', 'Text')]) diff --git a/sandbox/grist/schema.py b/sandbox/grist/schema.py index 9a7d5014..8679b8fb 100644 --- a/sandbox/grist/schema.py +++ b/sandbox/grist/schema.py @@ -15,7 +15,7 @@ import six import actions -SCHEMA_VERSION = 35 +SCHEMA_VERSION = 36 def make_column(col_id, col_type, formula='', isFormula=False): return { @@ -70,6 +70,7 @@ def schema_create_actions(): make_column("isFormula", "Bool"), make_column("formula", "Text"), make_column("label", "Text"), + make_column("description", "Text"), # Normally a change to label changes colId as well, unless untieColIdFromLabel is True. # (We intentionally pick a variable whose default value is false.) diff --git a/static/locales/en.client.json b/static/locales/en.client.json index 0dbca559..0f30660a 100644 --- a/static/locales/en.client.json +++ b/static/locales/en.client.json @@ -326,7 +326,8 @@ "Mixed Behavior": "Mixed Behavior", "Set formula": "Set formula", "Set trigger formula": "Set trigger formula", - "TRIGGER FORMULA": "TRIGGER FORMULA" + "TRIGGER FORMULA": "TRIGGER FORMULA", + "DESCRIPTION": "DESCRIPTION" }, "FieldMenus": { "Revert to common settings": "Revert to common settings", diff --git a/test/nbrowser/DescriptionColumn.ts b/test/nbrowser/DescriptionColumn.ts new file mode 100644 index 00000000..6922ba2e --- /dev/null +++ b/test/nbrowser/DescriptionColumn.ts @@ -0,0 +1,89 @@ +import { UserAPIImpl } from 'app/common/UserAPI'; +import { assert, driver } from 'mocha-webdriver'; +import * as gu from 'test/nbrowser/gristUtils'; +import { setupTestSuite } from 'test/nbrowser/testUtils'; + +async function addColumnDescription(api: UserAPIImpl, docId: string, columnName: string) { + await api.applyUserActions(docId, [ + [ 'ModifyColumn', 'Table1', columnName, { + description: 'This is the column description\nIt is in two lines' + } ], + ]); +} + +function getDescriptionInput() { + return driver.find('.test-right-panel .test-column-description'); +} + +describe('DescriptionColumn', function() { + this.timeout(20000); + const cleanup = setupTestSuite(); + + it('should support basic edition', async () => { + const mainSession = await gu.session().teamSite.login(); + const api = mainSession.createHomeApi(); + const doc = await mainSession.tempDoc(cleanup, "CardView.grist", { load: true }); + const docId = doc.id; + + await addColumnDescription(api, docId, 'B'); + + // Column description editable in right panel + await driver.find('.test-right-opener').click(); + + await gu.getCell({ rowNum: 1, col: 'B' }).click(); + await driver.find('.test-right-tab-field').click(); + assert.equal(await getDescriptionInput().value(), 'This is the column description\nIt is in two lines'); + + await gu.getCell({ rowNum: 1, col: 'A' }).click(); + assert.equal(await getDescriptionInput().value(), ''); + + // Remove the description + await api.applyUserActions(docId, [ + [ 'ModifyColumn', 'Table1', 'B', { + description: '' + } ], + ]); + + await gu.getCell({ rowNum: 1, col: 'B' }).click(); + assert.equal(await getDescriptionInput().value(), ''); + }); + + it('should show info tooltip only if there is a description', async () => { + const mainSession = await gu.session().teamSite.login(); + const api = mainSession.createHomeApi(); + const doc = await mainSession.tempDoc(cleanup, "CardView.grist", { load: true }); + const docId = doc.id; + + await addColumnDescription(api, docId, 'B'); + + await gu.changeWidget('Card'); + + const detailUndescribedColumnFirstRow = await gu.getDetailCell('A', 1); + assert.isFalse( + await detailUndescribedColumnFirstRow + .findClosest(".g_record_detail_el") + .find(".test-column-info-tooltip") + .isPresent() + ); + + const detailDescribedColumnFirstRow = await gu.getDetailCell('B', 1); + const toggle = await detailDescribedColumnFirstRow + .findClosest(".g_record_detail_el") + .find(".test-column-info-tooltip"); + // The toggle to show the description is present if there is a description + assert.isTrue(await toggle.isPresent()); + + // Open the tooltip + await toggle.click(); + assert.isTrue(await driver.findWait('.test-column-info-tooltip-popup', 1000).isDisplayed()); + + // Check the content of the tooltip + const descriptionTooltip = await driver + .find('.test-column-info-tooltip-popup .test-column-info-tooltip-popup-body'); + assert.equal(await descriptionTooltip.getText(), 'This is the column description\nIt is in two lines'); + + // Close the tooltip + await toggle.click(); + assert.lengthOf(await driver.findAll('.test-column-info-tooltip-popup'), 0); + }); +}); diff --git a/test/server/lib/DocApi.ts b/test/server/lib/DocApi.ts index 0d4bcd26..796701c1 100644 --- a/test/server/lib/DocApi.ts +++ b/test/server/lib/DocApi.ts @@ -496,6 +496,7 @@ function testDocApi() { isFormula: false, formula: '', label: 'A', + description: '', untieColIdFromLabel: false, summarySourceCol: 0, displayCol: 0, @@ -516,6 +517,7 @@ function testDocApi() { isFormula: false, formula: '', label: 'B', + description: '', untieColIdFromLabel: false, summarySourceCol: 0, displayCol: 0, @@ -536,6 +538,7 @@ function testDocApi() { isFormula: false, formula: '', label: 'C', + description: '', untieColIdFromLabel: false, summarySourceCol: 0, displayCol: 0, @@ -556,6 +559,7 @@ function testDocApi() { isFormula: true, formula: '', label: 'D', + description: '', untieColIdFromLabel: false, summarySourceCol: 0, displayCol: 0, @@ -576,6 +580,7 @@ function testDocApi() { isFormula: true, formula: '$A.upper()', label: 'E', + description: '', untieColIdFromLabel: false, summarySourceCol: 0, displayCol: 0,