Migrate to typescript Apps related files (mattermost#7021)

* Migrate to typescript Apps related files

* Use correct react-overlays types version

* PR feedback

* fix types

* fix types

* temporarily use any

* remove unused import

* Remove unneeded comments

* Extract stringToNumber to utils

* Fix minor warning on the console

* Fix lint

Co-authored-by: Michael Kochell <6913320+mickmister@users.noreply.github.com>

actions/admin_actions.jsx

@@ -9,7 +9,7 @@ import {bindClientFunc} from 'mattermost-redux/actions/helpers';
 
 import {trackEvent} from 'actions/telemetry_actions.jsx';
 
-import {emitUserLoggedOutEvent} from 'actions/global_actions.jsx';
+import {emitUserLoggedOutEvent} from 'actions/global_actions';
 import {getOnNavigationConfirmed} from 'selectors/views/admin';
 import store from 'stores/redux_store.jsx';
 import {ActionTypes} from 'utils/constants';

actions/channel_actions.jsx

@@ -116,7 +116,7 @@ export function autocompleteChannels(term, success, error) {
         const state = getState();
         const teamId = getCurrentTeamId(state);
         if (!teamId) {
-            return;
+            return {data: false};
         }
 
         const {data, error: err} = await dispatch(ChannelActions.autocompleteChannels(teamId, term));
@@ -125,6 +125,8 @@ export function autocompleteChannels(term, success, error) {
         } else if (err && error) {
             error({id: err.server_error_id, ...err});
         }
+
+        return {data: true};
     };
 }
 

actions/command.js

@@ -10,7 +10,7 @@ import {getCurrentRelativeTeamUrl, getCurrentTeamId} from 'mattermost-redux/sele
 import {IntegrationTypes} from 'mattermost-redux/action_types';
 
 import {openModal} from 'actions/views/modals';
-import * as GlobalActions from 'actions/global_actions.jsx';
+import * as GlobalActions from 'actions/global_actions';
 import * as PostActions from 'actions/post_actions.jsx';
 
 import {isUrlSafe, getSiteURL} from 'utils/url';

actions/command.test.js

@@ -12,7 +12,7 @@ import * as Teams from 'mattermost-redux/selectors/entities/teams';
 
 import {ActionTypes, Constants} from 'utils/constants';
 import * as UserAgent from 'utils/user_agent';
-import * as GlobalActions from 'actions/global_actions.jsx';
+import * as GlobalActions from 'actions/global_actions';
 import * as Utils from 'utils/utils.jsx';
 import UserSettingsModal from 'components/user_settings/modal';
 
@@ -60,7 +60,7 @@ const initialState = {
 };
 
 jest.mock('utils/user_agent');
-jest.mock('actions/global_actions.jsx');
+jest.mock('actions/global_actions');
 
 describe('executeCommand', () => {
     let store;

actions/global_actions.test.js → actions/global_actions.test.ts

@@ -3,13 +3,15 @@
 
 import configureStore from 'redux-mock-store';
 
+import {UserProfile} from 'mattermost-redux/types/users';
+import {Team} from 'mattermost-redux/types/teams';
+
 import {browserHistory} from 'utils/browser_history';
 import {closeRightHandSide, closeMenu as closeRhsMenu} from 'actions/views/rhs';
 import {close as closeLhs} from 'actions/views/lhs';
 import LocalStorageStore from 'stores/local_storage_store';
-import {getState} from 'stores/redux_store';
-
-import {redirectUserToDefaultTeam, toggleSideBarRightMenuAction, getTeamRedirectChannelIfIsAccesible} from 'actions/global_actions.jsx';
+import reduxStore from 'stores/redux_store';
+import {redirectUserToDefaultTeam, toggleSideBarRightMenuAction, getTeamRedirectChannelIfIsAccesible} from 'actions/global_actions';
 
 jest.mock('actions/views/rhs', () => ({
     closeMenu: jest.fn(),
@@ -60,7 +62,7 @@ describe('actions/global_actions', () => {
                 },
             });
 
-            getState.mockImplementation(store.getState);
+            reduxStore.getState.mockImplementation(store.getState);
 
             browserHistory.push = jest.fn();
             await redirectUserToDefaultTeam();
@@ -136,7 +138,7 @@ describe('actions/global_actions', () => {
                 },
             });
 
-            getState.mockImplementation(store.getState);
+            reduxStore.getState.mockImplementation(store.getState);
 
             browserHistory.push = jest.fn();
             await redirectUserToDefaultTeam();
@@ -211,7 +213,7 @@ describe('actions/global_actions', () => {
                 },
             });
 
-            getState.mockImplementation(store.getState);
+            reduxStore.getState.mockImplementation(store.getState);
 
             browserHistory.push = jest.fn();
             await redirectUserToDefaultTeam();
@@ -285,7 +287,7 @@ describe('actions/global_actions', () => {
                 },
             });
 
-            getState.mockImplementation(store.getState);
+            reduxStore.getState.mockImplementation(store.getState);
 
             browserHistory.push = jest.fn();
             await redirectUserToDefaultTeam();
@@ -319,7 +321,7 @@ describe('actions/global_actions', () => {
                 },
             });
 
-            getState.mockImplementation(store.getState);
+            reduxStore.getState.mockImplementation(store.getState);
 
             browserHistory.push = jest.fn();
             await redirectUserToDefaultTeam();
@@ -414,12 +416,12 @@ describe('actions/global_actions', () => {
                     },
                 },
             });
-            getState.mockImplementation(store.getState);
+            reduxStore.getState.mockImplementation(store.getState);
             LocalStorageStore.setPreviousTeamId(userId, teamId);
             LocalStorageStore.setPreviousChannelName(userId, teamId, directChannelId);
 
-            const result = await getTeamRedirectChannelIfIsAccesible({id: userId}, {id: teamId});
-            expect(result.id).toBe(directChannelId);
+            const result = await getTeamRedirectChannelIfIsAccesible({id: userId} as UserProfile, {id: teamId} as Team);
+            expect(result?.id).toBe(directChannelId);
         });
 
         it('should redirect to group message if that\'s the most recently used', async () => {
@@ -512,12 +514,12 @@ describe('actions/global_actions', () => {
                     },
                 },
             });
-            getState.mockImplementation(store.getState);
+            reduxStore.getState.mockImplementation(store.getState);
             LocalStorageStore.setPreviousTeamId(userId, teamId);
             LocalStorageStore.setPreviousChannelName(userId, teamId, groupChannelId);
 
-            const result = await getTeamRedirectChannelIfIsAccesible({id: userId}, {id: teamId});
-            expect(result.id).toBe(groupChannelId);
+            const result = await getTeamRedirectChannelIfIsAccesible({id: userId} as UserProfile, {id: teamId} as Team);
+            expect(result?.id).toBe(groupChannelId);
         });
 
         it('should redirect to last channel on first team when current team is no longer available', async () => {
@@ -575,7 +577,7 @@ describe('actions/global_actions', () => {
                 },
             });
 
-            getState.mockImplementation(store.getState);
+            reduxStore.getState.mockImplementation(store.getState);
 
             browserHistory.push = jest.fn();
             await redirectUserToDefaultTeam();
@@ -584,7 +586,9 @@ describe('actions/global_actions', () => {
     });
 
     test('toggleSideBarRightMenuAction', () => {
-        const dispatchMock = () => {};
+        const dispatchMock = async () => {
+            return {data: true};
+        };
         toggleSideBarRightMenuAction()(dispatchMock);
         expect(closeRhsMenu).toHaveBeenCalled();
         expect(closeRightHandSide).toHaveBeenCalled();

actions/global_actions.jsx → actions/global_actions.tsx

@@ -16,6 +16,10 @@ import {getCurrentTeamId, getMyTeams, getTeam, getMyTeamMember, getTeamMembershi
 import {getCurrentUser, getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {getCurrentChannelStats, getCurrentChannelId, getMyChannelMember, getRedirectChannelNameForTeam, getChannelsNameMapInTeam, getAllDirectChannels} from 'mattermost-redux/selectors/entities/channels';
 import {ChannelTypes} from 'mattermost-redux/action_types';
+import {Channel, ChannelMembership} from 'mattermost-redux/types/channels';
+import {UserProfile} from 'mattermost-redux/types/users';
+import {DispatchFunc, GetStateFunc} from 'mattermost-redux/types/actions';
+import {Team} from 'mattermost-redux/types/teams';
 
 import {browserHistory} from 'utils/browser_history';
 import {handleNewPost} from 'actions/post_actions.jsx';
@@ -28,7 +32,7 @@ import * as WebsocketActions from 'actions/websocket_actions.jsx';
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import {getCurrentLocale} from 'selectors/i18n';
 import {getIsRhsOpen, getRhsState} from 'selectors/rhs';
-import BrowserStore from 'stores/browser_store.jsx';
+import BrowserStore from 'stores/browser_store';
 import store from 'stores/redux_store.jsx';
 import LocalStorageStore from 'stores/local_storage_store';
 import WebSocketClient from 'client/web_websocket_client.jsx';
@@ -43,19 +47,19 @@ import {openModal} from './views/modals';
 const dispatch = store.dispatch;
 const getState = store.getState;
 
-export function emitChannelClickEvent(channel) {
-    async function userVisitedFakeChannel(chan, success, fail) {
+export function emitChannelClickEvent(channel: Channel) {
+    async function userVisitedFakeChannel(chan: Channel, success: (received: Channel) => void, fail: () => void) {
         const state = getState();
         const currentUserId = getCurrentUserId(state);
         const otherUserId = Utils.getUserIdFromChannelName(chan);
-        const {data: receivedChannel} = await createDirectChannel(currentUserId, otherUserId)(dispatch, getState);
-        if (receivedChannel) {
-            success(receivedChannel);
+        const res = await createDirectChannel(currentUserId, otherUserId)(dispatch, getState);
+        if ('data' in res) {
+            success(res.data);
         } else {
             fail();
         }
     }
-    function switchToChannel(chan) {
+    function switchToChannel(chan: Channel) {
         const state = getState();
         const userId = getCurrentUserId(state);
         const teamId = chan.team_id || getCurrentTeamId(state);
@@ -100,19 +104,19 @@ export function emitChannelClickEvent(channel) {
                 switchToChannel(data);
             },
             () => {
-                browserHistory.push('/' + this.state.currentTeam.name);
+                browserHistory.push('/');
             },
         );
     } else {
         switchToChannel(channel);
     }
 }
 
-export function updateNewMessagesAtInChannel(channelId, last_viewed_at = Date.now()) {
+export function updateNewMessagesAtInChannel(channelId: string, lastViewedAt = Date.now()) {
     return {
         type: ActionTypes.UPDATE_CHANNEL_LAST_VIEWED_AT,
         channel_id: channelId,
-        last_viewed_at,
+        last_viewed_at: lastViewedAt,
     };
 }
 
@@ -127,23 +131,23 @@ export function toggleShortcutsModal() {
     });
 }
 
-export function showChannelPurposeUpdateModal(channel) {
+export function showChannelPurposeUpdateModal(channel: Channel) {
     AppDispatcher.handleViewAction({
         type: ActionTypes.TOGGLE_CHANNEL_PURPOSE_UPDATE_MODAL,
         value: true,
         channel,
     });
 }
 
-export function showChannelNameUpdateModal(channel) {
+export function showChannelNameUpdateModal(channel: Channel) {
     AppDispatcher.handleViewAction({
         type: ActionTypes.TOGGLE_CHANNEL_NAME_UPDATE_MODAL,
         value: true,
         channel,
     });
 }
 
-export function showGetPublicLinkModal(fileId) {
+export function showGetPublicLinkModal(fileId: string) {
     AppDispatcher.handleViewAction({
         type: ActionTypes.TOGGLE_GET_PUBLIC_LINK_MODAL,
         value: true,
@@ -158,14 +162,14 @@ export function showGetTeamInviteLinkModal() {
     });
 }
 
-export function showLeavePrivateChannelModal(channel) {
+export function showLeavePrivateChannelModal(channel: Channel) {
     AppDispatcher.handleViewAction({
         type: ActionTypes.TOGGLE_LEAVE_PRIVATE_CHANNEL_MODAL,
         value: channel,
     });
 }
 
-export function showMobileSubMenuModal(elements) {
+export function showMobileSubMenuModal(elements: any[]) { // TODO Use more specific type
     const submenuModalData = {
         ModalId: ModalIdentifiers.MOBILE_SUBMENU,
         dialogType: SubMenuModal,
@@ -177,7 +181,7 @@ export function showMobileSubMenuModal(elements) {
     dispatch(openModal(submenuModalData));
 }
 
-export function sendEphemeralPost(message, channelId, parentId) {
+export function sendEphemeralPost(message: string, channelId: string, parentId: string) {
     const timestamp = Utils.getTimestamp();
     const post = {
         id: Utils.generateId(),
@@ -195,7 +199,7 @@ export function sendEphemeralPost(message, channelId, parentId) {
     dispatch(handleNewPost(post));
 }
 
-export function sendAddToChannelEphemeralPost(user, addedUsername, addedUserId, channelId, postRootId = '', timestamp) {
+export function sendAddToChannelEphemeralPost(user: UserProfile, addedUsername: string, addedUserId: string, channelId: string, postRootId = '', timestamp: number) {
     const post = {
         id: Utils.generateId(),
         user_id: user.id,
@@ -217,16 +221,19 @@ export function sendAddToChannelEphemeralPost(user, addedUsername, addedUserId,
 }
 
 let lastTimeTypingSent = 0;
-export function emitLocalUserTypingEvent(channelId, parentPostId) {
-    const userTyping = async (actionDispatch, actionGetState) => {
+export function emitLocalUserTypingEvent(channelId: string, parentPostId: string) {
+    const userTyping = async (actionDispatch: DispatchFunc, actionGetState: GetStateFunc) => {
         const state = actionGetState();
         const config = getConfig(state);
         const t = Date.now();
         const stats = getCurrentChannelStats(state);
         const membersInChannel = stats ? stats.member_count : 0;
 
-        if (((t - lastTimeTypingSent) > config.TimeBetweenUserTypingUpdatesMilliseconds) &&
-            (membersInChannel < config.MaxNotificationsPerChannel) && (config.EnableUserTypingMessages === 'true')) {
+        const timeBetweenUserTypingUpdatesMilliseconds = Utils.stringToNumber(config.TimeBetweenUserTypingUpdatesMilliseconds);
+        const maxNotificationsPerChannel = Utils.stringToNumber(config.MaxNotificationsPerChannel);
+
+        if (((t - lastTimeTypingSent) > timeBetweenUserTypingUpdatesMilliseconds) &&
+            (membersInChannel < maxNotificationsPerChannel) && (config.EnableUserTypingMessages === 'true')) {
             WebSocketClient.userTyping(channelId, parentPostId);
             lastTimeTypingSent = t;
         }
@@ -262,21 +269,21 @@ export function emitUserLoggedOutEvent(redirectTo = '/', shouldSignalLogout = tr
 }
 
 export function toggleSideBarRightMenuAction() {
-    return (doDispatch) => {
+    return (doDispatch: DispatchFunc) => {
         doDispatch(closeRightHandSide());
         doDispatch(closeLhs());
         doDispatch(closeRhsMenu());
     };
 }
 
-export function emitBrowserFocus(focus) {
+export function emitBrowserFocus(focus: boolean) {
     dispatch({
         type: ActionTypes.BROWSER_CHANGE_FOCUS,
         focus,
     });
 }
 
-export async function getTeamRedirectChannelIfIsAccesible(user, team) {
+export async function getTeamRedirectChannelIfIsAccesible(user: UserProfile, team: Team) {
     let state = getState();
     let channel = null;
 
@@ -301,7 +308,10 @@ export async function getTeamRedirectChannelIfIsAccesible(user, team) {
         channel = dmList.find((directChannel) => directChannel.name === channelName);
     }
 
-    let channelMember = getMyChannelMember(state, channel && channel.id);
+    let channelMember: ChannelMembership | null | undefined;
+    if (channel) {
+        channelMember = getMyChannelMember(state, channel.id);
+    }
 
     if (!channel || !channelMember) {
         // This should be executed in pretty limited scenarios (when the last visited channel in the team has been removed)
@@ -350,7 +360,11 @@ export async function redirectUserToDefaultTeam() {
         return;
     }
 
-    const team = getTeam(state, teamId);
+    let team: Team | undefined;
+    if (teamId) {
+        team = getTeam(state, teamId);
+    }
+
     if (team && team.delete_at === 0) {
         const channel = await getTeamRedirectChannelIfIsAccesible(user, team);
         if (channel) {

actions/post_actions.jsx

@@ -135,6 +135,7 @@ export function searchForTerm(term) {
     return (dispatch) => {
         dispatch(RhsActions.updateSearchTerms(term));
         dispatch(RhsActions.showSearchResults());
+        return {data: true};
     };
 }
 

actions/views/create_comment.test.jsx

@@ -46,7 +46,7 @@ jest.mock('actions/command', () => ({
     executeCommand: jest.fn((...args) => ({type: 'MOCK_ACTIONS_COMMAND_EXECUTE', args})),
 }));
 
-jest.mock('actions/global_actions.jsx', () => ({
+jest.mock('actions/global_actions', () => ({
     emitUserCommentedEvent: jest.fn(),
 }));
 

actions/views/posts.js

@@ -34,5 +34,7 @@ export function selectAttachmentMenuAction(postId, actionId, cookie, dataSource,
         });
 
         dispatch(PostActions.doPostActionWithCookie(postId, actionId, cookie, value));
+
+        return {data: true};
     };
 }