Limits the use of MATLAB to one browser session at a time.

Author: Shushant Singh

gui/src/actionCreators/actionCreators.spec.js

@@ -1,4 +1,4 @@
-// Copyright 2020-2023 The MathWorks, Inc.
+// Copyright 2020-2024 The MathWorks, Inc.
 
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
@@ -94,7 +94,7 @@ describe('Test fetchWithTimeout method', () => {
   });
 
   it('should fetch requested data without raising an exception or dispatching any action', async () => {
-    fetchMock.getOnce('/get_status', {
+    fetchMock.getOnce('/get_status?IS_DESKTOP=TRUE', {
       body: {
         matlab: {
           status: 'down',
@@ -104,7 +104,7 @@ describe('Test fetchWithTimeout method', () => {
       headers: { 'content-type': 'application/json' },
     });
 
-    const response = await actionCreators.fetchWithTimeout(store.dispatch, '/get_status', {}, 10000);
+    const response = await actionCreators.fetchWithTimeout(store.dispatch, '/get_status?IS_DESKTOP=TRUE', {}, 10000);
     const body = await response.json()
 
     expect(body).not.toBeNull();
@@ -116,7 +116,7 @@ describe('Test fetchWithTimeout method', () => {
     ];
 
     try {
-      const response = await actionCreators.fetchWithTimeout(store.dispatch, '/get_status', {}, 100);
+      const response = await actionCreators.fetchWithTimeout(store.dispatch, '/get_status?IS_DESKTOP=TRUE', {}, 100);
     } catch (error) {
       expect(error).toBeInstanceOf(TypeError)
       const received = store.getActions();
@@ -130,14 +130,14 @@ describe('Test fetchWithTimeout method', () => {
 
     // Send a delayed response, well after the timeout for the request has expired.
     // This should trigger the abort() method of the AbortController()
-    fetchMock.getOnce('/get_status', new Promise(resolve => setTimeout(() => resolve({ body: 'ok' }), 1000 + timeout)));
+    fetchMock.getOnce('/get_status?IS_DESKTOP=TRUE', new Promise(resolve => setTimeout(() => resolve({ body: 'ok' }), 1000 + timeout)));
 
     const abortSpy = jest.spyOn(global.AbortController.prototype, 'abort');
     const expectedActions = [
       actions.RECEIVE_ERROR,
     ];
 
-    await actionCreators.fetchWithTimeout(store.dispatch, '/get_status', {}, timeout);
+    await actionCreators.fetchWithTimeout(store.dispatch, '/get_status?IS_DESKTOP=TRUE', {}, timeout);
 
     expect(abortSpy).toBeCalledTimes(1);
     const received = store.getActions();
@@ -194,7 +194,7 @@ describe('Test Async actionCreators', () => {
   });
 
   it('dispatches REQUEST_SERVER_STATUS, RECEIVE_SERVER_STATUS when fetching status', () => {
-    fetchMock.getOnce('/get_status', {
+    fetchMock.getOnce('/get_status?IS_DESKTOP=TRUE', {
       body: {
         matlab: {
           status: 'down',

gui/src/actionCreators/index.js

@@ -1,4 +1,4 @@
-// Copyright 2020-2023 The MathWorks, Inc.
+// Copyright 2020-2024 The MathWorks, Inc.
 
 import {
     SET_TRIGGER_POSITION,
@@ -19,10 +19,19 @@ import {
     RECEIVE_START_MATLAB,
     RECEIVE_ERROR,
     RECEIVE_ENV_CONFIG,
+    RECEIVE_CONCURRENCY_CHECK,
     SET_AUTH_STATUS,
-    SET_AUTH_TOKEN
+    SET_AUTH_TOKEN,
+    RECEIVE_SESSION_STATUS,
+    WAS_EVER_ACTIVE,
+    REQUEST_SESSION_STATUS,
+    SET_CLIENT_ID,
 } from '../actions';
-import { selectMatlabPending } from '../selectors';
+import { 
+    selectMatlabPending, 
+    selectIsConcurrencyEnabled, 
+    selectClientId,
+} from '../selectors';
 import sha256 from 'crypto-js/sha256';
 
 export function setAuthStatus(authInfo) {
@@ -61,12 +70,25 @@ export function setOverlayVisibility(visibility) {
     };
 }
 
+export function setClientId(client_id) {
+    return {
+        type: SET_CLIENT_ID,
+        client_id
+    };
+}
+
 export function requestServerStatus() {
     return {
         type: REQUEST_SERVER_STATUS,
     };
 }
 
+export function wasEverActive() {
+    return {
+        type: WAS_EVER_ACTIVE,
+    }
+}
+
 export function receiveServerStatus(status) {
     return function (dispatch, getState) {
         return dispatch({
@@ -76,6 +98,20 @@ export function receiveServerStatus(status) {
         });
     }
 }
+export function requestSessionStatus() {
+    return {
+        type: REQUEST_SESSION_STATUS,
+    };
+}
+
+export function receiveSessionStatus(status) {
+    return function (dispatch, getState) {
+        return dispatch({
+            type: RECEIVE_SESSION_STATUS,
+            status,
+        })
+    }
+}
 
 export function requestEnvConfig() {
     return {
@@ -90,6 +126,13 @@ export function receiveEnvConfig(config) {
     };
 }
 
+export function receiveConcurrencyCheck(config) {
+    return {
+        type: RECEIVE_CONCURRENCY_CHECK,
+        config,
+    }
+}
+
 export function requestSetLicensing() {
     return {
         type: REQUEST_SET_LICENSING,
@@ -193,14 +236,43 @@ export async function fetchWithTimeout(dispatch, resource, options = {}, timeout
     }
 }
 
-export function fetchServerStatus() {
+export function fetchServerStatus(requestTransferSession = false) {
     return async function (dispatch, getState) {
+        const isConcurrencyEnabled = selectIsConcurrencyEnabled(getState());
+        const clientIdInState = selectClientId(getState());
+        const clientId = clientIdInState ? clientIdInState : sessionStorage.getItem("MWI_CLIENT_ID");
 
         dispatch(requestServerStatus());
-        const response = await fetchWithTimeout(dispatch, './get_status', {}, 10000);
-        const data = await response.json();        
+
+        let url = './get_status?IS_DESKTOP=TRUE'
+
+        if (isConcurrencyEnabled && clientId) {
+            let params = new URLSearchParams();     
+            params.append("MWI_CLIENT_ID",encodeURIComponent(clientId))
+
+            if (requestTransferSession){
+params.append("TRANSFER_SESSION",encodeURIComponent(requestTransferSession))
+            }
+
+            url = url + '&' + params.toString();   
+
+        }
+
+        const response = await fetchWithTimeout(dispatch, url, {}, 10000);
+        
+        const data = await response.json();
         dispatch(receiveServerStatus(data));
 
+        if (clientId == null && data["clientId"]) {
+            sessionStorage.setItem("MWI_CLIENT_ID", data["clientId"]);
+            dispatch(setClientId(data["clientId"]));
+        }
+        if ("isActiveClient" in data) { 
+            dispatch(receiveSessionStatus(data))
+            if (data["isActiveClient"] === true) {
+                dispatch(wasEverActive())
+            }
+        }
     }
 }
 

gui/src/actions/index.js

@@ -1,8 +1,9 @@
-// Copyright (c) 2020-2023 The MathWorks, Inc.
+// Copyright 2020-2024 The MathWorks, Inc.
 
 export const SET_TRIGGER_POSITION = 'SET_TRIGGER_POSITION';
 export const SET_TUTORIAL_HIDDEN = 'SET_TUTORIAL_HIDDEN';
 export const SET_OVERLAY_VISIBILITY = 'SET_OVERLAY_VISIBILITY';
+export const SET_CLIENT_ID = 'SET_CLIENT_ID';
 export const REQUEST_SERVER_STATUS = 'REQUEST_SERVER_STATUS';
 export const RECEIVE_SERVER_STATUS = 'RECEIVE_SERVER_STATUS';
 export const REQUEST_SET_LICENSING = 'REQUEST_SET_LICENSING';
@@ -18,5 +19,10 @@ export const RECEIVE_START_MATLAB = 'RECEIVE_START_MATLAB';
 export const RECEIVE_ERROR = 'RECEIVE_ERROR';
 export const REQUEST_ENV_CONFIG = 'REQUEST_ENV_CONFIG';
 export const RECEIVE_ENV_CONFIG = 'RECEIVE_ENV_CONFIG';
+export const RECEIVE_CONCURRENCY_CHECK = 'RECEIVE_CONCURRENCY_CHECK';
 export const SET_AUTH_STATUS = 'SET_AUTH_STATUS';
 export const SET_AUTH_TOKEN = 'SET_AUTH_TOKEN';
+export const REQUEST_SERVER_INITIALIZATION = 'REQUEST_SERVER_INITIALIZATION';
+export const RECEIVE_SESSION_STATUS = 'RECEIVE_SESSION_STATUS';
+export const WAS_EVER_ACTIVE = 'WAS_EVER_ACTIVE';
+export const REQUEST_SESSION_STATUS = 'REQUEST_SESSION_STATUS';

gui/src/components/App/index.js

@@ -1,4 +1,4 @@
-// Copyright 2020-2023 The MathWorks, Inc.
+// Copyright 2020-2024 The MathWorks, Inc.
 
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
@@ -30,6 +30,9 @@ import {
     selectLicensingInfo,
     selectUseMOS,
     selectUseMRE,
+    selectIsConcurrent,
+    selectWasEverActive,
+    selectIsConcurrencyEnabled,
 } from "../../selectors";
 
 import {
@@ -55,11 +58,14 @@ function App() {
     const error = useSelector(selectError);
     const loadUrl = useSelector(selectLoadUrl);
     const isConnectionError = useSelector(selectIsConnectionError);
-    const isAuthenticated = useSelector(selectIsAuthenticated)
+    const isAuthenticated = useSelector(selectIsAuthenticated);
     const authEnabled = useSelector(selectAuthEnabled);
     const licensingInfo = useSelector(selectLicensingInfo);
     const useMOS = useSelector(selectUseMOS);
     const useMRE = useSelector(selectUseMRE);
+    const isSessionConcurrent = useSelector(selectIsConcurrent);
+    const isConcurrencyEnabled = useSelector(selectIsConcurrencyEnabled);
+    const wasEverActive = useSelector(selectWasEverActive);
 
     const baseUrl = useMemo(() => {
         const url = document.URL
@@ -92,7 +98,10 @@ function App() {
     );
 
     const [dialogModel, setDialogModel] = useState(null);
+    const [isTerminated, setIsTerminated] = useState(false);
 
+    // sessionDialog stores the state of concurrent session based on which either matlab gets rendered or the concurrent session dialog gets rendered 
+    let sessionDialog = null;
     let dialog;
     if (dialogModel) {
         const closeHandler = () => setDialogModel(null);
@@ -135,6 +144,35 @@ function App() {
         );
     } else if (error && error.type === "MatlabInstallError") {
         dialog = <Error message={error.message} />;
+    } 
+    // check the user authentication before giving them the option to transfer the session.
+    else if ((!authEnabled || isAuthenticated) && isSessionConcurrent && isConcurrencyEnabled) {
+        // Transfer the session to this tab 
+        // setting the query parameter of requestTransferSession to true
+        const transferSessionOnClick= () => {
+            dispatch(fetchServerStatus(true));
+            sessionDialog=null;
+        }
+        const endSession = () => {
+            setIsTerminated(true);
+        }
+        if(isTerminated) {
+            sessionDialog = <Error message="Your session has been terminated. Refresh the page to restart the session." />;
+        }
+        else {
+            sessionDialog = (
+                <Confirmation
+                    confirm={transferSessionOnClick}
+                    cancel={endSession}
+                    title='MATLAB is currently open in another window'
+                    cancelButton={wasEverActive?('Cancel'):('Continue in existing window')}
+                    confirmButton = {wasEverActive?('Confirm'):('Continue in this window')}>
+                    {wasEverActive
+                        ? 'You have been disconnected because MATLAB is open in another window. Click on Confirm to continue using MATLAB here.'
+                        : <div>MATLAB is open in another window and cannot be opened in a second window or tab at the same time.<br></br>Would you like to continue in this window?</div> }
+                </Confirmation>
+            );
+        }
     }
 
     useEffect(() => {
@@ -147,11 +185,11 @@ function App() {
 
     useEffect(() => {
         // Initial fetch server status
-        if (!hasFetchedServerStatus) {
+        if (hasFetchedEnvConfig && !hasFetchedServerStatus) {
             dispatch(fetchServerStatus());
         }
 
-    }, [dispatch, hasFetchedServerStatus]);
+    }, [dispatch, hasFetchedServerStatus, hasFetchedEnvConfig]);
 
     // Periodic fetch server status
     useInterval(() => {
@@ -233,11 +271,22 @@ function App() {
     const overlayTrigger = overlayVisible ? null : <OverlayTrigger />;
 
     return (
-        <div data-testid="app" className="main">
-            {overlayTrigger}
-            {matlabJsd}
-            {overlay}
-        </div>
+        // If we use div instead of React.Fragment then the editor screen becomes white / doesn't fully render.
+        // Have noticed this behavior both in windows and Linux.
+        // If session dialog is not 'null' then render the transfer dialog or error dialog otherwise render the normal MATLAB.
+        <React.Fragment>
+            {sessionDialog?(
+                <Overlay>
+                    {sessionDialog}
+                </Overlay>
+            ):(
+                <div data-testid="app" className="main">
+                    {overlayTrigger}
+                    {matlabJsd}
+                    {overlay}
+                </div>
+            )}
+        </React.Fragment>
     );
 }
 

gui/src/components/Confirmation/index.js

@@ -1,9 +1,10 @@
-// Copyright (c) 2020-2022 The MathWorks, Inc.
+// Copyright 2020-2024 The MathWorks, Inc.
 
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function Confirmation({ confirm, cancel, children }) {
+// Made the Confirmation component more scalable where one can customize all the messages which are to be displayed.
+function Confirmation({ confirm, cancel, title = 'Confirmation', cancelButton = 'Cancel', confirmButton = 'Confirm', children }) {
     return (
         <div className="modal show"
             id="confirmation"
@@ -14,14 +15,14 @@ function Confirmation({ confirm, cancel, children }) {
                 role="document">
                 <div className="modal-content">
                     <div className="modal-header">
-                        <h4 className="modal-title" id="confirmation-dialog-title">Confirmation</h4>
+                        <h4 className="modal-title" id="confirmation-dialog-title">{title}</h4>
                     </div>
                     <div className="modal-body">
                         {children}
                     </div>
                     <div className="modal-footer">
-                        <button onClick={cancel} data-testid='cancelButton' className="btn companion_btn btn_color_blue">Cancel</button>
-                        <button onClick={confirm} data-testid='confirmButton' className="btn btn_color_blue">Confirm</button>
+                        <button onClick={cancel} data-testid='cancelButton' className="btn companion_btn btn_color_blue">{cancelButton}</button>
+                        <button onClick={confirm} data-testid='confirmButton' className="btn btn_color_blue">{confirmButton}</button>
                     </div>
                 </div>
             </div>