fix: Error when deleting the last sub-resource from a resource in policy editor

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<PolicyResourceFieldsProps> = {},
 ) => {
   return render(
@@ -117,3 +143,15 @@ const renderPolicyResourceFields = (
     </PolicyEditorContext.Provider>,
   );
 };
+
+const renderPolicyResourceFieldsWithSingleNarrowingPolicy = (
+  policyResourceFieldsProps: Partial<PolicyResourceFieldsProps> = {},
+) => {
+  return render(
+    <PolicyEditorContext.Provider value={mockPolicyEditorContextValueWithSingleNarrowingPolicy}>
+      <PolicyRuleContext.Provider value={mockPolicyRuleContextValueWithSingleNarrowingPolicy}>
+        <PolicyResourceFields {...defaultProps} {...policyResourceFieldsProps} />
+      </PolicyRuleContext.Provider>
+    </PolicyEditorContext.Provider>,
+  );
+};

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 = ({
         </div>
       </div>
       <div className={classes.buttonWrapper}>
-        {canEditTypeAndId && (
+        {canEditTypeAndId && isMultipleNarrowingResources && (
           <StudioButton
             aria-disabled={!canEditTypeAndId}
             color='danger'

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(),
+};

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(),
+};

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 = {

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}`;