#RI-4567 - fix splash and tray

Author: egor-zalenski

configs/webpack.config.renderer.dev.ts

@@ -18,6 +18,7 @@ const skipDLLs =
   module.parent?.filename.includes('webpack.config.renderer.dev.dll') ||
   module.parent?.filename.includes('webpack.config.eslint');
 
+const htmlPagesNames = ['splash.ejs', 'index.ejs']
 /**
  * Warn if the DLL is not built
  */
@@ -233,19 +234,21 @@ const configuration: webpack.Configuration = {
 
     new MonacoWebpackPlugin({ languages: ['json'], features: ['!rename'] }),
 
-    new HtmlWebpackPlugin({
-      filename: path.join('index.html'),
-      template: path.join(webpackPaths.desktopPath, 'index.ejs'),
-      minify: {
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        removeComments: true,
-      },
-      isBrowser: false,
-      env: process.env.NODE_ENV,
-      isDevelopment: process.env.NODE_ENV !== 'production',
-      nodeModules: webpackPaths.appNodeModulesPath,
-    }),
+    ...htmlPagesNames.map((htmlPageName) => (
+      new HtmlWebpackPlugin({
+        filename: path.join(`${htmlPageName.split('.')?.[0]}.html`),
+        template: path.join(webpackPaths.desktopPath, htmlPageName),
+        minify: {
+          collapseWhitespace: true,
+          removeAttributeQuotes: true,
+          removeComments: true,
+        },
+        isBrowser: false,
+        env: process.env.NODE_ENV,
+        isDevelopment: process.env.NODE_ENV !== 'production',
+        nodeModules: webpackPaths.appNodeModulesPath,
+      })
+    )),
 
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development'),

configs/webpack.config.renderer.prod.ts

@@ -11,6 +11,8 @@ import { version } from '../redisinsight/package.json';
 
 DeleteSourceMaps();
 
+const htmlPagesNames = ['splash.ejs', 'index.ejs']
+
 const devtoolsConfig =
   process.env.DEBUG_PROD === 'true'
     ? {
@@ -187,12 +189,14 @@ const configuration: webpack.Configuration = {
       filename: 'style.css',
     }),
 
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: path.join(webpackPaths.desktopPath, 'index.ejs'),
-      isBrowser: false,
-      isDevelopment: false,
-    }),
+    ...htmlPagesNames.map((htmlPageName) => (
+      new HtmlWebpackPlugin({
+        filename: path.join(`${htmlPageName.split('.')?.[0]}.html`),
+        template: path.join(webpackPaths.desktopPath, htmlPageName),
+        isBrowser: false,
+        isDevelopment: false,
+      })
+    )),
 
     new webpack.DefinePlugin({
       'process.type': '"renderer"',

redisinsight/desktop/splash.html renamed to redisinsight/desktop/splash.ejs

@@ -20,7 +20,8 @@
       }
 
       .copyright {
-        color: #B5B6C0
+        color: #B5B6C0;
+        font-size: 11px;
       }
 
       .container {
@@ -79,11 +80,9 @@
   </div>
 
 <script>
-  const { ipcRenderer } = require('electron');
-
   const bootstrap = async () => {
 
-    const appVersion = await ipcRenderer.invoke('getAppVersion') || ''
+    const appVersion = await window.electron.ipcRenderer.invoke('getAppVersion') || ''
     const copyrightEl = document.getElementById('copyright') || null
 
     if (copyrightEl) {

redisinsight/desktop/src/config/index.ts

@@ -1,3 +1,6 @@
+import { app } from 'electron'
+import path from 'path'
+import { getAssetPath } from 'desktopSrc/utils'
 import pkg from '../../../package.json'
 import configInit from '../../config.json'
 
@@ -9,4 +12,10 @@ config.description = pkg.description
 config.version = pkg.version
 config.author = pkg.author
 
+config.icon = getAssetPath('icon.png')
+
+config.preloadPath = app.isPackaged
+  ? path.join(__dirname, 'preload.js')
+  : path.join(__dirname, '../../dll/preload.js')
+
 export default config

redisinsight/desktop/src/lib/tray-manager.ts

@@ -1,6 +1,7 @@
 import { BrowserWindow, Tray } from 'electron'
 import { electronStore } from 'desktopSrc/services'
 import { ElectronStorageItem } from 'uiSrc/electron/constants'
+// eslint-disable-next-line import/no-cycle
 import { TrayBuilder } from './tray'
 
 let tray: TrayBuilder

redisinsight/desktop/src/lib/tray.ts

@@ -9,10 +9,12 @@ export class TrayBuilder {
 
   constructor() {
     // eslint-disable-next-line operator-linebreak
-    const iconRelevantPath =
-      process.platform === 'darwin' ? '../resources/icon-tray-white.png' : '../resources/icon-tray-colored.png'
-    const iconPath = path.join(__dirname, iconRelevantPath)
-    const icon = nativeImage.createFromPath(iconPath)
+    const iconName = process.platform === 'darwin'
+      ? 'icon-tray-white.png'
+      : 'icon-tray-colored.png'
+    const iconPath = `${!app.isPackaged ? '../' : ''}../../../resources/`
+    const iconFullPath = path.join(__dirname, iconPath, iconName)
+    const icon = nativeImage.createFromPath(iconFullPath)
     const iconTray = icon.resize({ height: 16, width: 16 })
     iconTray.setTemplateImage(true)
 

redisinsight/desktop/src/window/newWindow.ts

@@ -1,12 +1,10 @@
 import contextMenu from 'electron-context-menu'
-import { BrowserWindow, app } from 'electron'
-import path from 'path'
+import { BrowserWindow } from 'electron'
 
 import config from 'desktopSrc/config'
 import { updateTray } from 'desktopSrc/lib'
 import { initWindowHandlers } from 'desktopSrc/handlers'
-import { getAssetPath, resolveHtmlPath } from 'desktopSrc/utils'
-import { TITLE_SPLASH } from './splashWindow'
+import { resolveHtmlPath } from 'desktopSrc/utils'
 
 export const windows = new Set<BrowserWindow>()
 export const getWindows = () => windows
@@ -16,7 +14,7 @@ export const createWindow = async (splash: BrowserWindow | null = null) => {
   let y
   const currentWindow = BrowserWindow.getFocusedWindow()
 
-  if (currentWindow && currentWindow?.getTitle() !== TITLE_SPLASH) {
+  if (currentWindow && currentWindow?.getTitle() !== config.splashWindow.title) {
     const [currentWindowX, currentWindowY] = currentWindow.getPosition()
     x = currentWindowX + 24
     y = currentWindowY + 24
@@ -25,10 +23,9 @@ export const createWindow = async (splash: BrowserWindow | null = null) => {
     ...config.mainWindow,
     x,
     y,
-    icon: getAssetPath('icon.png'),
     webPreferences: {
       ...config.mainWindow.webPreferences,
-      preload: app.isPackaged ? path.join(__dirname, 'preload.js') : path.join(__dirname, '../../dll/preload.js')
+      preload: config.preloadPath,
     }
   })
 

redisinsight/desktop/src/window/splashWindow.ts

@@ -1,13 +1,14 @@
 import { BrowserWindow } from 'electron'
-import { getAssetPath, resolveHtmlPath } from 'desktopSrc/utils'
+import { resolveHtmlPath } from 'desktopSrc/utils'
 import config from 'desktopSrc/config'
 
-export const TITLE_SPLASH = 'RedisInsight'
 export const createSplashScreen = async () => {
   const splash = new BrowserWindow({
     ...config.splashWindow,
-    title: TITLE_SPLASH,
-    icon: getAssetPath('icon.png')
+    webPreferences: {
+      ...config.splashWindow.webPreferences,
+      preload: config.preloadPath,
+    }
   })
 
   splash.loadURL(resolveHtmlPath('splash.html'))