Web: fix tabs on project page

This corrects the tab titles on the project page which currently
typically just say "master", "master", "master", ... because they
all display the default branch of the project stanza.

Instead, use the branch of the source context for the project stanza,
or, if the project stanza is not from the current project, then
use the name of its project.

This causes them to appear like:

"openstack/project-config", "master", "stable/diablo", ...

Also, update the entire Project page component hierarchy to use
hooks instead of classes.

Update the styling on the H2 element so that we can have the
refresh icon share the same vertical space (so that we don't have
large amounts of wasted vertical space at the top of each page.

Change-Id: I863e0eb4a7f20ee6363e596e61cc49b2cbc22953

1 files changed, 55 insertions, 51 deletions

diff --git a/web/src/containers/project/ProjectVariant.jsx b/web/src/containers/project/ProjectVariant.jsx
index 74be10a55..51a093a32 100644
--- a/web/src/containers/project/ProjectVariant.jsx
+++ b/web/src/containers/project/ProjectVariant.jsx
@@ -18,64 +18,68 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
 
-class ProjectVariant extends React.Component {
-  static propTypes = {
-    tenant: PropTypes.object,
-    variant: PropTypes.object.isRequired
-  }
+function ProjectVariant(props) {
+  const { tenant, variant } = props
+  const rows = []
 
-  render () {
-    const { tenant, variant } = this.props
-    const rows = []
+  rows.push({label: 'Merge mode', value: variant.merge_mode})
 
-    rows.push({label: 'Merge mode', value: variant.merge_mode})
+  if (variant.templates.length > 0) {
+    const templateList = (
+      <ul className='list-group'>
+        {variant.templates.map((item, idx) => (
+          <li className='list-group-item' key={idx}>{item}</li>))}
+      </ul>
+    )
+    rows.push({label: 'Templates', value: templateList})
+  }
 
-    if (variant.templates.length > 0) {
-      const templateList = (
+  variant.pipelines.forEach(pipeline => {
+    // TODO: either adds job link anchor to load the right variant
+    // and/or show the job variant config in a modal?
+    const jobList = (
+      <React.Fragment>
+        {pipeline.queue_name && (
+          <p><strong>Queue: </strong> {pipeline.queue_name} </p>)}
         <ul className='list-group'>
-          {variant.templates.map((item, idx) => (
-            <li className='list-group-item' key={idx}>{item}</li>))}
+          {pipeline.jobs.map((item, idx) => (
+            <li className='list-group-item' key={idx}>
+              <Link to={tenant.linkPrefix + '/job/' + item[0].name}>
+                {item[0].name}
+              </Link>
+            </li>
+          ))}
         </ul>
-      )
-      rows.push({label: 'Templates', value: templateList})
-    }
+      </React.Fragment>
+    )
+    rows.push({label: pipeline.name + ' jobs', value: jobList})
+  })
 
-    variant.pipelines.forEach(pipeline => {
-      // TODO: either adds job link anchor to load the right variant
-      // and/or show the job variant config in a modal?
-      const jobList = (
-        <React.Fragment>
-          {pipeline.queue_name && (
-            <p><strong>Queue: </strong> {pipeline.queue_name} </p>)}
-          <ul className='list-group'>
-            {pipeline.jobs.map((item, idx) => (
-              <li className='list-group-item' key={idx}>
-                <Link to={tenant.linkPrefix + '/job/' + item[0].name}>
-                  {item[0].name}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </React.Fragment>
-      )
-      rows.push({label: pipeline.name + ' jobs', value: jobList})
-    })
+  return (
+    <div>
+      <table className='table table-striped table-bordered'>
+        <tbody>
+          {rows.map(item => (
+            <tr key={item.label}>
+              <td style={{width: '10%'}}>{item.label}</td>
+              <td>{item.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
 
-    return (
-      <div>
-        <table className='table table-striped table-bordered'>
-          <tbody>
-            {rows.map(item => (
-              <tr key={item.label}>
-                <td style={{width: '10%'}}>{item.label}</td>
-                <td>{item.value}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    )
+ProjectVariant.propTypes = {
+  tenant: PropTypes.object,
+  variant: PropTypes.object.isRequired
+}
+
+function mapStateToProps(state) {
+  return {
+    tenant: state.tenant,
   }
 }
 
-export default connect(state => ({tenant: state.tenant}))(ProjectVariant)
+export default connect(mapStateToProps)(ProjectVariant)