allow to edit public overlays

src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.ts

@@ -3,6 +3,7 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { currentEditedOverlaySelector } from '@/redux/modal/modal.selector';
 import { closeModal } from '@/redux/modal/modal.slice';
 import {
+  getAllPublicOverlaysByProjectId,
   getAllUserOverlaysByCreator,
   removeOverlay,
   updateOverlays,
@@ -12,6 +13,7 @@ import { MapOverlay, OverlayGroup } from '@/types/models';
 import React, { useState } from 'react';
 import { overlayGroupsSelector } from '@/redux/overlayGroup/overlayGroup.selectors';
 import { ZERO } from '@/constants/common';
+import { PROJECT_ID } from '@/constants';
 
 type UseEditOverlayReturn = {
   name: string | undefined;
@@ -100,6 +102,7 @@ export const useEditOverlay = (): UseEditOverlayReturn => {
     });
 
     await getUserOverlaysByCreator();
+    dispatch(getAllPublicOverlaysByProjectId(PROJECT_ID));
 
     handleCloseModal();
   };

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/GeneralOverlays.component.tsx

 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { overlaysDataSelector } from '@/redux/overlays/overlays.selectors';
+import { userRoleSelector } from '@/redux/user/user.selectors';
+import { USER_ROLE } from '@/constants/user';
+import { UserOverlaysGroup } from '@/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup';
+import React from 'react';
 import { OverlayListItem } from './OverlayListItem';
 
 export const GeneralOverlays = (): JSX.Element => {
   const generalPublicOverlays = useAppSelector(overlaysDataSelector);
+  const role = useAppSelector(userRoleSelector);
+
+  const isAdmin = role === USER_ROLE.ADMIN;
 
   return (
-    <div className="border-b border-b-divide p-6">
-      <p className="mb-5 text-sm font-semibold">Shared Overlays:</p>
-      <ul>
-        {generalPublicOverlays.map(overlay => (
-          <OverlayListItem key={overlay.id} name={overlay.name} overlayId={overlay.id} />
-        ))}
-      </ul>
+    <div>
+      {isAdmin && (
+        <UserOverlaysGroup
+          key={0}
+          groupName="Shared overlays"
+          groupId={null}
+          overlays={generalPublicOverlays}
+          dangerouslySetExpanded
+        />
+      )}
+      {!isAdmin && (
+        <div className="border-b border-b-divide p-6">
+          <p className="mb-5 text-sm font-semibold">Shared Overlays:</p>
+          <ul>
+            {generalPublicOverlays.map(overlay => (
+              <OverlayListItem key={overlay.id} name={overlay.name} overlayId={overlay.id} />
+            ))}
+          </ul>
+        </div>
+      )}
     </div>
   );
 };

src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup/UserOverlaysGroup.component.tsx

@@ -21,12 +21,14 @@ type OverlayGroupProps = {
   groupId: number | null;
   groupName: string;
   overlays: MapOverlay[];
+  dangerouslySetExpanded?: boolean;
 };
 
 export const UserOverlaysGroup = ({
   overlays,
   groupName,
   groupId,
+  dangerouslySetExpanded,
 }: OverlayGroupProps): React.ReactNode => {
   const { moveUserOverlayListItem, updateUserOverlaysOrder, isPending, userOverlaysList } =
     useUserOverlays(overlays, groupId);
@@ -49,8 +51,6 @@ export const UserOverlaysGroup = ({
   };
 
   const openEditGroup = (): void => {
-    // eslint-disable-next-line no-console
-    console.log('Open edit group', groupId);
     if (overlayGroup) {
       dispatch(openEditOverlayGroupModal(overlayGroup));
     }
@@ -60,7 +60,7 @@ export const UserOverlaysGroup = ({
     <DndProvider backend={HTML5Backend}>
       <div className="mt-2.5">
         <Accordion allowZeroExpanded>
-          <AccordionItem className="border-b-0">
+          <AccordionItem className="border-b-0" dangerouslySetExpanded={dangerouslySetExpanded}>
             <AccordionItemHeading>
               <AccordionItemButton
                 className="px-6 text-sm font-semibold"