Merge pull request #5740 from AlexSCorey/5257-WFJTMissingResource

Fixes InvGroup Form submission error and TemplateList Missing Resource Bug

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/screens/Inventory/InventoryGroupAdd/InventoryGroupAdd.jsx

@@ -1,28 +1,28 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { withI18n } from '@lingui/react';
-import { withRouter } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import { GroupsAPI } from '@api';
 import { Card } from '@patternfly/react-core';
 
 import InventoryGroupForm from '../shared/InventoryGroupForm';
 
-function InventoryGroupsAdd({ history, inventory, setBreadcrumb }) {
+function InventoryGroupsAdd() {
   const [error, setError] = useState(null);
-
+  const { id } = useParams();
-  useEffect(() => setBreadcrumb(inventory), [inventory, setBreadcrumb]);
+  const history = useHistory();
 
   const handleSubmit = async values => {
-    values.inventory = inventory.id;
+    values.inventory = id;
     try {
       const { data } = await GroupsAPI.create(values);
-      history.push(`/inventories/inventory/${inventory.id}/groups/${data.id}`);
+      history.push(`/inventories/inventory/${id}/groups/${data.id}`);
     } catch (err) {
       setError(err);
     }
   };
 
   const handleCancel = () => {
-    history.push(`/inventories/inventory/${inventory.id}/groups`);
+    history.push(`/inventories/inventory/${id}/groups`);
   };
 
   return (
@@ -35,5 +35,5 @@ function InventoryGroupsAdd({ history, inventory, setBreadcrumb }) {
     </Card>
   );
 }
-export default withI18n()(withRouter(InventoryGroupsAdd));
+export default withI18n()(InventoryGroupsAdd);
 export { InventoryGroupsAdd as _InventoryGroupsAdd };

awx/ui_next/src/screens/Inventory/InventoryGroupAdd/InventoryGroupAdd.test.jsx

@@ -21,9 +21,7 @@ describe('<InventoryGroupAdd />', () => {
       wrapper = mountWithContexts(
         <Route
           path="/inventories/inventory/:id/groups/add"
-          component={() => (
+          component={() => <InventoryGroupAdd />}
-            <InventoryGroupAdd setBreadcrumb={() => {}} inventory={{ id: 1 }} />
-          )}
         />,
         {
           context: {

awx/ui_next/src/screens/Inventory/InventoryGroupEdit/InventoryGroupEdit.jsx

@@ -1,28 +1,26 @@
 import React, { useState } from 'react';
 import { withI18n } from '@lingui/react';
-import { withRouter } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import { GroupsAPI } from '@api';
 
 import InventoryGroupForm from '../shared/InventoryGroupForm';
 
-function InventoryGroupEdit({ history, inventoryGroup, inventory, match }) {
+function InventoryGroupEdit({ inventoryGroup }) {
   const [error, setError] = useState(null);
+  const { id, groupId } = useParams();
+  const history = useHistory();
 
   const handleSubmit = async values => {
     try {
-      await GroupsAPI.update(match.params.groupId, values);
+      await GroupsAPI.update(groupId, values);
-      history.push(
+      history.push(`/inventories/inventory/${id}/groups/${groupId}`);
-        `/inventories/inventory/${inventory.id}/groups/${inventoryGroup.id}`
-      );
     } catch (err) {
       setError(err);
     }
   };
 
   const handleCancel = () => {
-    history.push(
+    history.push(`/inventories/inventory/${id}/groups/${groupId}`);
-      `/inventories/inventory/${inventory.id}/groups/${inventoryGroup.id}`
-    );
   };
 
   return (
@@ -34,5 +32,5 @@ function InventoryGroupEdit({ history, inventoryGroup, inventory, match }) {
     />
   );
 }
-export default withI18n()(withRouter(InventoryGroupEdit));
+export default withI18n()(InventoryGroupEdit);
 export { InventoryGroupEdit as _InventoryGroupEdit };

awx/ui_next/src/screens/Inventory/InventoryGroupEdit/InventoryGroupEdit.test.jsx

@@ -26,24 +26,12 @@ describe('<InventoryGroupEdit />', () => {
       wrapper = mountWithContexts(
         <Route
           path="/inventories/inventory/:id/groups/:groupId/edit"
-          component={() => (
+          component={() => <InventoryGroupEdit inventoryGroup={{ id: 2 }} />}
-            <InventoryGroupEdit
-              setBreadcrumb={() => {}}
-              inventory={{ id: 1 }}
-              inventoryGroup={{ id: 2 }}
-            />
-          )}
         />,
         {
           context: {
             router: {
               history,
-              route: {
-                match: {
-                  params: { groupId: 13 },
-                },
-                location: history.location,
-              },
             },
           },
         }

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import {
   DataListItem,
@@ -22,7 +22,6 @@ import ListActionButton from '@components/ListActionButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { Sparkline } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
-
 import styled from 'styled-components';
 
 const rightStyle = `
@@ -51,21 +50,24 @@ const LeftDataListCell = styled(DataListCell)`
     }
   }
 `;
+
 const RightDataListCell = styled(DataListCell)`
   ${rightStyle}
 `;
+
 const RightActionButtonCell = styled(ActionButtonCell)`
   ${rightStyle}
 `;
 
-class TemplateListItem extends Component {
+function TemplateListItem({ i18n, template, isSelected, onSelect }) {
-  render() {
-    const { i18n, template, isSelected, onSelect } = this.props;
   const canLaunch = template.summary_fields.user_capabilities.start;
+
   const missingResourceIcon =
+    template.type === 'job_template' &&
+    (!template.summary_fields.project ||
       (!template.summary_fields.inventory &&
-        !template.ask_inventory_on_launch) ||
+        !template.ask_inventory_on_launch));
-      !template.summary_fields.project;
+
   return (
     <DataListItem
       aria-labelledby={`check-action-${template.id}`}
@@ -108,11 +110,7 @@ class TemplateListItem extends Component {
             >
               {toTitleCase(template.type)}
             </RightDataListCell>,
-              <RightDataListCell
+            <RightDataListCell css="flex: 1;" righthalf="true" key="sparkline">
-                css="flex: 1;"
-                righthalf="true"
-                key="sparkline"
-              >
               <Sparkline jobs={template.summary_fields.recent_jobs} />
             </RightDataListCell>,
             <RightActionButtonCell
@@ -125,10 +123,7 @@ class TemplateListItem extends Component {
                 <Tooltip content={i18n._(t`Launch Template`)} position="top">
                   <LaunchButton resource={template}>
                     {({ handleLaunch }) => (
-                        <ListActionButton
+                      <ListActionButton variant="plain" onClick={handleLaunch}>
-                          variant="plain"
-                          onClick={handleLaunch}
-                        >
                         <RocketIcon />
                       </ListActionButton>
                     )}
@@ -153,6 +148,6 @@ class TemplateListItem extends Component {
     </DataListItem>
   );
 }
-}
+
 export { TemplateListItem as _TemplateListItem };
 export default withI18n()(TemplateListItem);

awx/ui_next/src/screens/Template/TemplateList/TemplatesListItem.test.jsx

@@ -142,4 +142,23 @@ describe('<TemplatesListItem />', () => {
     );
     expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
   });
+  test('missing resource icon is not shown type is workflow_job_template', () => {
+    const wrapper = mountWithContexts(
+      <TemplatesListItem
+        isSelected={false}
+        template={{
+          id: 1,
+          name: 'Template 1',
+          url: '/templates/job_template/1',
+          type: 'workflow_job_template',
+          summary_fields: {
+            user_capabilities: {
+              edit: false,
+            },
+          },
+        }}
+      />
+    );
+    expect(wrapper.find('ExclamationTriangleIcon').exists()).toBe(false);
+  });
 });