Fix links for jobs with special characters

Change-Id: I12e8a056a2e5cd1bb18c1f24ecd7db55405f0a8c

tests/fixtures/layouts/special-characters-job.yaml

@@ -0,0 +1,2 @@
+- job:
+    name: "a@b/c"

tests/unit/test_web.py

@@ -1005,6 +1005,11 @@ class TestWeb(BaseTestWeb):
         job = self.get_url("api/tenant/tenant-one/job/noop").json()
         self.assertEqual("noop", job[0]["name"])
 
+    @simple_layout('layouts/special-characters-job.yaml')
+    def test_web_job_special_characters(self):
+        job = self.get_url("api/tenant/tenant-one/job/a%40b%2Fc").json()
+        self.assertEqual("a@b/c", job[0]["name"])
+
     def test_freeze_jobs(self):
         # Test can get a list of the jobs for a given project+pipeline+branch.
         resp = self.get_url(

web/src/containers/jobs/Jobs.jsx

@@ -62,7 +62,7 @@ class JobsList extends React.Component {
     const createNode = (job, extra) => ({
       text: (
         <React.Fragment>
-          <Link to={linkPrefix + job.name}>{job.name}</Link>
+          <Link to={linkPrefix + encodeURIComponent(job.name)}>{job.name}</Link>
           {extra && (<span> ({extra})</span>)}
           {job.description && (
             <span style={{marginLeft: '10px'}}>{job.description}</span>

zuul/web/__init__.py

@@ -32,6 +32,7 @@ import ssl
 import threading
 import uuid
 import prometheus_client
+import urllib.parse
 
 import zuul.executor.common
 from zuul import exceptions
@@ -1170,6 +1171,7 @@ class ZuulWebAPI(object):
     @cherrypy.tools.json_out(
         content_type='application/json; charset=utf-8', handler=json_handler)
     def job(self, tenant_name, job_name):
+        job_name = urllib.parse.unquote_plus(job_name)
         tenant = self._getTenantOrRaise(tenant_name)
         job_variants = tenant.layout.jobs.get(job_name)
         result = []