Migrate 'utils/notifications.jsx' and associated tests to TypeScript (m…

…attermost#3857)

* chore: changed extension to .tsx

* chore: changed extension .tsx

* chore: patch for key-mirror

* chore: run patch-package on postinstall

* fix: declare module for .svg files

* fix: type errors

* fix: type errors on notifications.tsx

* fix: updated utils/notifications import

* fix: updated utils/constants imports

* chore: removed .tsx extension on import

* chore: set onClick as optional

* fix: duplicate utils/constants import

* chore: installed @types/react-redux

* fix: renamed to system_notice.ts

* chore: moved .svg type def to /types dir

* chore: ignore mattermost-redux ts error for now

* chore: removed key-mirror type patch

* fix: moved key-mirror type def into /types dir

* chore: fix lint error

* chore: forgot header

* chore: fix lint errors

* chore: fixed merge conflict

* chore: add empty space for import groups

* chore: fixed dragster import

* chore: fixed eslint error

* chore: fixed formatting

* test: updated snapshot

* chore: revert system_notice/index.ts to .js

* chore: revert to constants.jsx

* chore: revert utils.jsx

* chore: revert login_controller.jsx

* chore: fixed utils/notification import

* chore: pin @types/react-redux to v7.1.4

* chore: fixed formatting

* refactor: fixed double utils/constants import

* test: updated snapshot

actions/admin_actions.jsx

@@ -10,7 +10,7 @@ import {bindClientFunc} from 'mattermost-redux/actions/helpers';
 import {emitUserLoggedOutEvent} from 'actions/global_actions.jsx';
 import {getOnNavigationConfirmed} from 'selectors/views/admin';
 import store from 'stores/redux_store.jsx';
-import {ActionTypes} from 'utils/constants.jsx';
+import {ActionTypes} from 'utils/constants';
 
 const dispatch = store.dispatch;
 const getState = store.getState;

actions/channel_actions.jsx

@@ -14,7 +14,7 @@ import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import {loadNewDMIfNeeded, loadNewGMIfNeeded, loadProfilesForSidebar} from 'actions/user_actions.jsx';
 import {browserHistory} from 'utils/browser_history';
-import {Constants, Preferences} from 'utils/constants.jsx';
+import {Constants, Preferences} from 'utils/constants';
 import {getDirectChannelName} from 'utils/utils';
 
 export function openDirectChannelToUserId(userId) {

actions/command.js

@@ -17,7 +17,7 @@ import * as PostActions from 'actions/post_actions.jsx';
 import {isUrlSafe, getSiteURL} from 'utils/url';
 import {localizeMessage, getUserIdFromChannelName} from 'utils/utils.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
-import {Constants, ModalIdentifiers} from 'utils/constants.jsx';
+import {Constants, ModalIdentifiers} from 'utils/constants';
 import {browserHistory} from 'utils/browser_history';
 
 import UserSettingsModal from 'components/user_settings/modal';

actions/emoji_actions.jsx

@@ -7,7 +7,7 @@ import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {setRecentEmojis} from 'actions/local_storage';
 import {getEmojiMap, getRecentEmojis} from 'selectors/emojis';
 
-import {ActionTypes} from 'utils/constants.jsx';
+import {ActionTypes} from 'utils/constants';
 
 export function loadRecentlyUsedCustomEmojis() {
  return async (dispatch, getState) => {

actions/global_actions.jsx

@@ -36,10 +36,9 @@ import store from 'stores/redux_store.jsx';
 import LocalStorageStore from 'stores/local_storage_store';
 import WebSocketClient from 'client/web_websocket_client.jsx';
 
-import {ActionTypes, Constants, PostTypes, RHSStates} from 'utils/constants.jsx';
+import {ActionTypes, Constants, PostTypes, RHSStates, ModalIdentifiers} from 'utils/constants';
 import {filterAndSortTeamsByDisplayName} from 'utils/team_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
-import {ModalIdentifiers} from 'utils/constants';
 import SubMenuModal from '../components/widgets/menu/menu_modals/submenu_modal/submenu_modal';
 
 import {openModal} from './views/modals';

actions/notification_actions.jsx

@@ -10,7 +10,7 @@ import {isChannelMuted} from 'mattermost-redux/utils/channel_utils';
 import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
 
-import Constants, {NotificationLevels, UserStatuses} from 'utils/constants.jsx';
+import Constants, {NotificationLevels, UserStatuses} from 'utils/constants';
 import {isMacApp, isMobileApp, isWindowsApp} from 'utils/user_agent.jsx';
 import * as Utils from 'utils/utils.jsx';
 import {stripMarkdown} from 'utils/markdown';

actions/status_actions.jsx

@@ -8,7 +8,7 @@ import {getDirectShowPreferences} from 'mattermost-redux/selectors/entities/pref
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
 import store from 'stores/redux_store.jsx';
-import {Constants} from 'utils/constants.jsx';
+import {Constants} from 'utils/constants';
 
 export function loadStatusesForChannelAndSidebar() {
  return (dispatch, getState) => {

actions/user_actions.jsx

@@ -20,7 +20,7 @@ import * as Selectors from 'mattermost-redux/selectors/entities/users';
 import {loadStatusesForProfilesList, loadStatusesForProfilesMap} from 'actions/status_actions.jsx';
 import store from 'stores/redux_store.jsx';
 import * as Utils from 'utils/utils.jsx';
-import {Constants, Preferences, UserStatuses} from 'utils/constants.jsx';
+import {Constants, Preferences, UserStatuses} from 'utils/constants';
 
 const dispatch = store.dispatch;
 const getState = store.getState;

actions/views/channel.js

@@ -22,7 +22,7 @@ import {getLastPostsApiTimeForChannel} from 'selectors/views/channel';
 import {getSocketStatus} from 'selectors/views/websocket';
 
 import {browserHistory} from 'utils/browser_history';
-import {Constants, ActionTypes, EventTypes, PostRequestTypes} from 'utils/constants.jsx';
+import {Constants, ActionTypes, EventTypes, PostRequestTypes} from 'utils/constants';
 import {isMobile} from 'utils/utils.jsx';
 import LocalStorageStore from 'stores/local_storage_store.jsx';
 

actions/views/channel.test.js

@@ -11,7 +11,7 @@ import * as PostActions from 'mattermost-redux/actions/posts';
 import {browserHistory} from 'utils/browser_history';
 import * as Actions from 'actions/views/channel';
 import {openDirectChannelToUserId} from 'actions/channel_actions.jsx';
-import {ActionTypes, PostRequestTypes} from 'utils/constants.jsx';
+import {ActionTypes, PostRequestTypes} from 'utils/constants';
 
 const mockStore = configureStore([thunk]);
 

actions/views/create_comment.jsx

@@ -28,7 +28,7 @@ import EmojiMap from 'utils/emoji_map';
 import {getPostDraft} from 'selectors/rhs';
 
 import * as Utils from 'utils/utils.jsx';
-import {Constants, StoragePrefixes} from 'utils/constants.jsx';
+import {Constants, StoragePrefixes} from 'utils/constants';
 
 export function clearCommentDraftUploads() {
  return actionOnGlobalItemsWithPrefix(StoragePrefixes.COMMENT_DRAFT, (key, value) => {

actions/views/lhs.js

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {ActionTypes} from 'utils/constants.jsx';
+import {ActionTypes} from 'utils/constants';
 
 export const toggle = () => (dispatch) => dispatch({
  type: ActionTypes.TOGGLE_LHS,

actions/views/lhs.test.js

@@ -9,7 +9,7 @@ import {
  open,
  close,
 } from 'actions/views/lhs';
-import {ActionTypes} from 'utils/constants.jsx';
+import {ActionTypes} from 'utils/constants';
 
 const mockStore = configureStore([thunk]);
 

actions/views/modals.test.jsx

@@ -7,7 +7,7 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
 import {openModal, closeModal} from 'actions/views/modals';
-import {ActionTypes, ModalIdentifiers} from 'utils/constants.jsx';
+import {ActionTypes, ModalIdentifiers} from 'utils/constants';
 
 class TestModal extends React.Component {
  render() {

actions/views/posts.js

@@ -5,7 +5,7 @@ import * as PostActions from 'mattermost-redux/actions/posts';
 
 import {logError} from 'mattermost-redux/actions/errors';
 
-import {ActionTypes, AnnouncementBarTypes} from 'utils/constants.jsx';
+import {ActionTypes, AnnouncementBarTypes} from 'utils/constants';
 
 export function editPost(post) {
  return async (dispatch, getState) => {

actions/views/rhs.test.js

@@ -26,7 +26,7 @@ import {
  closeMenu,
 } from 'actions/views/rhs';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
-import {ActionTypes, RHSStates} from 'utils/constants.jsx';
+import {ActionTypes, RHSStates} from 'utils/constants';
 import {getBrowserUtcOffset} from 'utils/timezone.jsx';
 
 const mockStore = configureStore([thunk]);

actions/views/settings.js

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

actions/views/system.js

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {ActionTypes} from 'utils/constants.jsx';
+import {ActionTypes} from 'utils/constants';
 
 export function incrementWsErrorCount() {
  return async (dispatch) => {

actions/websocket_actions.jsx

@@ -66,7 +66,7 @@ import {loadProfilesForSidebar} from 'actions/user_actions.jsx';
 import store from 'stores/redux_store.jsx';
 import WebSocketClient from 'client/web_websocket_client.jsx';
 import {loadPlugin, loadPluginsIfNecessary, removePlugin} from 'plugins';
-import {Constants, AnnouncementBarMessages, SocketEvents, UserStatuses, ModalIdentifiers} from 'utils/constants.jsx';
+import {Constants, AnnouncementBarMessages, SocketEvents, UserStatuses, ModalIdentifiers} from 'utils/constants';
 import {fromAutoResponder} from 'utils/post_utils';
 import {getSiteURL} from 'utils/url';
 import RemovedFromChannelModal from 'components/removed_from_channel_modal';

actions/websocket_actions.test.jsx

@@ -14,7 +14,6 @@ import {
 } from 'mattermost-redux/actions/users';
 import {General, WebsocketEvents} from 'mattermost-redux/constants';
 
-import {ActionTypes} from 'utils/constants.jsx';
 import {handleNewPost} from 'actions/post_actions';
 import {closeRightHandSide} from 'actions/views/rhs';
 import {syncPostsInChannel} from 'actions/views/channel';
@@ -24,7 +23,7 @@ import store from 'stores/redux_store.jsx';
 import configureStore from 'tests/test_store';
 
 import {browserHistory} from 'utils/browser_history';
-import Constants, {SocketEvents, UserStatuses} from 'utils/constants';
+import Constants, {SocketEvents, UserStatuses, ActionTypes} from 'utils/constants';
 
 import {
  handleChannelUpdatedEvent,

components/add_groups_to_channel_modal/add_groups_to_channel_modal.jsx

@@ -8,7 +8,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {Groups} from 'mattermost-redux/constants';
 
-import Constants from 'utils/constants.jsx';
+import Constants from 'utils/constants';
 import {localizeMessage} from 'utils/utils.jsx';
 
 import MultiSelect from 'components/multiselect/multiselect.jsx';

components/add_groups_to_team_modal/add_groups_to_team_modal.jsx

@@ -8,7 +8,7 @@ import {FormattedMessage} from 'react-intl';
 
 import {Groups} from 'mattermost-redux/constants';
 
-import Constants from 'utils/constants.jsx';
+import Constants from 'utils/constants';
 import {localizeMessage} from 'utils/utils.jsx';
 
 import MultiSelect from 'components/multiselect/multiselect.jsx';

components/admin_console/admin_navbar_dropdown/admin_navbar_dropdown.jsx

@@ -9,7 +9,7 @@ import * as GlobalActions from 'actions/global_actions.jsx';
 
 import {filterAndSortTeamsByDisplayName} from 'utils/team_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
-import {ModalIdentifiers} from 'utils/constants.jsx';
+import {ModalIdentifiers} from 'utils/constants';
 
 import AboutBuildModal from 'components/about_build_modal';
 

components/admin_console/admin_settings.jsx

@@ -8,7 +8,7 @@ import {Overlay, Tooltip} from 'react-bootstrap';
 import {localizeMessage} from 'utils/utils.jsx';
 import SaveButton from 'components/save_button.jsx';
 import FormError from 'components/form_error';
-import Constants from 'utils/constants.jsx';
+import Constants from 'utils/constants';
 
 import AdminHeader from 'components/widgets/admin_console/admin_header';
 

components/admin_console/admin_sidebar/admin_sidebar.jsx

@@ -8,7 +8,7 @@ import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 import Scrollbars from 'react-custom-scrollbars';
 
 import * as Utils from 'utils/utils.jsx';
-import Constants from 'utils/constants.jsx';
+import Constants from 'utils/constants';
 import {generateIndex} from 'utils/admin_console_index.jsx';
 import {browserHistory} from 'utils/browser_history';
 

components/admin_console/brand_image_setting/brand_image_setting.jsx

@@ -9,7 +9,7 @@ import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {Client4} from 'mattermost-redux/client';
 
 import {uploadBrandImage, deleteBrandImage} from 'actions/admin_actions.jsx';
-import {Constants} from 'utils/constants.jsx';
+import {Constants} from 'utils/constants';
 import FormError from 'components/form_error';
 
 const HTTP_STATUS_OK = 200;

components/admin_console/brand_image_setting/upload_button.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import * as Utils from 'utils/utils.jsx';
-import {UploadStatuses} from 'utils/constants.jsx';
+import {UploadStatuses} from 'utils/constants';
 
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 import SuccessIcon from 'components/widgets/icons/fa_success_icon';

components/admin_console/brand_image_setting/upload_button.test.jsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import {UploadStatuses} from 'utils/constants.jsx';
+import {UploadStatuses} from 'utils/constants';
 import UploadButton from 'components/admin_console/brand_image_setting/upload_button.jsx';
 
 describe('components/admin_console/brand_image_setting/UploadButton', () => {

components/admin_console/data_retention_settings.jsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {JobTypes} from 'utils/constants.jsx';
+import {JobTypes} from 'utils/constants';
 import * as Utils from 'utils/utils.jsx';
 import ConfirmModal from 'components/confirm_modal.jsx';
 

components/admin_console/elasticsearch_settings.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {elasticsearchPurgeIndexes, elasticsearchTest} from 'actions/admin_actions.jsx';
-import {JobStatuses, JobTypes} from 'utils/constants.jsx';
+import {JobStatuses, JobTypes} from 'utils/constants';
 import * as Utils from 'utils/utils.jsx';
 import {t} from 'utils/i18n';
 

components/admin_console/jobs/table.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedDate, FormattedMessage, FormattedTime, injectIntl, intlShape} from 'react-intl';
 
-import {JobStatuses} from 'utils/constants.jsx';
+import {JobStatuses} from 'utils/constants';
 import * as Utils from 'utils/utils.jsx';
 
 class JobTable extends React.PureComponent {

components/admin_console/message_export_settings.jsx

@@ -5,7 +5,7 @@ import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
 
-import {JobTypes} from 'utils/constants.jsx';
+import {JobTypes} from 'utils/constants';
 import * as Utils from 'utils/utils.jsx';
 import {getSiteURL} from 'utils/url';
 

components/admin_console/password_settings.jsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Constants from 'utils/constants.jsx';
+import Constants from 'utils/constants';
 import * as Utils from 'utils/utils.jsx';
 import {t} from 'utils/i18n';
 

components/admin_console/permission_schemes_settings/permission_description.jsx

@@ -7,7 +7,7 @@ import {FormattedMessage, FormattedHTMLMessage, injectIntl, intlShape} from 'rea
 import {Overlay, Tooltip} from 'react-bootstrap';
 
 import {generateId} from 'utils/utils.jsx';
-import Constants from 'utils/constants.jsx';
+import Constants from 'utils/constants';
 
 export class PermissionDescription extends React.Component {
  static propTypes = {

components/admin_console/permission_schemes_settings/permission_group.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 
-import {PermissionsScope} from 'utils/constants.jsx';
+import {PermissionsScope} from 'utils/constants';
 
 import PermissionCheckbox from './permission_checkbox.jsx';
 import PermissionRow from './permission_row.jsx';

components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.jsx

@@ -10,7 +10,7 @@ import GeneralConstants from 'mattermost-redux/constants/general';
 
 import ConfirmModal from 'components/confirm_modal.jsx';
 
-import {PermissionsScope, DefaultRolePermissions} from 'utils/constants.jsx';
+import {PermissionsScope, DefaultRolePermissions} from 'utils/constants';
 import {localizeMessage} from 'utils/utils.jsx';
 import {t} from 'utils/i18n';
 

components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.test.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 
 import PermissionSystemSchemeSettings from 'components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.jsx';
-import {DefaultRolePermissions} from 'utils/constants.jsx';
+import {DefaultRolePermissions} from 'utils/constants';
 
 describe('components/admin_console/permission_schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings', () => {
  const defaultProps = {

components/admin_console/permission_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.jsx

@@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl';
 
 import Permissions from 'mattermost-redux/constants/permissions';
 
-import {PermissionsScope, ModalIdentifiers} from 'utils/constants.jsx';
+import {PermissionsScope, ModalIdentifiers} from 'utils/constants';
 import {localizeMessage} from 'utils/utils.jsx';
 import {t} from 'utils/i18n';
 

components/admin_console/permission_schemes_settings/permissions_scheme_summary/permissions_scheme_summary.jsx

@@ -11,7 +11,7 @@ import ConfirmModal from 'components/confirm_modal.jsx';
 import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
 
 import * as Utils from 'utils/utils.jsx';
-import Constants from 'utils/constants.jsx';
+import Constants from 'utils/constants';
 
 const MAX_TEAMS_PER_SCHEME_SUMMARY = 8;
 

components/admin_console/push_settings.jsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Constants from 'utils/constants.jsx';
+import Constants from 'utils/constants';
 import * as Utils from 'utils/utils.jsx';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';

components/admin_console/schema_admin_settings.jsx

@@ -8,7 +8,7 @@ import {Overlay, Tooltip} from 'react-bootstrap';
 
 import * as I18n from 'i18n/i18n.jsx';
 
-import Constants from 'utils/constants.jsx';
+import Constants from 'utils/constants';
 import {rolesFromMapping, mappingValueFromRoles} from 'utils/policy_roles_adapter';
 import * as Utils from 'utils/utils.jsx';
 import RequestButton from 'components/admin_console/request_button/request_button';

components/admin_console/system_user_detail/system_user_detail.jsx

@@ -11,7 +11,7 @@ import {isEmail} from 'mattermost-redux/utils/helpers';
 
 import {adminResetMfa, adminResetEmail} from 'actions/admin_actions.jsx';
 
-import {Constants} from 'utils/constants.jsx';
+import {Constants} from 'utils/constants';
 import * as Utils from 'utils/utils.jsx';
 import {t} from 'utils/i18n';
 

components/admin_console/system_users/index.js

@@ -21,7 +21,7 @@ import {Stats} from 'mattermost-redux/constants';
 import {loadProfilesAndTeamMembers, loadProfilesWithoutTeam} from 'actions/user_actions.jsx';
 
 import {setSystemUsersSearch} from 'actions/views/search';
-import {SearchUserTeamFilter} from 'utils/constants.jsx';
+import {SearchUserTeamFilter} from 'utils/constants';
 
 import SystemUsers from './system_users.jsx';