Merge pull request #9858 from marshmalien/7662-expanded-template-list-item

Add missing template list expanded section details

SUMMARY
Issue: #7662

Add the following detail items:

Description
Organization and link to organization details
Credentials


Move Credential and Label details to the bottom of the expanded section and make them stretch the entire width of the row.


COMPONENT NAME


UI

Reviewed-by: Kersom <None>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/src/components/TemplateList/TemplateListItem.jsx

@@ -17,6 +17,7 @@ import { ActionsTd, ActionItem } from '../PaginatedTable';
 import { DetailList, Detail, DeletedDetail } from '../DetailList';
 import ChipGroup from '../ChipGroup';
 import CredentialChip from '../CredentialChip';
+import ExecutionEnvironmentDetail from '../ExecutionEnvironmentDetail';
 import { timeOfDay, formatDateString } from '../../util/dates';
 
 import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../api';
@@ -226,12 +227,68 @@ function TemplateListItem({
           <ExpandableRowContent>
             <DetailList>
               <Detail
-                label={i18n._(t`Activity`)}
-                value={<Sparkline jobs={summaryFields.recent_jobs} />}
-                dataCy={`template-${template.id}-activity`}
+                label={i18n._(t`Description`)}
+                value={template.description}
+                dataCy={`template-${template.id}-description`}
               />
-              {summaryFields.credentials && summaryFields.credentials.length && (
+              {summaryFields.recent_jobs && summaryFields.recent_jobs.length ? (
                 <Detail
+                  label={i18n._(t`Activity`)}
+                  value={<Sparkline jobs={summaryFields.recent_jobs} />}
+                  dataCy={`template-${template.id}-activity`}
+                />
+              ) : null}
+              {summaryFields.organization && (
+                <Detail
+                  label={i18n._(t`Organization`)}
+                  value={
+                    <Link
+                      to={`/organizations/${summaryFields.organization.id}/details`}
+                    >
+                      {summaryFields.organization.name}
+                    </Link>
+                  }
+                  dataCy={`template-${template.id}-organization`}
+                />
+              )}
+              {summaryFields.inventory ? (
+                <Detail
+                  label={i18n._(t`Inventory`)}
+                  value={inventoryValue(
+                    summaryFields.inventory.kind,
+                    summaryFields.inventory.id
+                  )}
+                  dataCy={`template-${template.id}-inventory`}
+                />
+              ) : (
+                !askInventoryOnLaunch &&
+                template.type === 'job_template' && (
+                  <DeletedDetail label={i18n._(t`Inventory`)} />
+                )
+              )}
+              {summaryFields.project && (
+                <Detail
+                  label={i18n._(t`Project`)}
+                  value={
+                    <Link to={`/projects/${summaryFields.project.id}/details`}>
+                      {summaryFields.project.name}
+                    </Link>
+                  }
+                  dataCy={`template-${template.id}-project`}
+                />
+              )}
+              <ExecutionEnvironmentDetail
+                virtualEnvironment={template.custom_virtualenv}
+                executionEnvironment={summaryFields?.execution_environment}
+              />
+              <Detail
+                label={i18n._(t`Last Modified`)}
+                value={formatDateString(template.modified)}
+                dataCy={`template-${template.id}-last-modified`}
+              />
+              {summaryFields.credentials && summaryFields.credentials.length ? (
+                <Detail
+                  fullWidth
                   label={i18n._(t`Credentials`)}
                   value={
                     <ChipGroup
@@ -245,23 +302,10 @@ function TemplateListItem({
                   }
                   dataCy={`template-${template.id}-credentials`}
                 />
-              )}
-              {summaryFields.inventory ? (
-                <Detail
-                  label={i18n._(t`Inventory`)}
-                  value={inventoryValue(
-                    summaryFields.inventory.kind,
-                    summaryFields.inventory.id
-                  )}
-                  dataCy={`template-${template.id}-inventory`}
-                />
-              ) : (
-                !askInventoryOnLaunch && (
-                  <DeletedDetail label={i18n._(t`Inventory`)} />
-                )
-              )}
+              ) : null}
               {summaryFields.labels && summaryFields.labels.results.length > 0 && (
                 <Detail
+                  fullWidth
                   label={i18n._(t`Labels`)}
                   value={
                     <ChipGroup
@@ -278,22 +322,6 @@ function TemplateListItem({
                   dataCy={`template-${template.id}-labels`}
                 />
               )}
-              {summaryFields.project && (
-                <Detail
-                  label={i18n._(t`Project`)}
-                  value={
-                    <Link to={`/projects/${summaryFields.project.id}/details`}>
-                      {summaryFields.project.name}
-                    </Link>
-                  }
-                  dataCy={`template-${template.id}-project`}
-                />
-              )}
-              <Detail
-                label={i18n._(t`Last Modified`)}
-                value={formatDateString(template.modified)}
-                dataCy={`template-${template.id}-last-modified`}
-              />
             </DetailList>
           </ExpandableRowContent>
         </Td>

awx/ui_next/src/components/TemplateList/TemplateListItem.test.jsx

@@ -377,4 +377,67 @@ describe('<TemplateListItem />', () => {
       'Custom virtual environment /var/lib/awx/env must be replaced by an execution environment.'
     );
   });
+
+  test('should render expected details in expanded section', async () => {
+    const wrapper = mountWithContexts(
+      <table>
+        <tbody>
+          <TemplateListItem
+            isSelected={false}
+            detailUrl="/templates/job_template/1/details"
+            template={{
+              ...mockJobTemplateData,
+              description: 'mock description',
+            }}
+          />
+        </tbody>
+      </table>
+    );
+    expect(
+      wrapper
+        .find('Tr')
+        .last()
+        .prop('isExpanded')
+    ).toBe(false);
+    await act(async () =>
+      wrapper.find('button[aria-label="Details"]').simulate('click')
+    );
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Tr')
+        .last()
+        .prop('isExpanded')
+    ).toBe(true);
+
+    function assertDetail(label, value) {
+      expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
+      expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
+    }
+
+    assertDetail('Description', 'mock description');
+    assertDetail('Organization', "Mike's Org");
+    assertDetail('Inventory', "Mike's Inventory");
+    assertDetail('Project', "Mike's Project");
+    assertDetail('Execution Environment', 'Mock EE 1.2.3');
+    expect(
+      wrapper.find('Detail[label="Credentials"]').containsAllMatchingElements([
+        <span>
+          <strong>SSH:</strong>Credential 1
+        </span>,
+        <span>
+          <strong>Awx:</strong>Credential 2
+        </span>,
+      ])
+    ).toEqual(true);
+    expect(
+      wrapper
+        .find('Detail[label="Labels"]')
+        .containsAllMatchingElements([<span>L_91o2</span>])
+    ).toEqual(true);
+    expect(wrapper.find('Detail[label="Organization"] dd a').prop('href')).toBe(
+      '/organizations/1/details'
+    );
+    expect(wrapper.find(`Detail[label="Activity"] Sparkline`)).toHaveLength(1);
+  });
 });

awx/ui_next/src/components/TemplateList/data.job_template.json

@@ -28,6 +28,11 @@
         "webhook_key": "/api/v2/job_templates/7/webhook_key/"
     },
     "summary_fields": {
+        "organization": {
+          "id": 1,
+          "name": "Mike's Org",
+          "description": ""
+        },
         "inventory": {
             "id": 1,
             "name": "Mike's Inventory",
@@ -133,6 +138,12 @@
             "id": "1",
             "name": "Webhook Credential"
 
+        },
+        "execution_environment": {
+            "description": "",
+            "id": 1,
+            "image": "foo.io/mock/test-ee:1.2.3",
+            "name": "Mock EE 1.2.3"
         }
     },
     "created": "2019-09-30T16:18:34.564820Z",
@@ -174,6 +185,7 @@
     "diff_mode": false,
     "allow_simultaneous": false,
     "custom_virtualenv": null,
+    "execution_environment": 1,
     "job_slice_count": 1,
     "webhook_credential": 1,
     "webhook_key": "asertdyuhjkhgfd234567kjgfds",