feat(ui): Consistent param handling in URLs

Not all params need to be escaped/encoded.

Author: lotas

ui/src/components/WMWorkerPoolEditor/index.jsx

@@ -414,49 +414,43 @@ export default class WMWorkerPoolEditor extends Component {
       joinWorkerPoolId(workerPool.workerPoolId1, workerPool.workerPoolId2) !==
         workerPoolId;
     const { provisionerId, workerType } = splitWorkerPoolId(workerPoolId);
+    const workerTypeUrl = `/provisioners/${provisionerId}/worker-types/${workerType}`;
+    const workerPoolUrl = `/worker-manager/${encodeURIComponent(workerPoolId)}`;
     const workerPoolStats = [
       {
         label: 'Pending Tasks',
         value: pendingTasks,
         className: 'pendingTasks',
         Icon: ClockOutlineIcon,
-        href: `/worker-manager/${encodeURIComponent(
-          workerPoolId
-        )}/pending-tasks`,
+        href: `${workerTypeUrl}/pending-tasks`,
       },
       {
         label: 'Requested Capacity',
         value: requestedCapacity,
         className: 'requestedCapacity',
         Icon: TimerSandIcon,
-        href: `/provisioners/${encodeURIComponent(
-          provisionerId
-        )}/worker-types/${encodeURIComponent(workerType)}?filterBy=requested`,
+        href: `${workerTypeUrl}?filterBy=requested`,
       },
       {
         label: 'Running Capacity',
         value: runningCapacity,
         className: 'runningCapacity',
         Icon: RunIcon,
-        href: `/provisioners/${encodeURIComponent(
-          provisionerId
-        )}/worker-types/${encodeURIComponent(workerType)}?filterBy=running`,
+        href: `${workerTypeUrl}?filterBy=running`,
       },
       {
         label: 'Stopping Capacity',
         value: stoppingCapacity,
         className: 'stoppingCapacity',
         Icon: CloseIcon,
-        href: `/provisioners/${encodeURIComponent(
-          provisionerId
-        )}/worker-types/${encodeURIComponent(workerType)}?filterBy=stopping`,
+        href: `${workerTypeUrl}?filterBy=stopping`,
       },
       {
         label: 'Errors',
         value: errorStats?.totals?.total,
         className: 'errorsTile',
         Icon: MessageAlertIcon,
-        href: `/worker-manager/${encodeURIComponent(workerPoolId)}/errors`,
+        href: `${workerPoolUrl}/errors`,
       },
     ];
 
@@ -515,9 +509,7 @@ export default class WMWorkerPoolEditor extends Component {
                 label="Workers (Queue View)"
                 component={Link}
                 clickable
-                to={`/provisioners/${encodeURIComponent(
-                  provisionerId
-                )}/worker-types/${encodeURIComponent(workerType)}`}
+                to={workerTypeUrl}
               />
               <Chip
                 size="medium"
@@ -526,9 +518,7 @@ export default class WMWorkerPoolEditor extends Component {
                 label="Workers (Worker Manager View)"
                 component={Link}
                 clickable
-                to={`/worker-manager/${encodeURIComponent(
-                  workerPoolId
-                )}/workers`}
+                to={`${workerPoolUrl}/workers`}
               />
             </div>
           </Fragment>

ui/src/components/WMWorkerPoolsTable/index.jsx

@@ -193,6 +193,12 @@ export default class WorkerManagerWorkerPoolsTable extends Component {
     });
   };
 
+  getPendingTasksLink(workerPoolId) {
+    const { provisionerId, workerType } = splitWorkerPoolId(workerPoolId);
+
+    return `/provisioners/${provisionerId}/worker-types/${workerType}/pending-tasks`;
+  }
+
   renderRow = ({ node: workerPool }) => {
     const {
       match: { path },
@@ -238,10 +244,7 @@ export default class WorkerManagerWorkerPoolsTable extends Component {
         </TableCell>
 
         <TableCell>
-          <Link
-            to={`${path}/${encodeURIComponent(
-              workerPool.workerPoolId
-            )}/pending-tasks`}>
+          <Link to={this.getPendingTasksLink(workerPool.workerPoolId)}>
             <TableCellItem button>
               <Hidden lgUp implementation="css" className={classes.hiddenLabel}>
                 Pending Tasks:
@@ -278,9 +281,7 @@ export default class WorkerManagerWorkerPoolsTable extends Component {
 
         <TableCell>
           <Link
-            to={`/provisioners/${encodeURIComponent(
-              provisionerId
-            )}/worker-types/${encodeURIComponent(workerType)}`}>
+            to={`/provisioners/${provisionerId}/worker-types/${workerType}`}>
             <Button
               className={classes.linksButton}
               variant="outlined"

ui/src/views/Provisioners/ClaimedTasks/index.jsx

@@ -56,9 +56,7 @@ export default class WMViewClaimedTasks extends Component {
   get workersLink() {
     const { provisionerId, workerType } = this.props.match.params;
 
-    return `/provisioners/${encodeURIComponent(
-      provisionerId
-    )}/worker-types/${encodeURIComponent(workerType)}`;
+    return `/provisioners/${provisionerId}/worker-types/${workerType}`;
   }
 
   renderRow({ node: { taskId, runId, claimed, task, workerGroup, workerId } }) {

ui/src/views/Provisioners/PendingTasks/index.jsx

@@ -57,9 +57,7 @@ export default class WMViewPendingTasks extends Component {
   get workersLink() {
     const { provisionerId, workerType } = this.props.match.params;
 
-    return `/provisioners/${encodeURIComponent(
-      provisionerId
-    )}/worker-types/${encodeURIComponent(workerType)}`;
+    return `/provisioners/${provisionerId}/worker-types/${workerType}`;
   }
 
   renderRow({ node: { taskId, runId, inserted, task } }) {