Update usage of summary_fields for execution environments

Update usage of summary_fields for execution environments. Also, update
unit-tests to cover this change.

See: ansible#8216

awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx

@@ -14,11 +14,11 @@ import { t } from '@lingui/macro';
 import AlertModal from '../AlertModal';
 import { KebabifiedContext } from '../../contexts/Kebabified';
 
-const requireNameOrUsername = props => {
-  const { name, username } = props;
-  if (!name && !username) {
+const requiredField = props => {
+  const { name, username, image } = props;
+  if (!name && !username && !image) {
     return new Error(
-      `One of 'name' or 'username' is required by ItemToDelete component.`
+      `One of 'name', 'username' or 'image' is required by ItemToDelete component.`
     );
   }
   if (name) {
@@ -41,13 +41,24 @@ const requireNameOrUsername = props => {
       'ItemToDelete'
     );
   }
+  if (image) {
+    checkPropTypes(
+      {
+        image: string,
+      },
+      { image: props.image },
+      'prop',
+      'ItemToDelete'
+    );
+  }
   return null;
 };
 
 const ItemToDelete = shape({
   id: number.isRequired,
-  name: requireNameOrUsername,
-  username: requireNameOrUsername,
+  name: requiredField,
+  username: requiredField,
+  image: requiredField,
   summary_fields: shape({
     user_capabilities: shape({
       delete: bool.isRequired,
@@ -56,7 +67,7 @@ const ItemToDelete = shape({
 });
 
 function cannotDelete(item) {
-  return !item.summary_fields?.user_capabilities?.delete;
+  return !item.summary_fields.user_capabilities.delete;
 }
 
 function ToolbarDeleteButton({
@@ -167,7 +178,7 @@ function ToolbarDeleteButton({
           <div>{i18n._(t`This action will delete the following:`)}</div>
           {itemsToDelete.map(item => (
             <span key={item.id}>
-              <strong>{item.name || item.username}</strong>
+              <strong>{item.name || item.username || item.image}</strong>
               <br />
             </span>
           ))}

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnviromentList.test.jsx

@@ -20,13 +20,15 @@ const executionEnvironments = {
         organization: null,
         credential: null,
         url: '/api/v2/execution_environments/1/',
+        summary_fields: { user_capabilities: { edit: true, delete: true } },
       },
       {
         id: 2,
         image: 'https://registry.com/r/image2/manifest',
         organization: null,
         credential: null,
         url: '/api/v2/execution_environments/2/',
+        summary_fields: { user_capabilities: { edit: false, delete: true } },
       },
     ],
     count: 2,
@@ -67,6 +69,81 @@ describe('<ExecutionEnvironmentList/>', () => {
     expect(ExecutionEnvironmentsAPI.readOptions).toBeCalled();
   });
 
+  test('should delete item successfully', async () => {
+    ExecutionEnvironmentsAPI.read.mockResolvedValue(executionEnvironments);
+    ExecutionEnvironmentsAPI.readOptions.mockResolvedValue(options);
+
+    await act(async () => {
+      wrapper = mountWithContexts(<ExecutionEnvironmentList />);
+    });
+    await waitForElement(
+      wrapper,
+      'ExecutionEnvironmentList',
+      el => el.length > 0
+    );
+
+    wrapper
+      .find('input#select-execution-environment-1')
+      .simulate('change', executionEnvironments.data.results[0]);
+    wrapper.update();
+
+    expect(
+      wrapper.find('input#select-execution-environment-1').prop('checked')
+    ).toBe(true);
+
+    await act(async () => {
+      wrapper.find('Button[aria-label="Delete"]').prop('onClick')();
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')();
+    });
+
+    expect(ExecutionEnvironmentsAPI.destroy).toBeCalledWith(
+      executionEnvironments.data.results[0].id
+    );
+  });
+
+  test('should render deletion error modal', async () => {
+    ExecutionEnvironmentsAPI.destroy.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'DELETE',
+            url: '/api/v2/execution_environments',
+          },
+          data: 'An error occurred',
+        },
+      })
+    );
+    ExecutionEnvironmentsAPI.read.mockResolvedValue(executionEnvironments);
+    ExecutionEnvironmentsAPI.readOptions.mockResolvedValue(options);
+    await act(async () => {
+      wrapper = mountWithContexts(<ExecutionEnvironmentList />);
+    });
+    waitForElement(wrapper, 'ExecutionEnvironmentList', el => el.length > 0);
+
+    wrapper
+      .find('input#select-execution-environment-1')
+      .simulate('change', 'a');
+    wrapper.update();
+    expect(
+      wrapper.find('input#select-execution-environment-1').prop('checked')
+    ).toBe(true);
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
+    );
+    wrapper.update();
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(wrapper.find('ErrorDetail').length).toBe(1);
+  });
+
   test('should thrown content error', async () => {
     ExecutionEnvironmentsAPI.read.mockRejectedValue(
       new Error({

awx/ui_next/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.test.jsx

@@ -62,7 +62,7 @@ describe('<ExecutionEnvironmentForm/>', () => {
   });
 
   test('should display form fields properly', () => {
-    expect(wrapper.find('FormGroup[label="Image"]').length).toBe(1);
+    expect(wrapper.find('FormGroup[label="Image name"]').length).toBe(1);
     expect(wrapper.find('FormGroup[label="Description"]').length).toBe(1);
     expect(wrapper.find('CredentialLookup').length).toBe(1);
   });