[MM-69549] Modularize Calls webapp state management (active_calls, sessions, hosts, availability)

build/sync/plan.yml

@@ -35,7 +35,6 @@ actions:
       - webapp/tsconfig.json
       - webapp/webpack.config.js
       - webapp/src/manifest.test.tsx
-      - webapp/tests/setup.tsx
     actions:
       - type: overwrite_file
         params:

server/api_livekit_webhook_test.go

@@ -411,6 +411,7 @@ func TestHandleLiveKitSIPParticipant(t *testing.T) {
 		defer ResetTestStore(t, p.store)
 
 		botID := model.NewId()
+		p.botID = botID
 		p.botSession = &model.Session{UserId: botID}
 
 		channelID := model.NewId()
@@ -462,6 +463,7 @@ func TestHandleLiveKitSIPParticipant(t *testing.T) {
 		defer ResetTestStore(t, p.store)
 
 		botID := model.NewId()
+		p.botID = botID
 		p.botSession = &model.Session{UserId: botID}
 
 		channelID := model.NewId()

server/session_test.go

@@ -181,6 +181,7 @@ func TestRemoveUserSessionPhoneCall(t *testing.T) {
 		callsClusterLocks: map[string]*cluster.Mutex{},
 		metrics:           mockMetrics,
 		configuration:     &configuration{}, // no LiveKitURL: livekitDeleteRoom is a no-op
+		botID:             botID,
 		botSession:        &model.Session{UserId: botID},
 		sessions:          map[string]*session{},
 	}

standalone/src/index.ts

@@ -35,7 +35,7 @@ import {getChannel} from 'mattermost-redux/selectors/entities/channels';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getTheme, Theme} from 'mattermost-redux/selectors/entities/preferences';
 import configureStore from 'mattermost-redux/store';
-import {getCallActive, getCallsConfig, getCallsVersionInfo, joinUser, leaveUser, localSessionClose, setClientConnecting} from 'plugin/actions';
+import {getCallsConfig, getCallsVersionInfo, joinUser, leaveUser, localSessionClose, setClientConnecting} from 'plugin/actions';
 import CallClient, {CALL_EVENT, ConnectPayload, DisconnectReason} from 'plugin/clients/call';
 import RestClient from 'plugin/clients/rest';
 import {
@@ -44,7 +44,8 @@ import {
 } from 'plugin/log';
 import {pluginId} from 'plugin/manifest';
 import reducer from 'plugin/reducers';
-import {userLoweredHand, userMuted, userRaisedHand, usersVoiceActivityChanged, userUnmuted} from 'plugin/state/session/actions';
+import {fetchIsCallActiveInChannel} from 'plugin/state/active_calls/actions';
+import {userLoweredHand, userMuted, userRaisedHand, usersVoiceActivityChanged, userUnmuted} from 'plugin/state/sessions/actions';
 import {Store} from 'plugin/types/mattermost-webapp';
 import {
     getWSConnectionURL,
@@ -282,10 +283,10 @@ export default async function initialiseEmbedApp(cfg: InitConfig) {
 
     let active = false;
     try {
-        [, active] = await Promise.all([
+        [, , active] = await Promise.all([
             store.dispatch(getCallsConfig()),
             store.dispatch(getCallsVersionInfo()),
-            getCallActive(channelID),
+            fetchIsCallActiveInChannel(channelID),
         ]);
     } catch (e) {
         throw new Error(`failed to fetch channel data: ${e}`);

standalone/src/recording/components/recording_view/index.tsx

@@ -16,11 +16,11 @@ import {ReactionStream} from 'src/components/reaction_stream/reaction_stream';
 import Timestamp from 'src/components/timestamp';
 import {callProfileImages} from 'src/recording/selectors';
 import {
-    hostIDForCurrentCall,
     profilesInCurrentCallMap,
     screenSharingSessionForCurrentCall,
     sessionsInCurrentCall,
 } from 'src/selectors';
+import {getHostIDForCurrentChannel} from 'src/state/hosts/selectors';
 
 const RecordingView = () => {
     const {formatMessage} = useIntl();
@@ -35,7 +35,7 @@ const RecordingView = () => {
         .sort(stateSortSessions(screenSharingSession?.session_id || '', true)));
     const profileImages = useSelector((state: GlobalState) => callProfileImages(state, callsClient?.channelID || ''));
 
-    const hostID = useSelector((state: GlobalState) => hostIDForCurrentCall(state));
+    const hostID = useSelector(getHostIDForCurrentChannel);
 
     const attachVoiceTracks = (tracks: MediaStreamTrack[]) => {
         for (const track of tracks) {

standalone/src/recording/index.tsx

@@ -11,7 +11,6 @@ import {Store} from 'plugin/types/mattermost-webapp';
 import {
     getPluginPath,
     getTranslations,
-    getUserIDsForSessions,
     runWithRetry,
     setCallsGlobalCSSVars,
 } from 'plugin/utils';
@@ -22,6 +21,7 @@ import {Provider} from 'react-redux';
 import RestClient from 'src/clients/rest';
 import {getJobID} from 'src/common';
 import recordingReducer from 'src/recording/reducers';
+import {getUserIDsFromSessions} from 'src/state/sessions/selectors';
 
 import initialiseEmbedApp, {InitCbProps} from '../index';
 import {
@@ -125,7 +125,7 @@ function wsHandlerRecording(store: Store, ev: WebSocketMessage<WebsocketEventDat
 
         if (call.sessions?.length > 0) {
             runWithRetry(() => {
-                return fetchProfileImages(getUserIDsForSessions(call.sessions));
+                return fetchProfileImages(getUserIDsFromSessions(call.sessions));
             }).then((images) => {
                 store.dispatch({
                     type: RECEIVED_CALL_PROFILE_IMAGES,

webapp/jest.config.js

@@ -21,7 +21,7 @@ const config = {
     moduleNameMapper: {
         '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'identity-obj-proxy',
         '^.+\\.(css|less|scss)$': 'identity-obj-proxy',
-        '^.*i18n.*\\.(json)$': '<rootDir>/tests/i18n_mock.json',
+        '^.*i18n.*\\.(json)$': '<rootDir>/src/i18n.mock.json',
         '^bundle-loader\\?lazy\\!(.*)$': '$1',
         '^@mattermost/types/(.*)$': '<rootDir>/mattermost-webapp/webapp/platform/types/src/$1',
         '^@mattermost/client$': '<rootDir>/mattermost-webapp/webapp/platform/client/src/index',

webapp/src/action_types.ts

@@ -3,8 +3,6 @@
 
 import {pluginId} from './manifest';
 
-export const CALL_STATE = pluginId + '_call_state';
-export const CALL_HOST = pluginId + '_call_host';
 export const CALL_RECORDING_STATE = pluginId + '_call_recording_state';
 export const CALL_LIVE_CAPTIONS_STATE = pluginId + '_call_live_captions_state';
 export const CALL_REC_PROMPT_DISMISSED = pluginId + '_call_rec_prompt_dismissed';
@@ -35,7 +33,6 @@ export const TRANSCRIPTIONS_ENABLED = pluginId + '_transcriptions_enabled';
 export const LIVE_CAPTIONS_ENABLED = pluginId + '_live_captions_enabled';
 export const RTCD_ENABLED = pluginId + '_rtcd_enabled';
 export const TRANSCRIBE_API = pluginId + '_transcribe_api';
-export const RECEIVED_CHANNEL_STATE = pluginId + 'received_channel_state';
 export const RECEIVED_CALLS_USER_PREFERENCES = pluginId + '_received_calls_user_preferences';
 
 export const DESKTOP_WIDGET_CONNECTED = pluginId + '_desktop_widget_connected';