[Canvas] Fixes toggle between edit mode/read only mode (#41293)

* Fixed mergeProps in workpad_header/index.js * set header height
elastic · Jul 17, 2019 · a5e4d2f · a5e4d2f
1 parent 580c946
commit a5e4d2f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss b/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss
@@ -37,6 +37,10 @@ $canvasLayoutFontSize: $euiFontSizeS;
   user-select: none;
 }
 
+.canvasLayout__stageHeaderInner {
+  height: ($euiSizeL * 2);
+}
+
 .canvasLayout__stageContent {
   flex-grow: 1;
   flex-basis: 0%;

diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/index.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/index.js
@@ -24,7 +24,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   ...stateProps,
   ...dispatchProps,
   ...ownProps,
-  toggleWriteable: () => setWriteable(!stateProps.isWriteable),
+  toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
 });
 
 export const WorkpadHeader = connect(

diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.js
@@ -103,7 +103,12 @@ export class WorkpadHeader extends React.PureComponent {
     return (
       <div>
         {isModalVisible ? this._elementAdd() : null}
-        <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
+        <EuiFlexGroup
+          gutterSize="s"
+          alignItems="center"
+          justifyContent="spaceBetween"
+          className="canvasLayout__stageHeaderInner"
+        >
           <EuiFlexItem grow={false}>
             <EuiFlexGroup alignItems="center" gutterSize="xs">
               <EuiFlexItem grow={false}>