psp-7100 hide the management tab if user does not have management vie…

…w permission.

source/frontend/src/features/mapSideBar/property/PropertyContainer.test.tsx

@@ -0,0 +1,55 @@
+import { createMemoryHistory } from 'history';
+
+import { Claims } from '@/constants';
+import { mockLookups } from '@/mocks/lookups.mock';
+import { lookupCodesSlice } from '@/store/slices/lookupCodes';
+import { cleanup, getByText, render, RenderOptions } from '@/utils/test-utils';
+
+import PropertyContainer, { IPropertyContainerProps } from './PropertyContainer';
+
+// mock keycloak auth library
+jest.mock('@react-keycloak/web');
+
+describe('PropertyContainer component', () => {
+  const history = createMemoryHistory();
+  const storeState = {
+    [lookupCodesSlice.name]: { lookupCodes: mockLookups },
+  };
+
+  const setup = (renderOptions: RenderOptions & IPropertyContainerProps) => {
+    // render component under test
+    const utils = render(<PropertyContainer {...renderOptions} />, {
+      ...renderOptions,
+      history,
+      store: { ...renderOptions.store, ...storeState },
+      claims: renderOptions.claims ?? [],
+    });
+
+    return { ...utils };
+  };
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    cleanup();
+  });
+
+  it('hides the management tab if the user does not have permission', async () => {
+    const { queryByText } = setup({
+      claims: [],
+      composedPropertyState: { apiWrapper: { response: {} }, id: 1 } as any,
+      setEditManagementState: jest.fn(),
+    });
+
+    expect(queryByText('Management')).toBeNull();
+  });
+
+  it('displays the management tab if the user has permission', async () => {
+    const { getByText } = setup({
+      claims: [Claims.MANAGEMENT_VIEW],
+      composedPropertyState: { apiWrapper: { response: {} }, id: 1 } as any,
+      setEditManagementState: jest.fn(),
+    });
+
+    expect(getByText('Management')).toBeVisible();
+  });
+});

source/frontend/src/features/mapSideBar/property/PropertyContainer.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { Claims } from '@/constants';
 import { usePropertyDetails } from '@/features/mapSideBar/hooks/usePropertyDetails';
 import {
   InventoryTabNames,
@@ -11,6 +12,7 @@ import LtsaTabView from '@/features/mapSideBar/property/tabs/ltsa/LtsaTabView';
 import PropertyAssociationTabView from '@/features/mapSideBar/property/tabs/propertyAssociations/PropertyAssociationTabView';
 import { PropertyDetailsTabView } from '@/features/mapSideBar/property/tabs/propertyDetails/detail/PropertyDetailsTabView';
 import ComposedPropertyState from '@/hooks/repositories/useComposedProperties';
+import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
 
 import { EditManagementState } from './PropertyViewSelector';
 import { PropertyManagementTabView } from './tabs/propertyDetailsManagement/detail/PropertyManagementTabView';
@@ -27,6 +29,7 @@ export const PropertyContainer: React.FunctionComponent<
   React.PropsWithChildren<IPropertyContainerProps>
 > = ({ composedPropertyState, setEditManagementState }) => {
   const showPropertyInfoTab = composedPropertyState?.id !== undefined;
+  const { hasClaim } = useKeycloakWrapper();
 
   const tabViews: TabInventoryView[] = [];
 
@@ -98,7 +101,11 @@ export const PropertyContainer: React.FunctionComponent<
     });
   }
 
-  if (composedPropertyState.apiWrapper?.response !== undefined && showPropertyInfoTab) {
+  if (
+    composedPropertyState.apiWrapper?.response !== undefined &&
+    showPropertyInfoTab &&
+    hasClaim(Claims.MANAGEMENT_VIEW)
+  ) {
     // After API property object has been received, we query relevant map layers to find
     // additional information which we store in a different model (IPropertyDetailsForm)