format js files in quickwit-ui (#5981)

* Add biome formatting for quickwit-ui js files

* Fix quickwit-ui files formatting

* Add ci step to check js file formatting

Author: Platane

.github/workflows/ui-ci.yml

@@ -38,6 +38,8 @@ jobs:
               yarn --cwd quickwit-ui cypress run
           - name: Lint
             command: yarn --cwd quickwit-ui lint
+          - name: Check formatting
+            command: yarn --cwd quickwit-ui check-formatting
           - name: Unit Test
             command: yarn --cwd quickwit-ui test
     services:

quickwit/quickwit-ui/.prettierignore

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "includes": ["**", "!**/build"]
+  },
+  "linter": { "enabled": false }
+}

quickwit/quickwit-ui/.prettierrc.json

@@ -12,12 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
 
 module.exports = function override(config, env) {
-  config.plugins.push(new MonacoWebpackPlugin({
-    languages: ['json']
-  }));
+  config.plugins.push(
+    new MonacoWebpackPlugin({
+      languages: ["json"],
+    }),
+  );
   return config;
-}
-
+};

quickwit/quickwit-ui/biome.json

@@ -12,25 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-describe('Home navigation', () => {
-  it('Should display sidebar links', () => {
-    cy.visit('http://127.0.0.1:7280/ui');
-    cy.get('a')
-        .should('be.visible')
-        .should('contain.text', 'Query editor')
-        .should('contain.text', 'Indexes')
-        .should('contain.text', 'Cluster');
+describe("Home navigation", () => {
+  it("Should display sidebar links", () => {
+    cy.visit("http://127.0.0.1:7280/ui");
+    cy.get("a")
+      .should("be.visible")
+      .should("contain.text", "Query editor")
+      .should("contain.text", "Indexes")
+      .should("contain.text", "Cluster");
   });
-  it('Should navigate to cluster state', () => {
-    cy.visit('http://127.0.0.1:7280/ui');
-    cy.get('a').contains('Cluster').click();
-    cy.get('p').should('contain.text', 'Cluster');
-    cy.get('span').should('contain.text', 'cluster_id');
+  it("Should navigate to cluster state", () => {
+    cy.visit("http://127.0.0.1:7280/ui");
+    cy.get("a").contains("Cluster").click();
+    cy.get("p").should("contain.text", "Cluster");
+    cy.get("span").should("contain.text", "cluster_id");
   });
-  it('Should display otel logs index page', () => {
-    cy.visit('http://127.0.0.1:7280/ui/indexes/otel-logs-v0_7');
-    cy.get('a')
-        .should('be.visible')
-        .should('contain.text', 'Indexes')
+  it("Should display otel logs index page", () => {
+    cy.visit("http://127.0.0.1:7280/ui/indexes/otel-logs-v0_7");
+    cy.get("a").should("be.visible").should("contain.text", "Indexes");
   });
-})
+});

quickwit/quickwit-ui/config-overrides.js

@@ -19,4 +19,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

quickwit/quickwit-ui/cypress/e2e/homepage.spec.cy.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

quickwit/quickwit-ui/cypress/plugins/index.js

@@ -14,17 +14,17 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-Cypress.on('uncaught:exception', (err, runnable) => {
+Cypress.on("uncaught:exception", (err, runnable) => {
   // we expect a 3rd party library error with message 'list not defined'
   // and don't want to fail the test so we return false
-  if (err.message.includes('monaco-editor')) {
-    return false
+  if (err.message.includes("monaco-editor")) {
+    return false;
   }
   // we still want to ensure there are no other unexpected
   // errors, so we let them fail the test
-})
+});

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

@@ -12,11 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as React from 'react';
+import * as React from "react";
 
 // Mock MonocoEditor as the current jest setup does not work when Monaco JS files
 // are loaded.
 export default function MonacoEditor(props) {
   return <div>{props.value}</div>;
 }
-