fix(plugins): multiple plugins (MIN-284)

Added the ability to load multiple instances of the same plugin. A mechanism for adding a number to the plugin name has been added when a given plugin is already loaded and we load another instance of the same plugin. If we do not have a plugin loaded without a prefix/without a number next to the name, the next instance will be loaded as such without a prefix/number. For example, we have 3 instances of the same plugin loaded, so we have the name "plugin", "plugin (1)", "plugin (2)". If we remove the "plugin" instance, the next loaded instance will be named "plugin" and not "plugin (3)".

Why mechanism of getting number is handled by storing occurrences in plugins manager and not taking active plugins from redux? When we load many plugins at once, e.g. when entering the url where the plugin hashes are, many scripts are launched at once in getInitPlugins, we invoke the script, but we have no way of tracking/controlling when PluginsManager.registerPlugin and store.dispatch(registerPlugin) are called and completed in it, therefore there is a race condition and if we took the number of loaded plugins from the store, e.g. several plugins could take the same number and therefore several plugins would have e.g. number 2 in their name. This is why we handle it in PluginsManager.registerPlugin as saving hashes as a hashMap synchronously, we can track the number of loaded plugins bypassing the race condition.

multiple-plugins

Closes MIN-284

src/components/FunctionalArea/TopBar/TopBar.component.test.tsx

-import { StoreType } from '@/redux/store';
+import { AppDispatch, RootState, StoreType } from '@/redux/store';
 import {
   InitialStoreState,
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
 import { render, screen } from '@testing-library/react';
 import { initialStateFixture } from '@/redux/drawer/drawerFixture';
+import { MockStoreEnhanced } from 'redux-mock-store';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { PROJECT_STATE_INITIAL_MOCK } from '@/redux/project/project.mock';
+import { projectFixture } from '@/models/fixtures/projectFixture';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import {
+  BACKGROUNDS_MOCK,
+  BACKGROUND_INITIAL_STATE_MOCK,
+} from '@/redux/backgrounds/background.mock';
+import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { USER_INITIAL_STATE_MOCK } from '@/redux/user/user.mock';
+import { SEARCH_STATE_INITIAL_MOCK } from '@/redux/search/search.mock';
 import { TopBar } from './TopBar.component';
 
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -22,6 +34,23 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
   );
 };
 
+const renderComponentWithActionListener = (
+  initialStoreState: InitialStoreState = {},
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+  const { Wrapper, store } = getReduxStoreWithActionsListener(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <TopBar />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
 describe('TopBar - component', () => {
   it('Should contain search bar', () => {
     renderComponent();
@@ -52,4 +81,54 @@ describe('TopBar - component', () => {
     expect(isOpen).toBe(true);
     expect(drawerName).toBe('overlays');
   });
+  it('should render browse overview images button', () => {
+    renderComponent();
+    expect(screen.getByText('Browse overview images')).toBeInTheDocument();
+  });
+
+  it('should open overview image modal on button click', () => {
+    const { store } = renderComponentWithActionListener({
+      project: {
+        ...PROJECT_STATE_INITIAL_MOCK,
+        data: projectFixture,
+      },
+      drawer: initialStateFixture,
+      user: USER_INITIAL_STATE_MOCK,
+      map: initialMapStateFixture,
+      search: SEARCH_STATE_INITIAL_MOCK,
+      backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+    });
+
+    const overviewImageButton = screen.getByText('Browse overview images');
+    overviewImageButton.click();
+
+    const actions = store.getActions();
+    expect(actions[FIRST_ARRAY_ELEMENT]).toStrictEqual({
+      payload: projectFixture.topOverviewImage?.idObject,
+      type: 'modal/openOverviewImagesModalById',
+    });
+  });
+  it('should disable button browse overview images if there are no overview images', () => {
+    const { store } = renderComponentWithActionListener({
+      user: USER_INITIAL_STATE_MOCK,
+      search: SEARCH_STATE_INITIAL_MOCK,
+      drawer: initialStateFixture,
+      project: {
+        ...PROJECT_STATE_INITIAL_MOCK,
+        data: {
+          ...projectFixture,
+          overviewImageViews: [],
+        },
+      },
+      map: initialMapStateFixture,
+      backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+    });
+
+    const overviewImageButton = screen.getByText('Browse overview images');
+    expect(overviewImageButton).toBeDisabled();
+    overviewImageButton.click();
+
+    const actions = store.getActions();
+    expect(actions).toStrictEqual([]);
+  });
 });