web: JobVariant : pull description into a card

The job description (if it exists) is considered important enough to
pull into a separate card.

Change-Id: I315d338d8ebbb991bb3771238de0f43c59348510

1 files changed, 20 insertions, 18 deletions

diff --git a/web/src/containers/job/JobVariant.jsx b/web/src/containers/job/JobVariant.jsx
index 52c69e495..a05e5250c 100644
--- a/web/src/containers/job/JobVariant.jsx
+++ b/web/src/containers/job/JobVariant.jsx
@@ -52,6 +52,7 @@ import SourceContext from '../SourceContext'
 import Nodeset from './Nodeset'
 import Role from './Role'
 import JobProject from './JobProject'
+import JobDescriptionCard from './JobDescriptionCard'
 
 class JobVariant extends React.Component {
   static propTypes = {
@@ -104,7 +105,7 @@ class JobVariant extends React.Component {
     const rows = []
 
     const jobInfos = [
-      'description', 'source_context', 'builds', 'status',
+      'source_context', 'builds', 'status',
       'parent', 'attempts', 'timeout', 'semaphores',
       'nodeset', 'variables', 'override_checkout',
     ]
@@ -243,23 +244,24 @@ class JobVariant extends React.Component {
       )
       rows.push({label: nice_label, value: items})
     })
-      return (
-        <div className='pf-u-m-xl'>
-          <DescriptionList isHorizontal
-            style={{'--pf-c-description-list--RowGap': '0.5rem'}}
-          >
-            {rows.map((item, idx) => (
-              <DescriptionListGroup key={idx}>
-                <DescriptionListTerm>
-                  {item.label}
-                </DescriptionListTerm>
-                <DescriptionListDescription>
-                  {item.value}
-                </DescriptionListDescription>
-              </DescriptionListGroup>
-            ))}
-          </DescriptionList>
-        </div>
+     return (
+       <React.Fragment>
+         <JobDescriptionCard description={variant.description}/>
+         <DescriptionList isHorizontal
+                          style={{'--pf-c-description-list--RowGap': '0.5rem'}}
+                          className='pf-u-m-xl'>
+          {rows.map((item, idx) => (
+            <DescriptionListGroup key={idx}>
+              <DescriptionListTerm>
+                {item.label}
+              </DescriptionListTerm>
+              <DescriptionListDescription>
+                {item.value}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+          ))}
+        </DescriptionList>
+      </React.Fragment>
     )
   }
 }