src/redux/map/map.types.ts

@@ -44,7 +44,9 @@ export type MapData = {
   };
 };
 
-export type MapState = FetchDataState<MapData, MapData> & { openedMaps: OppenedMap[] };
+export type MapState = FetchDataState<MapData, MapData> & { openedMaps: OppenedMap[] } & {
+  backgroundType: number;
+};
 
 export type SetMapDataActionPayload =
   | (Omit<Partial<MapData>, 'position' | 'projectId'> & {

src/redux/map/middleware/checkIfIsMapUpdateActionValid.test.ts

 import { RootState } from '@/redux/store';
 import { Loading } from '@/types/loadingState';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import {
   MAP_DATA_INITIAL_STATE,
   MIDDLEWARE_ALLOWED_ACTIONS,
@@ -17,6 +18,7 @@ const state: Pick<RootState, 'map'> = {
     loading: 'idle' as Loading,
     error: { name: '', message: '' },
     openedMaps: OPENED_MAPS_INITIAL_STATE,
+    backgroundType: MapBackgroundsEnum.SEMANTIC,
   },
 };
 

src/redux/map/middleware/map.middleware.test.ts

@@ -3,6 +3,7 @@ import { modelsFixture } from '@/models/fixtures/modelsFixture';
 import { Loading } from '@/types/loadingState';
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { Action } from '@reduxjs/toolkit';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import {
   MAP_DATA_INITIAL_STATE,
   MIDDLEWARE_ALLOWED_ACTIONS,
@@ -63,6 +64,7 @@ const { store } = getReduxWrapperWithStore({
       modelId: modelsFixture[0].idObject,
     },
     openedMaps: OPENED_MAPS_INITIAL_STATE,
+    backgroundType: MapBackgroundsEnum.SEMANTIC,
   },
   models: {
     ...defaultSliceState,

src/services/pluginsManager/map/data/getBounds.test.ts

@@ -2,6 +2,7 @@
 import { MAP_DATA_INITIAL_STATE } from '@/redux/map/map.constants';
 import { store } from '@/redux/store';
 import { Map } from 'ol';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { MapManager } from '../mapManager';
 import { getBounds } from './getBounds';
 
@@ -45,6 +46,7 @@ describe('getBounds', () => {
               message: '',
             },
             openedMaps: [],
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }) as any,

src/services/pluginsManager/map/fitBounds/fitBounds.test.ts

@@ -2,6 +2,7 @@
 import { MAP_DATA_INITIAL_STATE } from '@/redux/map/map.constants';
 import { Map } from 'ol';
 import { store } from '@/redux/store';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { fitBounds } from './fitBounds';
 import { MapManager } from '../mapManager';
 
@@ -51,6 +52,7 @@ describe('fitBounds', () => {
                 message: '',
               },
               openedMaps: [],
+              backgroundType: MapBackgroundsEnum.SEMANTIC,
             },
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
           }) as any,
@@ -101,6 +103,7 @@ describe('fitBounds', () => {
                 message: '',
               },
               openedMaps: [],
+              backgroundType: MapBackgroundsEnum.SEMANTIC,
             },
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
           }) as any,

src/services/pluginsManager/map/openMap.test.ts

@@ -3,6 +3,7 @@ import { openMapAndSetActive, setActiveMap } from '@/redux/map/map.slice';
 import { RootState, store } from '@/redux/store';
 import { initialMapDataFixture, openedMapsThreeSubmapsFixture } from '@/redux/map/map.fixtures';
 import { MODELS_MOCK, MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { PluginsEventBus } from '../pluginsEventBus';
 import { openMap } from './openMap';
 
@@ -25,6 +26,7 @@ describe('openMap', () => {
             loading: 'succeeded',
             error: { message: '', name: '' },
             openedMaps: openedMapsThreeSubmapsFixture,
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
           models: {
             data: MODELS_MOCK_SHORT,
@@ -50,6 +52,7 @@ describe('openMap', () => {
             loading: 'succeeded',
             error: { message: '', name: '' },
             openedMaps: openedMapsThreeSubmapsFixture,
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
           models: {
             data: MODELS_MOCK,
@@ -77,6 +80,7 @@ describe('openMap', () => {
             loading: 'succeeded',
             error: { message: '', name: '' },
             openedMaps: openedMapsThreeSubmapsFixture,
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
           models: {
             data: MODELS_MOCK,

src/services/pluginsManager/map/position/getCenter.test.ts

 import { initialMapDataFixture, openedMapsThreeSubmapsFixture } from '@/redux/map/map.fixtures';
 import { RootState, store } from '@/redux/store';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { getCenter } from './getCenter';
 
 jest.mock('../../../../redux/store');
@@ -25,6 +26,7 @@ describe('getCenter - plugin method', () => {
           loading: 'succeeded',
           error: { message: '', name: '' },
           openedMaps: openedMapsThreeSubmapsFixture,
+          backgroundType: MapBackgroundsEnum.SEMANTIC,
         },
       }) as RootState,
   );

src/services/pluginsManager/map/triggerSearch/triggerSearch.test.ts

@@ -11,6 +11,7 @@ import { RootState, store } from '@/redux/store';
 import { mockNetworkNewAPIResponse, mockNetworkResponse } from '@/utils/mockNetworkResponse';
 import { waitFor } from '@testing-library/react';
 import { HttpStatusCode } from 'axios';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { triggerSearch } from './triggerSearch';
 import { ERROR_INVALID_MODEL_ID_TYPE } from '../../errorMessages';
 
@@ -29,6 +30,7 @@ const MOCK_STATE = {
     loading: 'succeeded',
     error: { message: '', name: '' },
     openedMaps: openedMapsThreeSubmapsFixture,
+    backgroundType: MapBackgroundsEnum.SEMANTIC,
   },
   configuration: CONFIGURATION_INITIAL_STORE_MOCKS,
 };

src/services/pluginsManager/map/zoom/getZoom.test.ts

 /* eslint-disable no-magic-numbers */
 import { initialMapDataFixture, openedMapsThreeSubmapsFixture } from '@/redux/map/map.fixtures';
 import { RootState, store } from '@/redux/store';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { getZoom } from './getZoom';
 
 jest.mock('../../../../redux/store');
@@ -28,6 +29,7 @@ describe('getZoom - plugin method', () => {
               loading: 'succeeded',
               error: { message: '', name: '' },
               openedMaps: openedMapsThreeSubmapsFixture,
+              backgroundType: MapBackgroundsEnum.SEMANTIC,
             },
           }) as RootState,
       );
@@ -57,6 +59,7 @@ describe('getZoom - plugin method', () => {
               loading: 'succeeded',
               error: { message: '', name: '' },
               openedMaps: openedMapsThreeSubmapsFixture,
+              backgroundType: MapBackgroundsEnum.SEMANTIC,
             },
           }) as RootState,
       );

src/services/pluginsManager/map/zoom/setZoom.test.ts

@@ -4,6 +4,7 @@ import { initialMapDataFixture, openedMapsThreeSubmapsFixture } from '@/redux/ma
 import { setLastPositionZoom } from '@/redux/map/map.slice';
 import { RootState, store } from '@/redux/store';
 import { ZodError } from 'zod';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { setZoom } from './setZoom';
 
 jest.mock('../../../../redux/store');
@@ -36,6 +37,7 @@ describe('setZoom - plugin method', () => {
             loading: 'succeeded',
             error: { message: '', name: '' },
             openedMaps: openedMapsThreeSubmapsFixture,
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
         }) as RootState,
     );

src/shared/Select/Select.component.test.tsx

+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Select } from '.';
+
+describe('Select Component', () => {
+  const mockOptions = [
+    { id: 1, name: 'Option 1' },
+    { id: 2, name: 'Option 2' },
+    { id: 3, name: 'Option 3' },
+  ];
+
+  const mockOnChange = jest.fn();
+
+  it('renders the Select component', () => {
+    render(<Select options={mockOptions} selectedId={1} onChange={mockOnChange} />);
+    expect(screen.getByTestId('select-component')).toBeInTheDocument();
+  });
+
+  it('displays the selected option name', () => {
+    render(<Select options={mockOptions} selectedId={1} onChange={mockOnChange} />);
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+
+  it('opens the dropdown when clicked', () => {
+    render(<Select options={mockOptions} selectedId={1} onChange={mockOnChange} />);
+    const toggleButton = screen.getByTestId('dropdown-button-name');
+
+    fireEvent.click(toggleButton);
+    expect(screen.getByRole('listbox')).toBeVisible();
+  });
+
+  it('calls onChange with the correct value when an option is clicked', () => {
+    render(<Select options={mockOptions} selectedId={1} onChange={mockOnChange} />);
+    fireEvent.click(screen.getByTestId('dropdown-button-name'));
+    const optionToSelect = screen.getByText('Option 3');
+
+    fireEvent.click(optionToSelect);
+    expect(mockOnChange).toHaveBeenCalledWith(3);
+  });
+});

src/shared/Select/Select.component.tsx

+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useSelect } from 'downshift';
+import { Icon } from '@/shared/Icon';
+
+type SelectProps = {
+  options: Array<{ id: number; name: string }>;
+  selectedId: number;
+  onChange: (selectedId: number) => void;
+  width?: string | number;
+};
+
+export const Select = ({
+  options,
+  selectedId,
+  onChange,
+  width = '100%',
+}: SelectProps): React.JSX.Element => {
+  const selectedOption = options.find(option => option.id === selectedId);
+
+  const {
+    isOpen,
+    highlightedIndex,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    selectedItem,
+  } = useSelect({
+    items: options,
+    selectedItem: selectedOption,
+    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+      if (newSelectedItem) {
+        onChange(newSelectedItem.id);
+      }
+    },
+    itemToString: item => (item ? item.name : ''),
+  });
+
+  const widthStyle = typeof width === 'number' ? { width: `${width}px` } : { width };
+
+  return (
+    <div
+      data-testid="select-component"
+      className={twMerge(
+        'relative rounded-t bg-white text-xs shadow-primary',
+        !isOpen && 'rounded-b',
+      )}
+      style={widthStyle}
+    >
+      <div
+        className={twMerge(
+          'flex cursor-pointer flex-row items-center justify-between rounded-t p-2',
+        )}
+        {...getToggleButtonProps()}
+      >
+        <span data-testid="dropdown-button-name" className="font-medium">
+          {selectedItem ? selectedItem.name : 'Select an option'}
+        </span>
+        <Icon
+          name="chevron-down"
+          className={twMerge('arrow-button h-6 w-6 fill-primary-500', isOpen && 'rotate-180')}
+        />
+      </div>
+      <ul
+        className={twMerge(
+          'absolute z-10 overflow-auto rounded-b bg-white shadow-lg',
+          !isOpen && 'hidden',
+        )}
+        style={widthStyle}
+        {...getMenuProps()}
+      >
+        {isOpen &&
+          options.map((item, index) => (
+            <li
+              className={twMerge(
+                'border-t',
+                highlightedIndex === index && 'text-primary-500',
+                selectedItem?.id === item.id && 'font-bold',
+                'flex flex-col p-2 shadow-sm',
+              )}
+              key={item.id}
+              {...getItemProps({ item, index })}
+            >
+              <span>{item.name}</span>
+            </li>
+          ))}
+      </ul>
+    </div>
+  );
+};

src/shared/Select/index.tsx

+export { Select } from './Select.component';

src/utils/map/useSetBounds.test.ts

@@ -4,6 +4,7 @@ import { MAP_DATA_INITIAL_STATE } from '@/redux/map/map.constants';
 import { renderHook } from '@testing-library/react';
 import { Map } from 'ol';
 import { Coordinate } from 'ol/coordinate';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { getReduxWrapperWithStore } from '../testing/getReduxWrapperWithStore';
 import { useSetBounds } from './useSetBounds';
 
@@ -34,6 +35,7 @@ describe('useSetBounds - hook', () => {
               message: '',
             },
             openedMaps: [],
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
         },
         {
@@ -79,6 +81,7 @@ describe('useSetBounds - hook', () => {
               message: '',
             },
             openedMaps: [],
+            backgroundType: MapBackgroundsEnum.SEMANTIC,
           },
         },
         {

src/utils/query-manager/useReduxBusQueryManager.test.ts

@@ -2,6 +2,7 @@ import { MAP_DATA_INITIAL_STATE, OPENED_MAPS_INITIAL_STATE } from '@/redux/map/m
 import { Loading } from '@/types/loadingState';
 import { renderHook, waitFor } from '@testing-library/react';
 import mockRouter from 'next-router-mock';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
 import { getReduxWrapperWithStore } from '../testing/getReduxWrapperWithStore';
 import { useReduxBusQueryManager } from './useReduxBusQueryManager';
 
@@ -70,6 +71,7 @@ describe('useReduxBusQueryManager - util', () => {
           },
         },
         openedMaps: OPENED_MAPS_INITIAL_STATE,
+        backgroundType: MapBackgroundsEnum.SEMANTIC,
       },
       backgrounds: loadedDataMock,
       models: loadedDataMock,