From aa69a493b63bcf66907810e0fdec6fa18b6e32d3 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Thu, 8 Apr 2021 16:03:46 -0400
Subject: [PATCH] Add remaining expanded template list item details

---
 .../TemplateList/TemplateListItem.jsx         | 76 ++++++++++++-------
 .../TemplateList/TemplateListItem.test.jsx    | 62 +++++++++++++++
 .../TemplateList/data.job_template.json       |  5 ++
 3 files changed, 115 insertions(+), 28 deletions(-)

diff --git a/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx
index 70c0076fd2..ac14dd281c 100644
--- a/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx
@@ -225,25 +225,27 @@ function TemplateListItem({
         <Td colSpan={4}>
           <ExpandableRowContent>
             <DetailList>
+              <Detail
+                label={i18n._(t`Description`)}
+                value={template.description}
+                dataCy={`template-${template.id}-description`}
+              />
               <Detail
                 label={i18n._(t`Activity`)}
                 value={<Sparkline jobs={summaryFields.recent_jobs} />}
                 dataCy={`template-${template.id}-activity`}
               />
-              {summaryFields.credentials && summaryFields.credentials.length && (
+              {summaryFields.organization && (
                 <Detail
-                  label={i18n._(t`Credentials`)}
+                  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 ? (
@@ -260,24 +262,6 @@ function TemplateListItem({
                   <DeletedDetail label={i18n._(t`Inventory`)} />
                 )
               )}
-              {summaryFields.labels && summaryFields.labels.results.length > 0 && (
-                <Detail
-                  label={i18n._(t`Labels`)}
-                  value={
-                    <ChipGroup
-                      numChips={5}
-                      totalChips={summaryFields.labels.results.length}
-                    >
-                      {summaryFields.labels.results.map(l => (
-                        <Chip key={l.id} isReadOnly>
-                          {l.name}
-                        </Chip>
-                      ))}
-                    </ChipGroup>
-                  }
-                  dataCy={`template-${template.id}-labels`}
-                />
-              )}
               {summaryFields.project && (
                 <Detail
                   label={i18n._(t`Project`)}
@@ -294,6 +278,42 @@ function TemplateListItem({
                 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`}
+                />
+              )}
+              {summaryFields.labels && summaryFields.labels.results.length > 0 && (
+                <Detail
+                  fullWidth
+                  label={i18n._(t`Labels`)}
+                  value={
+                    <ChipGroup
+                      numChips={5}
+                      totalChips={summaryFields.labels.results.length}
+                    >
+                      {summaryFields.labels.results.map(l => (
+                        <Chip key={l.id} isReadOnly>
+                          {l.name}
+                        </Chip>
+                      ))}
+                    </ChipGroup>
+                  }
+                  dataCy={`template-${template.id}-labels`}
+                />
+              )}
             </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
index a86512af09..79945665cd 100644
--- a/awx/ui_next/src/components/TemplateList/TemplateListItem.test.jsx
+++ b/awx/ui_next/src/components/TemplateList/TemplateListItem.test.jsx
@@ -377,4 +377,66 @@ 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");
+    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
index 804c3b72a2..ff5994da47 100644
--- 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",