Typescript (About app for Windows) (#611)

* Typescript - Complete about app screen for Windows

* Typescript - Fix unit test for about app component

* Typescript - Add safety checks for window validation

spec/__snapshots__/aboutApp.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`about app should render correctly 1`] = `
 >
   <img
     className="AboutApp-logo"
-    src="../assets/symphony-logo.png"
+    src="../renderer/assets/symphony-logo.png"
   />
   <span
     className="AboutApp-name"

src/app/app-menu.ts

@@ -1,4 +1,4 @@
-import { app, dialog, Menu, session, shell } from 'electron';
+import { app, dialog, Menu, MenuItemConstructorOptions, session, shell } from 'electron';
 
 import { isMac, isWindowsOS } from '../common/env';
 import { i18n, LocaleType } from '../common/i18n';
@@ -7,7 +7,7 @@ import { autoLaunchInstance as autoLaunch } from './auto-launch-controller';
 import { config, IConfig } from './config-handler';
 import { exportCrashDumps, exportLogs } from './reports-handler';
 import { updateAlwaysOnTop } from './window-actions';
-import { windowHandler } from './window-handler';
+import { ICustomBrowserWindow, windowHandler } from './window-handler';
 
 export const menuSections = {
     about: 'about',
@@ -204,10 +204,7 @@ export class AppMenu {
      * Builds menu items for window section
      */
     private buildWindowMenu(): Electron.MenuItemConstructorOptions {
-        return {
+        const submenu: MenuItemConstructorOptions[] = [
-            label: i18n.t('Window')(),
-            role: 'window',
-            submenu: [
             this.assignRoleOrLabel('minimize', i18n.t('Minimize')()),
             this.assignRoleOrLabel('close', i18n.t('Close')()),
             this.buildSeparator(),
@@ -278,7 +275,22 @@ export class AppMenu {
                 },
                 label: i18n.t('Clear cache and Reload')(),
             },
-            ],
+        ];
+
+        if (isWindowsOS) {
+            submenu.push({
+                label: i18n.t('About Symphony')(),
+                click(_menuItem, focusedWindow) {
+                    const windowName = focusedWindow ? (focusedWindow as ICustomBrowserWindow).winName : '';
+                    windowHandler.createAboutAppWindow(windowName);
+                },
+            });
+        }
+
+        return {
+            label: i18n.t('Window')(),
+            role: 'window',
+            submenu,
         };
     }
 

src/app/window-handler.ts

@@ -363,8 +363,28 @@ export class WindowHandler {
     /**
      * Creates a about app window
      */
-    public createAboutAppWindow(): void {
+    public createAboutAppWindow(windowName: string): void {
-        this.aboutAppWindow = createComponentWindow('about-app');
+
+        // This prevents creating multiple instances of the
+        // about window
+        if (this.aboutAppWindow && windowExists(this.aboutAppWindow)) {
+            if (this.aboutAppWindow.isMinimized()) {
+                this.aboutAppWindow.restore();
+            }
+            this.aboutAppWindow.focus();
+            return;
+        }
+
+        const allWindows = BrowserWindow.getAllWindows();
+        const selectedParentWindow = allWindows.find((window) => {
+            return (window as ICustomBrowserWindow).winName === windowName;
+        });
+
+        this.aboutAppWindow = createComponentWindow(
+            'about-app',
+            selectedParentWindow ? { parent: selectedParentWindow } : {},
+            );
+        this.aboutAppWindow.setVisibleOnAllWorkspaces(true);
         this.aboutAppWindow.webContents.once('did-finish-load', () => {
             if (!this.aboutAppWindow || !windowExists(this.aboutAppWindow)) {
                 return;

src/renderer/components/about-app.tsx

@@ -35,7 +35,7 @@ export default class AboutApp extends React.Component<{}, IState> {
         const copyright = `Copyright \xA9 ${new Date().getFullYear()} ${appName}`;
         return (
             <div className='AboutApp'>
-                <img className='AboutApp-logo' src='../assets/symphony-logo.png'/>
+                <img className='AboutApp-logo' src='../renderer/assets/symphony-logo.png'/>
                 <span className='AboutApp-name'>{appName}</span>
                 <span className='AboutApp-versionText'>{versionString}</span>
                 <span className='AboutApp-copyrightText'>{copyright}</span>