feat: biome lint frontend (#4903)

Follows up on #4853 to add Biome
to the frontend as well.


![image](https://github.com/Unleash/unleash/assets/14320932/1906faf1-fc29-4172-a4d4-b2716d72cd65)

Added a few `biome-ignore` to speed up the process but we may want to
check and fix them in the future.

.gitignore

@@ -36,7 +36,6 @@ unleash-server.tar.gz
 # Visual Studio Code
 jsconfig.json
 typings
-.vscode
 .nyc_output
 
 # We use yarn.lock

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.defaultFormatter": "biomejs.biome"
+}

biome.json

@@ -41,8 +41,8 @@
       "website/translated_docs",
       "website",
       "setupJest.js",
-      "frontend",
       "dist",
+      "build",
       "src/migrations/*.js",
       "src/test/examples/*.json",
       "website/**/*.js",
@@ -67,16 +67,13 @@
       "website/translated_docs",
       "website",
       "setupJest.js",
-      "frontend",
       "dist",
+      "build",
       "src/migrations/*.js",
       "src/migrations/*.json",
       "src/test/examples/*.json",
       "website/**/*.js",
-      "coverage",
-      ".eslintrc",
-      ".eslintignore",
-      "package.json"
+      "coverage"
     ],
     "indentSize": 4
   },

frontend/cypress.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
                 vitePreprocessor({
                     configFile: path.resolve(__dirname, './vite.config.ts'),
                     mode: 'development',
-                })
+                }),
             );
             on('task', {
                 log(message) {

frontend/cypress.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
 
 declare namespace Cypress {
-    interface Chainable {}
+    type Chainable = {};
 }

frontend/cypress/global.d.ts

@@ -26,25 +26,25 @@ declare namespace Cypress {
 
         createProject_UI(
             projectName: string,
-            defaultStickiness: string
+            defaultStickiness: string,
         ): Chainable;
 
         createFeature_UI(
             name: string,
             shouldWait?: boolean,
-            project?: string
+            project?: string,
         ): Chainable;
 
         // VARIANTS
         addVariantsToFeature_UI(
             featureToggleName: string,
             variants: Array<string>,
-            projectName?: string
+            projectName?: string,
         );
         deleteVariant_UI(
             featureToggleName: string,
             variant: string,
-            projectName?: string
+            projectName?: string,
         ): Chainable<any>;
 
         // SEGMENTS
@@ -54,16 +54,16 @@ declare namespace Cypress {
         // STRATEGY
         addUserIdStrategyToFeature_UI(
             featureName: string,
-            projectName?: string
+            projectName?: string,
         ): Chainable;
         addFlexibleRolloutStrategyToFeature_UI(
-            options: AddFlexibleRolloutStrategyOptions
+            options: AddFlexibleRolloutStrategyOptions,
         ): Chainable;
         updateFlexibleRolloutStrategy_UI(featureToggleName: string);
         deleteFeatureStrategy_UI(
             featureName: string,
             shouldWait?: boolean,
-            projectName?: string
+            projectName?: string,
         ): Chainable;
 
         // API
@@ -72,22 +72,22 @@ declare namespace Cypress {
         addUserToProject_API(
             id: number,
             role: number,
-            projectName?: string
+            projectName?: string,
         ): Chainable;
         createProject_API(
             name: string,
-            options?: Partial<Cypress.RequestOptions>
+            options?: Partial<Cypress.RequestOptions>,
         ): Chainable;
         deleteProject_API(name: string): Chainable;
         createFeature_API(
             name: string,
             projectName?: string,
-            options?: Partial<Cypress.RequestOptions>
+            options?: Partial<Cypress.RequestOptions>,
         ): Chainable;
         deleteFeature_API(name: string): Chainable;
         createEnvironment_API(
             environment: IEnvironment,
-            options?: Partial<Cypress.RequestOptions>
+            options?: Partial<Cypress.RequestOptions>,
         ): Chainable;
     }
 }

frontend/cypress/integration/demo/demo.spec.ts

@@ -16,7 +16,7 @@ describe('demo', () => {
                 name: 'dev',
                 type: 'development',
             },
-            optionsIgnore409
+            optionsIgnore409,
         );
         cy.createProject_API('demo-app', optionsIgnore409);
         cy.createFeature_API('demoApp.step1', 'demo-app', optionsIgnore409);
@@ -32,10 +32,10 @@ describe('demo', () => {
             cy.get("[data-testid='CLOSE_SPLASH']").click();
         }
 
-        cy.intercept('GET', `${baseUrl}/api/admin/ui-config`, req => {
+        cy.intercept('GET', `${baseUrl}/api/admin/ui-config`, (req) => {
             req.headers['cache-control'] =
                 'no-cache, no-store, must-revalidate';
-            req.on('response', res => {
+            req.on('response', (res) => {
                 if (res.body) {
                     res.body.flags = {
                         ...res.body.flags,
@@ -93,7 +93,7 @@ describe('demo', () => {
                     'log',
                     `Testing topic #${topic + 1} "${
                         currentTopic.title
-                    }", step #${step + 1}...`
+                    }", step #${step + 1}...`,
                 );
 
                 if (!currentStep.optional) {

frontend/cypress/integration/feature/feature.spec.ts

@@ -28,14 +28,14 @@ describe('feature', () => {
     it('gives an error if a toggle exists with the same name', () => {
         cy.createFeature_UI(featureToggleName, false);
         cy.get("[data-testid='INPUT_ERROR_TEXT']").contains(
-            'A toggle with that name already exists'
+            'A toggle with that name already exists',
         );
     });
 
     it('gives an error if a toggle name is url unsafe', () => {
         cy.createFeature_UI('featureToggleUnsafe####$#//', false);
         cy.get("[data-testid='INPUT_ERROR_TEXT']").contains(
-            `"name" must be URL friendly`
+            `"name" must be URL friendly`,
         );
     });
 
@@ -44,7 +44,7 @@ describe('feature', () => {
             featureToggleName,
         }).then(() => {
             cy.updateFlexibleRolloutStrategy_UI(featureToggleName).then(() =>
-                cy.deleteFeatureStrategy_UI(featureToggleName)
+                cy.deleteFeatureStrategy_UI(featureToggleName),
             );
         });
     });
@@ -71,7 +71,7 @@ describe('feature', () => {
         cy.intercept(
             'PATCH',
             `/api/admin/projects/default/features/${featureToggleName}/environments/development/variants`,
-            req => {
+            (req) => {
                 expect(req.body[0].op).to.equal('replace');
                 expect(req.body[0].path).to.equal('/1/weightType');
                 expect(req.body[0].value).to.equal('fix');
@@ -81,13 +81,13 @@ describe('feature', () => {
                 expect(req.body[2].op).to.equal('replace');
                 expect(req.body[2].path).to.equal('/0/weight');
                 expect(req.body[2].value).to.equal(850);
-            }
+            },
         ).as('variantUpdate');
 
         cy.get('[data-testid=DIALOGUE_CONFIRM_ID]').click();
         cy.get(`[data-testid=VARIANT_WEIGHT_${variant2}]`).should(
             'have.text',
-            '15 %'
+            '15 %',
         );
     });
 

frontend/cypress/integration/groups/groups.spec.ts

@@ -15,13 +15,13 @@ describe('groups', () => {
                 email: `unleash-e2e-user${i}-${randomId}@test.com`,
                 sendEmail: false,
                 rootRole: 3,
-            }).then(response => userIds.push(response.body.id));
+            }).then((response) => userIds.push(response.body.id));
         }
     });
 
     after(() => {
-        userIds.forEach(id =>
-            cy.request('DELETE', `${baseUrl}/api/admin/user-admin/${id}`)
+        userIds.forEach((id) =>
+            cy.request('DELETE', `${baseUrl}/api/admin/user-admin/${id}`),
         );
     });
 
@@ -55,7 +55,7 @@ describe('groups', () => {
 
         cy.get("[data-testid='UG_NAME_ID']").type(groupName);
         cy.get("[data-testid='INPUT_ERROR_TEXT'").contains(
-            'A group with that name already exists.'
+            'A group with that name already exists.',
         );
     });
 

frontend/cypress/integration/import/import.spec.ts

@@ -15,13 +15,13 @@ describe('imports', () => {
                 email: `unleash-e2e-user${i}-${randomFeatureName}@test.com`,
                 sendEmail: false,
                 rootRole: 3,
-            }).then(response => userIds.push(response.body.id));
+            }).then((response) => userIds.push(response.body.id));
         }
     });
 
     after(() => {
-        userIds.forEach(id =>
-            cy.request('DELETE', `${baseUrl}/api/admin/user-admin/${id}`)
+        userIds.forEach((id) =>
+            cy.request('DELETE', `${baseUrl}/api/admin/user-admin/${id}`),
         );
     });
 
@@ -118,13 +118,13 @@ describe('imports', () => {
         cy.wait(500);
 
         cy.get(
-            "[data-testid='feature-toggle-status'] input[type='checkbox']:checked"
+            "[data-testid='feature-toggle-status'] input[type='checkbox']:checked",
         )
             .invoke('attr', 'aria-label')
             .should('eq', 'development');
 
         cy.get(
-            '[data-testid="FEATURE_ENVIRONMENT_ACCORDION_development"]'
+            '[data-testid="FEATURE_ENVIRONMENT_ACCORDION_development"]',
         ).click();
         cy.contains('50%');
     });

frontend/cypress/integration/projects/access.spec.ts

@@ -31,13 +31,13 @@ describe('project-access', () => {
                 rootRole: 3,
             })
                 .as(name)
-                .then(response => {
+                .then((response) => {
                     const id = response.body.id;
                     userIds.push(id);
                     cy.request('POST', `${baseUrl}/api/admin/groups`, {
                         name: `${i}-${groupAndProjectName}`,
                         users: [{ user: { id: id } }],
-                    }).then(response => {
+                    }).then((response) => {
                         const id = response.body.id;
                         groupIds.push(id);
                     });
@@ -50,26 +50,26 @@ describe('project-access', () => {
     });
 
     after(() => {
-        userIds.forEach(id =>
-            cy.request('DELETE', `${baseUrl}/api/admin/user-admin/${id}`)
+        userIds.forEach((id) =>
+            cy.request('DELETE', `${baseUrl}/api/admin/user-admin/${id}`),
         );
-        groupIds.forEach(id =>
-            cy.request('DELETE', `${baseUrl}/api/admin/groups/${id}`)
+        groupIds.forEach((id) =>
+            cy.request('DELETE', `${baseUrl}/api/admin/groups/${id}`),
         );
 
         cy.request(
             'DELETE',
-            `${baseUrl}/api/admin/projects/${groupAndProjectName}`
+            `${baseUrl}/api/admin/projects/${groupAndProjectName}`,
         );
     });
 
     beforeEach(() => {
         cy.login_UI();
 
-        cy.intercept('GET', `${baseUrl}/api/admin/ui-config`, req => {
+        cy.intercept('GET', `${baseUrl}/api/admin/ui-config`, (req) => {
             req.headers['cache-control'] =
                 'no-cache, no-store, must-revalidate';
-            req.on('response', res => {
+            req.on('response', (res) => {
                 if (res.body) {
                     res.body.flags = {
                         ...res.body.flags,
@@ -90,7 +90,7 @@ describe('project-access', () => {
 
         cy.intercept(
             'POST',
-            `/api/admin/projects/${groupAndProjectName}/access`
+            `/api/admin/projects/${groupAndProjectName}/access`,
         ).as('assignAccess');
 
         cy.get(`[data-testid='${PA_USERS_GROUPS_ID}']`).click();
@@ -109,7 +109,7 @@ describe('project-access', () => {
 
         cy.intercept(
             'POST',
-            `/api/admin/projects/${groupAndProjectName}/access`
+            `/api/admin/projects/${groupAndProjectName}/access`,
         ).as('assignAccess');
 
         cy.get(`[data-testid='${PA_USERS_GROUPS_ID}']`).click();
@@ -128,7 +128,7 @@ describe('project-access', () => {
 
         cy.intercept(
             'PUT',
-            `/api/admin/projects/${groupAndProjectName}/groups/${groupIds[0]}/roles`
+            `/api/admin/projects/${groupAndProjectName}/groups/${groupIds[0]}/roles`,
         ).as('editAccess');
 
         cy.get(`[data-testid='CancelIcon']`).last().click();
@@ -148,7 +148,7 @@ describe('project-access', () => {
 
         cy.intercept(
             'PUT',
-            `/api/admin/projects/${groupAndProjectName}/groups/${groupIds[0]}/roles`
+            `/api/admin/projects/${groupAndProjectName}/groups/${groupIds[0]}/roles`,
         ).as('editAccess');
 
         cy.get(`[data-testid='${PA_ROLE_ID}']`).click();
@@ -167,7 +167,7 @@ describe('project-access', () => {
 
         cy.intercept(
             'DELETE',
-            `/api/admin/projects/${groupAndProjectName}/groups/${groupIds[0]}/roles`
+            `/api/admin/projects/${groupAndProjectName}/groups/${groupIds[0]}/roles`,
         ).as('removeAccess');
 
         cy.contains("Yes, I'm sure").click();

frontend/cypress/integration/segments/segments.spec.ts

@@ -27,7 +27,7 @@ describe('segments', () => {
         cy.get("[data-testid='SEGMENT_NAME_ID']").type(segmentName);
         cy.get("[data-testid='SEGMENT_NEXT_BTN_ID']").should('be.disabled');
         cy.get("[data-testid='INPUT_ERROR_TEXT']").contains(
-            'Segment name already exists'
+            'Segment name already exists',
         );
     });