feat: add rfc changes

src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx

 /* eslint-disable no-magic-numbers */
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { setCurrentDrawerPluginHash } from '@/redux/plugins/plugins.slice';
 import { Button } from '@/shared/Button';
 import { MinervaPlugin } from '@/types/models';
 import { useLoadPlugin } from './hooks/useLoadPlugin';
@@ -8,9 +10,14 @@ export interface Props {
 }
 
 export const LoadPlugin = ({ plugin }: Props): JSX.Element => {
+  const dispatch = useAppDispatch();
+
   const { isPluginActive, togglePlugin, isPluginLoading } = useLoadPlugin({
     hash: plugin.hash,
     pluginUrl: plugin.urls[0],
+    onPluginLoaded: () => {
+      dispatch(setCurrentDrawerPluginHash(plugin.hash));
+    },
   });
 
   return (

src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin.ts

@@ -22,9 +22,14 @@ type UseLoadPluginReturnType = {
 type UseLoadPluginProps = {
   hash: string;
   pluginUrl: string;
+  onPluginLoaded?(): void;
 };
 
-export const useLoadPlugin = ({ hash, pluginUrl }: UseLoadPluginProps): UseLoadPluginReturnType => {
+export const useLoadPlugin = ({
+  hash,
+  pluginUrl,
+  onPluginLoaded,
+}: UseLoadPluginProps): UseLoadPluginReturnType => {
   const isPluginActive = useAppSelector(state => isPluginActiveSelector(state, hash));
   const isPluginLoading = useAppSelector(state => isPluginLoadingSelector(state, hash));
   const isPluginSelected = useAppSelector(state => isPluginSelectedSelector(state, hash));
@@ -44,6 +49,10 @@ export const useLoadPlugin = ({ hash, pluginUrl }: UseLoadPluginProps): UseLoadP
     });
 
     loadPlugin();
+
+    if (onPluginLoaded) {
+      onPluginLoaded();
+    }
   };
 
   const handleUnloadPlugin = (): void => {

src/components/Map/PluginsDrawer/PluginsHeader/PluginHeaderInfo/PluginHeaderInfo.component.tsx

 import { useLoadPlugin } from '@/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin';
 import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { setCurrentDrawerPluginHash } from '@/redux/plugins/plugins.slice';
 import { Icon } from '@/shared/Icon';
 import { MinervaPlugin } from '@/types/models';
 import { RELOAD_PLUGIN_DRAWER_BUTTON_ROLE } from './PluginHeaderInfo.constants';
@@ -9,9 +11,14 @@ interface Props {
 }
 
 export const PluginHeaderInfo = ({ plugin }: Props): JSX.Element => {
+  const dispatch = useAppDispatch();
+
   const { reloadPlugin } = useLoadPlugin({
     hash: plugin.hash,
     pluginUrl: plugin.urls[FIRST_ARRAY_ELEMENT],
+    onPluginLoaded: () => {
+      dispatch(setCurrentDrawerPluginHash(plugin.hash));
+    },
   });
 
   return (

src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/index.ts

-export { LoadPluginButton } from './LoadPluginButton.component';

src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/LoadPluginButton.component.test.tsx → src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/LoadPluginElement.component.test.tsx

@@ -15,7 +15,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import axios, { HttpStatusCode } from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { MockStoreEnhanced } from 'redux-mock-store';
-import { LoadPluginButton } from './LoadPluginButton.component';
+import { LoadPluginElement } from './LoadPluginElement.component';
 
 const mockedAxiosClient = new MockAdapter(axios);
 
@@ -27,7 +27,7 @@ const renderComponent = (
   return (
     render(
       <Wrapper>
-        <LoadPluginButton plugin={plugin} />
+        <LoadPluginElement plugin={plugin} />
       </Wrapper>,
     ),
     {

src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginButton/LoadPluginButton.component.tsx → src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/LoadPluginElement.component.tsx

 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import { useLoadPlugin } from '@/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/hooks/useLoadPlugin';
 import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { setCurrentDrawerPluginHash } from '@/redux/plugins/plugins.slice';
 import { MinervaPlugin } from '@/types/models';
 
 interface LoadPluginButtonProps {
   plugin: MinervaPlugin;
 }
 
-export const LoadPluginButton = ({ plugin }: LoadPluginButtonProps): JSX.Element => {
-  const { hash, name } = plugin;
+export const LoadPluginElement = ({ plugin }: LoadPluginButtonProps): JSX.Element => {
+  const { hash, name, urls } = plugin;
+  const dispatch = useAppDispatch();
 
   const { loadPlugin } = useLoadPlugin({
-    hash: plugin.hash,
-    pluginUrl: plugin.urls[FIRST_ARRAY_ELEMENT],
+    hash,
+    pluginUrl: urls[FIRST_ARRAY_ELEMENT],
+    onPluginLoaded: () => {
+      dispatch(setCurrentDrawerPluginHash(hash));
+    },
   });
 
   return (
-    <div
+    <li
       key={hash}
       className="flex cursor-pointer flex-col border-t px-4 py-2 shadow-sm"
       onClick={loadPlugin}
     >
       {name}
-    </div>
+    </li>
   );
 };

src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/LoadPluginElement/index.ts

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

src/components/Map/PluginsDrawer/PluginsHeader/PluginOpenButton/PluginOpenButton.component.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/shared/Button';
 import { MinervaPlugin } from '@/types/models';
 import { useSelect } from 'downshift';
 import { useSelector } from 'react-redux';
-import { LoadPluginButton } from './LoadPluginButton';
+import { LoadPluginElement } from './LoadPluginElement';
 
 export const PluginOpenButton = (): JSX.Element | null => {
   const publicPlugins = useSelector(publicPluginsListWithoutActiveSelector);
@@ -21,13 +21,13 @@ export const PluginOpenButton = (): JSX.Element | null => {
             Open new plugin
           </Button>
           <ul
-            className={`absolute left-[-50%] z-10 max-h-80 w-48 translate-x-1/4 overflow-x-hidden overflow-y-scroll rounded-sm border bg-white p-0 ps-0 ${
+            className={`absolute -left-1/2 z-10 max-h-80 w-48 translate-x-1/4 overflow-x-hidden overflow-y-scroll rounded-sm border bg-white p-0 ps-0 ${
               !isOpen && 'hidden'
             }`}
             {...getMenuProps()}
           >
             {publicPlugins.map((plugin: MinervaPlugin) => (
-              <LoadPluginButton key={plugin.hash} plugin={plugin} />
+              <LoadPluginElement key={plugin.hash} plugin={plugin} />
             ))}
           </ul>
         </>

src/components/Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx

@@ -2,6 +2,7 @@
 import { ZERO } from '@/constants/common';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { allActivePluginsSelector } from '@/redux/plugins/plugins.selectors';
+import { useMemo } from 'react';
 import { PluginSingleTab } from './PluginSingleTab';
 
 export const PluginsTabs = (): JSX.Element => {
@@ -12,10 +13,13 @@ export const PluginsTabs = (): JSX.Element => {
     <PluginSingleTab plugin={plugin} key={plugin.hash} />
   ));
 
-  const pluginsEmptyInfo = (
-    <div className="flex h-10 items-center px-4 text-[#979797]">
-      You don&apos;t have any opened plugin yet
-    </div>
+  const pluginsEmptyInfo = useMemo(
+    () => (
+      <div className="flex h-10 items-center px-4 text-[#979797]">
+        You don&apos;t have any opened plugin yet
+      </div>
+    ),
+    [],
   );
 
   return (