feat: IterationView nav arrow buttons

Fixes #291

src/common/IterationLookup.ts

@@ -262,16 +262,25 @@ export class Iterations implements IterationLookup {
    * Find an upcoming or previous iteration, computed relative to the given date
    * (or today if no date is given).
    * @param {number} diff n for upcoming iterations, -n for previous iterations
-   * @param {string|DateTime} [dateString] defaults to today
-   * @returns {LegacyIteration}
+   * @param {string} [baseIterationString] the iteration number to start from.
+   *                                       defaults to the current iteration.
+   * @returns {LegacyIteration|null} null if there is no adjacent iteration
    */
   getAdjacentIteration(
     diff: number,
-    dateString?: string | DateTime
+    baseIterationString?: string
   ): LegacyIteration {
-    const baseIteration: string = this.getIteration(dateString).number;
-    const index = this.orderedVersionStrings.indexOf(baseIteration);
+    if (!baseIterationString) {
+      baseIterationString = this.getIteration().number;
+    }
+    const index = this.orderedVersionStrings.indexOf(baseIterationString);
+    if (index === -1) {
+      throw new Error("Invalid base iteration string");
+    }
     const iterationString = this.orderedVersionStrings[index + diff];
+    if (!iterationString) {
+      return null;
+    }
     const iteration = this.byVersionString[iterationString];
     return {
       number: iterationString,

src/content/components/IterationView/IterationView.module.scss

@@ -0,0 +1,18 @@
+.iterationHeading {
+  display: flex;
+  align-items: center;
+
+  .iterationSpacer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    flex-basis: 0;
+
+    .iterationArrow {
+      font-size: 0.5em;
+      text-decoration: none;
+      padding: 0.25em 0.6em;
+    }
+  }
+}

src/content/components/IterationView/IterationView.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import { GlobalContext, MetaBug } from "../GlobalContext/GlobalContext";
 import { BugList } from "../BugList/BugList";
 import { useBugFetcher, Bug, BugQuery } from "../../hooks/useBugFetcher";
@@ -9,6 +10,7 @@ import { CompletionBar } from "../CompletionBar/CompletionBar";
 import { isBugResolved } from "../../lib/utils";
 import { teams as emailLists } from "../../../config/people";
 import { BUGZILLA_TRIAGE_COMPONENTS } from "../../../config/project_settings";
+import * as styles from "./IterationView.module.scss";
 import * as priorityStyles from "../PriorityGuide/PriorityGuide.module.scss";
 
 interface GetQueryOptions {
@@ -100,10 +102,7 @@ export const IterationView: React.FunctionComponent<
   IterationViewProps
 > = props => {
   const isCurrent = props.iteration === props.currentIteration.number;
-  const heading = `${isCurrent ? "Current " : ""}Iteration (${
-    props.iteration
-  })`;
-  const { metas, qm, teams } = React.useContext(GlobalContext);
+  const { metas, qm, teams, iterations } = React.useContext(GlobalContext);
   const query = React.useMemo(
     () => getQuery({ ...props, metas }),
     [metas, props]
@@ -227,8 +226,46 @@ export const IterationView: React.FunctionComponent<
     },
     [metas]
   );
+  const heading = React.useMemo(() => {
+    const nextIteration = iterations.getAdjacentIteration(1, props.iteration);
+    const prevIteration = iterations.getAdjacentIteration(-1, props.iteration);
+    let headingString = isCurrent
+      ? `Current Iteration (${props.iteration})`
+      : `Iteration ${props.iteration}`;
+    return {
+      title: headingString,
+      heading: (
+        <div className={styles.iterationHeading}>
+          <div className={styles.iterationSpacer}>
+            {prevIteration ? (
+              <Link
+                className={styles.iterationArrow}
+                to={`/iteration/${prevIteration.number}`}
+                aria-label={`Previous iteration: ${prevIteration.number}`}>
+                ◀
+              </Link>
+            ) : null}
+          </div>
+          {headingString}
+          <div className={styles.iterationSpacer}>
+            {nextIteration ? (
+              <Link
+                className={styles.iterationArrow}
+                to={`/iteration/${nextIteration.number}`}
+                aria-label={`Next iteration: ${nextIteration.number}`}>
+                ▶
+              </Link>
+            ) : null}
+          </div>
+        </div>
+      ),
+    };
+  }, [isCurrent, iterations, props.iteration]);
   return (
-    <Container loaded={isLoaded} heading={heading}>
+    <Container
+      loaded={isLoaded}
+      heading={heading.heading}
+      title={heading.title}>
       {isCurrent ? (
         <CompletionBar
           startDate={props.currentIteration.start}

src/content/components/Router/Router.js

@@ -508,6 +508,11 @@ export class Router extends React.PureComponent {
               <Route exact={true} path="/">
                 <Redirect to="/current_iteration" />
               </Route>
+              <Route
+                exact={true}
+                path={`/iteration/${currentIteration.number}`}>
+                <Redirect to="/current_iteration" />
+              </Route>
               {ROUTER_CONFIG.filter(
                 route => route.routeProps && !route.navOnly
               ).map((route, index) => (