Desktop App Navigation Fixes (#1212)

* Saving last visited workspace ID

* WIP

* WIP

* Navigation fixes

* WIP:

* Fix for desktop app navigation

* Fix destructuring

* Removed debug logs

* Used a methor method name

* nit fix

Co-authored-by: Jesús Espino <jespinog@gmail.com>

webapp/src/app.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 import React, {useEffect} from 'react'
 import {
-    BrowserRouter as Router,
+    Router,
     Redirect,
     Route,
     Switch,
@@ -12,6 +12,8 @@ import {DndProvider} from 'react-dnd'
 import {HTML5Backend} from 'react-dnd-html5-backend'
 import {TouchBackend} from 'react-dnd-touch-backend'
 
+import {createBrowserHistory} from 'history'
+
 import TelemetryClient from './telemetry/telemetryClient'
 
 import {getMessages} from './i18n'
@@ -31,6 +33,42 @@ import {useAppSelector, useAppDispatch} from './store/hooks'
 
 import {IUser} from './user'
 
+export const history = createBrowserHistory({basename: Utils.getFrontendBaseURL()})
+
+if (Utils.isDesktop() && Utils.isFocalboardPlugin()) {
+    window.addEventListener('message', (event: MessageEvent) => {
+        if (event.origin !== window.location.origin) {
+            return
+        }
+
+        const pathName = event.data.message.pathName
+        if (!pathName) {
+            return
+        }
+
+        history.replace(pathName.replace((window as any).frontendBaseURL, ''))
+    })
+}
+
+const browserHistory = {
+    ...history,
+    push: (path: string, ...args: any[]) => {
+        if (Utils.isDesktop() && Utils.isFocalboardPlugin()) {
+            window.postMessage(
+                {
+                    type: 'browser-history-push',
+                    message: {
+                        path: `${(window as any).frontendBaseURL}${path}`,
+                    },
+                },
+                window.location.origin,
+            )
+        } else {
+            history.push(path, ...args)
+        }
+    },
+}
+
 const App = React.memo((): JSX.Element => {
     const language = useAppSelector<string>(getLanguage)
     const loggedIn = useAppSelector<boolean|null>(getLoggedIn)
@@ -69,7 +107,9 @@ const App = React.memo((): JSX.Element => {
         >
             <DndProvider backend={Utils.isMobile() ? TouchBackend : HTML5Backend}>
                 <FlashMessages milliseconds={2000}/>
-                <Router basename={Utils.getFrontendBaseURL()}>
+                <Router
+                    history={browserHistory}
+                >
                     <div id='frame'>
                         <div id='main'>
                             <Switch>

webapp/src/components/workspaceSwitcher/workspaceSwitcher.tsx

@@ -3,7 +3,7 @@
 import React, {useState} from 'react'
 
 import './workspaceSwitcher.scss'
-import {generatePath, useHistory, useRouteMatch} from 'react-router-dom'
+import {useHistory} from 'react-router-dom'
 
 import {IWorkspace} from '../../blocks/workspace'
 import ChevronDown from '../../widgets/icons/chevronDown'
@@ -18,7 +18,6 @@ type Props = {
 
 const WorkspaceSwitcher = (props: Props): JSX.Element => {
     const history = useHistory()
-    const match = useRouteMatch()
 
     const [showMenu, setShowMenu] = useState<boolean>(false)
 
@@ -48,10 +47,8 @@ const WorkspaceSwitcher = (props: Props): JSX.Element => {
 
                         if (workspaceId === DashboardOption.value) {
                             newPath = '/dashboard'
-                        } else if (props.activeWorkspace === undefined) {
-                            newPath = `/workspace/${workspaceId}`
                         } else {
-                            newPath = generatePath(match.path, {workspaceId})
+                            newPath = `/workspace/${workspaceId}`
                         }
 
                         UserSettings.lastWorkspaceId = workspaceId

webapp/src/pages/boardPage.tsx

@@ -51,7 +51,6 @@ const BoardPage = (props: Props) => {
     useEffect(() => {
         workspaceId = match.params.workspaceId || workspaceId
         UserSettings.lastWorkspaceId = workspaceId
-
         octoClient.workspaceId = workspaceId
     }, [match.params.workspaceId])
 
@@ -88,7 +87,6 @@ const BoardPage = (props: Props) => {
         }
 
         // Backward compatibility end
-
         const boardId = match.params.boardId
         const viewId = match.params.viewId
 

webapp/src/utils.ts

@@ -442,6 +442,59 @@ class Utils {
             return block
         }
     }
+
+    static userAgent(): string {
+        return window.navigator.userAgent
+    }
+
+    static isDesktopApp(): boolean {
+        return Utils.userAgent().indexOf('Mattermost') !== -1 && Utils.userAgent().indexOf('Electron') !== -1
+    }
+
+    static getDesktopVersion(): string {
+        // use if the value window.desktop.version is not set yet
+        const regex = /Mattermost\/(\d+\.\d+\.\d+)/gm
+        const match = regex.exec(window.navigator.appVersion)?.[1] || ''
+        return match
+    }
+
+    /**
+     * Boolean function to check if a version is greater than another.
+     *
+     * currentVersionParam: The version being checked
+     * compareVersionParam: The version to compare the former version against
+     *
+     * eg.  currentVersionParam = 4.16.0, compareVersionParam = 4.17.0 returns false
+     *      currentVersionParam = 4.16.1, compareVersionParam = 4.16.1 returns true
+     */
+    static isVersionGreaterThanOrEqualTo(currentVersionParam: string, compareVersionParam: string): boolean {
+        if (currentVersionParam === compareVersionParam) {
+            return true
+        }
+
+        // We only care about the numbers
+        const currentVersionNumber = (currentVersionParam || '').split('.').filter((x) => (/^[0-9]+$/).exec(x) !== null)
+        const compareVersionNumber = (compareVersionParam || '').split('.').filter((x) => (/^[0-9]+$/).exec(x) !== null)
+
+        for (let i = 0; i < Math.max(currentVersionNumber.length, compareVersionNumber.length); i++) {
+            const currentVersion = parseInt(currentVersionNumber[i], 10) || 0
+            const compareVersion = parseInt(compareVersionNumber[i], 10) || 0
+            if (currentVersion > compareVersion) {
+                return true
+            }
+
+            if (currentVersion < compareVersion) {
+                return false
+            }
+        }
+
+        // If all components are equal, then return true
+        return true
+    }
+
+    static isDesktop(): boolean {
+        return Utils.isDesktopApp() && Utils.isVersionGreaterThanOrEqualTo(Utils.getDesktopVersion(), '5.0.0')
+    }
 }
 
 export {Utils}