Merge pull request #4915 from jakemcdermott/fix-template-load-error

Gracefully handle missing template summary fields 

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

awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx

@@ -70,12 +70,10 @@ class JobTemplateDetail extends Component {
         job_slice_count,
         job_tags,
         job_type,
-        inventory,
         name,
         limit,
         modified,
         playbook,
-        project,
         skip_tags,
         timeout,
         summary_fields,
@@ -107,6 +105,32 @@ class JobTemplateDetail extends Component {
     const renderOptionsField =
       become_enabled || host_config_key || allow_simultaneous || use_fact_cache;
 
+    let createdBy = '';
+    if (created) {
+      if (summary_fields.created_by && summary_fields.created_by.username) {
+        createdBy = i18n._(
+          t`${formatDateString(created)} by ${
+            summary_fields.created_by.username
+          }`
+        );
+      } else {
+        createdBy = formatDateString(created);
+      }
+    }
+
+    let modifiedBy = '';
+    if (modified) {
+      if (summary_fields.modified_by && summary_fields.modified_by.username) {
+        modifiedBy = i18n._(
+          t`${formatDateString(modified)} by ${
+            summary_fields.modified_by.username
+          }`
+        );
+      } else {
+        modifiedBy = formatDateString(modified);
+      }
+    }
+
     const renderOptions = (
       <TextList component={TextListVariants.ul}>
         {become_enabled && (
@@ -147,13 +171,13 @@ class JobTemplateDetail extends Component {
             <Detail label={i18n._(t`Name`)} value={name} />
             <Detail label={i18n._(t`Description`)} value={description} />
             <Detail label={i18n._(t`Job Type`)} value={job_type} />
-            {inventory && (
+            {summary_fields.inventory && (
               <Detail
                 label={i18n._(t`Inventory`)}
                 value={summary_fields.inventory.name}
               />
             )}
-            {project && (
+            {summary_fields.project && (
               <Detail
                 label={i18n._(t`Project`)}
                 value={summary_fields.project.name}
@@ -167,18 +191,18 @@ class JobTemplateDetail extends Component {
               value={verbosityDetails[0].details}
             />
             <Detail label={i18n._(t`Timeout`)} value={timeout || '0'} />
-            <Detail
+            {createdBy && (
-              label={i18n._(t`Created`)}
+              <Detail
-              value={`${formatDateString(created)} by ${
+                label={i18n._(t`Created`)}
-                summary_fields.created_by.username
+                value={createdBy} // TODO: link to user in users
-              }`} // TODO: link to user in users
+              />
-            />
+            )}
-            <Detail
+            {modifiedBy && (
-              label={i18n._(t`Last Modified`)}
+              <Detail
-              value={`${formatDateString(modified)} by ${
+                label={i18n._(t`Last Modified`)}
-                summary_fields.modified_by.username
+                value={modifiedBy} // TODO: link to user in users
-              }`} // TODO: link to user in users
+              />
-            />
+            )}
             <Detail
               label={i18n._(t`Show Changes`)}
               value={diff_mode ? 'On' : 'Off'}

awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx

@@ -56,6 +56,21 @@ describe('<JobTemplateDetail />', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('Can load with missing summary fields', async done => {
+    const mockTemplate = { ...template };
+    mockTemplate.summary_fields = { user_capabilities: {} };
+
+    const wrapper = mountWithContexts(
+      <JobTemplateDetail template={mockTemplate} />
+    );
+    await waitForElement(
+      wrapper,
+      'Detail[label="Description"]',
+      el => el.length === 1
+    );
+    done();
+  });
   test('When component mounts API is called to get instance groups', async done => {
     const wrapper = mountWithContexts(
       <JobTemplateDetail template={template} />