feat: Add application menus

electron/main.ts

@@ -11,6 +11,7 @@ import {hideBin} from 'yargs/helpers';
 import {checkMissingDependencies} from '../src/utils/index';
 import {APP_MIN_HEIGHT, APP_MIN_WIDTH} from '../src/constants/constants';
 import terminal from '../cli/terminal';
+import {createMenu} from './menu';
 
 Object.assign(console, ElectronLog.functions);
 
@@ -40,7 +41,7 @@ ipcMain.on('run-kustomize', (event, folder: string) => {
     });
 
     event.sender.send('kustomize-result', {stdout: stdout.toString()});
-  } catch (e) {
+  } catch (e: any) {
     event.sender.send('kustomize-result', {error: e.toString()});
   }
 });
@@ -68,7 +69,7 @@ ipcMain.on('run-helm', (event, args: any) => {
     });
 
     event.sender.send('helm-result', {stdout: stdout.toString()});
-  } catch (e) {
+  } catch (e: any) {
     event.sender.send('helm-result', {error: e.toString()});
   }
 });
@@ -153,6 +154,8 @@ const openApplication = async (givenPath?: string) => {
   ElectronStore.initRenderer();
   const win = createWindow();
 
+  createMenu(win);
+
   const missingDependecies = checkMissingDependencies(APP_DEPENDENCIES);
 
   if (missingDependecies.length > 0) {

electron/menu.ts

@@ -0,0 +1,155 @@
+import {BrowserWindow, Menu, MenuItemConstructorOptions, shell} from 'electron';
+
+const isMac = process.platform === 'darwin';
+
+const appMenu = (win: BrowserWindow): MenuItemConstructorOptions => {
+  return {
+    label: 'Monokle',
+    submenu: [
+      {
+        label: 'About Monokle',
+        click: async () => {
+          win.webContents.send('show-launch-dialog');
+        },
+      },
+      {
+        label: 'Check for Update',
+        click: async () => {
+          console.log('Check for update');
+        },
+      },
+      {type: 'separator'},
+      {label: 'Hide Monokle', role: 'hide'},
+      {role: 'hideOthers'},
+      {role: 'unhide'},
+      {type: 'separator'},
+      {label: 'Quit Monokle', role: 'quit'},
+    ],
+  };
+};
+
+const fileMenu = (win: BrowserWindow): MenuItemConstructorOptions => {
+  return {
+    label: 'File',
+    submenu: [
+      {
+        label: 'Browse Folder',
+        click: async () => {
+          console.log('Browse folder');
+        },
+      },
+      {
+        label: 'Refresh Folder',
+        click: async () => {
+          console.log('Refresh folder');
+        },
+      },
+      {type: 'separator'},
+      {
+        label: 'Recent Folders',
+        click: async () => {
+          console.log('Refresh folder');
+        },
+      },
+      {type: 'separator'},
+      {
+        label: 'New Resource',
+        click: async () => {
+          console.log('Refresh folder');
+        },
+      },
+      {type: 'separator'},
+      {label: 'Exit Preview'},
+    ],
+  };
+};
+
+const editMenu = (win: BrowserWindow): MenuItemConstructorOptions => {
+  return {
+    label: 'Edit',
+    submenu: [
+      {role: 'undo'},
+      {role: 'redo'},
+      {type: 'separator'},
+      {role: 'cut'},
+      {role: 'copy'},
+      {role: 'paste'},
+      {type: 'separator'},
+      {label: 'Find'},
+      {label: 'Replace'},
+      {type: 'separator'},
+      {label: 'Apply'},
+      {label: 'Diff'},
+    ],
+  };
+};
+
+const viewMenu = (win: BrowserWindow): MenuItemConstructorOptions => {
+  return {
+    label: 'View',
+    submenu: [
+      {
+        label: 'Previous Resource',
+        accelerator: 'alt+left',
+        click: () => {
+          win.webContents.send('select-from-history', {direction: 'left'});
+        },
+      },
+      {
+        label: 'Next Resource',
+        accelerator: 'alt+right',
+        click: () => {
+          win.webContents.send('select-from-history', {direction: 'right'});
+        },
+      },
+      {type: 'separator'},
+      {label: 'Toggle Navigator'},
+      {type: 'separator'},
+    ],
+  };
+};
+
+const windowMenu = (win: BrowserWindow): MenuItemConstructorOptions => {
+  return {
+    label: 'Window',
+    submenu: [
+      {role: 'minimize'},
+      {role: 'zoom'},
+      {type: 'separator'},
+      {role: 'front'},
+      {type: 'separator'},
+      {role: 'window'},
+    ],
+  };
+};
+
+const helpMenu = (win: BrowserWindow): MenuItemConstructorOptions => {
+  return {
+    label: 'Help',
+    submenu: [
+      {
+        label: 'Documentation',
+        click: async () => {
+          await shell.openExternal('https://kubeshop.github.io/monokle/');
+        },
+      },
+      {type: 'separator'},
+      {
+        label: 'Github',
+        click: async () => {
+          await shell.openExternal('https://github.com/kubeshop/monokle');
+        },
+      },
+    ],
+  };
+};
+
+export const createMenu = (win: BrowserWindow) => {
+  const template: any[] = [fileMenu(win), editMenu(win), viewMenu(win), windowMenu(win), helpMenu(win)];
+
+  if (isMac) {
+    template.unshift(appMenu(win));
+  }
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+};

src/App.tsx

@@ -15,9 +15,10 @@ import {
 import {Size} from '@models/window';
 import {useWindowSize} from '@utils/hooks';
 import {useAppDispatch} from '@redux/hooks';
-import {initKubeconfig} from '@redux/reducers/appConfig';
+import {initKubeconfig, updateStartupModalVisible} from '@redux/reducers/appConfig';
 import {ipcRenderer} from 'electron';
 import {setAlert} from '@redux/reducers/alert';
+import {selectFromHistory} from '@redux/thunks/selectionHistory';
 import {AlertEnum, AlertType} from '@models/alert';
 
 import AppContext from './AppContext';
@@ -42,6 +43,14 @@ const App = () => {
     dispatch(setAlert(alert));
   });
 
+  ipcRenderer.on('show-launch-dialog', () => {
+    dispatch(updateStartupModalVisible(true));
+  });
+
+  ipcRenderer.on('select-from-history', (_, {direction}) => {
+    dispatch(selectFromHistory({direction}));
+  });
+
   return (
     <AppContext.Provider value={{windowSize: size}}>
       <div style={{overflowY: 'hidden'}}>