diff --git a/source/frontend/src/features/mapSideBar/property/PropertyContainer.test.tsx b/source/frontend/src/features/mapSideBar/property/PropertyContainer.test.tsx
new file mode 100644
index 0000000000..c56fc9bc03
--- /dev/null
+++ b/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(, {
+ ...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();
+ });
+});
diff --git a/source/frontend/src/features/mapSideBar/property/PropertyContainer.tsx b/source/frontend/src/features/mapSideBar/property/PropertyContainer.tsx
index cbbb4dd5d3..8ad9f48b92 100644
--- a/source/frontend/src/features/mapSideBar/property/PropertyContainer.tsx
+++ b/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
> = ({ 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)