moved responsive design to EditorNavbarBottom

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

@@ -1,9 +1,13 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { Collapse } from 'reactstrap';
+import { Collapse, Button } from 'reactstrap';
 
 import NavigationContainer from '../../services/NavigationContainer';
+import EditorContainer from '../../services/EditorContainer';
+import AppContainer from '../../services/AppContainer';
+import SlackNotification from '../SlackNotification';
+import SlackLogo from '../SlackLogo';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
 import SavePageControls from '../SavePageControls';
@@ -15,6 +19,7 @@ const EditorNavbarBottom = (props) => {
   const [isExpanded, setExpanded] = useState(false);
 
   const [isSlackExpanded, setSlackExpanded] = useState(false);
+  const hasSlackConfig = props.appContainer.getConfig().hasSlackConfig;
 
   const {
     navigationContainer,
@@ -29,6 +34,14 @@ const EditorNavbarBottom = (props) => {
     </button>
   );
 
+  const slackEnabledFlagChangedHandler = (isSlackEnabled) => {
+    props.editorContainer.setState({ isSlackEnabled });
+  };
+
+  const slackChannelsChangedHandler = (slackChannels) => {
+    props.editorContainer.setState({ slackChannels });
+  };
+
   // eslint-disable-next-line react/prop-types
   const renderExpandButton = () => (
     <div className="d-md-none ml-2">
@@ -48,22 +61,50 @@ const EditorNavbarBottom = (props) => {
   return (
     <div className={`${isCollapsedOptionsSelectorEnabled ? 'fixed-bottom' : ''} `}>
       {/* Collapsed SlackNotification */}
-      { isSlackExpanded && (
+      {hasSlackConfig && (
         <Collapse isOpen={isSlackExpanded && isDeviceSmallerThanMd}>
           <nav className={`navbar navbar-expand-lg border-top ${additionalClasses.join(' ')}`}>
-            <SavePageControls
-              isDeviceSmallerThanMd={false}
-              slackOnly
+            <SlackNotification
+              isSlackEnabled={props.editorContainer.state.isSlackEnabled}
+              slackChannels={props.editorContainer.state.slackChannels}
+              onEnabledFlagChange={slackEnabledFlagChangedHandler}
+              onChannelChange={slackChannelsChangedHandler}
+              id="idForSavePageControl"
+              popUp
             />
           </nav>
         </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">
+          {/* Responsive Design for the SlackNotification */}
+          {/* Button or the normal Slack banner */}
+          {hasSlackConfig && (isDeviceSmallerThanMd ? (
+            <Button
+              color="white"
+              className="border mr-2"
+              onClick={() => (setSlackExpanded(!isSlackExpanded))}
+            >
+              <SlackLogo />
+              <span className="fa fa-caret-up ml-2"></span>
+            </Button>
+          ) : (
+            <div className="mr-2">
+              <SlackNotification
+                isSlackEnabled={props.editorContainer.state.isSlackEnabled}
+                slackChannels={props.editorContainer.state.slackChannels}
+                onEnabledFlagChange={slackEnabledFlagChangedHandler}
+                onChannelChange={slackChannelsChangedHandler}
+                id="idForSavePageControl"
+                popUp={false}
+              />
+            </div>
+          ))}
           <SavePageControls
             smallScreen={isDeviceSmallerThanMd}
             click={() => (setSlackExpanded(!isSlackExpanded))}
@@ -90,6 +131,8 @@ const EditorNavbarBottom = (props) => {
 
 EditorNavbarBottom.propTypes = {
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
 };
 
-export default withUnstatedContainers(EditorNavbarBottom, [NavigationContainer]);
+export default withUnstatedContainers(EditorNavbarBottom, [NavigationContainer, EditorContainer, AppContainer]);

src/client/js/components/SavePageControls.jsx

@@ -15,7 +15,6 @@ import AppContainer from '../services/AppContainer';
 import EditorContainer from '../services/EditorContainer';
 
 import { withUnstatedContainers } from './UnstatedUtils';
-import SlackNotification from './SlackNotification';
 import GrantSelector from './SavePageControls/GrantSelector';
 
 const logger = loggerFactory('growi:SavePageControls');
@@ -26,25 +25,14 @@ class SavePageControls extends React.Component {
     super(props);
 
     const config = this.props.appContainer.getConfig();
-    this.hasSlackConfig = config.hasSlackConfig;
     this.isAclEnabled = config.isAclEnabled;
 
-    this.slackEnabledFlagChangedHandler = this.slackEnabledFlagChangedHandler.bind(this);
-    this.slackChannelsChangedHandler = this.slackChannelsChangedHandler.bind(this);
     this.updateGrantHandler = this.updateGrantHandler.bind(this);
 
     this.save = this.save.bind(this);
     this.saveAndOverwriteScopesOfDescendants = this.saveAndOverwriteScopesOfDescendants.bind(this);
   }
 
-  slackEnabledFlagChangedHandler(isSlackEnabled) {
-    this.props.editorContainer.setState({ isSlackEnabled });
-  }
-
-  slackChannelsChangedHandler(slackChannels) {
-    this.props.editorContainer.setState({ slackChannels });
-  }
-
   updateGrantHandler(data) {
     this.props.editorContainer.setState(data);
   }
@@ -83,36 +71,8 @@ class SavePageControls extends React.Component {
     const labelSubmitButton = pageContainer.state.pageId == null ? t('Create') : t('Update');
     const labelOverwriteScopes = t('page_edit.overwrite_scopes', { operation: labelSubmitButton });
 
-    if (this.hasSlackConfig && this.props.slackOnly) {
-      return (
-        <SlackNotification
-          isSlackEnabled={editorContainer.state.isSlackEnabled}
-          slackChannels={editorContainer.state.slackChannels}
-          onEnabledFlagChange={this.slackEnabledFlagChangedHandler}
-          onChannelChange={this.slackChannelsChangedHandler}
-          id="idForSavePageControl"
-          slackOnly
-        />
-      );
-    }
     return (
       <div className="d-flex align-items-center form-inline">
-        {this.hasSlackConfig
-          && (
-          <div className="mr-2">
-            <SlackNotification
-              isSlackEnabled={editorContainer.state.isSlackEnabled}
-              slackChannels={editorContainer.state.slackChannels}
-              onEnabledFlagChange={this.slackEnabledFlagChangedHandler}
-              onChannelChange={this.slackChannelsChangedHandler}
-              click={this.props.click}
-              smallScreen={this.props.smallScreen}
-              id="idForSavePageControl"
-              slackOnly={false}
-            />
-          </div>
-          )
-        }
 
         {this.isAclEnabled
           && (
@@ -151,9 +111,6 @@ const SavePageControlsWrapper = withUnstatedContainers(SavePageControls, [AppCon
 
 SavePageControls.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  click: PropTypes.func.isRequired,
-  slackOnly: PropTypes.bool.isRequired,
-  smallScreen: PropTypes.bool.isRequired,
 
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,

src/client/js/components/SlackNotification.jsx

@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
-import { Button } from 'reactstrap';
-import SlackLogo from './SlackLogo';
 /**
  *
  * @author Yuki Takei <yuki@weseek.co.jp>
@@ -36,8 +34,8 @@ class SlackNotification extends React.Component {
     }
   }
 
-  getSlackNormal() {
-    const { t, slackOnly } = this.props;
+  render() {
+    const { t } = this.props;
 
     return (
       <div className="grw-slack-notification w-100">
@@ -51,7 +49,7 @@ class SlackNotification extends React.Component {
                 checked={this.props.isSlackEnabled}
                 onChange={this.updateCheckboxHandler}
               />
-              <label className={`custom-control-label align-center ${slackOnly ? 'mt-1' : ''}`} htmlFor={this.props.id}>
+              <label className={`custom-control-label align-center ${this.props.popUp ? 'mt-1' : ''}`} htmlFor={this.props.id}>
               </label>
             </div>
           </label>
@@ -70,43 +68,14 @@ class SlackNotification extends React.Component {
         </div>
       </div>
     );
-
-  }
-
-
-  /*
-Note to myself:
-The collapse stuff worked, but it should be put in the EditorNavbarBottom level of rendering. The state should be
-lifted and button here would only be a trigger for the function at the parrent level. The passed down props would only
-affect the rendering of the banner itself.
-*/
-  getSlackButton() {
-    return (
-      <Button
-        color="white"
-        className="border"
-        onClick={this.props.click}
-      >
-        <SlackLogo />
-        <span className="fa fa-caret-up ml-2" aria-aria-hidden="true"></span>
-      </Button>
-    );
-  }
-
-  render() {
-    return (
-      this.props.smallScreen ? this.getSlackButton() : this.getSlackNormal()
-    );
   }
 
 }
 
 SlackNotification.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  click: PropTypes.func.isRequired,
-  slackOnly: PropTypes.bool.isRequired,
 
-  smallScreen: PropTypes.bool.isRequired,
+  popUp: PropTypes.bool.isRequired,
   isSlackEnabled: PropTypes.bool.isRequired,
   slackChannels: PropTypes.string.isRequired,
   onEnabledFlagChange: PropTypes.func,