fix: keeping Markdown content while resizing window on Dashboard (apa…

…che#11392) * Fix: keeping markup content while resizing it * Added bind and fixed linter * Added resize case in Markdown editor to cypress test
auxten · Nov 20, 2020 · 62a3134 · 62a3134
1 parent bfe413b
commit 62a3134
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 18 deletions.
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/dashboard.helper.ts
@@ -45,3 +45,14 @@ export function drag(selector: string, content: string | number | RegExp) {
     },
   };
 }
+
+export function resize(selector: string) {
+  return {
+    to(cordX: number, cordY: number) {
+      cy.get(selector)
+        .trigger('mousedown', { which: 1 })
+        .trigger('mousemove', { which: 1, cordX, cordY, force: true })
+        .trigger('mouseup', { which: 1, force: true });
+    },
+  };
+}
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { TABBED_DASHBOARD, drag } from './dashboard.helper';
+import { TABBED_DASHBOARD, drag, resize } from './dashboard.helper';
 
 describe('Dashboard edit markdown', () => {
   beforeEach(() => {
@@ -56,10 +56,21 @@ describe('Dashboard edit markdown', () => {
         '✨Markdown✨Markdown✨MarkdownClick here to edit markdown',
       )
       .click();
+
     cy.get('[data-test="dashboard-component-chart-holder"]')
       .find('.ace_content')
       .contains('Click here to edit [markdown](https://bit.ly/1dQOfRK)');
 
+    cy.get('[data-test="dashboard-markdown-editor"]')
+      .click()
+      .type('Test resize');
+
+    resize(
+      '[data-test="dashboard-markdown-editor"] .resizable-container span div',
+    ).to(500, 600);
+
+    cy.get('[data-test="dashboard-markdown-editor"]').contains('Test resize');
+
     // entering edit mode does not add new scripts
     // (though scripts may still be removed by others)
     cy.get('script').then(nodes => {

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx b/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx
@@ -105,6 +105,7 @@ class Markdown extends React.PureComponent {
     this.handleChangeEditorMode = this.handleChangeEditorMode.bind(this);
     this.handleMarkdownChange = this.handleMarkdownChange.bind(this);
     this.handleDeleteComponent = this.handleDeleteComponent.bind(this);
+    this.handleResizeStart = this.handleResizeStart.bind(this);
     this.setEditor = this.setEditor.bind(this);
   }
 
@@ -203,26 +204,29 @@ class Markdown extends React.PureComponent {
       ...this.state,
       editorMode: mode,
     };
-
     if (mode === 'preview') {
-      const { updateComponents, component } = this.props;
-      if (component.meta.code !== this.state.markdownSource) {
-        updateComponents({
-          [component.id]: {
-            ...component,
-            meta: {
-              ...component.meta,
-              code: this.state.markdownSource,
-            },
-          },
-        });
-      }
+      this.updateMarkdownContent();
       nextState.hasError = false;
     }
 
     this.setState(nextState);
   }
 
+  updateMarkdownContent() {
+    const { updateComponents, component } = this.props;
+    if (component.meta.code !== this.state.markdownSource) {
+      updateComponents({
+        [component.id]: {
+          ...component,
+          meta: {
+            ...component.meta,
+            code: this.state.markdownSource,
+          },
+        },
+      });
+    }
+  }
+
   handleMarkdownChange(nextValue) {
     this.setState({
       markdownSource: nextValue,
@@ -234,6 +238,16 @@ class Markdown extends React.PureComponent {
     deleteComponent(id, parentId);
   }
 
+  handleResizeStart(e) {
+    const { editorMode } = this.state;
+    const { editMode, onResizeStart } = this.props;
+    const isEditing = editorMode === 'edit';
+    onResizeStart(e);
+    if (editMode && isEditing) {
+      this.updateMarkdownContent();
+    }
+  }
+
   renderEditMode() {
     return (
       <MarkdownEditor
@@ -286,7 +300,6 @@ class Markdown extends React.PureComponent {
       depth,
       availableColumnCount,
       columnWidth,
-      onResizeStart,
       onResize,
       onResizeStop,
       handleComponentDrop,
@@ -343,11 +356,9 @@ class Markdown extends React.PureComponent {
                 minWidthMultiple={GRID_MIN_COLUMN_COUNT}
                 minHeightMultiple={GRID_MIN_ROW_UNITS}
                 maxWidthMultiple={availableColumnCount + widthMultiple}
-                onResizeStart={onResizeStart}
+                onResizeStart={this.handleResizeStart}
                 onResize={onResize}
                 onResizeStop={onResizeStop}
-                // disable resize when editing because if state is not synced
-                // with props it will reset the editor text to whatever props is
                 editMode={isFocused ? false : editMode}
               >
                 <div