Merge pull request ansible#9858 from marshmalien/7662-expanded-templa…

…te-list-item Add missing template list expanded section details SUMMARY Issue: ansible#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 <[email protected]>
mazhead · Apr 9, 2021 · ce2e41a · ce2e41a
2 parents a0780aa + 62c91ae
commit ce2e41a
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 30 deletions.
diff --git a/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx b/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,24 +227,28 @@ 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`Credentials`)}
+                  label={i18n._(t`Activity`)}
+                  value={<Sparkline jobs={summaryFields.recent_jobs} />}
+                  dataCy={`template-${template.id}-activity`}
+                />
+              ) : null}
+              {summaryFields.organization && (
+                <Detail
+                  label={i18n._(t`Organization`)}
                   value={
-                    <ChipGroup
-                      numChips={5}
-                      totalChips={summaryFields.credentials.length}
+                    <Link
+                      to={`/organizations/${summaryFields.organization.id}/details`}
                     >
-                      {summaryFields.credentials.map(c => (
-                        <CredentialChip key={c.id} credential={c} isReadOnly />
-                      ))}
-                    </ChipGroup>
+                      {summaryFields.organization.name}
+                    </Link>
                   }
-                  dataCy={`template-${template.id}-credentials`}
+                  dataCy={`template-${template.id}-organization`}
                 />
               )}
               {summaryFields.inventory ? (
@@ -256,12 +261,51 @@ function TemplateListItem({
                   dataCy={`template-${template.id}-inventory`}
                 />
               ) : (
-                !askInventoryOnLaunch && (
+                !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
+                      numChips={5}
+                      totalChips={summaryFields.credentials.length}
+                    >
+                      {summaryFields.credentials.map(c => (
+                        <CredentialChip key={c.id} credential={c} isReadOnly />
+                      ))}
+                    </ChipGroup>
+                  }
+                  dataCy={`template-${template.id}-credentials`}
+                />
+              ) : 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>

diff --git a/awx/ui_next/src/components/TemplateList/TemplateListItem.test.jsx b/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);
+  });
 });
diff --git a/awx/ui_next/src/components/TemplateList/data.job_template.json b/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",