Filter operator "not-equals" for "status" (#218)

* Filter operator "not-equals" for "status"

Visual-Regression-Tracker/Visual-Regression-Tracker#261

* test updated

Author: pashidlos

src/_test/test.data.helper.ts

@@ -182,7 +182,7 @@ export const TEST_UNRESOLVED: TestRun = {
   diffTollerancePercent: 3.21,
   status: TestStatus.unresolved,
   testVariationId: "some test variation id",
-  name: "test run name",
+  name: "test run name unresolved",
   os: "OS",
   browser: "browser",
   viewport: "viewport",

src/components/TestRunList/StatusFilterOperators.tsx

@@ -4,6 +4,8 @@ import { useTestRunState } from "../../contexts";
 import {
   GridFilterInputValueProps,
   getGridStringOperators,
+  GridFilterItem,
+  GridCellParams,
 } from "@material-ui/data-grid";
 import { TestStatus } from "../../types";
 
@@ -42,9 +44,30 @@ const StatusInputComponent = (props: GridFilterInputValueProps) => {
   );
 };
 
-export const StatusFilterOperators = getGridStringOperators()
-  .filter((operator) => operator.value === "equals")
-  .map((operator) => ({
-    ...operator,
+export const StatusFilterOperators = [
+  ...getGridStringOperators()
+    .filter((operator) => operator.value === "equals")
+    .map((operator) => ({
+      ...operator,
+      InputComponent: StatusInputComponent,
+    })),
+  {
+    label: "not",
+    value: "not",
+    getApplyFilterFn: (filterItem: GridFilterItem) => {
+      if (
+        !filterItem.columnField ||
+        !filterItem.value ||
+        !filterItem.operatorValue
+      ) {
+        return null;
+      }
+
+      return (params: GridCellParams): boolean => {
+        return params.value !== filterItem.value;
+      };
+    },
     InputComponent: StatusInputComponent,
-  }));
+    InputComponentProps: { type: "string" },
+  },
+];

src/components/TestRunList/index.tsx

@@ -17,11 +17,14 @@ import {
   GridValueGetterParams,
   GridValueFormatterParams,
   GridFilterModelParams,
+  GridCellValue,
+  GridSortCellParams,
+  GridSortDirection,
 } from "@material-ui/data-grid";
 import { DataGridCustomToolbar } from "./DataGridCustomToolbar";
 import { StatusFilterOperators } from "./StatusFilterOperators";
 import { TagFilterOperators } from "./TagFilterOperators";
-import { TestRun } from "../../types";
+import { TestRun, TestStatus } from "../../types";
 
 const columnsDef: GridColDef[] = [
   { field: "id", hide: true, filterable: false },
@@ -75,6 +78,18 @@ const columnsDef: GridColDef[] = [
         />
       );
     },
+    sortComparator: (
+      v1: GridCellValue,
+      v2: GridCellValue,
+      cellParams1: GridSortCellParams,
+      cellParams2: GridSortCellParams
+    ) => {
+      const statusOrder = Object.values(TestStatus);
+      return (
+        statusOrder.indexOf(v2 as TestStatus) -
+        statusOrder.indexOf(v1 as TestStatus)
+      );
+    },
     filterOperators: StatusFilterOperators,
   },
 ];
@@ -116,6 +131,12 @@ const TestRunList: React.FunctionComponent = () => {
           disableColumnSelector
           disableColumnMenu
           disableSelectionOnClick
+          sortModel={[
+            {
+              field: "status",
+              sort: "desc" as GridSortDirection,
+            },
+          ]}
           onRowClick={(param: GridRowParams) => {
             selectTestRun(
               testRunDispatch,

src/pages/ProjectPage.spec.tsx

@@ -74,7 +74,7 @@ describe("Project page", () => {
 
     cy.vrtTrack("Project page");
 
-    cy.contains("test run name").click();
+    cy.contains(TEST_UNRESOLVED.name).click();
 
     cy.get("[data-testid='image-details']").should(($imageDetails) => {
       expect($imageDetails).to.have.length(2);

src/types/testStatus.ts

@@ -1,8 +1,8 @@
 export enum TestStatus {
   new = "new",
-  ok = "ok",
   unresolved = "unresolved",
   failed = "failed",
   approved = "approved",
   autoApproved = "autoApproved",
+  ok = "ok",
 }