#RI-4567 - Refactoring main.dev.js

.eslintrc.js

@@ -1,17 +1,63 @@
 module.exports = {
   root: true,
+  env: {
+    node: true,
+  },
   extends: ['airbnb-typescript'],
   plugins: ['@typescript-eslint'],
   parser: '@typescript-eslint/parser',
   rules: {
-    'max-len': ['warn', 120],
+    semi: ['error', 'never'],
+    quotes: [2, 'single', { avoidEscape: true }],
+    'max-len': ['error', { ignoreComments: true, ignoreStrings: true, ignoreRegExpLiterals: true, code: 120 }],
     'class-methods-use-this': 'off',
     'import/no-extraneous-dependencies': 'off', // temporary disabled
+    '@typescript-eslint/semi': ['error', 'never'],
+    'object-curly-newline': 'off',
+    'import/prefer-default-export': 'off',
+    '@typescript-eslint/comma-dangle': 'off',
+    'implicit-arrow-linebreak': 'off',
+    'import/order': [
+      1,
+      {
+        groups: [
+          'external',
+          'builtin',
+          'internal',
+          'sibling',
+          'parent',
+          'index',
+        ],
+        pathGroups: [
+          {
+            pattern: 'desktopSrc/**',
+            group: 'internal',
+            position: 'after'
+          },
+          {
+            pattern: 'uiSrc/**',
+            group: 'internal',
+            position: 'after'
+          },
+          {
+            pattern: 'apiSrc/**',
+            group: 'internal',
+            position: 'after'
+          },
+        ],
+        warnOnUnassignedImports: true,
+        pathGroupsExcludedImportTypes: ['builtin']
+      },
+    ],
   },
   parserOptions: {
     project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    createDefaultProgram: true,
   },
   ignorePatterns: [
     'redisinsight/ui',
+    'redisinsight/api',
   ],
-};
+}

.gitignore

@@ -36,7 +36,6 @@ lerna-debug.log*
 .vscode
 
 # App packaged
-redisinsight/electron/preload.js
 release
 main.prod.js
 main.prod.js.map

configs/webpack.config.base.ts

@@ -35,11 +35,6 @@ const configuration: webpack.Configuration =  {
     extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.scss'],
     modules: [webpackPaths.apiPath, 'node_modules'],
     plugins: [new TsconfigPathsPlugins()],
-    alias: {
-      src: webpackPaths.apiSrcPath,
-      apiSrc: webpackPaths.apiSrcPath,
-      uiSrc: webpackPaths.uiSrcPath,
-    },
   },
 
   plugins: [

configs/webpack.config.main.prod.ts

@@ -1,6 +1,7 @@
 import path from 'path';
 import webpack from 'webpack';
 import { merge } from 'webpack-merge';
+import { toString } from 'lodash';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import baseConfig from './webpack.config.base';
 import DeleteSourceMaps from '../scripts/DeleteSourceMaps';
@@ -24,16 +25,8 @@ export default merge(baseConfig, {
   target: 'electron-main',
 
   entry: {
-    main: path.join(webpackPaths.electronPath, 'main.dev.ts'),
-    preload: path.join(webpackPaths.electronPath, 'preload.ts'),
-  },
-
-  resolve: {
-    alias: {
-      ['apiSrc']: webpackPaths.apiSrcPath,
-      ['src']: webpackPaths.apiSrcPath,
-    },
-    extensions: ['.tsx', '.ts', '.js', '.jsx'],
+    main: path.join(webpackPaths.desktopPath, 'index.ts'),
+    preload: path.join(webpackPaths.desktopPath, 'preload.ts'),
   },
 
   output: {
@@ -73,6 +66,9 @@ export default merge(baseConfig, {
       APP_VERSION: version,
       AWS_BUCKET_NAME: 'AWS_BUCKET_NAME' in process.env ? process.env.AWS_BUCKET_NAME : '',
       SEGMENT_WRITE_KEY: 'SEGMENT_WRITE_KEY' in process.env ? process.env.SEGMENT_WRITE_KEY : 'SOURCE_WRITE_KEY',
+      CONNECTIONS_TIMEOUT_DEFAULT: 'CONNECTIONS_TIMEOUT_DEFAULT' in process.env
+        ? process.env.CONNECTIONS_TIMEOUT_DEFAULT
+        : toString(30 * 1000), // 30 sec
     }),
 
     new webpack.DefinePlugin({

configs/webpack.config.main.stage.ts

@@ -1,5 +1,6 @@
 import webpack from 'webpack';
 import { merge } from 'webpack-merge';
+import { toString } from 'lodash';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import mainProdConfig from './webpack.config.main.prod';
 import DeleteSourceMaps from '../scripts/DeleteSourceMaps';
@@ -30,6 +31,9 @@ export default merge(mainProdConfig, {
       APP_VERSION: version,
       AWS_BUCKET_NAME: 'AWS_BUCKET_NAME' in process.env ? process.env.AWS_BUCKET_NAME : '',
       SEGMENT_WRITE_KEY: 'SEGMENT_WRITE_KEY' in process.env ? process.env.SEGMENT_WRITE_KEY : 'SOURCE_WRITE_KEY',
+      CONNECTIONS_TIMEOUT_DEFAULT: 'CONNECTIONS_TIMEOUT_DEFAULT' in process.env
+        ? process.env.CONNECTIONS_TIMEOUT_DEFAULT
+        : toString(30 * 1000), // 30 sec
     }),
   ],
 });

configs/webpack.config.preload.dev.ts

@@ -12,7 +12,7 @@ const configuration: webpack.Configuration = {
 
   target: 'electron-preload',
 
-  entry: path.join(webpackPaths.electronPath, 'preload.ts'),
+  entry: path.join(webpackPaths.desktopPath, 'preload.ts'),
 
   output: {
     path: webpackPaths.dllPath,

configs/webpack.config.renderer.dev.dll.ts

@@ -54,7 +54,7 @@ export default merge(baseConfig, {
     new webpack.LoaderOptionsPlugin({
       debug: true,
       options: {
-        context: webpackPaths.electronPath,
+        context: webpackPaths.desktopPath,
         output: {
           path: webpackPaths.dllPath,
         },

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
  */
@@ -51,22 +52,14 @@ const configuration: webpack.Configuration = {
   ],
 
   output: {
-    path: webpackPaths.electronPath,
+    path: webpackPaths.desktopPath,
     publicPath: '/',
     filename: 'renderer.dev.js',
     library: {
       type: 'umd',
     },
   },
 
-  resolve: {
-    alias: {
-      src: webpackPaths.apiSrcPath,
-      apiSrc: webpackPaths.apiSrcPath,
-      uiSrc: webpackPaths.uiSrcPath,
-    },
-  },
-
   module: {
     rules: [
       {
@@ -241,19 +234,21 @@ const configuration: webpack.Configuration = {
 
     new MonacoWebpackPlugin({ languages: ['json'], features: ['!rename'] }),
 
-    new HtmlWebpackPlugin({
-      filename: path.join('index.html'),
-      template: path.join(webpackPaths.electronPath, '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.electronPath, '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"',

configs/webpack.config.web.common.ts

@@ -6,6 +6,7 @@ import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+import webpackPaths from './webpack.paths';
 import { dependencies as externals } from '../redisinsight/package.json';
 import { dependencies as externalsApi } from '../redisinsight/api/package.json';
 
@@ -18,12 +19,11 @@ export default {
     rules: [
       {
         test: /\.(js|jsx|ts|tsx)?$/,
-        // exclude: /node_modules/,
-        include: [path.resolve(__dirname, '../redisinsight/ui')],
+        include: [webpackPaths.uiPath],
         exclude: [
           /node_modules/,
-          path.resolve(__dirname, '../redisinsight/api'),
-          path.resolve(__dirname, '../redisinsight/electron'),
+          webpackPaths.apiPath,
+          webpackPaths.desktopPath,
         ],
         use: {
           loader: 'babel-loader',
@@ -44,8 +44,7 @@ export default {
     ],
   },
 
-  // context: path.resolve(__dirname, '../redisinsight/api/src'),
-  context: path.resolve(__dirname, '../redisinsight/ui'),
+  context: webpackPaths.uiPath,
 
   /**
    * Determine the array of extensions that should be used to resolve modules.
@@ -66,7 +65,7 @@ export default {
 
   plugins: [
     new webpack.DefinePlugin({
-      'window.ENV_VARS.API_PORT': JSON.stringify('5000'),
+      'window.app.config.apiPort': JSON.stringify('5000'),
     }),
 
     new HtmlWebpackPlugin({ template: 'index.html.ejs' }),

configs/webpack.paths.ts

@@ -8,10 +8,10 @@ const apiPath = path.join(riPath, 'api');
 const uiPath = path.join(riPath, 'ui');
 const apiSrcPath = path.join(apiPath, 'src');
 const uiSrcPath = path.join(uiPath, 'src');
-const electronPath = path.join(riPath, 'electron');
-const srcMainPath = path.join(electronPath, 'main');
+const desktopPath = path.join(riPath, 'desktop');
+const desktopSrcPath = path.join(desktopPath, 'src');
 
-const dllPath = path.join(electronPath, 'dll');
+const dllPath = path.join(desktopPath, 'dll');
 
 const releasePath = path.join(rootPath, 'release');
 const appPackagePath = path.join(riPath, 'package.json');
@@ -32,9 +32,9 @@ export default {
   riPath,
   apiSrcPath,
   uiSrcPath,
-  srcMainPath,
   releasePath,
-  electronPath,
+  desktopPath,
+  desktopSrcPath,
   appPackagePath,
   appNodeModulesPath,
   srcNodeModulesPath,

package.json

@@ -37,7 +37,7 @@
     "start": "ts-node ./scripts/check-port-in-use.js && yarn start:renderer",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./configs/webpack.config.renderer.dev.ts",
     "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./configs/webpack.config.preload.dev.ts",
-    "start:main": "cross-env NODE_ENV=development electron -r ./scripts/BabelRegister redisinsight/electron/main.dev.ts",
+    "start:main": "cross-env NODE_ENV=development electron -r ./scripts/BabelRegister -r tsconfig-paths/register redisinsight/desktop/index.ts",
     "start:web": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./configs/webpack.config.web.dev.ts",
     "start:web:public": "cross-env PUBLIC_DEV=true NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./configs/webpack.config.web.dev.ts",
     "test": "jest ./redisinsight/ui -w 1",

redisinsight/desktop/app.ts

@@ -0,0 +1,53 @@
+/* eslint global-require: off, no-console: off */
+import { app, nativeTheme } from 'electron'
+
+import {
+  initElectronHandlers,
+  initLogging,
+  WindowType,
+  windowFactory,
+  AboutPanelOptions,
+  checkForUpdate,
+  installExtensions,
+  initTray,
+  initAutoUpdaterHandlers,
+  launchApiServer
+} from 'desktopSrc/lib'
+import { wrapErrorMessageSensitiveData } from 'desktopSrc/utils'
+import { configMain as config } from 'desktopSrc/config'
+
+if (!config.isProduction) {
+  const sourceMapSupport = require('source-map-support')
+  sourceMapSupport.install()
+}
+
+const init = async () => {
+  await launchApiServer()
+  initLogging()
+  initElectronHandlers()
+  initAutoUpdaterHandlers()
+  initTray()
+
+  nativeTheme.themeSource = config.themeSource
+
+  checkForUpdate(process.env.MANUAL_UPGRADES_LINK || process.env.UPGRADES_LINK)
+
+  app.setName(config.name)
+  app.setAppUserModelId(config.name)
+  if (process.platform !== 'darwin') {
+    app.setAboutPanelOptions(AboutPanelOptions)
+  }
+
+  await installExtensions()
+
+  try {
+    await app.whenReady()
+    const splashWindow = await windowFactory(WindowType.Splash)
+    await windowFactory(WindowType.Main, splashWindow)
+  } catch (_err) {
+    const error = _err as Error
+    console.log(wrapErrorMessageSensitiveData(error))
+  }
+}
+
+export default init