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)