GW-3620 basci function realized

src/client/js/components/PageEditor/EditorNavbarBottom.jsx

@@ -14,6 +14,8 @@ const EditorNavbarBottom = (props) => {
 
   const [isExpanded, setExpanded] = useState(false);
 
+  const [isSlackExpanded, setSlackExpanded] = useState(false);
+
   const {
     navigationContainer,
   } = props;
@@ -45,13 +47,30 @@ const EditorNavbarBottom = (props) => {
 
   return (
     <div className={`${isCollapsedOptionsSelectorEnabled ? 'fixed-bottom' : ''} `}>
+      {/* Collapsed SlackNotification */}
+      { isSlackExpanded && (
+        <Collapse isOpen={isSlackExpanded}>
+          <div className="px-2"> {/* set padding for border-top */}
+            <div className={`navbar navbar-expand border-top px-0 ${additionalClasses.join(' ')}`}>
+              <form className="form-inline ml-auto">
+                <SavePageControls
+                  isDeviceSmallerThanMd={false}
+                />
+              </form>
+            </div>
+          </div>
+        </Collapse>
+        )}
       <div className={`navbar navbar-expand border-top px-2 ${additionalClasses.join(' ')}`}>
         <form className="form-inline">
           { isDrawerMode && renderDrawerButton() }
           { isOptionsSelectorEnabled && !isDeviceSmallerThanMd && <OptionsSelector /> }
         </form>
         <form className="form-inline ml-auto">
-          <SavePageControls isDeviceSmallerThanMd={isDeviceSmallerThanMd} />
+          <SavePageControls
+            isDeviceSmallerThanMd={isDeviceSmallerThanMd}
+            click={() => (setSlackExpanded(!isSlackExpanded))}
+          />
           { isCollapsedOptionsSelectorEnabled && renderExpandButton() }
         </form>
       </div>

src/client/js/components/SavePageControls.jsx

@@ -28,6 +28,7 @@ class SavePageControls extends React.Component {
     const config = this.props.appContainer.getConfig();
     this.hasSlackConfig = config.hasSlackConfig;
     this.isAclEnabled = config.isAclEnabled;
+    this.slackOnly = false;
 
     this.slackEnabledFlagChangedHandler = this.slackEnabledFlagChangedHandler.bind(this);
     this.slackChannelsChangedHandler = this.slackChannelsChangedHandler.bind(this);
@@ -94,6 +95,7 @@ class SavePageControls extends React.Component {
               onChannelChange={this.slackChannelsChangedHandler}
               id="idForSavePageControl"
               smallScreen={this.props.isDeviceSmallerThanMd}
+              click={this.props.click}
             />
           </div>
           )
@@ -136,6 +138,7 @@ const SavePageControlsWrapper = withUnstatedContainers(SavePageControls, [AppCon
 
 SavePageControls.propTypes = {
   t: PropTypes.func.isRequired, // i18next
+  click: PropTypes.func.isRequired,
   isDeviceSmallerThanMd: PropTypes.bool.isRequired,
 
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,

src/client/js/components/SlackNotification.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Collapse } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 
 /**
@@ -20,7 +19,6 @@ class SlackNotification extends React.Component {
 
     this.updateCheckboxHandler = this.updateCheckboxHandler.bind(this);
     this.updateSlackChannelsHandler = this.updateSlackChannelsHandler.bind(this);
-    this.state = { isExpanded: false };
   }
 
   updateCheckboxHandler(event) {
@@ -74,9 +72,6 @@ class SlackNotification extends React.Component {
 
   }
 
-  setExpanded= (value) => {
-    this.setState({ isExpanded: value });
-  }
 
   /*
 Note to myself:
@@ -89,19 +84,10 @@ affect the rendering of the banner itself.
       <div className="grw-slack-notification">
         <button
           type="button"
-          onClick={() => this.setExpanded(!this.state.isExpanded)}
+          onClick={this.props.click}
         >
           <i className="icon-arrow-up"></i>
         </button>
-        <Collapse isOpen={this.state.isExpanded}>
-          <div className="px-2"> {/* set padding for border-top */}
-            <div className="navbar navbar-expand border-top px-0">
-              <form className="form-inline ml-auto">
-                {this.getSlackNormal()}
-              </form>
-            </div>
-          </div>
-        </Collapse>
       </div>
     );
   }
@@ -116,6 +102,7 @@ affect the rendering of the banner itself.
 
 SlackNotification.propTypes = {
   t: PropTypes.func.isRequired, // i18next
+  click: PropTypes.func.isRequired,
 
   smallScreen: PropTypes.bool.isRequired,
   isSlackEnabled: PropTypes.bool.isRequired,