[MM-28680] rm usage of jQuery from theme settings (#6567)

components/user_settings/display/user_settings_theme/__snapshots__/custom_theme_chooser.test.jsx.snap

@@ -407,6 +407,7 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
  className="form-control"
  defaultValue="github"
  id="codeThemeSelect"
+ onChange={[Function]}
  type="text"
  >
  <option

components/user_settings/display/user_settings_theme/custom_theme_chooser.jsx

@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 /* eslint-disable react/no-string-refs */
 
-import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, FormattedMessage} from 'react-intl';
@@ -11,7 +10,6 @@ import {setThemeDefaults} from 'mattermost-redux/utils/theme_utils';
 import {t} from 'utils/i18n';
 
 import Constants from 'utils/constants';
-import * as UserAgent from 'utils/user_agent';
 
 import LocalizedIcon from 'components/localized_icon';
 import OverlayTrigger from 'components/overlay_trigger';
@@ -131,14 +129,6 @@ export default class CustomThemeChooser extends React.PureComponent {
  };
  }
 
- componentDidMount() {
- $('.group--code').on('change', this.onCodeThemeChange);
- }
-
- componentWillUnmount() {
- $('.group--code').off('change', this.onCodeThemeChange);
- }
-
  handleColorChange = (settingId, color) => {
  const {updateTheme, theme} = this.props;
  if (theme[settingId] !== color) {
@@ -214,31 +204,35 @@ export default class CustomThemeChooser extends React.PureComponent {
  toggleSidebarStyles = (e) => {
  e.preventDefault();
 
- $(this.refs.sidebarStylesHeader).toggleClass('open'); // eslint-disable-line jquery/no-class
+ this.refs.sidebarStylesHeader.classList.toggle('open');
  this.toggleSection(this.refs.sidebarStyles);
  }
 
  toggleCenterChannelStyles = (e) => {
  e.preventDefault();
 
- $(this.refs.centerChannelStylesHeader).toggleClass('open'); // eslint-disable-line jquery/no-class
+ this.refs.centerChannelStylesHeader.classList.toggle('open');
  this.toggleSection(this.refs.centerChannelStyles);
  }
 
  toggleLinkAndButtonStyles = (e) => {
  e.preventDefault();
 
- $(this.refs.linkAndButtonStylesHeader).toggleClass('open'); // eslint-disable-line jquery/no-class
+ this.refs.linkAndButtonStylesHeader.classList.toggle('open');
  this.toggleSection(this.refs.linkAndButtonStyles);
  }
 
  toggleSection(node) {
- if (UserAgent.isIos()) {
- // iOS doesn't support jQuery animations
- $(node).toggleClass('open'); // eslint-disable-line jquery/no-class
- } else {
- $(node).slideToggle(); // eslint-disable-line jquery/no-slide
- }
+ node.classList.toggle('open');
+
+ // set overflow after animation, so the colorchooser is fully shown
+ node.ontransitionend = () => {
+ if (node.classList.contains('open')) {
+ node.style.overflowY = 'inherit';
+ } else {
+ node.style.overflowY = 'hidden';
+ }
+ };
  }
 
  onCodeThemeChange = (e) => {
@@ -258,11 +252,11 @@ export default class CustomThemeChooser extends React.PureComponent {
  }
 
  showCopySuccess = () => {
- const copySuccess = $('.copy-theme-success');
- copySuccess.show();
+ const copySuccess = document.querySelector('.copy-theme-success');
+ copySuccess.style.display = 'inline-block';
 
  setTimeout(() => {
- copySuccess.hide();
+ copySuccess.style.display = 'none';
  }, COPY_SUCCESS_INTERVAL);
  }
 
@@ -322,6 +316,7 @@ export default class CustomThemeChooser extends React.PureComponent {
  className='form-control'
  type='text'
  defaultValue={theme[element.id]}
+ onChange={this.onCodeThemeChange}
  >
  {codeThemeOptions}
  </select>

components/user_settings/display/user_settings_theme/custom_theme_chooser.test.jsx

@@ -15,6 +15,8 @@ describe('components/user_settings/display/CustomThemeChooser', () => {
  };
 
  it('should match, init', () => {
+ const elementMock = {addEventListener: jest.fn()};
+ jest.spyOn(document, 'querySelector').mockImplementation(() => elementMock);
  const wrapper = shallow(
  <CustomThemeChooser {...baseProps}/>,
  );
@@ -23,6 +25,8 @@ describe('components/user_settings/display/CustomThemeChooser', () => {
  });
 
  it('should create a custom theme when the code theme changes', () => {
+ const elementMock = {addEventListener: jest.fn()};
+ jest.spyOn(document, 'querySelector').mockImplementation(() => elementMock);
  const wrapper = shallow(
  <CustomThemeChooser {...baseProps}/>,
  );

components/user_settings/display/user_settings_theme/premade_theme_chooser/premade_theme_chooser.jsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -22,7 +21,7 @@ export default class PremadeThemeChooser extends React.PureComponent {
  continue;
  }
 
- const premadeTheme = $.extend(true, {}, Constants.THEMES[k]); // eslint-disable-line jquery/no-extend
+ const premadeTheme = Object.assign({}, Constants.THEMES[k]);
 
  let activeClass = '';
  if (premadeTheme.type === theme.type) {

sass/routes/_settings.scss

@@ -356,13 +356,18 @@
  .theme-elements__body {
  @include border-radius(0 0 3px 3px);
  @include legacy-pie-clearfix;
- @include alpha-property(background-color, $white, .05);
- display: none;
+ @include alpha-property(background-color, $white, 0.05);
+
  margin: 0 20px 0 0;
- padding: 24px 0 0 24px;
+ padding: 0 0 0 24px;
+ transition: all 0.4s ease-out;
+ max-height: 0;
+ overflow-y: hidden;
 
  &.open {
- display: block;
+ max-height: 1200px;
+ margin: 0 20px 0 0;
+ padding: 24px 0 0 24px;
  }
  }
 

utils/utils.jsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import $ from 'jquery';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -1037,17 +1036,17 @@ export function updateCodeTheme(userTheme) {
  });
  }
  });
- const $link = $('link.code_theme');
- if (cssPath !== $link.attr('href')) { // eslint-disable-line jquery/no-attr
+ const link = document.querySelector('link.code_theme');
+ if (link && cssPath !== link.attributes.href) {
  changeCss('code.hljs', 'visibility: hidden');
  var xmlHTTP = new XMLHttpRequest();
  xmlHTTP.open('GET', cssPath, true);
  xmlHTTP.onload = function onLoad() {
- $link.attr('href', cssPath); // eslint-disable-line jquery/no-attr
+ link.attributes.href = cssPath;
  if (UserAgent.isFirefox()) {
- $link.one('load', () => {
+ link.addEventListener('load', () => {
  changeCss('code.hljs', 'visibility: visible');
- });
+ }, {once: true});
  } else {
  changeCss('code.hljs', 'visibility: visible');
  }
@@ -1466,11 +1465,11 @@ export function importSlack(teamId, file, success, error) {
 }
 
 export function windowWidth() {
- return $(window).width();
+ return window.innerWidth;
 }
 
 export function windowHeight() {
- return $(window).height();
+ return window.innerHeight;
 }
 
 // Should be refactored, seems to make most sense to wrap TextboxLinks in a connect(). To discuss