From 98a879e13d62a20d76cc66aca95fc5ed2ea6ecf5 Mon Sep 17 00:00:00 2001 From: Erling Hauan Date: Tue, 24 Sep 2024 13:15:23 +0200 Subject: [PATCH 1/2] Hide delete button when there is only one narrowing resource/subresource --- .../PolicyResourceFields/PolicyResourceFields.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/SubResources/ResourceNarrowingList/PolicyResourceFields/PolicyResourceFields.tsx b/frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/SubResources/ResourceNarrowingList/PolicyResourceFields/PolicyResourceFields.tsx index e226e2188c6..52a697957b5 100644 --- a/frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/SubResources/ResourceNarrowingList/PolicyResourceFields/PolicyResourceFields.tsx +++ b/frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/SubResources/ResourceNarrowingList/PolicyResourceFields/PolicyResourceFields.tsx @@ -25,6 +25,8 @@ export const PolicyResourceFields = ({ const { savePolicy, setPolicyRules, policyRules } = usePolicyEditorContext(); const { policyRule } = usePolicyRuleContext(); + const isMultipleNarrowingResources = policyRule.resources[resourceIndex].length > 1; + const handleInputChange = (field: 'id' | 'type', value: string) => { const updatedResources = [...policyRule.resources]; updatedResources[resourceIndex][resourceNarrowingIndex] = { @@ -95,7 +97,7 @@ export const PolicyResourceFields = ({
- {canEditTypeAndId && ( + {canEditTypeAndId && isMultipleNarrowingResources && ( Date: Tue, 24 Sep 2024 16:02:09 +0200 Subject: [PATCH 2/2] Add more test cases --- .../PolicyResourceFields.test.tsx | 60 +++++++++++++++---- .../test/mocks/policyEditorContextMock.ts | 17 +++++- .../test/mocks/policyRuleContextMock.ts | 13 +++- .../test/mocks/policyRuleMocks.ts | 14 ++++- .../test/mocks/policySubResourceMocks.ts | 4 ++ 5 files changed, 94 insertions(+), 14 deletions(-) diff --git a/frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/SubResources/ResourceNarrowingList/PolicyResourceFields/PolicyResourceFields.test.tsx b/frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/SubResources/ResourceNarrowingList/PolicyResourceFields/PolicyResourceFields.test.tsx index 5538e967151..998e61f1f1c 100644 --- a/frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/SubResources/ResourceNarrowingList/PolicyResourceFields/PolicyResourceFields.test.tsx +++ b/frontend/packages/policy-editor/src/components/PolicyCardRules/PolicyRule/SubResources/ResourceNarrowingList/PolicyResourceFields/PolicyResourceFields.test.tsx @@ -6,8 +6,14 @@ import { PolicyResourceFields } from './PolicyResourceFields'; import { textMock } from '@studio/testing/mocks/i18nMock'; import { PolicyEditorContext } from '../../../../../../contexts/PolicyEditorContext'; import { PolicyRuleContext } from '../../../../../../contexts/PolicyRuleContext'; -import { mockPolicyEditorContextValue } from '../../../../../../../test/mocks/policyEditorContextMock'; -import { mockPolicyRuleContextValue } from '../../../../../../../test/mocks/policyRuleContextMock'; +import { + mockPolicyEditorContextValue, + mockPolicyEditorContextValueWithSingleNarrowingPolicy, +} from '../../../../../../../test/mocks/policyEditorContextMock'; +import { + mockPolicyRuleContextValue, + mockPolicyRuleContextValueWithSingleNarrowingPolicy, +} from '../../../../../../../test/mocks/policyRuleContextMock'; import { mockResource11 } from '../../../../../../../test/mocks/policySubResourceMocks'; const mockValudNewText = '45'; @@ -23,7 +29,7 @@ describe('PolicyResourceFields', () => { afterEach(jest.clearAllMocks); it('sets text fields to readonly when "canEditTypeAndId" is false', () => { - renderPolicyResourceFields({ canEditTypeAndId: false }); + renderPolicyResourceFieldsWithMultipleNarrowingPolicies({ canEditTypeAndId: false }); const idInput = screen.getByLabelText(textMock('policy_editor.narrowing_list_field_id')); expect(idInput).toHaveAttribute('readonly'); @@ -33,7 +39,7 @@ describe('PolicyResourceFields', () => { }); it('sets text fields to not be readonly when "canEditTypeAndId" is true', () => { - renderPolicyResourceFields(); + renderPolicyResourceFieldsWithMultipleNarrowingPolicies(); const idInput = screen.getByLabelText(textMock('policy_editor.narrowing_list_field_id')); expect(idInput).not.toHaveAttribute('readonly'); @@ -44,7 +50,7 @@ describe('PolicyResourceFields', () => { it('calls "setPolicyRules" when id input values change', async () => { const user = userEvent.setup(); - renderPolicyResourceFields(); + renderPolicyResourceFieldsWithMultipleNarrowingPolicies(); const idInput = screen.getByLabelText(textMock('policy_editor.narrowing_list_field_id')); @@ -57,7 +63,7 @@ describe('PolicyResourceFields', () => { it('calls "setPolicyRules" when type input values change', async () => { const user = userEvent.setup(); - renderPolicyResourceFields(); + renderPolicyResourceFieldsWithMultipleNarrowingPolicies(); const typeInput = screen.getByLabelText(textMock('policy_editor.narrowing_list_field_type')); @@ -70,7 +76,7 @@ describe('PolicyResourceFields', () => { it('calls "savePolicy" when input fields lose focus', async () => { const user = userEvent.setup(); - renderPolicyResourceFields(); + renderPolicyResourceFieldsWithMultipleNarrowingPolicies(); const typeInput = screen.getByLabelText(textMock('policy_editor.narrowing_list_field_type')); @@ -79,8 +85,18 @@ describe('PolicyResourceFields', () => { expect(mockPolicyEditorContextValue.savePolicy).toHaveBeenCalledTimes(1); }); - it('hides the delete button when "canEditTypeAndId" is false', () => { - renderPolicyResourceFields({ canEditTypeAndId: false }); + it('renders the delete button when there are multiple narrowing policies', () => { + renderPolicyResourceFieldsWithMultipleNarrowingPolicies(); + + const deleteButton = screen.queryByRole('button', { + name: textMock('policy_editor.narrowing_list_field_delete'), + }); + + expect(deleteButton).toBeInTheDocument(); + }); + + it('hides the delete button when there is only a single narrowing policy', () => { + renderPolicyResourceFieldsWithSingleNarrowingPolicy(); const deleteButton = screen.queryByRole('button', { name: textMock('policy_editor.narrowing_list_field_delete'), @@ -91,7 +107,7 @@ describe('PolicyResourceFields', () => { it('calls "setPolicyRules" and "savePolicy" when delete button is clicked', async () => { const user = userEvent.setup(); - renderPolicyResourceFields(); + renderPolicyResourceFieldsWithMultipleNarrowingPolicies(); const deleteButton = screen.getByRole('button', { name: textMock('policy_editor.narrowing_list_field_delete'), @@ -104,9 +120,19 @@ describe('PolicyResourceFields', () => { expect(mockPolicyEditorContextValue.setPolicyRules).toHaveBeenCalledTimes(1); expect(mockPolicyEditorContextValue.savePolicy).toHaveBeenCalledTimes(1); }); + + it('hides the delete button when there are multiple narrowing policies and "canEditTypeAndId" is false', () => { + renderPolicyResourceFieldsWithMultipleNarrowingPolicies({ canEditTypeAndId: false }); + + const deleteButton = screen.queryByRole('button', { + name: textMock('policy_editor.narrowing_list_field_delete'), + }); + + expect(deleteButton).not.toBeInTheDocument(); + }); }); -const renderPolicyResourceFields = ( +const renderPolicyResourceFieldsWithMultipleNarrowingPolicies = ( policyResourceFieldsProps: Partial = {}, ) => { return render( @@ -117,3 +143,15 @@ const renderPolicyResourceFields = ( , ); }; + +const renderPolicyResourceFieldsWithSingleNarrowingPolicy = ( + policyResourceFieldsProps: Partial = {}, +) => { + return render( + + + + + , + ); +}; diff --git a/frontend/packages/policy-editor/test/mocks/policyEditorContextMock.ts b/frontend/packages/policy-editor/test/mocks/policyEditorContextMock.ts index 75c394dc674..986a74e0ee8 100644 --- a/frontend/packages/policy-editor/test/mocks/policyEditorContextMock.ts +++ b/frontend/packages/policy-editor/test/mocks/policyEditorContextMock.ts @@ -1,6 +1,9 @@ import { type PolicyEditorContextProps } from '../../src/contexts/PolicyEditorContext'; import { mockActions } from './policyActionMocks'; -import { mockPolicyRuleCards } from './policyRuleMocks'; +import { + mockPolicyRuleCards, + mockPolicyRuleCardWithSingleNarrowingPolicy, +} from './policyRuleMocks'; import { mockSubjects } from './policySubjectMocks'; import { type PolicyEditorUsage } from '../../src/types'; import { mockResourecId1 } from './policySubResourceMocks'; @@ -19,3 +22,15 @@ export const mockPolicyEditorContextValue: PolicyEditorContextProps = { resourceId: mockResourecId1, savePolicy: jest.fn(), }; + +export const mockPolicyEditorContextValueWithSingleNarrowingPolicy: PolicyEditorContextProps = { + policyRules: [mockPolicyRuleCardWithSingleNarrowingPolicy], + setPolicyRules: jest.fn(), + actions: mockActions, + subjects: mockSubjects, + usageType: mockUsageType, + resourceType: mockResourceType, + showAllErrors: false, + resourceId: mockResourecId1, + savePolicy: jest.fn(), +}; diff --git a/frontend/packages/policy-editor/test/mocks/policyRuleContextMock.ts b/frontend/packages/policy-editor/test/mocks/policyRuleContextMock.ts index e57401be3b0..5e0fd166a2f 100644 --- a/frontend/packages/policy-editor/test/mocks/policyRuleContextMock.ts +++ b/frontend/packages/policy-editor/test/mocks/policyRuleContextMock.ts @@ -1,5 +1,8 @@ import { type PolicyRuleContextProps } from '../../src/contexts/PolicyRuleContext'; -import { mockPolicyRuleCard1 } from './policyRuleMocks'; +import { + mockPolicyRuleCard1, + mockPolicyRuleCardWithSingleNarrowingPolicy, +} from './policyRuleMocks'; import { type PolicyError } from '../../src/types'; const policyError: PolicyError = { @@ -15,3 +18,11 @@ export const mockPolicyRuleContextValue: PolicyRuleContextProps = { policyError, setPolicyError: jest.fn(), }; + +export const mockPolicyRuleContextValueWithSingleNarrowingPolicy: PolicyRuleContextProps = { + policyRule: mockPolicyRuleCardWithSingleNarrowingPolicy, + showAllErrors: false, + uniqueId: 'id', + policyError, + setPolicyError: jest.fn(), +}; diff --git a/frontend/packages/policy-editor/test/mocks/policyRuleMocks.ts b/frontend/packages/policy-editor/test/mocks/policyRuleMocks.ts index a0578609edf..8cc632c4d2d 100644 --- a/frontend/packages/policy-editor/test/mocks/policyRuleMocks.ts +++ b/frontend/packages/policy-editor/test/mocks/policyRuleMocks.ts @@ -1,6 +1,10 @@ import type { PolicyRule, PolicyRuleCard } from '../../src/types'; import { mockAction1, mockAction2, mockAction4 } from './policyActionMocks'; -import { mockPolicyResources, mockPolicyRuleResources } from './policySubResourceMocks'; +import { + mockPolicyResources, + mockPolicyRuleResources, + mockPolicyRuleResourcesWithSingleNarrowingPolicy, +} from './policySubResourceMocks'; import { mockSubjectBackendString1, mockSubjectBackendString3, @@ -10,6 +14,7 @@ import { export const mockRuleId1: string = 'r1'; export const mockRuleId2: string = 'r2'; +export const mockRuleId3: string = 'r3'; export const mockPolicyRuleCard1: PolicyRuleCard = { ruleId: mockRuleId1, @@ -25,6 +30,13 @@ export const mockPolicyRuleCard2: PolicyRuleCard = { actions: [], resources: [[]], }; +export const mockPolicyRuleCardWithSingleNarrowingPolicy: PolicyRuleCard = { + ruleId: mockRuleId3, + description: '', + subject: [mockSubjectId1, mockSubjectId3], + actions: [mockAction1.actionId, mockAction2.actionId, mockAction4.actionId], + resources: mockPolicyRuleResourcesWithSingleNarrowingPolicy, +}; export const mockPolicyRuleCards: PolicyRuleCard[] = [mockPolicyRuleCard1, mockPolicyRuleCard2]; export const mockPolicyRule1: PolicyRule = { diff --git a/frontend/packages/policy-editor/test/mocks/policySubResourceMocks.ts b/frontend/packages/policy-editor/test/mocks/policySubResourceMocks.ts index 381a32aa6e6..dd198e6d440 100644 --- a/frontend/packages/policy-editor/test/mocks/policySubResourceMocks.ts +++ b/frontend/packages/policy-editor/test/mocks/policySubResourceMocks.ts @@ -23,6 +23,10 @@ const mockResource2: PolicyRuleResource[] = [mockResource21]; export const mockResource3: PolicyRuleResource[] = [mockResource31, mockResource32]; export const mockPolicyRuleResources: PolicyRuleResource[][] = [mockResource1, mockResource2]; +export const mockPolicyRuleResourcesWithSingleNarrowingPolicy: PolicyRuleResource[][] = [ + mockResource2, + mockResource2, +]; export const mockPolicyResourceBackendString1: string = `${mockResourceType1}:${mockResourecId1}`; export const mockPolicyResourceBackendString2: string = `${mockResourceType2}:${mockResourecId2}`;