chore: refactor

.github/labeler.yml

@@ -24,4 +24,4 @@ labels:
 
   - label: 'i18n'
     matcher:
-      files: ['assets/locales/**']
+      files: ['app/renderer/src/assets/locales/**']

.github/workflows/crowdin-update-resources.yml

@@ -1,12 +1,12 @@
-# Updates Crowdin with any changes in the English translation file (/assets/locales/en/translation.json)
+# Updates Crowdin with any changes in the English translation file (/app/renderer/src/assets/locales/en/translation.json)
 
 name: Update Crowdin English Resources
 
 on:
   push:
     branches: [main]
     paths:
-      - 'assets/locales/en/translation.json'
+      - 'app/renderer/src/assets/locales/en/translation.json'
       - '.github/workflows/crowdin-update-resources.yml' # this file
 
 jobs:

.github/workflows/main-commit-validation.yml

@@ -8,7 +8,7 @@ on:
     branches: [main]
     paths-ignore:
       - '.github/ISSUE_TEMPLATE/**'
-      - 'assets/locales/**'
+      - 'app/renderer/src/assets/locales/**'
       - 'docs/**'
       - 'sample-session-files/**'
       - '.gitignore'

.github/workflows/pr-validation.yml

@@ -8,7 +8,7 @@ on:
     branches: [main]
     paths-ignore:
       - '.github/ISSUE_TEMPLATE/**'
-      - 'assets/locales/**'
+      - 'app/renderer/src/assets/locales/**'
       - 'docs/**'
       - 'sample-session-files/**'
       - '.gitignore'

README.md

@@ -65,73 +65,73 @@ The Inspector has built-in integrations with various cloud service provider plat
   <tr>
     <td align="center" valign="center">
       <a href="https://docs.saucelabs.com/mobile-apps/automated-testing/appium/">
-        <img width="200" height="50" alt="SauceLabs" src="app/renderer/images/sauce_logo.svg">
+        <img width="200" height="50" alt="SauceLabs" src="app/renderer/src/assets/images/sauce_logo.svg">
       </a>
     </td>
     <td align="center" valign="center">
       <a href="https://www.headspin.io/docs/appium-inspector-integration">
-        <img width="200" height="50" alt="HeadSpin" src="app/renderer/images/headspin_logo.svg">
+        <img width="200" height="50" alt="HeadSpin" src="app/renderer/src/assets/images/headspin_logo.svg">
       </a>
     </td>
     <td align="center" valign="center">
       <a href="https://www.browserstack.com/docs/app-automate/appium/integrations/appium-desktop">
-        <img width="200" height="50" alt="BrowserStack" src="app/renderer/images/browserstack_logo.svg">
+        <img width="200" height="50" alt="BrowserStack" src="app/renderer/src/assets/images/browserstack_logo.svg">
       </a>
     </td>
     <td align="center" valign="center">
       <a href="https://www.lambdatest.com/support/docs/appium-inspector-integration">
-        <img width="200" height="50" alt="LambdaTest" src="app/renderer/images/lambdatest_logo.svg">
+        <img width="200" height="50" alt="LambdaTest" src="app/renderer/src/assets/images/lambdatest_logo.svg">
       </a>
     </td>
   </tr>
   <tr>
     <td align="center" valign="center">
       <a href="https://testingbot.com/support/getting-started/appium.html">
-        <img width="200" height="50" alt="TestingBot" src="app/renderer/images/testingbot_logo.svg">
+        <img width="200" height="50" alt="TestingBot" src="app/renderer/src/assets/images/testingbot_logo.svg">
       </a>
     </td>
     <td align="center" valign="center">
       <a href="https://docs.digital.ai/bundle/TE/page/appium.html">
-        <img width="200" height="50" alt="ExperiTest" src="app/renderer/images/experitest_logo.svg">
+        <img width="200" height="50" alt="ExperiTest" src="app/renderer/src/assets/images/experitest_logo.svg">
       </a>
     </td>
     <td align="center" valign="center">
       <a href="https://robotqa.com/appium-remote">
-        <img width="200" height="50" alt="RobotQA" src="app/renderer/images/robotqa_logo.svg">
+        <img width="200" height="50" alt="RobotQA" src="app/renderer/src/assets/images/robotqa_logo.svg">
       </a>
     </td>
     <td align="center" valign="center">
       <a href="https://appkitbox.com/en/support/automation/appium/">
-        <img width="200" height="50" alt="Remote TestKit" src="app/renderer/images/remotetestkit_logo.svg">
+        <img width="200" height="50" alt="Remote TestKit" src="app/renderer/src/assets/images/remotetestkit_logo.svg">
       </a>
     </td>
   </tr>
   <tr>
     <td align="center" valign="center">
       <a href="https://support.smartbear.com/bitbar/docs/en/mobile-app-tests/automated-testing/appium-support.html">
-        <img width="200" height="50" alt="BitBar" src="app/renderer/images/bitbar_logo.svg">
+        <img width="200" height="50" alt="BitBar" src="app/renderer/src/assets/images/bitbar_logo.svg">
       </a>
     </td>
     <td align="center" valign="center">
       <a href="https://docs.kobiton.com/automation-testing/basic-appium-server/launch-a-basic-appium-2-session">
-        <img width="200" height="50" alt="Kobiton" src="app/renderer/images/kobiton_logo.svg">
+        <img width="200" height="50" alt="Kobiton" src="app/renderer/src/assets/images/kobiton_logo.svg">
       </a>
     </td>
     <td align="center" valign="center">
       <a href="https://help.perfecto.io/perfecto-help/content/perfecto/automation-testing/appium.htm">
-        <img width="200" height="50" alt="Perfecto" src="app/renderer/images/perfecto_logo.svg">
+        <img width="200" height="50" alt="Perfecto" src="app/renderer/src/assets/images/perfecto_logo.svg">
       </a>
     </td>
     <td align="center" valign="center">
       <a href="https://www.pcloudy.com/docs/inspect-element-using-appium-desktop">
-        <img width="200" height="50" alt="Pcloudy" src="app/renderer/images/pcloudy_logo.svg">
+        <img width="200" height="50" alt="Pcloudy" src="app/renderer/src/assets/images/pcloudy_logo.svg">
       </a>
     </td>
   </tr>
   <tr>
     <td align="center" valign="center">
       <a href="https://mobitru.com/docs/automation/">
-        <img width="200" height="50" alt="Mobitru" src="app/renderer/images/mobitru_logo.svg">
+        <img width="200" height="50" alt="Mobitru" src="app/renderer/src/assets/images/mobitru_logo.svg">
       </a>
     </td>
   </tr>

app/configs/i18next.config.js

@@ -1,6 +1,6 @@
 import i18n from 'i18next';
 
-import {i18NextBackend, i18NextBackendOptions} from '../renderer/polyfills';
+import {i18NextBackend, i18NextBackendOptions} from '../renderer/src/polyfills';
 import {getI18NextOptions} from './app.config';
 
 const i18nextOptions = getI18NextOptions(i18NextBackendOptions);

app/configs/i18next.config.renderer.js

@@ -1,7 +1,7 @@
 import i18n from 'i18next';
 import {initReactI18next} from 'react-i18next';
 
-import {i18NextBackend, i18NextBackendOptions} from '../renderer/polyfills';
+import {i18NextBackend, i18NextBackendOptions} from '../renderer/src/polyfills';
 import {getI18NextOptions} from './app.config';
 
 const i18nextOptions = getI18NextOptions(i18NextBackendOptions);

app/main.js → app/main/main.js

@@ -1,8 +1,8 @@
 import {app} from 'electron';
 
-import {installExtensions} from './main/debug';
-import {getAppiumSessionFilePath} from './main/helpers';
-import {setupMainWindow} from './main/windows';
+import {installExtensions} from './debug';
+import {getAppiumSessionFilePath} from './helpers';
+import {setupMainWindow} from './windows';
 
 const isDev = process.env.NODE_ENV === 'development';
 

app/main/windows.js

@@ -1,7 +1,7 @@
 import {BrowserWindow, Menu, dialog, ipcMain, webContents} from 'electron';
 
 import i18n from '../configs/i18next.config';
-import {openFilePath} from '../main';
+import {openFilePath} from './main';
 import settings from '../shared/settings';
 import {APPIUM_SESSION_EXTENSION} from './helpers';
 import {rebuildMenus} from './menus';

app/renderer/index.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <title>Appium</title>
-    <link rel="stylesheet" href="stylesheets/app.global.less" />
+    <link rel="stylesheet" href="src/assets/stylesheets/app.global.less" />
   </head>
   <body>
     <div id="root"></div>
-    <script type="text/javascript" src="index.jsx"></script>
+    <script type="text/javascript" src="src/index.jsx"></script>
   </body>
 </html>

app/renderer/splash.html

@@ -3,12 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <title>Appium</title>
-    <link rel="stylesheet" href="stylesheets/splash.global.less" />
+    <link rel="stylesheet" href="src/assets/stylesheets/splash.global.less" />
   </head>
   <body>
     <div id="root">
-      <img id="splashImage" src="/images/icon.png" />
-      <img id="loader" src="/images/loader.svg" />
+      <img id="splashImage" src="/src/assets/images/icon.png" />
+      <img id="loader" src="/src/assets/images/loader.svg" />
     </div>
   </body>
 </html>

app/renderer/src/Root.jsx

@@ -0,0 +1,31 @@
+import React, {Suspense} from 'react';
+import {Provider} from 'react-redux';
+import {MemoryRouter, Route, Routes} from 'react-router-dom';
+
+import i18n from '../../configs/i18next.config.renderer';
+import Spinner from './components/Spinner/Spinner.jsx';
+import InspectorPage from './containers/InspectorPage';
+import SessionPage from './containers/SessionPage';
+import {ipcRenderer} from './polyfills';
+
+ipcRenderer.on('appium-language-changed', (event, message) => {
+  if (i18n.language !== message.language) {
+    i18n.changeLanguage(message.language);
+  }
+});
+
+const Root = ({store}) => (
+  <Provider store={store}>
+    <MemoryRouter initialEntries={['/']}>
+      <Suspense fallback={<Spinner />}>
+        <Routes>
+          <Route path="/" element={<SessionPage />} />
+          <Route path="/session" element={<SessionPage />} />
+          <Route path="/inspector" element={<InspectorPage />} />
+        </Routes>
+      </Suspense>
+    </MemoryRouter>
+  </Provider>
+);
+
+export default Root;

app/renderer/actions/Inspector.js → app/renderer/src/actions/Inspector.js

@@ -1,8 +1,13 @@
 import _ from 'lodash';
 import {v4 as UUID} from 'uuid';
 
-import i18n from '../../configs/i18next.config.renderer';
-import {SAVED_FRAMEWORK, SET_SAVED_GESTURES, getSetting, setSetting} from '../../shared/settings';
+import i18n from '../../../configs/i18next.config.renderer';
+import {
+  SAVED_FRAMEWORK,
+  SET_SAVED_GESTURES,
+  getSetting,
+  setSetting,
+} from '../../../shared/settings';
 import {APP_MODE, NATIVE_APP} from '../constants/session-inspector';
 import AppiumClient from '../lib/appium-client';
 import frameworks from '../lib/client-frameworks';

app/renderer/actions/Session.js → app/renderer/src/actions/Session.js

@@ -14,16 +14,16 @@ import moment from 'moment';
 import {v4 as UUID} from 'uuid';
 import {Web2Driver} from 'web2driver';
 
-import i18n from '../../configs/i18next.config.renderer';
-import {getSaveableState} from '../../main/helpers';
+import i18n from '../../../configs/i18next.config.renderer';
+import {getSaveableState} from '../../../main/helpers';
 import {
   SAVED_SESSIONS,
   SERVER_ARGS,
   SESSION_SERVER_PARAMS,
   SESSION_SERVER_TYPE,
   getSetting,
   setSetting,
-} from '../../shared/settings';
+} from '../../../shared/settings';
 import {APP_MODE} from '../constants/session-inspector';
 import CloudProviders from '../components/Session/CloudProviders.jsx';
 import {fs, ipcRenderer, util} from '../polyfills';

app/renderer/stylesheets/common.global.less → app/renderer/src/assets/stylesheets/common.global.less

@@ -1,5 +1,5 @@
-@import '../../../node_modules/antd/dist/antd.less';
-@import (inline) '../../../node_modules/highlight.js/styles/intellij-light.css';
+@import '../../../../../node_modules/antd/dist/antd.less';
+@import (inline) '../../../../../node_modules/highlight.js/styles/intellij-light.css';
 
 // ANTD variables
 @font-size-base: 12px;

app/renderer/components/Session/CloudProviders.jsx → app/renderer/src/components/Session/CloudProviders.jsx

@@ -16,19 +16,19 @@ import ServerTabTestingbot from './ServerTabTestingbot.jsx';
 import SessionStyles from './Session.module.css';
 
 // ParcelJS handles image loading by exporting a path to the image
-import BitBarLogo from '../../images/bitbar_logo.svg';
-import BrowserStackLogo from '../../images/browserstack_logo.svg';
-import ExperitestLogo from '../../images/experitest_logo.svg';
-import HeadSpinLogo from '../../images/headspin_logo.svg';
-import KobitonLogo from '../../images/kobiton_logo.svg';
-import LambdaTestLogo from '../../images/lambdatest_logo.svg';
-import MobitruLogo from '../../images/mobitru_logo.svg';
-import PcloudyLogo from '../../images/pcloudy_logo.svg';
-import PerfectoLogo from '../../images/perfecto_logo.svg';
-import RemoteTestKitLogo from '../../images/remotetestkit_logo.svg';
-import RobotQALogo from '../../images/robotqa_logo.svg';
-import SauceLogo from '../../images/sauce_logo.svg';
-import TestingBotLogo from '../../images/testingbot_logo.svg';
+import BitBarLogo from '../../assets/images/bitbar_logo.svg';
+import BrowserStackLogo from '../../assets/images/browserstack_logo.svg';
+import ExperitestLogo from '../../assets/images/experitest_logo.svg';
+import HeadSpinLogo from '../../assets/images/headspin_logo.svg';
+import KobitonLogo from '../../assets/images/kobiton_logo.svg';
+import LambdaTestLogo from '../../assets/images/lambdatest_logo.svg';
+import MobitruLogo from '../../assets/images/mobitru_logo.svg';
+import PcloudyLogo from '../../assets/images/pcloudy_logo.svg';
+import PerfectoLogo from '../../assets/images/perfecto_logo.svg';
+import RemoteTestKitLogo from '../../assets/images/remotetestkit_logo.svg';
+import RobotQALogo from '../../assets/images/robotqa_logo.svg';
+import SauceLogo from '../../assets/images/sauce_logo.svg';
+import TestingBotLogo from '../../assets/images/testingbot_logo.svg';
 
 const CloudProviders = {
   sauce: {

app/renderer/index.jsx → app/renderer/src/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {createRoot} from 'react-dom/client';
 
 import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary.jsx';
-import Root from './containers/Root.jsx';
+import Root from './Root.jsx';
 import store from './store.js';
 
 const container = document.getElementById('root');
@@ -15,8 +15,8 @@ root.render(
 );
 
 if (module.hot) {
-  module.hot.accept('./containers/Root', () => {
-    const NextRoot = require('./containers/Root.jsx').default;
+  module.hot.accept('./Root', () => {
+    const NextRoot = require('./Root.jsx').default;
     root.render(
       <ErrorBoundary>
         <NextRoot store={store} />

app/renderer/polyfills/browser.js → app/renderer/src/polyfills/browser.js

@@ -49,7 +49,7 @@ const i18NextBackendOptions = {
   backendOptions: [
     {},
     {
-      loadPath: './locales/{{lng}}/{{ns}}.json',
+      loadPath: './{{lng}}/{{ns}}.json',
     },
   ],
 };

app/renderer/polyfills/electron.js → app/renderer/src/polyfills/electron.js

@@ -7,8 +7,8 @@ import path from 'path';
 import util from 'util';
 
 const i18NextBackendOptions = {
-  loadPath: path.join(__dirname, 'locales/{{lng}}/{{ns}}.json'),
-  addPath: path.join(__dirname, 'locales/{{lng}}/{{ns}}.json'),
+  loadPath: path.join(__dirname, '{{lng}}/{{ns}}.json'),
+  addPath: path.join(__dirname, '{{lng}}/{{ns}}.json'),
   jsonIndent: 2,
 };
 

app/renderer/utils/other.js → app/renderer/src/utils/other.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import {withTranslation as wt} from 'react-i18next';
 
-import config from '../../configs/app.config';
+import config from '../../../configs/app.config';
 
 const VALID_W3C_CAPS = [
   'platformName',

app/shared/settings.js

@@ -1,4 +1,4 @@
-import {settings} from '../renderer/polyfills';
+import {settings} from '../renderer/src/polyfills';
 
 export const SAVED_SESSIONS = 'SAVED_SESSIONS';
 export const SET_SAVED_GESTURES = 'SET_SAVED_GESTURES';