jdi-testing · Iogsotot · Apr 2, 2024 · Mar 28, 2024 · Mar 31, 2024 · Mar 31, 2024
diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "name": "JDN — Page Object Generator",
   "description": "JDN – helps Test Automation Engineer to create Page Objects in the test automation framework and speed up test development",
   "devtools_page": "index.html",
-  "version": "3.15.18",
+  "version": "3.15.19",
   "icons": {
     "128": "icon128.png"
   },
@@ -19,5 +19,6 @@
   ],
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"
-  }
+  },
+  "options_page": "options.html"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jdn-ai-chrome-extension",
-  "version": "3.15.18",
+  "version": "3.15.19",
   "description": "jdn-ai chrome extension",
   "scripts": {
     "start": "webpack --watch --env devenv",
@@ -95,6 +95,7 @@
     "@typescript-eslint/parser": "^6.7.3",
     "babel-jest": "^29.6.4",
     "babel-loader": "9.1.3",
+    "copy-webpack-plugin": "^12.0.2",
     "css-loader": "6.8.1",
     "eslint": "^8.50.0",
     "eslint-config-airbnb-typescript": "^17.1.0",

diff --git a/src/app/reducers/defineServer.thunk.ts b/src/app/reducers/defineServer.thunk.ts
@@ -2,11 +2,14 @@ import { ActionReducerMapBuilder, createAsyncThunk } from '@reduxjs/toolkit';
 import { AxiosResponse } from 'axios';
 import { toInteger } from 'lodash';
 import { BackendStatus, BaseUrl, MainState } from '../types/mainSlice.types';
-import { URL, RemoteUrl } from '../utils/constants';
+import { RemoteUrl, URL } from '../utils/constants';
 import { HttpEndpoint, request } from '../../services/backend';
 import { compatibleBuildVer, compatibleMajorVer, compatibleMinorVer } from '../utils/compatibleVersions';
+import { getUrlFromStorage, TUrlFromStorage } from '../utils/getUrlFromStorage';
 
 export const defineServer = createAsyncThunk('main/defineServer', async () => {
+  const remoteUrlFromStorage: TUrlFromStorage = await getUrlFromStorage('serverUrl');
+
   const checkVersion = (request: Promise<AxiosResponse<BaseUrl>>, isRemote: boolean) =>
     request.then((response) => {
       const [major, minor, build] = response.data.split('.').map(toInteger);
@@ -19,10 +22,15 @@ export const defineServer = createAsyncThunk('main/defineServer', async () => {
       } else throw new Error(BackendStatus.OutdatedPluginLocal);
     });
 
-  return Promise.any<AxiosResponse<BaseUrl>>([
-    checkVersion(request.get(HttpEndpoint.BUILD, undefined, RemoteUrl), true),
-    checkVersion(request.get(HttpEndpoint.BUILD, undefined, URL.local), false),
-  ]).then(
+  const versionChecks =
+    remoteUrlFromStorage !== null
+      ? [checkVersion(request.get(HttpEndpoint.BUILD, undefined, remoteUrlFromStorage as BaseUrl), true)]
+      : [
+          checkVersion(request.get(HttpEndpoint.BUILD, undefined, RemoteUrl), true),
+          checkVersion(request.get(HttpEndpoint.BUILD, undefined, URL.local), false),
+        ];
+
+  return Promise.any<AxiosResponse<BaseUrl>>(versionChecks).then(
     (response) => {
       request.setBaseUrl(response.config.baseURL as BaseUrl);
       return response;

diff --git a/src/app/utils/getUrlFromStorage.ts b/src/app/utils/getUrlFromStorage.ts
@@ -0,0 +1,12 @@
+export type TUrlFromStorage = string | null;
+export const getUrlFromStorage = async (key: string): Promise<TUrlFromStorage> => {
+  return new Promise((resolve) => {
+    chrome.storage.sync.get([key], (result) => {
+      if (result[key]) {
+        resolve(result[key]);
+      } else {
+        resolve(null);
+      }
+    });
+  });
+};
diff --git a/src/options/options.html b/src/options/options.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>JDN Options</title>
+    <link rel="stylesheet" href="options.styles.css" />
+  </head>
+  <body>
+    <main>
+      <h2>JDN Options</h2>
+      <hr />
+      <form class="form">
+        <h4>Server Address:</h4>
+        <div class="checkbox-group">
+          <div class="form-item">
+            <input type="checkbox" id="custom" name="serverType" />
+            <label for="custom">Custom</label>
+          </div>
+          <div class="form-item">
+            <input type="checkbox" id="devRemote" name="serverType" />
+            <label for="devRemote">Dev Remote</label>
+          </div>
+          <div class="form-item">
+            <input type="checkbox" id="prodRemote" name="serverType" />
+            <label for="prodRemote">Prod Remote</label>
+          </div>
+          <div class="form-item">
+            <input type="checkbox" id="local" name="serverType" />
+            <label for="local">Local</label>
+          </div>
+        </div>
+        <div class="form-item input-group">
+          <label class="label--input" for="serverUrl">URL :</label>
+          <input type="text" id="serverUrl" name="serverUrl" />
+        </div>
+        <div class="control-group">
+          <button id="save">Save</button>
+            <button id="restore">
+              <span>
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="#FF4D4F" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M14 7.99997C14.0001 9.5774 13.3791 11.0914 12.2712 12.2144C11.1634 13.3373 9.65791 13.9788 8.08062 14H8C6.46765 14.0038 4.99268 13.4174 3.88125 12.3625C3.83352 12.3173 3.79515 12.2632 3.76833 12.2033C3.74152 12.1433 3.72677 12.0786 3.72494 12.013C3.72311 11.9473 3.73424 11.8819 3.75768 11.8205C3.78112 11.7592 3.81642 11.703 3.86156 11.6553C3.9067 11.6076 3.9608 11.5692 4.02077 11.5424C4.08074 11.5155 4.14541 11.5008 4.21108 11.499C4.27675 11.4971 4.34213 11.5083 4.4035 11.5317C4.46487 11.5552 4.52102 11.5905 4.56875 11.6356C5.28362 12.3098 6.1813 12.7584 7.14964 12.9253C8.11799 13.0923 9.11406 12.9702 10.0134 12.5744C10.9128 12.1786 11.6756 11.5265 12.2065 10.6996C12.7375 9.87279 13.013 8.90783 12.9987 7.92531C12.9844 6.94278 12.6809 5.98624 12.1262 5.17519C11.5714 4.36414 10.79 3.73454 9.87944 3.36503C8.96893 2.99552 7.96973 2.90249 7.00665 3.09756C6.04358 3.29263 5.15933 3.76715 4.46438 4.46184C4.45927 4.46736 4.45384 4.47258 4.44812 4.47747L2.78688 5.99997H4.5C4.63261 5.99997 4.75979 6.05265 4.85355 6.14641C4.94732 6.24018 5 6.36736 5 6.49997C5 6.63258 4.94732 6.75975 4.85355 6.85352C4.75979 6.94729 4.63261 6.99997 4.5 6.99997H1.5C1.36739 6.99997 1.24021 6.94729 1.14645 6.85352C1.05268 6.75975 1 6.63258 1 6.49997V3.49997C1 3.36736 1.05268 3.24018 1.14645 3.14641C1.24021 3.05265 1.36739 2.99997 1.5 2.99997C1.63261 2.99997 1.75979 3.05265 1.85355 3.14641C1.94732 3.24018 2 3.36736 2 3.49997V5.36247L3.76562 3.74997C4.60561 2.91324 5.67467 2.34413 6.83783 2.11449C8.001 1.88484 9.20612 2.00495 10.3011 2.45965C11.396 2.91435 12.3317 3.68326 12.9901 4.66931C13.6484 5.65536 13.9998 6.81435 14 7.99997Z"
+                  />
+                </svg>
+              </span>
+              <span>Reset</span>
+            </button>
+        </div>
+      </form>
+    </main>
+    <script src="options.js"></script>
+  </body>
+</html>
diff --git a/src/options/options.js b/src/options/options.js
@@ -0,0 +1,76 @@
+const serverTypes = {
+  devRemote: 'http://78.47.220.208:5000',
+  prodRemote: 'http://78.47.220.208:80',
+  local: 'http://localhost:5050',
+};
+
+const saveOptions = () => {
+  const serverUrl = document.getElementById('serverUrl').value;
+  chrome.storage.sync.set({ serverUrl }, () => {});
+};
+
+const setCheckedByUrl = (url) => {
+  let matched = false;
+  Object.keys(serverTypes).forEach((type) => {
+    if (serverTypes[type] === url) {
+      document.getElementById(type).checked = true;
+      matched = true;
+    } else {
+      document.getElementById(type).checked = false;
+    }
+  });
+  document.getElementById('custom').checked = !matched && !!url;
+};
+const restoreOptionsOnLoad = () => {
+  chrome.storage.sync.get('serverUrl', (items) => {
+    const url = items.serverUrl;
+    document.getElementById('serverUrl').value = url || '';
+    setCheckedByUrl(url);
+  });
+};
+
+const restoreOptions = () => {
+  chrome.storage.sync.remove('serverUrl', () => {
+    document.getElementById('serverUrl').value = '';
+    document.querySelectorAll('input[name="serverType"]').forEach((input) => {
+      input.checked = false;
+    });
+  });
+};
+
+document.querySelectorAll('input[name="serverType"]').forEach((input) => {
+  input.addEventListener('change', function () {
+    const serverUrl = document.getElementById('serverUrl');
+    if (this.checked) {
+      serverUrl.value = serverTypes[this.id] || '';
+      document.querySelectorAll('input[name="serverType"]').forEach((otherInput) => {
+        if (otherInput !== this) {
+          otherInput.checked = false;
+        }
+      });
+    }
+  });
+});
+
+document.getElementById('serverUrl').addEventListener('input', () => {
+  const value = document.getElementById('serverUrl').value;
+  let foundMatch = false;
+  Object.keys(serverTypes).forEach((type) => {
+    if (serverTypes[type] === value) {
+      document.getElementById(type).checked = true;
+      foundMatch = true;
+    } else {
+      document.getElementById(type).checked = false;
+    }
+  });
+  document.getElementById('custom').checked = !foundMatch;
+});
+
+document.getElementById('serverUrl').addEventListener('blur', () => {
+  const url = document.getElementById('serverUrl').value;
+  setCheckedByUrl(url);
+});
+
+document.addEventListener('DOMContentLoaded', restoreOptionsOnLoad);
+document.getElementById('restore').addEventListener('click', restoreOptions);
+document.getElementById('save').addEventListener('click', saveOptions);