Merge pull request #2111 from headlamp-k8s/fix-error-boundary-link

Fix error boundary Page link
headlamp-k8s · Jul 18, 2024 · 21c8d95 · 21c8d95
2 parents ec01bb9 + 61040b2
commit 21c8d95
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 33 deletions.
diff --git a/app/electron/main.ts b/app/electron/main.ts
@@ -20,6 +20,7 @@ import fs from 'fs';
 import { spawnSync } from 'node:child_process';
 import { userInfo } from 'node:os';
 import open from 'open';
+import { platform } from 'os';
 import path from 'path';
 import url from 'url';
 import yargs from 'yargs';
@@ -32,6 +33,33 @@ dotenv.config({ path: path.join(process.resourcesPath, '.env') });
 const pathInfoDebug = false;
 let pathInfo;
 
+const isDev = process.env.ELECTRON_DEV || false;
+let frontendPath = '';
+
+if (isDev) {
+  frontendPath = path.resolve('..', 'frontend', 'build', 'index.html');
+} else {
+  frontendPath = path.join(process.resourcesPath, 'frontend', 'index.html');
+}
+const backendToken = randomBytes(32).toString('hex');
+
+const startUrl = (
+  process.env.ELECTRON_START_URL ||
+  url.format({
+    pathname: frontendPath,
+    protocol: 'file:',
+    slashes: true,
+    query: {
+      backendToken: backendToken,
+    },
+  })
+)
+  // Windows paths use backslashes and for consistency we want to use forward slashes.
+  // For example: when application triggers refresh it requests a URL with forward slashes and
+  // we use startUrl to determine if it's an internal or external URL. So it's easier to
+  // convert everything to forward slashes.
+  .replace(/\\/g, '/');
+
 /**
  * On MacOS apps do not get the same environment variables as the terminal.
  *
@@ -97,9 +125,7 @@ const args = yargs
 const isHeadlessMode = args.headless;
 let disableGPU = args['disable-gpu'];
 const defaultPort = 4466;
-const backendToken = randomBytes(32).toString('hex');
 
-const isDev = process.env.ELECTRON_DEV || false;
 const useExternalServer = process.env.EXTERNAL_SERVER || false;
 const shouldCheckForUpdates = process.env.HEADLAMP_CHECK_FOR_UPDATES !== 'false';
 const manifestDir = isDev ? path.resolve('./') : process.resourcesPath;
@@ -515,6 +541,17 @@ function quitServerProcess() {
   serverProcess = null;
 }
 
+function getAcceleratorForPlatform(navigation: 'left' | 'right') {
+  switch (platform()) {
+    case 'darwin':
+      return navigation === 'right' ? 'Cmd+]' : 'Cmd+[';
+    case 'win32':
+      return navigation === 'right' ? 'Alt+Right' : 'Alt+Left';
+    default:
+      return navigation === 'right' ? 'Alt+Right' : 'Alt+Left';
+  }
+}
+
 function getDefaultAppMenu(): AppMenu[] {
   const isMac = process.platform === 'darwin';
 
@@ -646,11 +683,6 @@ function getDefaultAppMenu(): AppMenu[] {
       label: i18n.t('View'),
       id: 'original-view',
       submenu: [
-        {
-          label: i18n.t('Reload'),
-          role: 'forcereload',
-          id: 'original-force-reload',
-        },
         {
           label: i18n.t('Toggle Developer Tools'),
           role: 'toggledevtools',
@@ -680,6 +712,46 @@ function getDefaultAppMenu(): AppMenu[] {
         },
       ],
     },
+    {
+      label: i18n.t('Navigate'),
+      id: 'original-navigate',
+      submenu: [
+        {
+          label: i18n.t('Reload'),
+          role: 'forcereload',
+          id: 'original-force-reload',
+        },
+        sep,
+        {
+          label: i18n.t('Go to Home'),
+          role: 'homescreen',
+          id: 'original-home-screen',
+          click: () => {
+            mainWindow?.loadURL(startUrl);
+          },
+        },
+        {
+          label: i18n.t('Go Back'),
+          role: 'back',
+          id: 'original-back',
+          accelerator: getAcceleratorForPlatform('left'),
+          enabled: false,
+          click: () => {
+            mainWindow?.webContents.goBack();
+          },
+        },
+        {
+          label: i18n.t('Go Forward'),
+          role: 'forward',
+          id: 'original-forward',
+          accelerator: getAcceleratorForPlatform('right'),
+          enabled: false,
+          click: () => {
+            mainWindow?.webContents.goForward();
+          },
+        },
+      ],
+    },
     {
       label: i18n.t('Window'),
       id: 'original-window',
@@ -881,30 +953,6 @@ function startElecron() {
   console.log('Check for updates: ', shouldCheckForUpdates);
 
   async function createWindow() {
-    let frontendPath = '';
-    if (isDev) {
-      frontendPath = path.resolve('..', 'frontend', 'build', 'index.html');
-    } else {
-      frontendPath = path.join(process.resourcesPath, 'frontend', 'index.html');
-    }
-
-    const startUrl = (
-      process.env.ELECTRON_START_URL ||
-      url.format({
-        pathname: frontendPath,
-        protocol: 'file:',
-        slashes: true,
-        query: {
-          backendToken: backendToken,
-        },
-      })
-    )
-      // Windows paths use backslashes and for consistency we want to use forward slashes.
-      // For example: when application triggers refresh it requests a URL with forward slashes and
-      // we use startUrl to determine if it's an internal or external URL. So it's easier to
-      // convert everything to forward slashes.
-      .replace(/\\/g, '/');
-
     // WSL has a problem with full size window placement, so make it smaller.
     const withMargin = isWSL();
     const { width, height } = windowSize(screen.getPrimaryDisplay().workAreaSize, withMargin);
@@ -931,6 +979,19 @@ function startElecron() {
       return { action: 'deny' };
     });
 
+    mainWindow.webContents.on('did-start-navigation', () => {
+      const navigateMenu = Menu.getApplicationMenu()?.getMenuItemById('original-navigate')?.submenu;
+      const goBackMenu = navigateMenu?.getMenuItemById('original-back');
+      if (!!goBackMenu) {
+        goBackMenu.enabled = mainWindow?.webContents.canGoBack() || false;
+      }
+
+      const goForwardMenu = navigateMenu?.getMenuItemById('original-forward');
+      if (!!goForwardMenu) {
+        goForwardMenu.enabled = mainWindow?.webContents.canGoForward() || false;
+      }
+    });
+
     mainWindow.webContents.on('dom-ready', () => {
       mainWindow?.webContents.send('currentMenu', getDefaultAppMenu());
     });

diff --git a/frontend/src/components/App/Layout.tsx b/frontend/src/components/App/Layout.tsx
@@ -47,7 +47,7 @@ function ClusterNotFoundPopup() {
       alignItems="center"
     >
       <Box p={0.5}>{t(`Something went wrong with cluster {{ cluster }}`, { cluster })}</Box>
-      <Button variant="contained" size="small" href="/">
+      <Button variant="contained" size="small" href={window.desktopApi ? '#' : '/'}>
         {t('Choose another cluster')}
       </Button>
     </Box>

diff --git a/frontend/src/components/common/ErrorPage/ErrorPage.tsx b/frontend/src/components/common/ErrorPage/ErrorPage.tsx
@@ -53,7 +53,7 @@ export default function ErrorComponent(props: ErrorComponentProps) {
               message
             ) : (
               <Trans t={t}>
-                Head back <Link href="/">home</Link>.
+                Head back <Link href={window.desktopApi ? '#' : '/'}>home</Link>.
               </Trans>
             )}
           </Typography>