1 files changed, 24 insertions, 14 deletions

diff --git a/webapp/components/admin_console/brand_image_setting.jsx b/webapp/components/admin_console/brand_image_setting.jsx
index eae5ad922..d2eae3f6e 100644
--- a/webapp/components/admin_console/brand_image_setting.jsx
+++ b/webapp/components/admin_console/brand_image_setting.jsx
@@ -4,20 +4,23 @@
 import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
-import Client from 'client/web_client.jsx';
+import {Client4} from 'mattermost-redux/client';
 import * as Utils from 'utils/utils.jsx';
 import {uploadBrandImage} from 'actions/admin_actions.jsx';
 
 import FormError from 'components/form_error.jsx';
 import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
 
-export default class BrandImageSetting extends React.Component {
-    static get propTypes() {
-        return {
-            disabled: PropTypes.bool.isRequired
-        };
+const HTTP_STATUS_OK = 200;
+
+export default class BrandImageSetting extends React.PureComponent {
+    static propTypes = {
+
+        /*
+         * Set to disable the setting
+         */
+        disabled: PropTypes.bool.isRequired
     }
 
     constructor(props) {
@@ -37,9 +40,15 @@ export default class BrandImageSetting extends React.Component {
     }
 
     componentWillMount() {
-        $.get(Client.getAdminRoute() + '/get_brand_image?t=' + this.state.brandImageTimestamp).done(() => {
-            this.setState({brandImageExists: true});
-        });
+        fetch(Client4.getBrandImageUrl(this.state.brandImageTimestamp)).then(
+            (resp) => {
+                if (resp.status === HTTP_STATUS_OK) {
+                    this.setState({brandImageExists: true});
+                } else {
+                    this.setState({brandImageExists: false});
+                }
+            }
+        );
     }
 
     componentDidUpdate() {
@@ -76,7 +85,7 @@ export default class BrandImageSetting extends React.Component {
             return;
         }
 
-        $(ReactDOM.findDOMNode(this.refs.upload)).button('loading');
+        $(this.refs.upload).button('loading');
 
         this.setState({
             uploading: true,
@@ -86,7 +95,7 @@ export default class BrandImageSetting extends React.Component {
         uploadBrandImage(
             this.state.brandImage,
             () => {
-                $(ReactDOM.findDOMNode(this.refs.upload)).button('complete');
+                $(this.refs.upload).button('complete');
 
                 this.setState({
                     brandImageExists: true,
@@ -96,7 +105,7 @@ export default class BrandImageSetting extends React.Component {
                 });
             },
             (err) => {
-                $(ReactDOM.findDOMNode(this.refs.upload)).button('reset');
+                $(this.refs.upload).button('reset');
 
                 this.setState({
                     uploading: false,
@@ -130,7 +139,7 @@ export default class BrandImageSetting extends React.Component {
             img = (
                 <img
                     className='brand-img'
-                    src={Client.getAdminRoute() + '/get_brand_image?t=' + this.state.brandImageTimestamp}
+                    src={Client4.getBrandImageUrl(this.state.brandImageTimestamp)}
                 />
             );
         } else {
@@ -180,6 +189,7 @@ export default class BrandImageSetting extends React.Component {
                         disabled={this.props.disabled || !this.state.brandImage}
                         onClick={this.handleImageSubmit}
                         id='upload-button'
+                        ref='upload'
                         data-loading-text={'<span class=\'fa fa-refresh fa-rotate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')}
                         data-complete-text={'<span class=\'fa fa-check\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')}
                     >