fix(ColumnDesc): tooltip show multiline description + remove useless variable + remove outline style

app/client/ui/FieldConfig.ts

@@ -8,7 +8,7 @@ import {cssBlockedCursor, cssLabel, cssRow} from 'app/client/ui/RightPanelStyles
 import { withInfoTooltip } from 'app/client/ui/tooltips';
 import {buildFormulaTriggers} from 'app/client/ui/TriggerFormulas';
 import {textButton} from 'app/client/ui2018/buttons';
-import { testId, theme, vars } 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';
@@ -94,7 +94,6 @@ export function buildDescriptionConfig(
   origColumn: ColumnRec,
   cursor: ko.Computed<CursorPos>,
 ) {
-  const editedDescription = Observable.create(owner, '');
 
   // We will listen to cursor position and force a blur event on
   // the text input, which will trigger save before the column observable
@@ -115,9 +114,7 @@ export function buildDescriptionConfig(
         { onInput: false },
         { rows: '3' },
         dom.on('blur', async (e, elem) => {
-          editedDescription.set(elem.value);
           await origColumn.description.saveOnly(elem.value);
-          editedDescription.set('');
         }),
         testId('column-description'),
       )
@@ -538,6 +535,9 @@ const cssTextArea = styled(textarea, `
   background-color: ${theme.mainPanelBg};
   border: 1px solid ${theme.inputBorder};
   width: 100%;
+  outline: none;
+  border-radius: 3px;
+  padding: 3px 7px;
 
   &::placeholder {
     color: ${theme.inputPlaceholderFg};
@@ -545,15 +545,6 @@ const cssTextArea = styled(textarea, `
 
   &[readonly] {
     background-color: ${theme.inputDisabledBg};
-    padding: 3px 7px;
-    border-radius: 3px;
-    resize: vertical;
-    border: 1px solid ${theme.inputBorder};
-    color: ${theme.inputFg};
-    background-color: ${theme.inputBg};
-    flex: 1 1 0;
-    font-size: ${vars.mediumFontSize};
-    font-family: ${vars.fontFamily};
-    outline: none;
+    color: ${theme.inputDisabledFg};
   }
 `);

app/client/ui/tooltips.ts

@@ -332,6 +332,7 @@ export function withInfoTooltip(
             ),
             cssInfoTooltipPopupBody(
               content,
+              { style: 'white-space: pre-wrap;' },
               testId('column-info-tooltip-popup-body'),
             ),
             dom.cls(menuCssClass),

test/nbrowser/DescriptionColumn.ts

@@ -6,7 +6,7 @@ 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'
+      description: 'This is the column description\nIt is in two lines'
     } ],
   ]);
 }
@@ -32,7 +32,7 @@ describe('DescriptionColumn', function() {
 
     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');
+    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(), '');
@@ -80,7 +80,7 @@ describe('DescriptionColumn', function() {
     // 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');
+    assert.equal(await descriptionTooltip.getText(), 'This is the column description\nIt is in two lines');
 
     // Close the tooltip
     await toggle.click();