Merge branch 'MIN-292-navigating-search-results-in-the-left-panel' into 'development'

fix: navigating search results in the left panel (MIN-292)

Closes MIN-292

See merge request !212

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx

+import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
 import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
 import { MODELS_MOCK } from '@/models/mocks/modelsMock';
-import { StoreType } from '@/redux/store';
+import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
+import { AppDispatch, RootState, StoreType } from '@/redux/store';
 import { Accordion } from '@/shared/Accordion';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
 import {
   InitialStoreState,
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
 import { render, screen } from '@testing-library/react';
+import { MockStoreEnhanced } from 'redux-mock-store';
 import { BioEntitiesAccordion } from './BioEntitiesAccordion.component';
 
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -26,6 +30,25 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
   );
 };
 
+const renderComponentWithActionListener = (
+  initialStoreState: InitialStoreState = {},
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+  const { Wrapper, store } = getReduxStoreWithActionsListener(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <Accordion>
+          <BioEntitiesAccordion />
+        </Accordion>
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
 describe('BioEntitiesAccordion - component', () => {
   it('should display loading indicator when bioEntity search is pending', () => {
     renderComponent({
@@ -77,4 +100,36 @@ describe('BioEntitiesAccordion - component', () => {
     expect(screen.getByText('Histamine signaling (4)')).toBeInTheDocument();
     expect(screen.getByText('PRKN substrates (3)')).toBeInTheDocument();
   });
+
+  it('should fire toggleIsContentTabOpened on accordion item button click', () => {
+    const { store } = renderComponentWithActionListener({
+      ...INITIAL_STORE_STATE_MOCK,
+      bioEntity: {
+        data: [
+          {
+            searchQueryElement: '',
+            loading: 'succeeded',
+            error: { name: '', message: '' },
+            data: bioEntitiesContentFixture,
+          },
+        ],
+        loading: 'succeeded',
+        error: { name: '', message: '' },
+        isContentTabOpened: false,
+      },
+      models: {
+        data: MODELS_MOCK,
+        loading: 'succeeded',
+        error: { name: '', message: '' },
+      },
+    });
+
+    const button = screen.getByTestId('accordion-item-button');
+
+    button.click();
+    expect(store.getActions()[FIRST_ARRAY_ELEMENT]).toStrictEqual({
+      payload: true,
+      type: 'bioEntityContents/toggleIsContentTabOpened',
+    });
+  });
 });

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx

+import {
+  bioEntitiesPerModelSelector,
+  bioEntityIsContentTabOpenedSelector,
+  loadingBioEntityStatusSelector,
+  numberOfBioEntitiesSelector,
+} from '@/redux/bioEntity/bioEntity.selectors';
+import { toggleIsContentTabOpened } from '@/redux/bioEntity/bioEntity.slice';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import {
   AccordionItem,
   AccordionItemButton,
-  AccordionItemPanel,
   AccordionItemHeading,
+  AccordionItemPanel,
 } from '@/shared/Accordion';
-import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import {
-  loadingBioEntityStatusSelector,
-  bioEntitiesPerModelSelector,
-  numberOfBioEntitiesSelector,
-} from '@/redux/bioEntity/bioEntity.selectors';
 import { BioEntitiesSubmapItem } from './BioEntitiesSubmapItem';
 
 export const BioEntitiesAccordion = (): JSX.Element => {
+  const dispatch = useAppDispatch();
   const bioEntitiesNumber = useAppSelector(numberOfBioEntitiesSelector);
   const bioEntitiesState = useAppSelector(loadingBioEntityStatusSelector);
   const bioEntitiesPerModel = useAppSelector(bioEntitiesPerModelSelector);
+  const isContentTabOpened = useAppSelector(bioEntityIsContentTabOpenedSelector);
+
+  const toggleTabOpened = (): void => {
+    dispatch(toggleIsContentTabOpened(!isContentTabOpened));
+  };
 
   return (
-    <AccordionItem>
+    <AccordionItem dangerouslySetExpanded={isContentTabOpened}>
       <AccordionItemHeading>
-        <AccordionItemButton>
+        <AccordionItemButton onClick={toggleTabOpened}>
           Content {bioEntitiesState === 'pending' && ' (Loading...)'}
           {bioEntitiesState === 'succeeded' && ` (${bioEntitiesNumber})`}
         </AccordionItemButton>

src/redux/bioEntity/bioEntity.constants.ts

@@ -20,4 +20,5 @@ export const BIOENTITY_INITIAL_STATE: BioEntityContentsState = {
   loading: 'idle',
   error: { name: '', message: '' },
   submapConnections: BIOENTITY_SUBMAP_CONNECTIONS_INITIAL_STATE,
+  isContentTabOpened: false,
 };

src/redux/bioEntity/bioEntity.reducers.test.ts

@@ -6,8 +6,8 @@ import {
   createStoreInstanceUsingSliceReducer,
 } from '@/utils/createStoreInstanceUsingSliceReducer';
 import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
-import { HttpStatusCode } from 'axios';
 import { unwrapResult } from '@reduxjs/toolkit';
+import { HttpStatusCode } from 'axios';
 import bioEntityContentsReducer from './bioEntity.slice';
 import { getBioEntity } from './bioEntity.thunks';
 import { BioEntityContentsState } from './bioEntity.types';
@@ -20,6 +20,7 @@ jest.mock('../../utils/error-report/errorReporting');
 const INITIAL_STATE: BioEntityContentsState = {
   data: [],
   loading: 'idle',
+  isContentTabOpened: false,
   error: { name: '', message: '' },
   submapConnections: {
     data: [],

src/redux/bioEntity/bioEntity.reducers.ts

 import { DEFAULT_ERROR } from '@/constants/errors';
-import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
+import { ActionReducerMapBuilder, PayloadAction } from '@reduxjs/toolkit';
 import { BIOENTITY_SUBMAP_CONNECTIONS_INITIAL_STATE } from './bioEntity.constants';
 import { getBioEntity, getMultiBioEntity } from './bioEntity.thunks';
 import { BioEntityContentsState } from './bioEntity.types';
@@ -86,3 +86,10 @@ export const clearBioEntitiesDataReducer = (state: BioEntityContentsState): void
 
   state.submapConnections = BIOENTITY_SUBMAP_CONNECTIONS_INITIAL_STATE;
 };
+
+export const toggleIsContentTabOpenedReducer = (
+  state: BioEntityContentsState,
+  action: PayloadAction<boolean>,
+): void => {
+  state.isContentTabOpened = action.payload;
+};

src/redux/bioEntity/bioEntity.selectors.ts

-import { rootSelector } from '@/redux/root/root.selectors';
 import { ONE, SIZE_OF_EMPTY_ARRAY, ZERO } from '@/constants/common';
-import { BioEntityWithPinType } from '@/types/bioEntity';
-import { ElementIdTabObj } from '@/types/elements';
-import { MultiSearchData } from '@/types/fetchDataState';
-import { BioEntity, BioEntityContent, Comment, MapModel } from '@/types/models';
-import { createSelector } from '@reduxjs/toolkit';
 import {
   allCommentsSelectorOfCurrentMap,
   commentElementSelector,
 } from '@/redux/comment/comment.selectors';
 import { currentDrawerReactionSelector } from '@/redux/reactions/reactions.selector';
+import { rootSelector } from '@/redux/root/root.selectors';
+import { BioEntityWithPinType } from '@/types/bioEntity';
+import { ElementIdTabObj } from '@/types/elements';
+import { MultiSearchData } from '@/types/fetchDataState';
+import { BioEntity, BioEntityContent, Comment, MapModel } from '@/types/models';
+import { createSelector } from '@reduxjs/toolkit';
 import {
   allChemicalsBioEntitesOfAllMapsSelector,
   allChemicalsBioEntitesOfCurrentMapSelector,
@@ -35,6 +35,11 @@ export const bioEntitySelector = createSelector(rootSelector, state => state.bio
 
 export const bioEntityDataSelector = createSelector(bioEntitySelector, bioEntity => bioEntity.data);
 
+export const bioEntityIsContentTabOpenedSelector = createSelector(
+  bioEntitySelector,
+  bioEntity => bioEntity.isContentTabOpened,
+);
+
 export const bioEntityLoadingSelector = createSelector(
   bioEntitySelector,
   bioEntity => bioEntity.loading,

src/redux/bioEntity/bioEntity.slice.ts

@@ -5,6 +5,7 @@ import {
   getBioEntityContentsReducer,
   getMultiBioEntityContentsReducer,
   getSubmapConnectionsBioEntityReducer,
+  toggleIsContentTabOpenedReducer,
 } from './bioEntity.reducers';
 
 export const bioEntityContentsSlice = createSlice({
@@ -12,6 +13,7 @@ export const bioEntityContentsSlice = createSlice({
   initialState: BIOENTITY_INITIAL_STATE,
   reducers: {
     clearBioEntitiesData: clearBioEntitiesDataReducer,
+    toggleIsContentTabOpened: toggleIsContentTabOpenedReducer,
   },
   extraReducers: builder => {
     getBioEntityContentsReducer(builder);
@@ -20,6 +22,6 @@ export const bioEntityContentsSlice = createSlice({
   },
 });
 
-export const { clearBioEntitiesData } = bioEntityContentsSlice.actions;
+export const { clearBioEntitiesData, toggleIsContentTabOpened } = bioEntityContentsSlice.actions;
 
 export default bioEntityContentsSlice.reducer;

src/redux/bioEntity/bioEntity.types.ts

@@ -4,6 +4,7 @@ import { PayloadAction } from '@reduxjs/toolkit';
 
 export type BioEntityContentsState = MultiFetchDataState<BioEntityContent[]> & {
   submapConnections?: FetchDataState<BioEntityContent[]>;
+  isContentTabOpened?: boolean;
 };
 
 export type BioEntityContentSearchQuery = {