fix(layers): added permission to edit layers on the map

src/components/Map/Drawer/LayersDrawer/LayersDrawer.component.tsx

@@ -15,11 +15,13 @@ import { getLayersForModel, removeLayer } from '@/redux/layers/layers.thunks';
 import { showToast } from '@/utils/showToast';
 import { SerializedError } from '@reduxjs/toolkit';
 import { LayersDrawerLayerActions } from '@/components/Map/Drawer/LayersDrawer/LayersDrawerLayerActions.component';
+import { hasPrivilegeToWriteProjectSelector } from '@/redux/user/user.selectors';
 
 export const LayersDrawer = (): JSX.Element => {
   const layersForCurrentModel = useAppSelector(layersForCurrentModelSelector);
   const layersVisibilityForCurrentModel = useAppSelector(layersVisibilityForCurrentModelSelector);
   const currentModelId = useAppSelector(currentModelIdSelector);
+  const hasPrivilegeToWriteProject = useAppSelector(hasPrivilegeToWriteProjectSelector);
   const dispatch = useAppDispatch();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [layerId, setLayerId] = useState<number | null>(null);
@@ -72,11 +74,13 @@ export const LayersDrawer = (): JSX.Element => {
       />
       <DrawerHeading title="Layers" />
       <div className="flex h-[calc(100%-93px)] max-h-[calc(100%-93px)] flex-col overflow-y-auto px-6">
-        <div className="flex justify-start pt-2">
-          <Button icon="plus" isIcon isFrontIcon onClick={addNewLayer}>
-            Add new layer
-          </Button>
-        </div>
+        {hasPrivilegeToWriteProject && (
+          <div className="flex justify-start pt-2">
+            <Button icon="plus" isIcon isFrontIcon onClick={addNewLayer}>
+              Add new layer
+            </Button>
+          </div>
+        )}
         {layersForCurrentModel.map(layer => (
           <div
             key={layer.details.id}

src/components/Map/Drawer/LayersDrawer/LayersDrawerLayerActions.component.tsx

 import { Button } from '@/shared/Button';
 import { Switch } from '@/shared/Switch';
+import { hasPrivilegeToWriteProjectSelector } from '@/redux/user/user.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
 
 type LayersDrawerLayerActionsProps = {
   editLayer: () => void;
@@ -14,13 +16,19 @@ export const LayersDrawerLayerActions = ({
   isChecked,
   toggleVisibility,
 }: LayersDrawerLayerActionsProps): JSX.Element => {
+  const hasPrivilegeToWriteProject = useAppSelector(hasPrivilegeToWriteProjectSelector);
+
   return (
     <div className="flex items-center gap-2">
       <Switch isChecked={isChecked} onToggle={value => toggleVisibility(value)} />
-      <Button onClick={() => editLayer()}>Edit</Button>
-      <Button onClick={() => removeLayer()} color="error" variantStyles="remove">
-        Remove
-      </Button>
+      {hasPrivilegeToWriteProject && (
+        <>
+          <Button onClick={() => editLayer()}>Edit</Button>
+          <Button onClick={() => removeLayer()} color="error" variantStyles="remove">
+            Remove
+          </Button>
+        </>
+      )}
     </div>
   );
 };

src/components/Map/Map.component.tsx

@@ -9,11 +9,13 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { MapAdditionalLogos } from '@/components/Map/MapAdditionalLogos';
 import { MapDrawActions } from '@/components/Map/MapDrawActions/MapDrawActions.component';
 import { layersActiveLayerSelector } from '@/redux/layers/layers.selectors';
+import { hasPrivilegeToWriteProjectSelector } from '@/redux/user/user.selectors';
 import { MapAdditionalActions } from './MapAdditionalActions';
 import { PluginsDrawer } from './PluginsDrawer';
 
 export const Map = (): JSX.Element => {
   const activeLayer = useAppSelector(layersActiveLayerSelector);
+  const hasPrivilegeToWriteProject = useAppSelector(hasPrivilegeToWriteProjectSelector);
 
   return (
     <div
@@ -22,8 +24,12 @@ export const Map = (): JSX.Element => {
     >
       <MapViewer />
       <MapVectorBackgroundSelector />
-      <MapActiveLayerSelector />
-      {activeLayer && <MapDrawActions />}
+      {hasPrivilegeToWriteProject && (
+        <>
+          <MapActiveLayerSelector />
+          {activeLayer && <MapDrawActions />}
+        </>
+      )}
       <Drawer />
       <PluginsDrawer />
       <Legend />

src/redux/user/user.selectors.ts

 import { rootSelector } from '@/redux/root/root.selectors';
 import { createSelector } from '@reduxjs/toolkit';
+import { projectIdSelector } from '@/redux/project/project.selectors';
+import { hasPrivilegeToObject } from '@/redux/user/user.utils';
+import { UserPrivilege } from '@/types/models';
 
 export const userSelector = createSelector(rootSelector, state => state.user);
 
@@ -7,3 +10,17 @@ export const authenticatedUserSelector = createSelector(userSelector, state => s
 export const loadingUserSelector = createSelector(userSelector, state => state.loading);
 export const loginUserSelector = createSelector(userSelector, state => state.login);
 export const userRoleSelector = createSelector(userSelector, state => state.role);
+export const userPrivilegesSelector = createSelector(
+  userSelector,
+  state => state.userData?.privileges || [],
+);
+export const hasPrivilegeToWriteProjectSelector = createSelector(
+  userPrivilegesSelector,
+  projectIdSelector,
+  (userPrivileges: UserPrivilege[], projectId: string | undefined): boolean => {
+    if (!projectId) {
+      return false;
+    }
+    return hasPrivilegeToObject(userPrivileges, 'WRITE_PROJECT', projectId);
+  },
+);

src/redux/user/user.utils.ts

@@ -3,3 +3,15 @@ import { UserPrivilege } from '@/types/models';
 export const hasPrivilege = (privileges: UserPrivilege[], privilegeType: string): boolean => {
   return privileges.some(privilege => privilege.privilegeType === privilegeType);
 };
+
+export const hasPrivilegeToObject = (
+  privileges: UserPrivilege[],
+  privilegeType: string,
+  objectId: string,
+): boolean => {
+  return Boolean(
+    privileges.find(
+      privilege => privilege.privilegeType === privilegeType && privilege.objectId === objectId,
+    ),
+  );
+};