fix sort order in UI (#3966)

* fix sort order in UI

it should be descending, but was asc due to recent change in sorting order

* Upgrade to node 20 and update minor dependencies.

* Update cypress config.

---------

Co-authored-by: fmassot <francois.massot@gmail.com>

.github/actions/cargo-build-macos-binary/action.yml

@@ -17,7 +17,7 @@ runs:
       shell: bash
     - uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version: 20
         cache: "yarn"
         cache-dependency-path: quickwit/quickwit-ui/yarn.lock
     - run: yarn global add node-gyp

.github/actions/cross-build-binary/action.yml

@@ -17,7 +17,7 @@ runs:
       shell: bash
     - uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version: 20
         cache: "yarn"
         cache-dependency-path: quickwit/quickwit-ui/yarn.lock
     - run: yarn global add node-gyp

.github/workflows/ui-ci.yml

@@ -61,7 +61,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: "yarn"
           cache-dependency-path: quickwit/quickwit-ui/yarn.lock
       - name: Install rustup

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18 as ui-builder
+FROM node:20 as ui-builder
 
 COPY quickwit/quickwit-ui /quickwit/quickwit-ui
 

quickwit/quickwit-ui/cypress.config.js

@@ -0,0 +1,12 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  video: false,
+  screenshotOnRunFailure: false,
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

quickwit/quickwit-ui/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

quickwit/quickwit-ui/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

quickwit/quickwit-ui/package.json

@@ -6,20 +6,20 @@
   "proxy": "http://127.0.0.1:7280",
   "homepage": "/ui/",
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.114",
     "@mui/material": "^5.11.2",
     "@mui/system": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.12",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^16.7.13",
+    "@types/jest": "^29.5.6",
+    "@types/node": "^20.8.7",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
-    "@types/swagger-ui-react": "^4.11.0",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@types/swagger-ui-react": "^4.18.2",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
     "dayjs": "^1.11.7",
     "monaco-editor": "^0.34.1",
     "monaco-editor-webpack-plugin": "^7.0.1",
@@ -33,7 +33,7 @@
     "react-scripts": "~5.0.1",
     "styled-components": "^5.3.6",
     "styled-icons": "^10.47.0",
-    "swagger-ui-react": "^4.18.1",
+    "swagger-ui-react": "^5.9.0",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
@@ -69,12 +69,12 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "cypress": "8.5",
-    "jest": "^27.5.1",
-    "ts-jest": "^27.1.4"
+    "@testing-library/user-event": "^14.5.1",
+    "cypress": "13.3.2",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.1.1"
   },
   "jest": {
     "moduleNameMapper": {

quickwit/quickwit-ui/src/services/client.test.ts

@@ -30,7 +30,7 @@ describe('Client unit test', () => {
           maxHits: 20,
           sortByField: {
             field_name: 'timestamp',
-            order: 'Asc'
+            order: 'Desc'
           }
         };
         expect(new Client().buildSearchUrl(searchRequest).toString()).toBe("http://localhost/api/v1/my-new-fresh-index-id/search?query=severity_error%3AERROR&max_hits=20&start_timestamp=100&end_timestamp=200&sort_by_field=%2Btimestamp");

quickwit/quickwit-ui/src/utils/urls.ts

@@ -49,13 +49,13 @@ export function parseSearchUrl(historySearch: string): SearchRequest {
   const sortByFieldParam = searchParams.get("sort_by_field");
   if (sortByFieldParam !== null) {
     if (sortByFieldParam.startsWith('+')) {
-      const order: SortOrder = 'Asc';
+      const order: SortOrder = 'Desc';
       sortByField = {field_name: sortByFieldParam.substring(1), order: order};
     } else if (sortByFieldParam.startsWith('-')) {
-      const order: SortOrder = 'Desc';
+      const order: SortOrder = 'Asc';
       sortByField = {field_name: sortByFieldParam.substring(1), order: order};
     } else {
-      const order: SortOrder = 'Asc';
+      const order: SortOrder = 'Desc';
       sortByField = {field_name: sortByFieldParam, order: order};
     }
   }
@@ -95,6 +95,6 @@ export function toUrlSearchRequestParams(request: SearchRequest): URLSearchParam
 }
 
 export function serializeSortByField(sortByField: SortByField): string {
-  const order = sortByField.order === 'Asc' ? '+' : '-';
+  const order = sortByField.order === 'Desc' ? '+' : '-';
   return `${order}${sortByField.field_name}`;
 }