Migrate 'components/announcement_bar/default_announcement_bar' module and associated tests to TypeScript

components/announcement_bar/__snapshots__/announcement_bar.test.jsx.snap

@@ -3,7 +3,12 @@
 exports[`components/AnnouncementBar should match snapshot, bar not showing 1`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}
@@ -42,7 +47,12 @@ exports[`components/AnnouncementBar should match snapshot, bar not showing 1`] =
 exports[`components/AnnouncementBar should match snapshot, bar showing 1`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}
@@ -81,7 +91,12 @@ exports[`components/AnnouncementBar should match snapshot, bar showing 1`] = `
 exports[`components/AnnouncementBar should match snapshot, bar showing, no dismissal 1`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}
@@ -120,7 +135,12 @@ exports[`components/AnnouncementBar should match snapshot, bar showing, no dismi
 exports[`components/AnnouncementBar should match snapshot, dismissal 1`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}
@@ -159,7 +179,12 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 1`] = `
 exports[`components/AnnouncementBar should match snapshot, dismissal 2`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}
@@ -198,7 +223,12 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 2`] = `
 exports[`components/AnnouncementBar should match snapshot, dismissal 3`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}
@@ -237,7 +267,12 @@ exports[`components/AnnouncementBar should match snapshot, dismissal 3`] = `
 exports[`components/AnnouncementBar should match snapshot, props change 1`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}
@@ -276,7 +311,12 @@ exports[`components/AnnouncementBar should match snapshot, props change 1`] = `
 exports[`components/AnnouncementBar should match snapshot, props change 2`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}
@@ -315,7 +355,12 @@ exports[`components/AnnouncementBar should match snapshot, props change 2`] = `
 exports[`components/AnnouncementBar should match snapshot, props change 3`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}
@@ -354,7 +399,12 @@ exports[`components/AnnouncementBar should match snapshot, props change 3`] = `
 exports[`components/AnnouncementBar should match snapshot, props change 4`] = `
 <div
   className="announcement-bar announcement-bar-critical"
-  style={Object {}}
+  style={
+    Object {
+      "backgroundColor": "",
+      "color": "",
+    }
+  }
 >
   <OverlayTrigger
     defaultOverlayShown={false}

components/announcement_bar/announcement_bar.test.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import 'tests/helpers/localstorage.jsx';
 
-import AnnouncementBar from 'components/announcement_bar/default_announcement_bar/announcement_bar.jsx';
+import AnnouncementBar from 'components/announcement_bar/default_announcement_bar/announcement_bar';
 
 describe('components/AnnouncementBar', () => {
     const baseProps = {

components/announcement_bar/default_announcement_bar/announcement_bar.jsx → components/announcement_bar/default_announcement_bar/announcement_bar.tsx

@@ -5,9 +5,12 @@ import React from 'react';
 
 import {FormattedMessage} from 'react-intl';
 
-import PropTypes from 'prop-types';
 import {Tooltip} from 'react-bootstrap';
 
+import {WarnMetricStatus} from 'mattermost-redux/types/config';
+
+import {Dictionary} from 'mattermost-redux/types/utilities';
+
 import {Constants, AnnouncementBarTypes, ModalIdentifiers} from 'utils/constants';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
@@ -17,34 +20,32 @@ import ToggleModalButtonRedux from 'components/toggle_modal_button_redux';
 
 import {trackEvent} from 'actions/telemetry_actions.jsx';
 
-export default class AnnouncementBar extends React.PureComponent {
-    static propTypes = {
-        showCloseButton: PropTypes.bool,
-        color: PropTypes.string,
-        textColor: PropTypes.string,
-        type: PropTypes.string,
-        message: PropTypes.node.isRequired,
-        handleClose: PropTypes.func,
-        announcementBarCount: PropTypes.number.isRequired,
-        showModal: PropTypes.bool,
-        modalButtonText: PropTypes.string,
-        modalButtonDefaultText: PropTypes.string,
-        showLinkAsButton: PropTypes.bool,
-        warnMetricStatus: PropTypes.object,
-        isTallBanner: PropTypes.bool,
-        actions: PropTypes.shape({
-            incrementAnnouncementBarCount: PropTypes.func.isRequired,
-            decrementAnnouncementBarCount: PropTypes.func.isRequired,
-        }).isRequired,
-    }
+type Props = {
+    showCloseButton: boolean;
+    color: string;
+    textColor: string;
+    type: string;
+    message: React.ReactNode;
+    handleClose?: (e?:any)=>void;
+    announcementBarCount?: number;
+    showModal?: ()=> void;
+    modalButtonText?: string;
+    modalButtonDefaultText?: string;
+    showLinkAsButton: boolean;
+    warnMetricStatus?: Dictionary<WarnMetricStatus>;
+    isTallBanner: boolean;
+    actions: {
+        incrementAnnouncementBarCount: ()=>void;
+        decrementAnnouncementBarCount: ()=>void;
+    };
+}
 
+export default class AnnouncementBar extends React.PureComponent<Props> {
     static defaultProps = {
         showCloseButton: false,
         color: '',
         textColor: '',
         type: AnnouncementBarTypes.CRITICAL,
-        handleClose: null,
-        onButtonClick: null,
         showLinkAsButton: false,
         isTallBanner: false,
     }
@@ -68,7 +69,7 @@ export default class AnnouncementBar extends React.PureComponent {
         this.props.actions.decrementAnnouncementBarCount();
     }
 
-    handleClose = (e) => {
+    handleClose = (e: any) => {
         e.preventDefault();
         if (this.props.handleClose) {
             this.props.handleClose();
@@ -81,8 +82,8 @@ export default class AnnouncementBar extends React.PureComponent {
         }
 
         let barClass = 'announcement-bar';
-        const barStyle = {};
-        const linkStyle = {};
+        const barStyle = {backgroundColor: '', color: ''};
+        const linkStyle = {color: ''};
         if (this.props.color && this.props.textColor) {
             barStyle.backgroundColor = this.props.color;
             barStyle.color = this.props.textColor;

components/announcement_bar/default_announcement_bar/index.js → components/announcement_bar/default_announcement_bar/index.ts

@@ -2,20 +2,23 @@
 // See LICENSE.txt for license information.
 
 import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import {bindActionCreators, Dispatch} from 'redux';
+
+import {GlobalState} from 'mattermost-redux/types/store';
+import {GenericAction} from 'mattermost-redux/types/actions';
 
 import {incrementAnnouncementBarCount, decrementAnnouncementBarCount} from 'actions/views/announcement_bar';
 import {getAnnouncementBarCount} from 'selectors/views/announcement_bar';
 
-import AnnouncementBar from './announcement_bar.jsx';
+import AnnouncementBar from './announcement_bar';
 
-function mapStateToProps(state) {
+function mapStateToProps(state: GlobalState) {
     return {
         announcementBarCount: getAnnouncementBarCount(state),
     };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch:Dispatch<GenericAction>) {
     return {
         actions: bindActionCreators({
             incrementAnnouncementBarCount,