v0.3.27

* fix: adapters reducer - save host by SG id

* fix: update agents hosts intercepted from headers

* fix: popup open on duplicate page
Two popups opened on the duplicate pages in different windows are working now

* fix: handle agent's target host bad url

* chore: remove excessive logging
TODO: add toggleable logger

* chore: bump version to v0.3.27

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drill4j/browser-extension",
-  "version": "0.3.26",
+  "version": "0.3.27",
   "license": "Apache-2.0",
   "scripts": {
     "build": "NODE_ENV=production webpack",

src/background/index.ts

@@ -22,11 +22,61 @@ import { SessionActionError } from '../common/errors/session-action-error';
 
 init();
 async function init() {
-  const iterceptedDataStore: Record<string, any> = {};
-  const responseInterceptorsCleanup = setupResponseInterceptors(iterceptedDataStore);
+  // TODO refactor to store + actions + reducers
+  let adapters: Record<string, AgentAdapter> = {};
+
+  // session subscriptions
+  const backendConnectionStatusSubs: Record<string, any> = {};
+  const backendConnectionStatusSubsCleanup: Record<string, any> = {};
+  let backendConnectionStatusData: BackendConnectionStatus = BackendConnectionStatus.UNAVAILABLE;
+
+  // agent subscriptions
+  let rawAgentData: Record<string, any> = {};
+  let agentsDataById: Record<string, any> = {};
+  const agentSubs: Record<string, Record<string, SubNotifyFunction>> = {};
+  const agentSubsCleanup: Record<string, any> = {};
+  let agentsData: Record<string, AdapterInfo> = {};
+
+  // session subscriptions
+  const sessionSubs: Record<string, any> = {};
+  const sessionSubsCleanup: Record<string, any> = {};
+  const sessionsData: Record<string, SessionData> = {};
+
+  // active scope subs
+  const scopeSubs: Record<string, any> = {};
+  const scopeSubsCleanup: Record<string, any> = {};
+  const scopesData: Record<string, ScopeData> = {};
+
+  const interceptedDataStore: Record<string, any> = {};
+  // const responseInterceptorsCleanup = setupResponseInterceptors(interceptedDataStore);
+
+  // response interceptors
+  const responseInterceptor = setupResponseInterceptor();
+
+  responseInterceptor.add('drill-admin-url', async (backendAddress) => {
+    await localStorageUtil.save({ backendAddress });
+    responseInterceptor.remove('drill-admin-url');
+  });
+
+  // eslint-disable-next-line no-param-reassign
+  interceptedDataStore.agents = {};
+  const agentOrGroupHandler = async (id: string, host: string) => {
+    // eslint-disable-next-line no-param-reassign
+    interceptedDataStore.agents[id] = host;
+
+    if (agentsDataById[id] && !agentsDataById[id].host) {
+      updateAgents(rawAgentData);
+    }
+  };
+
+  responseInterceptor.add('drill-agent-id', agentOrGroupHandler);
+  responseInterceptor.add('drill-group-id', agentOrGroupHandler);
+
+  const requestInterceptorCleanup = setupRequestInterceptor(sessionsData);
 
   let backend: any;
   let unsubscribeFromAdmin: any;
+
   let connectionEstablished = connect(
     (x: any) => {
       // FIXME this is awful
@@ -39,19 +89,7 @@ async function init() {
       backendConnectionStatusData = BackendConnectionStatus.AVAILABLE;
       console.log('Connection established!');
 
-      unsubscribeFromAdmin = backend.subscribeAdmin('/api/agents', (data: any) => {
-        const newInfo = [
-          ...agentAdaptersReducer(data, iterceptedDataStore?.agents),
-          ...sgAdaptersReducer(data, iterceptedDataStore?.agents),
-        ];
-        agentsData = newInfo.reduce((a, z) => ({ ...a, [z.host]: z }), {});
-        Object.keys(agentsData).forEach((host) => {
-          if (agentSubs[host] && Object.keys(agentSubs[host]).length > 0) {
-            notifySubscribers(agentSubs[host], agentsData[host]);
-          }
-        });
-        adapters = createAdaptersFromInfo(newInfo, backend);
-      });
+      unsubscribeFromAdmin = backend.subscribeAdmin('/api/agents', updateAgents);
 
       notifyAllSubs(backendConnectionStatusSubs, backendConnectionStatusData);
     },
@@ -63,30 +101,27 @@ async function init() {
     },
   );
 
-  let adapters: Record<string, AgentAdapter> = {};
-
-  // session subscriptions
-  const backendConnectionStatusSubs: Record<string, any> = {};
-  const backendConnectionStatusSubsCleanup: Record<string, any> = {};
-  let backendConnectionStatusData: BackendConnectionStatus = BackendConnectionStatus.UNAVAILABLE;
-
-  // agent subscriptions
-  const agentSubs: Record<string, Record<string, SubNotifyFunction>> = {};
-  const agentSubsCleanup: Record<string, any> = {};
-  let agentsData: Record<string, AdapterInfo> = {};
-
-  // session subscriptions
-  const sessionSubs: Record<string, any> = {};
-  const sessionSubsCleanup: Record<string, any> = {};
-  const sessionsData: Record<string, SessionData> = {};
-
-  // active scope subs
-  const scopeSubs: Record<string, any> = {};
-  const scopeSubsCleanup: Record<string, any> = {};
-  const scopesData: Record<string, ScopeData> = {};
+  function updateAgents(data: any) {
+    // TODO refactor to store + actions + reducers
+    rawAgentData = data;
+    const newInfo = [
+      ...agentAdaptersReducer(data, interceptedDataStore?.agents),
+      ...sgAdaptersReducer(data, interceptedDataStore?.agents),
+    ];
+    agentsData = newInfo.reduce((a, z) => ({ ...a, [z.host]: z }), {});
+    agentsDataById = newInfo.reduce((a, z) => ({ ...a, [z.id]: z }), {});
+
+    adapters = createAdaptersFromInfo(newInfo, backend);
+
+    Object.keys(agentsData).forEach((host) => {
+      if (agentSubs[host] && Object.keys(agentSubs[host]).length > 0) {
+        notifySubscribers(agentSubs[host], agentsData[host]);
+      }
+    });
+  }
 
   const runtimeConnectHandler = (port: chrome.runtime.Port) => {
-    const portId = port.sender?.tab ? port.sender?.tab.id : port.sender?.id;
+    const portId = port.name || port.sender?.tab?.id;
     if (!portId) throw new Error(`Can't assign port id for ${port}`);
     const senderHost = transformHost(port.sender?.url);
     const portMessageHandler = (message: any) => {
@@ -187,8 +222,6 @@ async function init() {
   };
   chrome.runtime.onConnect.addListener(runtimeConnectHandler);
 
-  const requestInterceptorCleanup = setupRequestInterceptor(sessionsData);
-
   const router = createMessageRouter();
 
   router.add('START_TEST', async (sender: chrome.runtime.MessageSender, testName: string) => {
@@ -342,6 +375,11 @@ function agentAdaptersReducer(agentsList: any, agentsHosts: Record<string, strin
     .map((x: any) => ({
       adapterType: 'agents',
       id: x.id,
+      // TODO if host changes on-the-fly (e.g. when popup opened in separate window) it will
+      // - get BUSY status
+      // - receive no further updates (because host has changed)
+      // the same applies for service groups
+      // It's not that big of an issue (as-is) but is worth to keep in mind
       host: transformHost(x.systemSettings?.targetHost) || (agentsHosts && agentsHosts[x.id]),
       status: x.status,
       buildVersion: x.buildVersion,
@@ -358,7 +396,7 @@ function sgAdaptersReducer(agentsList: any, agentsHosts: Record<string, string>)
         a[x.serviceGroup] = {
           adapterType: 'service-groups',
           id: x.serviceGroup,
-          host: transformHost(x.systemSettings?.targetHost) || (agentsHosts && agentsHosts[x.id]),
+          host: transformHost(x.systemSettings?.targetHost) || (agentsHosts && agentsHosts[x.serviceGroup]),
           // TODO think what to do with the SG status
           status: x.status,
           buildVersion: x.buildVersion,

src/common/background-interop/background-connect.ts

@@ -1,3 +1,4 @@
+import chromeApi from '../chrome-api';
 import type { SubNotifyFunction } from '../../background/types';
 import { repeatAsync } from '../util/repeat-async';
 import type { BackgroundConnection, ConnectCallback, DisconnectCallback } from './types';
@@ -15,8 +16,16 @@ export async function connect(connectCb: ConnectCallback, disconnectCb: Disconne
 }
 
 async function asyncChromeRuntimeConnect(): Promise<chrome.runtime.Port> {
-  return new Promise((resolve, reject) => {
-    const port = chrome.runtime.connect();
+  // eslint-disable-next-line no-async-promise-executor
+  return new Promise(async (resolve, reject) => {
+    const connectInfo: chrome.runtime.ConnectInfo = {};
+
+    const isRunningInPopup = window.location.protocol === 'chrome-extension:';
+    if (isRunningInPopup) {
+      const activeTab = await chromeApi.getActiveTab();
+      connectInfo.name = `${activeTab?.id}-popup`;
+    }
+    const port = chrome.runtime.connect(connectInfo);
     // chrome.runtime.connect has no callback
     // so chrome.runtime.lastError must be checked in port.onDisconnect
     // reference https://bugs.chromium.org/p/chromium/issues/detail?id=836370#c11
@@ -49,12 +58,12 @@ async function connectPort(disconnectCb: () => void): Promise<BackgroundConnecti
       console.log('No handler for resource', message.resource);
       return;
     }
-    console.log('PORT RECEIVED MESSAGE', message, 'NOTIFY SUBS', handlers);
+    // console.log('PORT RECEIVED MESSAGE', message, 'NOTIFY SUBS', handlers);
     handlers.forEach(handler => handler(message.payload));
   };
 
   const disconnectHandler = () => {
-    console.log('DISCONNECT disconnectHandler');
+    // console.log('DISCONNECT disconnectHandler');
     if (port.onMessage.hasListener(messageHandler)) {
       port.onMessage.removeListener(messageHandler);
     }
@@ -67,7 +76,7 @@ async function connectPort(disconnectCb: () => void): Promise<BackgroundConnecti
 
   return {
     subscribe: (resource: string, handler: (...params: any) => any, options?: any) => {
-      console.log('BG CONNECT SUBSCRIBE', resource, handler, options);
+      // console.log('BG CONNECT SUBSCRIBE', resource, handler, options);
       if (!Array.isArray(subs[resource])) {
         subs[resource] = [];
       }
@@ -79,7 +88,7 @@ async function connectPort(disconnectCb: () => void): Promise<BackgroundConnecti
       }
 
       const unsubscribe = () => {
-        console.log('BG CONNECT UNSUB', resource, options);
+        // console.log('BG CONNECT UNSUB', resource, options);
 
         const index = subs[resource].findIndex(x => x === handler);
         subs[resource].splice(index, 1); // TODO Does it look kinda iffy?

src/common/background-interop/index.ts

@@ -4,11 +4,11 @@ import type { BackgroundConnection } from './types';
 let connection: BackgroundConnection;
 let connectionEstablished = connect(
   (x: BackgroundConnection) => {
-    console.log('Connection established!', Date.now());
+    // console.log('Connection established!', Date.now());
     connection = x;
   },
   (reconnectPromise) => {
-    console.log('Reconnecting...', Date.now());
+    // console.log('Reconnecting...', Date.now());
     connectionEstablished = reconnectPromise;
   },
 );

src/common/util/local-storage.ts

@@ -6,6 +6,5 @@ export async function get(keys?: string | string[] | undefined) {
 
 export async function save(data: any) {
   const storage = await browser.storage.local.get();
-  console.log('storage', storage, 'new data', data);
   await browser.storage.local.set({ ...storage, ...data });
 }

src/common/util/repeat-async.ts

@@ -11,7 +11,7 @@ export async function repeatAsync<T>(fn: (params?: any) => Promise<T> | T, mustR
         data = await fn();
         isSuccess = true;
       } catch (e) {
-        console.log('repeatAsync error', e);
+        console.log('ERROR: repeat async error', e);
       }
 
       if (!isSuccess || (mustReturnData && !data)) {

src/common/util/transform-host.ts

@@ -1,6 +1,11 @@
-export function transformHost(targetHost: string | undefined) {
+export function transformHost(targetHost: string | undefined): string {
   if (!targetHost) return '';
-  const url = new URL(targetHost);
-  const { protocol, host } = url;
-  return `${protocol}//${host}`;
+  try {
+    const url = new URL(targetHost);
+    const { protocol, host } = url;
+    return `${protocol}//${host}`;
+  } catch {
+    // TODO returning '' may mask errors
+    return '';
+  }
 }

src/content-script/app.tsx

@@ -26,7 +26,6 @@ const RelativeWrapper = style.relativeWrapper('div');
 
 export const App = withAgentContext((props: any) => {
   const { host } = props;
-  console.log('Content app.tsx', props);
 
   const {
     data: backendConnectionStatus,
@@ -37,10 +36,8 @@ export const App = withAgentContext((props: any) => {
   const agent = React.useContext(AgentContext);
 
   const [state, dispatch] = React.useReducer(reducer(async (newState: any) => {
-    console.log('newState', newState);
     await browser.storage.local.set({ [host]: newState });
   }), { expanded: false });
-  console.log('APP STATE:', state);
   useDispatcher(state, dispatch);
 
   React.useEffect(() => {

src/content-script/context/active-scope-context.tsx

@@ -6,7 +6,6 @@ export const ActiveScopeContext = React.createContext<any>(null);
 
 export const withActiveScopeContext = (WrappedComponent: any) => (props: any) => {
   const { data } = useActiveScope();
-  console.log('withActiveScopeContext', data);
   return (
     <ActiveScopeContext.Provider value={data}>
       <WrappedComponent {...props} />

src/content-script/context/agent-context.tsx

@@ -6,9 +6,7 @@ export const AgentContext = React.createContext<any>(null);
 
 export const withAgentContext = (WrappedComponent: any) => (props: any) => {
   const { host, ...otherProps } = props;
-  console.log('withAgentContext', host, otherProps);
   const { data: agent } = useAgentOnHost(host);
-  console.log('withAgentContext agent', agent);
   return (
     <AgentContext.Provider value={agent}>
       <WrappedComponent {...props} />

src/content-script/context/session-context.tsx

@@ -6,7 +6,6 @@ export const SessionContext = React.createContext<any>(null);
 
 export const withSessionContext = (WrappedComponent: any) => (props: any) => {
   const { data } = useSession();
-  console.log('withSessionContext', data);
   return (
     <SessionContext.Provider value={data}>
       <WrappedComponent {...props} />

src/content-script/pages/manual-testing-page/finish-recording/finish-recording.tsx

@@ -55,7 +55,6 @@ export const FinishRecording = finishRecording(({ className }: Props) => {
                   try {
                     await bgInterop.cleanupTestSession();
                   } catch (e) {
-                    debugger;
                     console.log('cancel recording session failed', e);
                   }
                   updateRequestStatus(false);

src/content-script/pages/manual-testing-page/in-progress/in-progress.tsx

@@ -23,7 +23,6 @@ export const InProgress = inProgress(({ className }: Props) => {
   // const [actionError, setActionError] = React.useState('');
   const session = React.useContext(SessionContext);
   const scope = React.useContext(ActiveScopeContext);
-  console.log('InProgress SessionContext', session);
   const [isRequestInProgress, updateRequestStatus] = React.useState(false);
 
   return (

src/content-script/pages/manual-testing-page/manual-testing-page.tsx

@@ -14,7 +14,6 @@ import { SessionStatus } from '../../../common/enums';
 export const ManualTestingPage = withActiveScopeContext(withSessionContext(((props: any) => {
   const { push } = useHistory();
   const session = React.useContext(SessionContext);
-  console.log('ManualTestingPage SessionContext', session);
 
   React.useEffect(() => {
     switch (session?.status) {

src/content-script/pages/manual-testing-page/start-recording/start-recording.tsx

@@ -65,13 +65,10 @@ export const StartRecording = startRecording(({ className }: Props) => {
                     setIsFormSubmitted(true);
                     try {
                       const data = await bgInterop.startTest(testName);
-                      console.log('start pressed', agent);
                       if (agent.mustRecordJsCoverage) {
                         (window as any).reloadRequired = true;
                       }
-                      console.log('START_TEST data', data);
                     } catch (e) {
-                      console.log(e);
                       const msg = `Failed to start test: ${e?.message || 'an unexpected error occurred'}`;
                       setSubmitError(msg);
                     }

src/content.ts

@@ -20,8 +20,6 @@ async function init() {
 
   // TODO remove listener on widget close
   browser.storage.onChanged.addListener(async (changes) => {
-    console.log('browser.storage.onChanged', changes);
-
     const shouldHideWidget = !(await isWidgetVisible(host));
     if (shouldHideWidget && widget) {
       removeIframe(widget);

src/hooks/use-host-local-storage.ts

@@ -5,7 +5,6 @@ export function useHostLocalStorage(host: string) {
   const [data, setData] = useState<Record<string, any> | null>(null);
 
   useEffect(() => {
-    console.log('useHostLocalStorage', host);
     if (host) {
       run();
       if (browser.storage.onChanged.hasListener(handleHostStorageChange(host))) {
@@ -20,7 +19,6 @@ export function useHostLocalStorage(host: string) {
 
     function handleHostStorageChange(hostName: string) {
       return async (changes: { [s: string]: chrome.storage.StorageChange }) => {
-        console.log('handleHostStorageChange', hostName);
 
         if (changes[hostName] && changes[hostName].newValue) {
           await run();

src/hooks/util/use-subscription.ts

@@ -6,7 +6,6 @@ export function useSubscription<T>(subscribe: (...params: any[]) => () => void,
 
   useEffect(() => {
     const unsubscribe = subscribe((newData: T) => {
-      console.log('useSubscription handler', 'options', options, 'newData', newData);
       setData(newData);
     }, options);
     return unsubscribe;