Refactor Conformance page to allow back and forward history (#150)

* refactor: add history/location functionality

* Add basic alphabetical sorting

* Fix ECMAScript version flag issue

Author: nekevss

src/components/HomepageFeatures/index.tsx

@@ -17,7 +17,9 @@ const FeatureList: FeatureItem[] = [
     title: "Written in Rust",
     Svg: new_logo_black,
     description: (
-      <>Boa brings Rust's memory safety guarantees to the world of JS engines.</>
+      <>
+        Boa brings Rust's memory safety guarantees to the world of JS engines.
+      </>
     ),
   },
   {

src/components/benchmarks/index.tsx

@@ -25,7 +25,7 @@ ChartJS.register(
   Tooltip,
   Legend,
   Colors,
-  BarElement
+  BarElement,
 );
 
 export function BenchmarkGraphs() {
@@ -52,7 +52,7 @@ export function BenchmarkGraphs() {
 
 const buildChartFromBenchmark = async (name: string) => {
   const data = await fetchData(
-    `https://raw.githubusercontent.com/boa-dev/data/main/bench/results/${name}.json`
+    `https://raw.githubusercontent.com/boa-dev/data/main/bench/results/${name}.json`,
   );
 
   const barData = getBarChartData(data);
@@ -79,7 +79,7 @@ const fetchData = async (url: string) => {
   const data = await response.json();
   return {
     labels: data.labels.map((epoch: number) =>
-      new Date(epoch).toLocaleDateString()
+      new Date(epoch).toLocaleDateString(),
     ),
     datasets: [
       {

…/components/conformance/Banner/index.tsx …ponents/conformance/HeroBanner/index.tsxsrc/components/conformance/Banner/index.tsx renamed to src/components/conformance/HeroBanner/index.tsx src/components/conformance/Banner/index.tsx renamed to src/components/conformance/HeroBanner/index.tsx

@@ -1,26 +1,27 @@
 import React from "react";
-import { VersionItem, TestStats } from "@site/src/components/conformance/types";
-import { mapToTestStats } from "@site/src/components/conformance/utils";
+import {
+  VersionItem,
+  TestStats,
+  ConformanceState,
+} from "@site/src/components/conformance/types";
+import {
+  createState,
+  mapToTestStats,
+} from "@site/src/components/conformance/utils";
+import { useHistory } from "@docusaurus/router";
 import Heading from "@theme/Heading";
 
 import styles from "./styles.module.css";
 
 interface BannerProps {
   focusItems: VersionItem[];
-  setNewVersion: (newVersion: VersionItem) => void;
 }
 
-export default function ConformanceBanner(props: BannerProps): JSX.Element {
+export default function ConformanceHeroBanner(props: BannerProps): JSX.Element {
   return (
     <div className={styles.bannerSection}>
       {props.focusItems.map((item) => {
-        return (
-          <BannerCard
-            key={item.tagName}
-            setNewVersion={props.setNewVersion}
-            item={item}
-          />
-        );
+        return <BannerCard key={item.tagName} item={item} />;
       })}
     </div>
   );
@@ -29,6 +30,8 @@ export default function ConformanceBanner(props: BannerProps): JSX.Element {
 function BannerCard(props) {
   const [stats, setStats] = React.useState<TestStats | null>(null);
 
+  const history = useHistory<ConformanceState>();
+
   React.useEffect(() => {
     const fetchStats = async () => {
       const response = await fetch(props.item.fetchUrl);
@@ -81,7 +84,12 @@ function BannerCard(props) {
         <div className="card__footer">
           <button
             className="button button--block button--primary"
-            onClick={() => props.setNewVersion(props.item)}
+            onClick={() =>
+              history.push({
+                pathname: "/conformance",
+                state: createState(props.item),
+              })
+            }
           >
             View Results
           </button>

…nts/conformance/Banner/styles.module.css …conformance/HeroBanner/styles.module.csssrc/components/conformance/Banner/styles.module.css renamed to src/components/conformance/HeroBanner/styles.module.css src/components/conformance/Banner/styles.module.css renamed to src/components/conformance/HeroBanner/styles.module.css

@@ -4,13 +4,14 @@ import {
   TestOutcome,
   TestResult,
   SuiteResult,
+  ConformanceState,
 } from "@site/src/components/conformance/types";
 import Heading from "@theme/Heading";
 import styles from "./styles.module.css";
 
 type TestsGridProps = {
+  state: ConformanceState;
   suite: SuiteResult;
-  esFlag: string | null;
   selectTest: (string) => void;
 };
 
@@ -26,7 +27,7 @@ export default function TestsGrid(props: TestsGridProps): JSX.Element {
         <div className={cardBodyClass}>
           <Grid
             tests={props.suite.tests}
-            esFlag={props.esFlag}
+            esFlag={props.state.ecmaScriptVersion}
             selectTest={props.selectTest}
           />
         </div>

src/components/conformance/ResultsDisplay/components/SuiteDataContainer/cards/TestGrid/index.tsx

@@ -1,39 +1,36 @@
 import React from "react";
 import TestsGrid from "./cards/TestGrid";
 import TestViewer from "./cards/TestViewer";
-import { SuiteResult } from "@site/src/components/conformance/types";
+import {
+  ConformanceState,
+  SuiteResult,
+} from "@site/src/components/conformance/types";
 
 import styles from "./styles.module.css";
 
 type SuiteDataProps = {
   suite: SuiteResult;
-  esFlag: string | null;
+  state: ConformanceState;
   t262Path: string;
+  setSelectedTest: (string) => void;
 };
 
 export default function SuiteDataContainer(props: SuiteDataProps): JSX.Element {
-  const [selectedTest, setSelectedTest] = React.useState<string | null>(null);
-
-  // Unselect a test if the underlying test262 path has been changed.
-  React.useEffect(() => {
-    setSelectedTest(null);
-  }, [props.t262Path]);
-
   // Set the user's selected test to be displayed in the ViewPort.
   const selectTest = (testName: string) => {
-    setSelectedTest(testName);
+    props.setSelectedTest(testName);
   };
 
   const clearTest = () => {
-    setSelectedTest(null);
+    props.setSelectedTest(undefined);
   };
 
   // Add a TestViewer to look up and display the test262.
   return (
     <div className={styles.dataContainer}>
-      {selectedTest ? (
+      {props.state.selectedTest ? (
         <TestViewer
-          testName={selectedTest}
+          testName={props.state.selectedTest}
           t262Path={props.t262Path}
           backToGrid={() => clearTest()}
         />

src/components/conformance/ResultsDisplay/components/SuiteDataContainer/index.tsx

@@ -1,15 +1,19 @@
 import React from "react";
 import SuiteSelector from "../SuiteSelector";
 import SuiteDataContainer from "../SuiteDataContainer";
-import { SuiteResult } from "@site/src/components/conformance/types";
+import {
+  ConformanceState,
+  SuiteResult,
+} from "@site/src/components/conformance/types";
 
 import styles from "./styles.module.css";
 
 type SuiteDisplayProps = {
   currentSuite: SuiteResult;
-  esFlag: string | null;
+  state: ConformanceState;
   t262Path: string;
   navigateToSuite: (string) => void;
+  setSelectedTest: (string) => void;
 };
 
 export default function SuiteDisplay(props: SuiteDisplayProps): JSX.Element {
@@ -18,15 +22,16 @@ export default function SuiteDisplay(props: SuiteDisplayProps): JSX.Element {
       {props.currentSuite.suites ? (
         <SuiteSelector
           suites={props.currentSuite.suites}
-          esFlag={props.esFlag}
+          esFlag={props.state.ecmaScriptVersion}
           navigateToSuite={props.navigateToSuite}
         />
       ) : null}
       {props.currentSuite.tests ? (
         <SuiteDataContainer
+          state={props.state}
           suite={props.currentSuite}
-          esFlag={props.esFlag}
           t262Path={props.t262Path}
+          setSelectedTest={props.setSelectedTest}
         />
       ) : null}
     </div>

src/components/conformance/ResultsDisplay/components/SuiteDisplay/index.tsx

@@ -12,16 +12,18 @@ type SelectorProps = {
 export default function SuiteSelector(props: SelectorProps): JSX.Element {
   return (
     <div className={styles.suiteSelector}>
-      {props.suites.map((suite) => {
-        return (
-          <SuiteItem
-            key={suite.name}
-            suite={suite}
-            esFlag={props.esFlag}
-            navigateToSuite={props.navigateToSuite}
-          />
-        );
-      })}
+      {props.suites
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map((suite) => {
+          return (
+            <SuiteItem
+              key={suite.name}
+              suite={suite}
+              esFlag={props.esFlag}
+              navigateToSuite={props.navigateToSuite}
+            />
+          );
+        })}
     </div>
   );
 }