Migrate sidebar_header component to TypeScript (#617)

* Migrate sidebar_header component to TypeScript

   - Convert sidebar_header.jsx to sidebar_header.tsx with proper TypeScript interfaces
   - Migrate index.js to index.ts with GlobalState typing
   - Add missing 'connected' prop that was added to master after original PR
   - Use getConnected selector for better type safety
   - Fix interface formatting (proper spacing and semicolons)

   Addresses feedback from PR #450 and resolves issue #431.

* Fix Theme import path to match codebase convention

Use 'mattermost-redux/selectors/entities/preferences' instead of
'mattermost-redux/types/preferences' to be consistent with all other
TypeScript files in the codebase.

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

Author: wiggin77

…p/src/components/sidebar_header/index.js …p/src/components/sidebar_header/index.tswebapp/src/components/sidebar_header/index.js renamed to webapp/src/components/sidebar_header/index.ts webapp/src/components/sidebar_header/index.js renamed to webapp/src/components/sidebar_header/index.ts

@@ -3,15 +3,16 @@
 
 import {connect} from 'react-redux';
 
-import manifest from '../../manifest';
+import {getConnected} from 'src/selectors';
+import {GlobalState} from 'src/types/store';
 
-import SidebarHeader from './sidebar_header.jsx';
+import SidebarHeader from './sidebar_header';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: GlobalState) {
     const members = state.entities.teams.myMembers || {};
     return {
         show: Object.keys(members).length <= 1,
-        connected: state[`plugins-${manifest.id}`].connected,
+        connected: getConnected(state),
     };
 }
 

…onents/sidebar_header/sidebar_header.jsx …onents/sidebar_header/sidebar_header.tsxwebapp/src/components/sidebar_header/sidebar_header.jsx renamed to webapp/src/components/sidebar_header/sidebar_header.tsx webapp/src/components/sidebar_header/sidebar_header.jsx renamed to webapp/src/components/sidebar_header/sidebar_header.tsx

@@ -1,19 +1,20 @@
 // Copyright (c) 2019-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PureComponent, ReactElement} from 'react';
+
+import {Theme} from 'mattermost-redux/selectors/entities/preferences';
 
 import SidebarButtons from '../sidebar_buttons';
 
-export default class SidebarHeader extends React.PureComponent {
-    static propTypes = {
-        show: PropTypes.bool.isRequired,
-        connected: PropTypes.bool.isRequired,
-        theme: PropTypes.object.isRequired,
-    };
+interface SidebarHeaderProps {
+    show: boolean;
+    connected: boolean;
+    theme: Theme;
+}
 
-    render() {
+export default class SidebarHeader extends PureComponent<SidebarHeaderProps> {
+    render(): ReactElement | null {
         if (!this.props.show || !this.props.connected) {
             return null;
         }