From 0428f7a613bbf4664dfa9a1884c4d9c2798bd634 Mon Sep 17 00:00:00 2001
From: Ian Wienand <iwienand@redhat.com>
Date: Tue, 17 Aug 2021 16:05:59 +1000
Subject: [PATCH] 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
---
 web/src/containers/job/Job.jsx                | 35 ++++----
 web/src/containers/job/JobDescriptionCard.jsx | 79 +++++++++++++++++++
 web/src/containers/job/JobVariant.jsx         | 38 ++++-----
 3 files changed, 115 insertions(+), 37 deletions(-)
 create mode 100644 web/src/containers/job/JobDescriptionCard.jsx

diff --git a/web/src/containers/job/Job.jsx b/web/src/containers/job/Job.jsx
index 758bd45702..c12449dba5 100644
--- a/web/src/containers/job/Job.jsx
+++ b/web/src/containers/job/Job.jsx
@@ -15,7 +15,6 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import {
-  PageSection,
   Tab,
   Tabs,
   TabTitleText,
@@ -67,24 +66,22 @@ class Job extends React.Component {
 
     return (
       <React.Fragment>
-        <PageSection>
-          <Title headingLevel="h2">
-            Details for job <span style={{color: 'var(--pf-global--primary-color--100)'}}>{job[0].name}</span>
-          </Title>
-          <Tabs activeKey={activeTabKey}
-                onSelect={(event, tabIndex) => this.handleTabClick(tabIndex)}
-                isBox>
-            {job.map((variant, idx) => (
-              <Tab eventKey={idx} key={idx}
-                   title={<TabTitleText>{this.renderVariantTitle(variant)}</TabTitleText>}>
-                <JobVariant
-                  variant={job[idx]}
-                  parent={this}
-                />
-              </Tab>
-            ))}
-          </Tabs>
-        </PageSection>
+        <Title headingLevel="h2">
+          Details for job <span style={{color: 'var(--pf-global--primary-color--100)'}}>{job[0].name}</span>
+        </Title>
+        <Tabs activeKey={activeTabKey}
+              onSelect={(event, tabIndex) => this.handleTabClick(tabIndex)}
+              isBox>
+          {job.map((variant, idx) => (
+            <Tab eventKey={idx} key={idx}
+                 title={<TabTitleText>{this.renderVariantTitle(variant)}</TabTitleText>}>
+              <JobVariant
+                variant={job[idx]}
+                parent={this}
+              />
+            </Tab>
+          ))}
+        </Tabs>
       </React.Fragment>
     )
   }
diff --git a/web/src/containers/job/JobDescriptionCard.jsx b/web/src/containers/job/JobDescriptionCard.jsx
new file mode 100644
index 0000000000..c180e9a7c7
--- /dev/null
+++ b/web/src/containers/job/JobDescriptionCard.jsx
@@ -0,0 +1,79 @@
+// Copyright 2021 Red Hat, Inc
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may
+// not use this file except in compliance with the License. You may obtain
+// a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations
+// under the License.
+
+/*
+ * NOTE(ianw) 2021-08-16
+ * Some thoughts for future work:
+ *
+ * - Most descriptions are one line, but some a very long.
+ * - Might be cool to have a fixed height and show a preview of the description
+ *   that fades out, but can the be clicked to be read fully.
+ * - Perhaps Zuul could format this for us, as it looks like raw RST.
+ *   I think that would have to be a python/sphinx thing, can't practically
+ *   do it client side.
+ */
+
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardExpandableContent,
+  CardBody
+} from '@patternfly/react-core'
+
+class JobDescriptionCard extends React.Component {
+  static propTypes = {
+    description: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isExpanded: true
+    }
+
+    this.onExpand = () => {
+      this.setState({
+        isExpanded: !this.state.isExpanded
+      })
+    }
+  }
+
+  render() {
+    if (!this.props.description) {
+      return null
+    }
+
+    return (
+      <React.Fragment>
+        <Card className={['pf-u-m-lg']} isExpanded={this.state.isExpanded}>
+          <CardHeader onExpand={ this.onExpand }>
+            <CardTitle>Job description</CardTitle>
+          </CardHeader>
+          <CardExpandableContent>
+            <CardBody style={{whiteSpace: 'pre-wrap'}}>
+            {this.props.description}
+            </CardBody>
+          </CardExpandableContent>
+        </Card>
+      </React.Fragment>
+    )
+  }
+
+}
+
+export default JobDescriptionCard
diff --git a/web/src/containers/job/JobVariant.jsx b/web/src/containers/job/JobVariant.jsx
index 52c69e4950..a05e5250c9 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>
     )
   }
 }