[MM-17397] Moved SettingItemMin to redux to use it to keep track of …

…active section to focus edit button (#3474)

* [MM-17397] Moved SettingItemMin to redux to use it to keep track of active section to focus edit button

* [MM-17397] Clean up of old method of focusing

* PR feedback

actions/views/settings.js

@@ -0,0 +1,11 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {ActionTypes} from 'utils/constants.jsx';
+
+export function updateActiveSection(newActiveSection) {
+ return {
+ type: ActionTypes.UPDATE_ACTIVE_SECTION,
+ data: newActiveSection,
+ };
+}

components/channel_notifications_modal/components/__snapshots__/collapse_view.test.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/channel_notifications_modal/CollapseView should match snapshot, DESKTOP on collapsed view 1`] = `
-<SettingItemMin
+<Connect(SettingItemMin)
  describe={
  <Describe
  globalNotifyLevel="default"
@@ -10,7 +10,6 @@ exports[`components/channel_notifications_modal/CollapseView should match snapsh
  section="desktop"
  />
  }
- focused={false}
  section="desktop"
  title={
  <SectionTitle
@@ -22,7 +21,7 @@ exports[`components/channel_notifications_modal/CollapseView should match snapsh
 `;
 
 exports[`components/channel_notifications_modal/CollapseView should match snapshot, MARK_UNREAD on collapsed view 1`] = `
-<SettingItemMin
+<Connect(SettingItemMin)
  describe={
  <Describe
  globalNotifyLevel={null}
@@ -31,7 +30,6 @@ exports[`components/channel_notifications_modal/CollapseView should match snapsh
  section="markUnread"
  />
  }
- focused={false}
  section="markUnread"
  title={
  <SectionTitle
@@ -43,7 +41,7 @@ exports[`components/channel_notifications_modal/CollapseView should match snapsh
 `;
 
 exports[`components/channel_notifications_modal/CollapseView should match snapshot, PUSH on collapsed view 1`] = `
-<SettingItemMin
+<Connect(SettingItemMin)
  describe={
  <Describe
  globalNotifyLevel="default"
@@ -52,7 +50,6 @@ exports[`components/channel_notifications_modal/CollapseView should match snapsh
  section="push"
  />
  }
- focused={false}
  section="push"
  title={
  <SectionTitle

components/channel_notifications_modal/components/collapse_view.jsx

@@ -4,7 +4,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import SettingItemMin from 'components/setting_item_min.jsx';
+import SettingItemMin from 'components/setting_item_min';
 
 import Describe from './describe.jsx';
 import SectionTitle from './section_title.jsx';

components/setting_item_min/index.js

@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {getPreviousActiveSection} from 'selectors/views/settings';
+import {updateActiveSection} from 'actions/views/settings';
+
+import SettingItemMin from './setting_item_min.jsx';
+
+function mapStateToProps(state) {
+ return {
+ previousActiveSection: getPreviousActiveSection(state),
+ };
+}
+
+function mapDispatchToProps(dispatch) {
+ return {
+ actions: bindActionCreators({
+ updateActiveSection,
+ }, dispatch),
+ };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SettingItemMin);

components/setting_item_min.jsx → components/setting_item_min/setting_item_min.jsx

@@ -11,7 +11,6 @@ import EditIcon from 'components/widgets/icons/fa_edit_icon';
 export default class SettingItemMin extends React.PureComponent {
  static defaultProps = {
  section: '',
- focused: false,
  };
 
  static propTypes = {
@@ -26,11 +25,6 @@ export default class SettingItemMin extends React.PureComponent {
  */
  disableOpen: PropTypes.bool,
 
- /**
- * Indicates whether the focus should be on the "Edit" button
- */
- focused: PropTypes.bool,
-
  /**
  * Settings or tab section
  */
@@ -45,16 +39,26 @@ export default class SettingItemMin extends React.PureComponent {
  * Settings description
  */
  describe: PropTypes.node,
+
+ /**
+ * Shows the previous active section for focusing
+ */
+ previousActiveSection: PropTypes.string,
+
+ /**
+ * Actions
+ */
+ actions: PropTypes.shape({
+
+ /**
+ * Update the active section for focusing
+ */
+ updateActiveSection: PropTypes.func.isRequired,
+ }).isRequired,
  };
 
  componentDidMount() {
- if (this.props.focused && this.edit) {
- this.edit.focus();
- }
- }
-
- UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
- if (nextProps.focused && this.edit) {
+ if (this.props.previousActiveSection === this.props.section) {
  this.edit.focus();
  }
  }
@@ -65,6 +69,7 @@ export default class SettingItemMin extends React.PureComponent {
 
  handleUpdateSection = (e) => {
  e.preventDefault();
+ this.props.actions.updateActiveSection(this.props.section);
  this.props.updateSection(this.props.section);
  }
 

components/setting_item_min.test.jsx → components/setting_item_min/setting_item_min.test.jsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import SettingItemMin from 'components/setting_item_min.jsx';
+import SettingItemMin from './setting_item_min';
 
 describe('components/SettingItemMin', () => {
  const baseProps = {
@@ -13,6 +13,9 @@ describe('components/SettingItemMin', () => {
  section: 'section',
  updateSection: jest.fn(),
  describe: 'describe',
+ actions: {
+ updateActiveSection: jest.fn(),
+ },
  };
 
  test('should match snapshot', () => {

components/team_general_tab/__snapshots__/team_general_tab.test.jsx.snap

@@ -53,24 +53,22 @@ exports[`components/TeamSettings hide invite code if no permissions for team inv
  <div
  className="divider-dark first"
  />
- <SettingItemMin
- focused={false}
+ <Connect(SettingItemMin)
  section="name"
  title="Team Name"
  updateSection={[Function]}
  />
  <div
  className="divider-light"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe={
  <FormattedMessage
  defaultMessage="Click 'Edit' to add a team description."
  id="general_tab.emptyDescription"
  values={Object {}}
  />
  }
- focused={false}
  section="description"
  title="Team Description"
  updateSection={[Function]}
@@ -95,35 +93,32 @@ exports[`components/TeamSettings hide invite code if no permissions for team inv
  <div
  className="divider-light"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe={
  <FormattedMessage
  defaultMessage="Click 'Edit' to add an email domain whitelist."
  id="general_tab.allowedDomainsEdit"
  values={Object {}}
  />
  }
- focused={false}
  section="allowed_domains"
  title="allowedDomains"
  updateSection={[Function]}
  />
  <div
  className="divider-light"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe="No"
- focused={false}
  section="open_invite"
  title="Allow any user with an account on this server to join this team"
  updateSection={[Function]}
  />
  <div
  className="divider-light"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe="Click 'Edit' to regenerate Invite Code."
- focused={false}
  section="invite_id"
  title="Invite Code"
  updateSection={[Function]}
@@ -188,24 +183,22 @@ exports[`components/TeamSettings hide invite code if no permissions for team inv
  <div
  className="divider-dark first"
  />
- <SettingItemMin
- focused={false}
+ <Connect(SettingItemMin)
  section="name"
  title="Team Name"
  updateSection={[Function]}
  />
  <div
  className="divider-light"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe={
  <FormattedMessage
  defaultMessage="Click 'Edit' to add a team description."
  id="general_tab.emptyDescription"
  values={Object {}}
  />
  }
- focused={false}
  section="description"
  title="Team Description"
  updateSection={[Function]}
@@ -230,25 +223,23 @@ exports[`components/TeamSettings hide invite code if no permissions for team inv
  <div
  className="divider-light"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe={
  <FormattedMessage
  defaultMessage="Click 'Edit' to add an email domain whitelist."
  id="general_tab.allowedDomainsEdit"
  values={Object {}}
  />
  }
- focused={false}
  section="allowed_domains"
  title="allowedDomains"
  updateSection={[Function]}
  />
  <div
  className="divider-light"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe="No"
- focused={false}
  section="open_invite"
  title="Allow any user with an account on this server to join this team"
  updateSection={[Function]}
@@ -316,19 +307,17 @@ exports[`components/TeamSettings should match snapshot when team is group constr
  <div
  className="divider-dark first"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe="TestTeam"
- focused={false}
  section="name"
  title="Team Name"
  updateSection={[Function]}
  />
  <div
  className="divider-light"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe="The Test Team"
- focused={false}
  section="description"
  title="Team Description"
  updateSection={[Function]}
@@ -353,9 +342,8 @@ exports[`components/TeamSettings should match snapshot when team is group constr
  <div
  className="divider-light"
  />
- <SettingItemMin
+ <Connect(SettingItemMin)
  describe="No, members of this team are added and removed by linked groups."
- focused={false}
  section="open_invite"
  title="Allow any user with an account on this server to join this team"
  updateSection={[Function]}

components/team_general_tab/team_general_tab.jsx

@@ -9,7 +9,7 @@ import {FormattedMessage, FormattedDate} from 'react-intl';
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 import SettingItemMax from 'components/setting_item_max.jsx';
-import SettingItemMin from 'components/setting_item_min.jsx';
+import SettingItemMin from 'components/setting_item_min';
 import SettingPicture from 'components/setting_picture.jsx';
 import BackIcon from 'components/widgets/icons/fa_back_icon';
 import LocalizedInput from 'components/localized_input/localized_input';

components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.jsx.snap

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/user_settings/advanced/JoinLeaveSection should match snapshot 1`] = `
-<SettingItemMin
- focused={false}
+<Connect(SettingItemMin)
  section="joinLeave"
  title={
  <FormattedMessage

components/user_settings/advanced/join_leave_section/join_leave_section.jsx

@@ -8,7 +8,7 @@ import {FormattedMessage} from 'react-intl';
 import {Preferences} from 'mattermost-redux/constants';
 
 import SettingItemMax from 'components/setting_item_max.jsx';
-import SettingItemMin from 'components/setting_item_min.jsx';
+import SettingItemMin from 'components/setting_item_min';
 
 import {AdvancedSections} from 'utils/constants.jsx';
 
@@ -18,7 +18,6 @@ export default class JoinLeaveSection extends React.PureComponent {
  currentUserId: PropTypes.string.isRequired,
  joinLeave: PropTypes.string,
  onUpdateSection: PropTypes.func.isRequired,
- prevActiveSection: PropTypes.string,
  renderOnOffLabel: PropTypes.func.isRequired,
  actions: PropTypes.shape({
  savePreferences: PropTypes.func.isRequired,
@@ -128,7 +127,6 @@ export default class JoinLeaveSection extends React.PureComponent {
  />
  }
  describe={this.props.renderOnOffLabel(joinLeaveState)}
- focused={this.props.prevActiveSection === AdvancedSections.JOIN_LEAVE}
  section={AdvancedSections.JOIN_LEAVE}
  updateSection={this.handleUpdateSection}
  />

components/user_settings/advanced/join_leave_section/join_leave_section.test.jsx

@@ -7,7 +7,7 @@ import {shallow} from 'enzyme';
 import {AdvancedSections} from 'utils/constants.jsx';
 
 import SettingItemMax from 'components/setting_item_max.jsx';
-import SettingItemMin from 'components/setting_item_min.jsx';
+import SettingItemMin from 'components/setting_item_min';
 
 import JoinLeaveSection from 'components/user_settings/advanced/join_leave_section/join_leave_section.jsx';
 
@@ -17,7 +17,6 @@ describe('components/user_settings/advanced/JoinLeaveSection', () => {
  currentUserId: 'current_user_id',
  joinLeave: 'true',
  onUpdateSection: jest.fn(),
- prevActiveSection: AdvancedSections.FORMATTING,
  renderOnOffLabel: jest.fn(),
  actions: {
  savePreferences: jest.fn(() => {