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,25 +1,27 @@
 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))
+        .sort(option[0].callback)
         .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 {
@@ -113,7 +114,15 @@ 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 +134,7 @@ export default function ResultsDisplay(props: ResultsProps): JSX.Element {
         props.state.version,
         props.state.testPath,
         props.state.ecmaScriptVersion,
+        props.state.sortOption,
         test,
       ),
     });
@@ -146,6 +156,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,22 @@
 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} />
+      <SortingDropdown sortValue={props.state.sortOption} setSortOption={props.setSortOption} />
       <NavBreadCrumbs
         navPath={props.state.testPath}
         sliceNavToIndex={props.sliceNavToIndex}
@@ -29,11 +32,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 +54,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
@@ -94,6 +97,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 +113,38 @@ 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,12 +15,13 @@ 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;
@@ -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;