feat(plugins): legend tabs (MIN-231)

src/redux/legend/legend.reducers.ts

 import { PayloadAction } from '@reduxjs/toolkit';
 import { LegendState, PluginId } from './legend.types';
+import { DEFAULT_LEGEND_ID } from './legend.constants';
 
 export const openLegendReducer = (state: LegendState): void => {
   state.isOpen = true;
@@ -9,13 +10,37 @@ export const closeLegendReducer = (state: LegendState): void => {
   state.isOpen = false;
 };
 
-export const selectLegendPluginIdReducer = (
+export const setActiveLegendIdReducer = (
   state: LegendState,
-  action: PayloadAction<PluginId>,
+  action: PayloadAction<string>,
 ): void => {
-  state.selectedPluginId = action.payload;
+  state.activeLegendId = action.payload;
 };
 
-export const selectDefaultLegendReducer = (state: LegendState): void => {
-  state.selectedPluginId = undefined;
+export const setDefaultLegendIdReducer = (state: LegendState): void => {
+  state.activeLegendId = DEFAULT_LEGEND_ID;
+};
+
+export const setPluginLegendReducer = (
+  state: LegendState,
+  {
+    payload,
+  }: PayloadAction<{
+    pluginId: PluginId;
+    legend: string[];
+  }>,
+): void => {
+  state.pluginLegend = {
+    ...state.pluginLegend,
+    [payload.pluginId]: payload.legend,
+  };
+};
+
+export const removePluginLegendReducer = (
+  state: LegendState,
+  { payload }: PayloadAction<string>,
+): void => {
+  if (state.pluginLegend[payload]) {
+    delete state.pluginLegend[payload];
+  }
 };

src/redux/legend/legend.selectors.ts

 import { createSelector } from '@reduxjs/toolkit';
+import { BASE_MAP_IMAGES_URL } from '@/constants';
 import { defaultLegendImagesSelector } from '../configuration/configuration.selectors';
 import { rootSelector } from '../root/root.selectors';
+import { activePluginsDataSelector } from '../plugins/plugins.selectors';
+import { DEFAULT_LEGEND_ID, DEFAULT_LEGEND_TAB } from './legend.constants';
 
 export const legendSelector = createSelector(rootSelector, state => state.legend);
 
 export const isLegendOpenSelector = createSelector(legendSelector, state => state.isOpen);
 
-// TODO: add filter for active plugins
+export const pluginLegendsSelector = createSelector(legendSelector, state => state.pluginLegend);
+
 export const currentLegendImagesSelector = createSelector(
   legendSelector,
   defaultLegendImagesSelector,
-  ({ selectedPluginId, pluginLegend }, defaultImages) => {
-    if (selectedPluginId) {
-      return pluginLegend?.[selectedPluginId] || [];
+  ({ activeLegendId, pluginLegend }, defaultImages) => {
+    if (activeLegendId === DEFAULT_LEGEND_ID)
+      return defaultImages.map(image => `${BASE_MAP_IMAGES_URL}/minerva/${image}`);
+
+    if (activeLegendId) {
+      return pluginLegend?.[activeLegendId] || [];
     }
 
-    return defaultImages;
+    return [];
+  },
+);
+
+export const allLegendsNamesAndIdsSelector = createSelector(
+  activePluginsDataSelector,
+  pluginLegendsSelector,
+  (activePlugins, pluginLegends) => {
+    const allPluginLegendsNamesAndIds = Object.keys(pluginLegends).map(hash => {
+      const plugin = Object.values(activePlugins).find(activePlugin => activePlugin.hash === hash);
+
+      return {
+        name: plugin?.name || '',
+        id: plugin?.hash || '',
+      };
+    });
+
+    return [DEFAULT_LEGEND_TAB, ...allPluginLegendsNamesAndIds];
   },
 );
+
+export const activeLegendIdSelector = createSelector(legendSelector, state => state.activeLegendId);
+
+export const isActiveLegendSelector = createSelector(
+  [activeLegendIdSelector, (_, legendId: string): string => legendId],
+  (activeLegendId, legendId) => activeLegendId === legendId,
+);

src/redux/legend/legend.slice.ts

 import { createSlice } from '@reduxjs/toolkit';
 import { LEGEND_INITIAL_STATE } from './legend.constants';
-import { closeLegendReducer, openLegendReducer } from './legend.reducers';
+import {
+  closeLegendReducer,
+  openLegendReducer,
+  removePluginLegendReducer,
+  setActiveLegendIdReducer,
+  setDefaultLegendIdReducer,
+  setPluginLegendReducer,
+} from './legend.reducers';
 
 const legendSlice = createSlice({
   name: 'legend',
@@ -8,9 +15,20 @@ const legendSlice = createSlice({
   reducers: {
     openLegend: openLegendReducer,
     closeLegend: closeLegendReducer,
+    setPluginLegend: setPluginLegendReducer,
+    setActiveLegendId: setActiveLegendIdReducer,
+    setDefaultLegendId: setDefaultLegendIdReducer,
+    removePluginLegend: removePluginLegendReducer,
   },
 });
 
-export const { openLegend, closeLegend } = legendSlice.actions;
+export const {
+  openLegend,
+  closeLegend,
+  setPluginLegend,
+  setActiveLegendId,
+  setDefaultLegendId,
+  removePluginLegend,
+} = legendSlice.actions;
 
 export default legendSlice.reducer;

src/redux/legend/legend.types.ts

-export type PluginId = number;
+export type PluginId = string;
 export type ImageUrl = string;
 
 export type LegendState = {
   isOpen: boolean;
   pluginLegend: Record<PluginId, ImageUrl[]>;
-  selectedPluginId: PluginId | undefined;
+  activeLegendId: string;
 };

src/services/pluginsManager/legend/removeLegend.ts

+import { isActiveLegendSelector } from '@/redux/legend/legend.selectors';
+import { removePluginLegend, setDefaultLegendId } from '@/redux/legend/legend.slice';
+import { store } from '@/redux/store';
+
+export const removeLegend = (pluginId: string): void => {
+  const isActivePluginLegend = isActiveLegendSelector(store.getState(), pluginId);
+  const { dispatch } = store;
+
+  if (isActivePluginLegend) {
+    dispatch(setDefaultLegendId());
+  }
+
+  dispatch(removePluginLegend(pluginId));
+};

src/services/pluginsManager/legend/setLegend.ts

+import { setPluginLegend } from '@/redux/legend/legend.slice';
+import { store } from '@/redux/store';
+
+export const setLegend = (pluginId: string, legend: string[]): void => {
+  const { dispatch } = store;
+
+  dispatch(
+    setPluginLegend({
+      pluginId,
+      legend,
+    }),
+  );
+};

src/services/pluginsManager/pluginsManager.ts

@@ -33,6 +33,8 @@ import { getVersion } from './project/data/getVersion';
 import { getBounds } from './map/data/getBounds';
 import { fitBounds } from './map/fitBounds';
 import { getOpenMapId } from './map/getOpenMapId';
+import { setLegend } from './legend/setLegend';
+import { removeLegend } from './legend/removeLegend';
 
 export const PluginsManager: PluginsManagerType = {
   hashedPlugins: {},
@@ -132,6 +134,10 @@ export const PluginsManager: PluginsManagerType = {
         removeListener: PluginsEventBus.removeListener.bind(this, hash),
         removeAllListeners: PluginsEventBus.removeAllListeners.bind(this, hash),
       },
+      legend: {
+        setLegend: setLegend.bind(this, hash),
+        removeLegend: removeLegend.bind(this, hash),
+      },
     };
   },
   createAndGetPluginContent({ hash }) {