Add sort option and misc adjustments

Author: nekevss

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,29 +1,35 @@
 import React from "react";
-import { SuiteResult } from "@site/src/components/conformance/types";
+import {
+  ConformanceState,
+  SortOption,
+  SuiteResult,
+} 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))
-        .map((suite) => {
-          return (
-            <SuiteItem
-              key={suite.name}
-              suite={suite}
-              esFlag={props.esFlag}
-              navigateToSuite={props.navigateToSuite}
-            />
-          );
-        })}
+      {props.suites.sort(option[0].callback).map((suite) => {
+        return (
+          <SuiteItem
+            key={suite.name}
+            suite={suite}
+            esFlag={props.state.ecmaScriptVersion}
+            navigateToSuite={props.navigateToSuite}
+          />
+        );
+      })}
     </div>
   );
 }

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 {
@@ -113,7 +114,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 +144,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.version,
         props.state.testPath,
         props.state.ecmaScriptVersion,
+        props.state.sortOption,
         test,
       ),
     });
@@ -146,6 +166,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,19 +1,28 @@
 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} />
+      <EcmaScriptVersionDropdown
+        setEcmaScriptFlag={props.setEcmaScriptFlag}
+        esVersionValue={props.state.ecmaScriptVersion}
+      />
+      <SortingDropdown
+        sortValue={props.state.sortOption}
+        setSortOption={props.setSortOption}
+      />
       <NavBreadCrumbs
         navPath={props.state.testPath}
         sliceNavToIndex={props.sliceNavToIndex}
@@ -29,11 +38,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}
@@ -51,14 +60,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
@@ -79,12 +88,14 @@ type DropDownProps = {
 };
 
 function EcmaScriptVersionDropdown(props: DropDownProps): JSX.Element {
-  const [dropdownValue, setDropdownValue] = React.useState(props.esVersionValue ? props.esVersionValue : "");
+  const [dropdownValue, setDropdownValue] = React.useState(
+    props.esVersionValue ? props.esVersionValue : "",
+  );
 
   // Update the flag when props.esVersionValue is changed
-  React.useEffect(()=>{
-    setDropdownValue(props.esVersionValue)
-  }, [props.esVersionValue])
+  React.useEffect(() => {
+    setDropdownValue(props.esVersionValue);
+  }, [props.esVersionValue]);
 
   const handleVersionSelection = (e) => {
     // Update the display value and set the flag.
@@ -94,6 +105,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)
@@ -109,3 +121,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 | undefined>();
+
+  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,7 +10,7 @@
 .resultsNav {
   display: flex;
   flex-direction: row;
-  height: 5vh;
+  height: 3.5rem;
   width: 100%;
   padding: 0.75em;
 }
@@ -20,8 +20,11 @@
 }
 
 .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) {
@@ -32,9 +35,8 @@
   }
 
   .resultsNav {
-    min-height: 3.5rem;
-    height: auto;
+    height: 3.5rem;
     width: 100vw;
-    padding: 1rem auto;
+    padding: 0.75rem auto;
   }
 }

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;

src/components/conformance/utils.ts

@@ -1,6 +1,7 @@
 import {
   ConformanceState,
   ResultInfo,
+  SortOption,
   SpecEdition,
   SuiteResult,
   TestOutcome,
@@ -15,17 +16,33 @@ export function createState(
   version: VersionItem,
   testPath?: string[],
   ecmaScriptVersion?: string,
+  sortOption?: string,
   selectedTest?: string,
 ): ConformanceState {
   testPath = testPath ? testPath : [version.tagName];
+  sortOption = sortOption ? sortOption : availableSortingOptions[0].id;
   return {
     version,
     testPath,
     ecmaScriptVersion,
+    sortOption,
     selectedTest,
   };
 }
 
+export const availableSortingOptions: SortOption[] = [
+  {
+    id: "alpha",
+    name: "Alphabetical",
+    callback: (a, b) => a.name.localeCompare(b.name),
+  },
+  {
+    id: "reverse",
+    name: "Reverse Alpha",
+    callback: (a, b) => -a.name.localeCompare(b.name),
+  },
+];
+
 // Interface for the http response of boa_tester's `ResultInfo`
 interface HttpResultInfo {
   c: string;