Build out sorting functionality feature to conformance page

src/components/conformance/ResultsDisplay/components/SuiteDataContainer/styles.module.css

@@ -2,7 +2,8 @@
   display: flex;
   flex-direction: column;
   width: 85%;
-  height: 70vh;
+  height: 75vh;
+  padding: 0.5rem;
 }
 
 @media screen and (max-width: 996px) {

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

@@ -21,8 +21,8 @@ export default function SuiteDisplay(props: SuiteDisplayProps): JSX.Element {
     <div className={styles.suiteDisplay}>
       {props.currentSuite.suites ? (
         <SuiteSelector
+          state={props.state}
           suites={props.currentSuite.suites}
-          esFlag={props.state.ecmaScriptVersion}
           navigateToSuite={props.navigateToSuite}
         />
       ) : null}

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

@@ -1,30 +1,39 @@
 import React from "react";
-import { SuiteResult, TestStats } from "@site/src/components/conformance/types";
+import {
+  ConformanceState,
+  SortOption,
+  SuiteResult,
+  TestStats,
+} from "@site/src/components/conformance/types";
 
 import styles from "./styles.module.css";
+import { availableSortingOptions } from "../../../utils";
 
 type SelectorProps = {
+  state: ConformanceState;
   suites: SuiteResult[];
-  esFlag: string | null;
   navigateToSuite: (string) => void;
 };
 
 export default function SuiteSelector(props: SelectorProps): JSX.Element {
+  const option: SortOption[] = availableSortingOptions.filter(
+    (v) => v.id === props.state.sortOption,
+  );
   return (
     <div className={styles.suiteSelector}>
       {props.suites
-        .sort((a, b) => a.name.localeCompare(b.name))
+        .sort(option[0].callback)
         .filter((suite) => {
           const stats: TestStats =
-            suite.versionedStats[props.esFlag] ?? suite.stats;
+            suite.versionedStats[props.state.ecmaScriptVersion] ?? suite.stats;
           return stats.total !== 0;
         })
         .map((suite) => {
           return (
             <SuiteItem
               key={suite.name}
               suite={suite}
-              esFlag={props.esFlag}
+              esFlag={props.state.ecmaScriptVersion}
               navigateToSuite={props.navigateToSuite}
             />
           );

src/components/conformance/ResultsDisplay/index.tsx

@@ -5,6 +5,7 @@ import {
   VersionItem,
   SuiteResult,
   ConformanceState,
+  SortOption,
 } from "@site/src/components/conformance/types";
 import ResultNavigation from "./nav";
 import {
@@ -89,6 +90,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.version,
         newPath,
         props.state.ecmaScriptVersion,
+        props.state.sortOption,
       ),
     });
   };
@@ -104,6 +106,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.version,
         slicedPath,
         props.state.ecmaScriptVersion,
+        props.state.sortOption,
       ),
     });
   };
@@ -113,7 +116,25 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
     const nulledFlag = flag ? flag : undefined;
     history.push({
       pathname: "/conformance",
-      state: createState(props.state.version, props.state.testPath, nulledFlag),
+      state: createState(
+        props.state.version,
+        props.state.testPath,
+        nulledFlag,
+        props.state.sortOption,
+      ),
+    });
+  };
+
+  // Sets the sorting option
+  const setSortOption = (option: string) => {
+    history.push({
+      pathname: "/conformance",
+      state: createState(
+        props.state.version,
+        props.state.testPath,
+        props.state.ecmaScriptVersion,
+        option,
+      ),
     });
   };
 
@@ -125,6 +146,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.version,
         props.state.testPath,
         props.state.ecmaScriptVersion,
+        props.state.sortOption,
         test,
       ),
     });
@@ -146,6 +168,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         state={props.state}
         sliceNavToIndex={sliceNavToIndex}
         setEcmaScriptFlag={setEcmaScriptFlag}
+        setSortOption={setSortOption}
       />
       {currentSuite ? (
         <SuiteDisplay

src/components/conformance/ResultsDisplay/nav.tsx

@@ -1,26 +1,36 @@
 import React from "react";
-import { ConformanceState, SpecEdition } from "../types";
+import { ConformanceState, SortOption, SpecEdition } from "../types";
 
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
+import { availableSortingOptions } from "../utils";
 
 type ResultsNavProps = {
   state: ConformanceState;
   sliceNavToIndex: (number) => void;
   setEcmaScriptFlag: (string) => void;
+  setSortOption: (string) => void;
 };
 
 export default function ResultNavigation(props: ResultsNavProps): JSX.Element {
   return (
     <div className={styles.resultsNav}>
-      <EcmaScriptVersionDropdown
-        setEcmaScriptFlag={props.setEcmaScriptFlag}
-        esVersionValue={props.state.ecmaScriptVersion}
-      />
-      <NavBreadCrumbs
-        navPath={props.state.testPath}
-        sliceNavToIndex={props.sliceNavToIndex}
-      />
+      <div className={styles.navSection}>
+        <EcmaScriptVersionDropdown
+          setEcmaScriptFlag={props.setEcmaScriptFlag}
+          esVersionValue={props.state.ecmaScriptVersion}
+        />
+        <SortingDropdown
+          sortValue={props.state.sortOption}
+          setSortOption={props.setSortOption}
+        />
+      </div>
+      <div className={styles.navSection}>
+        <NavBreadCrumbs
+          navPath={props.state.testPath}
+          sliceNavToIndex={props.sliceNavToIndex}
+        />
+      </div>
     </div>
   );
 }
@@ -32,11 +42,11 @@ type BreadCrumbProps = {
 
 function NavBreadCrumbs(props: BreadCrumbProps) {
   return (
-    <nav aria-label="breadcrumbs" style={{ padding: "0.25em" }}>
+    <nav aria-label="breadcrumbs" style={{ padding: "0.5em" }}>
       <ul className="breadcrumbs">
         {props.navPath.map((pathItem, idx, arr) => {
           return (
-            <NavItem
+            <BreadCrumbItem
               key={pathItem}
               itemName={pathItem}
               index={idx}
@@ -54,14 +64,14 @@ function NavBreadCrumbs(props: BreadCrumbProps) {
   );
 }
 
-type NavItemProps = {
+type BreadCrumbItemProps = {
   itemName: string;
   index: number;
   breadcrumbValue: string;
   sliceNavToIndex: (number) => void;
 };
 
-function NavItem(props: NavItemProps): JSX.Element {
+function BreadCrumbItem(props: BreadCrumbItemProps): JSX.Element {
   return (
     <li className={props.breadcrumbValue}>
       <Link
@@ -99,6 +109,7 @@ function EcmaScriptVersionDropdown(props: DropDownProps): JSX.Element {
 
   return (
     <div className={styles.dropdownContainer}>
+      <h4 style={{ padding: "0.125rem 0.5rem", height: "5" }}>ES Version:</h4>
       <select value={dropdownValue} onChange={handleVersionSelection}>
         <option value={""}>All</option>
         {Object.keys(SpecEdition)
@@ -114,3 +125,39 @@ function EcmaScriptVersionDropdown(props: DropDownProps): JSX.Element {
     </div>
   );
 }
+
+type SortProps = {
+  sortValue: string;
+  setSortOption: (string) => void;
+};
+
+function SortingDropdown(props: SortProps): JSX.Element {
+  const [sortValue, setSortValue] = React.useState<string>(props.sortValue ? props.sortValue : "alpha");
+
+  React.useEffect(() => {
+    setSortValue(props.sortValue);
+  }, [props.sortValue]);
+
+  const handleSortSelection = (e) => {
+    setSortValue(e.target.value);
+    const option = availableSortingOptions.filter(
+      (v) => v.id === e.target.value,
+    );
+    props.setSortOption(option[0].id);
+  };
+
+  return (
+    <div className={styles.dropdownContainer}>
+      <h4 style={{ padding: "0.125rem 0.5rem", height: "5" }}>Sort:</h4>
+      <select value={sortValue} onChange={handleSortSelection}>
+        {availableSortingOptions.map((key) => {
+          return (
+            <option key={key.id} value={key.id}>
+              {key.name}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+}

src/components/conformance/ResultsDisplay/styles.module.css

@@ -10,31 +10,51 @@
 .resultsNav {
   display: flex;
   flex-direction: row;
-  height: 5vh;
+  height: 3.5rem;
   width: 100%;
   padding: 0.75em;
 }
 
+.navSection {
+  display: flex;
+  flex-direction: row;
+}
+
 .navLink:hover {
   cursor: pointer;
 }
 
 .dropdownContainer {
-  width: 6em;
-  padding: 0.25em;
+  display: flex;
+  flex-direction: row;
+  width: 12rem;
+  height: 2.5rem;
+  padding: 0.5rem 0;
 }
 
-@media screen and (max-height: 996px) {
+@media screen and (max-width: 996px) {
   .resultsDisplay {
     height: auto;
     width: calc(100vw-12px);
     overflow-y: auto;
   }
 
+  .navSection {
+    min-height: 2.5rem;
+    height: auto;
+    width: 100vw;
+  }
+
   .resultsNav {
-    min-height: 3.5rem;
     height: auto;
+    flex-direction: column;
     width: 100vw;
-    padding: 1rem auto;
+    padding: 0;
+  }
+
+  .dropdownContainer {
+    padding: 0.25rem 0;
+    width: 10.5rem;
+    height: 2rem;
   }
 }

src/components/conformance/types.ts

@@ -6,6 +6,7 @@ export type ConformanceState = {
   version: VersionItem;
   testPath: string[];
   ecmaScriptVersion: string | undefined;
+  sortOption: string;
   selectedTest: string | undefined;
 };
 
@@ -14,13 +15,14 @@ export type VersionItem = {
   fetchUrl: string;
 };
 
-export type TestStats = {
-  total: number;
-  passed: number;
-  ignored: number;
-  panic: number;
+export type SortOption = {
+  id: string;
+  name: string;
+  callback: (a: SuiteResult, b: SuiteResult) => number;
 };
 
+// The below types are specific to test result types.
+
 export type ResultInfo = {
   version: string;
   commit: string;
@@ -49,6 +51,13 @@ export type VersionedStats = {
   es13: TestStats;
 };
 
+export type TestStats = {
+  total: number;
+  passed: number;
+  ignored: number;
+  panic: number;
+};
+
 export type TestResult = {
   name: string;
   edition: SpecEdition;