impl update button with reactstrap

src/client/js/components/SavePageControls.jsx

@@ -3,6 +3,11 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
+import {
+  ButtonDropdown, Button,
+  DropdownToggle, DropdownMenu, DropdownItem,
+} from 'reactstrap';
+
 import PageContainer from '../services/PageContainer';
 import AppContainer from '../services/AppContainer';
 import EditorContainer from '../services/EditorContainer';
@@ -17,6 +22,10 @@ class SavePageControls extends React.Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      isSubmitDropdownOpen: false,
+    };
+
     const config = this.props.appContainer.getConfig();
     this.hasSlackConfig = config.hasSlackConfig;
     this.isAclEnabled = config.isAclEnabled;
@@ -62,10 +71,16 @@ class SavePageControls extends React.Component {
 
   render() {
     const { t, pageContainer, editorContainer } = this.props;
+    const { isSubmitDropdownOpen } = this.state;
+
     const isRootPage = pageContainer.state.path === '/';
     const labelSubmitButton = pageContainer.state.pageId == null ? t('Create') : t('Update');
     const labelOverwriteScopes = t('page_edit.overwrite_scopes', { operation: labelSubmitButton });
 
+    const toggle = () => {
+      this.setState({ isSubmitDropdownOpen: !isSubmitDropdownOpen });
+    };
+
     return (
       <div className="d-flex align-items-center form-inline">
         {this.hasSlackConfig
@@ -95,25 +110,14 @@ class SavePageControls extends React.Component {
           )
         }
 
-        <div className="btn-group btn-group-sm dropup">
-          <button type="button" className="btn btn-primary px-5">{labelSubmitButton}</button>
-          <button
-            type="button"
-            id="spl-btn-submit"
-            className="btn-submit btn btn-primary dropdown-toggle dropdown-toggle-split"
-            data-toggle="dropdown"
-            onClick={this.save}
-          >
-            <span className="sr-only">{labelSubmitButton}</span>
-          </button>
-          <div
-            className="dropdown-menu"
-            // eventKey="1"
-            onClick={this.saveAndOverwriteScopesOfDescendants}
-          >
-            {labelOverwriteScopes}
-          </div>
-        </div>
+        <ButtonDropdown isOpen={isSubmitDropdownOpen} toggle={toggle} direction="up">
+          <Button id="caret" color="primary" className="btn-submit" onClick={this.save}>{labelSubmitButton}</Button>
+          <DropdownToggle caret color="primary" />
+          <DropdownMenu right>
+            <DropdownItem>{labelOverwriteScopes}</DropdownItem>
+          </DropdownMenu>
+        </ButtonDropdown>
+
       </div>
     );
   }

src/client/styles/scss/_on-edit.scss

@@ -134,6 +134,10 @@ body.on-edit {
         min-width: 150px;
       }
     }
+
+    .btn-submit {
+      width: 100px;
+    }
   }
 
   #page-status-alert .myadmin-alert {