Merge pull request #2576 from umami-software/analytics

v2.10.2

.eslintrc.json

@@ -2,15 +2,9 @@
   "env": {
     "browser": true,
     "es2020": true,
-    "node": true
+    "node": true,
+    "jest": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:import/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "next"
-  ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
@@ -19,7 +13,6 @@
     "ecmaVersion": 11,
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "prettier"],
   "settings": {
     "import/resolver": {
       "node": {
@@ -27,6 +20,18 @@
       }
     }
   },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/errors",
+    "plugin:import/typescript",
+    "plugin:css-modules/recommended",
+    "plugin:cypress/recommended",
+    "prettier",
+    "next"
+  ],
+  "plugins": ["@typescript-eslint", "prettier", "promise", "css-modules", "cypress"],
   "rules": {
     "no-console": "error",
     "react/display-name": "off",

.github/workflows/ci.yml

@@ -27,9 +27,10 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-        cache: 'npm'
+        cache: 'yarn'
       env:
         DATABASE_TYPE: ${{ matrix.db-type }}
     - run: npm install --global yarn
-    - run: yarn install --frozen-lockfile
+    - run: yarn install
+    - run: yarn test
     - run: yarn build

.gitignore

@@ -35,6 +35,7 @@ yarn-error.log*
 # local env files
 .env
 .env.*
+*.env.*
 
 *.dev.yml
 

.stylelintrc.json

@@ -5,13 +5,7 @@
     "stylelint-config-prettier"
   ],
   "rules": {
-    "no-descending-specificity": null,
+    "no-descending-specificity": null
-    "selector-pseudo-class-no-unknown": [
-      true,
-      {
-        "ignorePseudoClasses": ["global", "horizontal", "vertical"]
-      }
-    ]
   },
   "ignoreFiles": ["**/*.js", "**/*.md"]
 }

cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+  },
+});

cypress/docker-compose.yml

@@ -0,0 +1,51 @@
+---
+version: '3'
+services:
+  umami:
+    build: ../
+    #image: ghcr.io/umami-software/umami:postgresql-latest
+    ports:
+      - '3000:3000'
+    environment:
+      DATABASE_URL: postgresql://umami:umami@db:5432/umami
+      DATABASE_TYPE: postgresql
+      APP_SECRET: replace-me-with-a-random-string
+    depends_on:
+      db:
+        condition: service_healthy
+    restart: always
+    healthcheck:
+      test: ['CMD-SHELL', 'curl http://localhost:3000/api/heartbeat']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+  db:
+    image: postgres:15-alpine
+    environment:
+      POSTGRES_DB: umami
+      POSTGRES_USER: umami
+      POSTGRES_PASSWORD: umami
+    volumes:
+      - umami-db-data:/var/lib/postgresql/data
+    restart: always
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+  cypress:
+    image: 'cypress/included:13.6.0'
+    depends_on:
+      - umami
+      - db
+    environment:
+      - CYPRESS_baseUrl=http://umami:3000
+      - CYPRESS_umami_user=admin
+      - CYPRESS_umami_password=umami
+    volumes:
+      - ../tsconfig.json:/tsconfig.json
+      - ../cypress.config.ts:/cypress.config.ts
+      - ./:/cypress
+      - ../node_modules/:/node_modules
+volumes:
+  umami-db-data:

cypress/e2e/login.cy.ts

@@ -0,0 +1,18 @@
+describe('Login tests', () => {
+  it(
+    'logs user in with correct credentials and logs user out',
+    {
+      defaultCommandTimeout: 10000,
+    },
+    () => {
+      cy.visit('/login');
+      cy.getDataTest('input-username').find('input').type(Cypress.env('umami_user'));
+      cy.getDataTest('input-password').find('input').type(Cypress.env('umami_password'));
+      cy.getDataTest('button-submit').click();
+      cy.url().should('eq', Cypress.config().baseUrl + '/dashboard');
+      cy.getDataTest('button-profile').click();
+      cy.getDataTest('item-logout').click();
+      cy.url().should('eq', Cypress.config().baseUrl + '/login');
+    },
+  );
+});

cypress/e2e/website.cy.ts

@@ -0,0 +1,91 @@
+describe('Website tests', () => {
+  Cypress.session.clearAllSavedSessions();
+
+  beforeEach(() => {
+    cy.login(Cypress.env('umami_user'), Cypress.env('umami_password'));
+  });
+
+  it('Add a website', () => {
+    // add website
+    cy.visit('/settings/websites');
+    cy.getDataTest('button-website-add').click();
+    cy.contains(/Add website/i).should('be.visible');
+    cy.getDataTest('input-name').find('input').wait(500).type('Add test', { delay: 50 });
+    cy.getDataTest('input-domain').find('input').wait(500).type('addtest.com', { delay: 50 });
+    cy.getDataTest('button-submit').click();
+    cy.get('td[label="Name"]').should('contain.text', 'Add test');
+    cy.get('td[label="Domain"]').should('contain.text', 'addtest.com');
+
+    // clean-up data
+    cy.getDataTest('link-button-edit').first().click();
+    cy.contains(/Details/i).should('be.visible');
+    cy.getDataTest('text-field-websiteId')
+      .find('input')
+      .then($input => {
+        const websiteId = $input[0].value;
+        cy.deleteWebsite(websiteId);
+      });
+    cy.visit('/settings/websites');
+    cy.contains('Add test').should('not.exist');
+  });
+
+  it.only('Edit a website', () => {
+    // prep data
+    cy.addWebsite('Update test', 'updatetest.com');
+    cy.visit('/settings/websites');
+
+    // edit website
+    cy.getDataTest('link-button-edit').first().click();
+    cy.contains(/Details/i).should('be.visible');
+    cy.getDataTest('input-name')
+      .find('input')
+      .wait(500)
+      .clear()
+      .type('Updated website', { delay: 50 });
+    cy.getDataTest('input-domain')
+      .find('input')
+      .wait(500)
+      .clear()
+      .type('updatedwebsite.com', { delay: 50 });
+    cy.getDataTest('button-submit').click({ force: true });
+    cy.getDataTest('input-name').find('input').should('have.value', 'Updated website');
+    cy.getDataTest('input-domain').find('input').should('have.value', 'updatedwebsite.com');
+
+    // verify tracking script
+    cy.get('div')
+      .contains(/Tracking code/i)
+      .click();
+    cy.get('textarea').should('contain.text', Cypress.config().baseUrl + '/script.js');
+
+    // clean-up data
+    cy.get('div')
+      .contains(/Details/i)
+      .click();
+    cy.contains(/Details/i).should('be.visible');
+    cy.getDataTest('text-field-websiteId')
+      .find('input')
+      .then($input => {
+        const websiteId = $input[0].value;
+        cy.deleteWebsite(websiteId);
+      });
+    cy.visit('/settings/websites');
+    cy.contains('Add test').should('not.exist');
+  });
+
+  it('Delete a website', () => {
+    // prep data
+    cy.addWebsite('Delete test', 'deletetest.com');
+    cy.visit('/settings/websites');
+
+    // delete website
+    cy.getDataTest('link-button-edit').first().click();
+    cy.contains(/Data/i).should('be.visible');
+    cy.get('div').contains(/Data/i).click();
+    cy.contains(/All website data will be deleted./i).should('be.visible');
+    cy.getDataTest('button-delete').click();
+    cy.contains(/Type DELETE in the box below to confirm./i).should('be.visible');
+    cy.get('input[name="confirm"').type('DELETE');
+    cy.get('button[type="submit"]').click();
+    cy.contains('Delete test').should('not.exist');
+  });
+});

cypress/support/e2e.ts

@@ -0,0 +1,57 @@
+/// <reference types="cypress" />
+import { uuid } from '../../src/lib/crypto';
+
+Cypress.Commands.add('getDataTest', (value: string) => {
+  return cy.get(`[data-test=${value}]`);
+});
+
+Cypress.Commands.add('login', (username: string, password: string) => {
+  cy.session([username, password], () => {
+    cy.request({
+      method: 'POST',
+      url: '/api/auth/login',
+      body: {
+        username,
+        password,
+      },
+    })
+      .then(response => {
+        Cypress.env('authorization', `bearer ${response.body.token}`);
+        window.localStorage.setItem('umami.auth', JSON.stringify(response.body.token));
+      })
+      .its('status')
+      .should('eq', 200);
+  });
+});
+
+Cypress.Commands.add('addWebsite', (name: string, domain: string) => {
+  cy.request({
+    method: 'POST',
+    url: '/api/websites',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: Cypress.env('authorization'),
+    },
+    body: {
+      id: uuid(),
+      createdBy: '41e2b680-648e-4b09-bcd7-3e2b10c06264',
+      name: name,
+      domain: domain,
+    },
+  }).then(response => {
+    expect(response.status).to.eq(200);
+  });
+});
+
+Cypress.Commands.add('deleteWebsite', (websiteId: string) => {
+  cy.request({
+    method: 'DELETE',
+    url: `/api/websites/${websiteId}`,
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: Cypress.env('authorization'),
+    },
+  }).then(response => {
+    expect(response.status).to.eq(200);
+  });
+});

cypress/support/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Custom command to select DOM element by data-test attribute.
+     * @example cy.getDataTest('greeting')
+     */
+    getDataTest(value: string): Chainable<JQuery<HTMLElement>>;
+    /**
+     * Custom command to login user into the app.
+     * @example cy.login('admin', 'password)
+     */
+    login(username: string, password: string): Chainable<JQuery<HTMLElement>>;
+    /**
+     * Custom command to create a website
+     * @example cy.addWebsite('test', 'test.com')
+     */
+    addWebsite(name: string, domain: string): Chainable<JQuery<HTMLElement>>;
+    /**
+     * Custom command to create a website
+     * @example cy.deleteWebsite('02d89813-7a72-41e1-87f0-8d668f85008b')
+     */
+    deleteWebsite(websiteId: string): Chainable<JQuery<HTMLElement>>;
+  }
+}

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts", "../cypress.config.ts"]
+}

jest.config.ts

@@ -0,0 +1,7 @@
+export default {
+  roots: ['./src'],
+  testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Umami Software, Inc. <hello@umami.is>",
   "license": "MIT",
@@ -42,7 +42,10 @@
     "change-password": "node scripts/change-password.js",
     "lint": "next lint --quiet",
     "prepare": "node -e \"if (process.env.NODE_ENV !== 'production'){process.exit(1)} \" || husky install",
-    "postbuild": "node scripts/postbuild.js"
+    "postbuild": "node scripts/postbuild.js",
+    "test": "jest",
+    "cypress-open": "cypress open cypress run",
+    "cypress-run": "cypress run cypress run"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
@@ -83,13 +86,14 @@
     "del": "^6.0.0",
     "detect-browser": "^5.2.0",
     "dotenv": "^10.0.0",
+    "eslint-plugin-promise": "^6.1.1",
     "fs-extra": "^10.0.1",
     "immer": "^9.0.12",
     "ipaddr.js": "^2.0.1",
     "is-ci": "^3.0.1",
     "is-docker": "^3.0.0",
     "is-localhost-ip": "^1.4.0",
-    "isbot": "^3.4.5",
+    "isbot": "^5.1.1",
     "kafkajs": "^2.1.0",
     "maxmind": "^4.3.6",
     "md5": "^2.3.0",
@@ -100,7 +104,7 @@
     "npm-run-all": "^4.1.5",
     "prisma": "5.9.1",
     "react": "^18.2.0",
-    "react-basics": "^0.122.0",
+    "react-basics": "^0.123.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.4",
@@ -126,6 +130,8 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
+    "@types/cypress": "^1.1.3",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.9.0",
     "@types/react": "^18.2.41",
     "@types/react-dom": "^18.2.17",
@@ -133,15 +139,20 @@
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "cross-env": "^7.0.3",
+    "cypress": "^13.6.6",
     "esbuild": "^0.17.17",
     "eslint": "^8.33.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-css-modules": "^2.12.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^4.0.0",
     "extract-react-intl-messages": "^4.1.1",
     "husky": "^8.0.3",
+    "jest": "^29.7.0",
     "lint-staged": "^14.0.1",
     "postcss": "^8.4.31",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -159,10 +170,11 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^15.10.1",
-    "stylelint-config-css-modules": "^4.1.0",
+    "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended": "^9.0.0",
+    "stylelint-config-recommended": "^14.0.0",
     "tar": "^6.1.2",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6"
   }

public/intl/messages/am-ET.json

@@ -1616,7 +1616,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ar-SA.json

@@ -32,7 +32,7 @@
   "label.add-member": [
     {
       "type": 0,
-      "value": "Add member"
+      "value": "أضِف عضو"
     }
   ],
   "label.add-website": [
@@ -44,7 +44,7 @@
   "label.administrator": [
     {
       "type": 0,
-      "value": "Administrator"
+      "value": "مدير"
     }
   ],
   "label.after": [
@@ -215,6 +215,12 @@
       "value": "أُنشئت"
     }
   ],
+  "label.created-by": [
+    {
+      "type": 0,
+      "value": "أُنشئ من قبل"
+    }
+  ],
   "label.current-password": [
     {
       "type": 0,
@@ -272,7 +278,7 @@
   "label.delete-report": [
     {
       "type": 0,
-      "value": "Delete report"
+      "value": "احذف التقرير"
     }
   ],
   "label.delete-team": [
@@ -332,7 +338,7 @@
   "label.does-not-contain": [
     {
       "type": 0,
-      "value": "Does not contain"
+      "value": "لا يحتوي"
     }
   ],
   "label.domain": [
@@ -362,7 +368,7 @@
   "label.edit-member": [
     {
       "type": 0,
-      "value": "Edit member"
+      "value": "عدّل العضو"
     }
   ],
   "label.enable-share-url": [
@@ -380,7 +386,7 @@
   "label.event-data": [
     {
       "type": 0,
-      "value": "Event data"
+      "value": "تاريخ الحدث"
     }
   ],
   "label.events": [
@@ -588,7 +594,7 @@
   "label.manage": [
     {
       "type": 0,
-      "value": "Manage"
+      "value": "التحكم"
     }
   ],
   "label.max": [
@@ -600,7 +606,7 @@
   "label.member": [
     {
       "type": 0,
-      "value": "Member"
+      "value": "عضو"
     }
   ],
   "label.members": [
@@ -630,7 +636,7 @@
   "label.my-account": [
     {
       "type": 0,
-      "value": "My account"
+      "value": "حسابي"
     }
   ],
   "label.my-websites": [
@@ -694,7 +700,7 @@
   "label.ok": [
     {
       "type": 0,
-      "value": "OK"
+      "value": "نعم"
     }
   ],
   "label.os": [
@@ -842,7 +848,7 @@
   "label.remove-member": [
     {
       "type": 0,
-      "value": "Remove member"
+      "value": "احذف عضو"
     }
   ],
   "label.reports": [
@@ -914,7 +920,7 @@
   "label.select": [
     {
       "type": 0,
-      "value": "Select"
+      "value": "اختر"
     }
   ],
   "label.select-date": [
@@ -926,7 +932,7 @@
   "label.select-role": [
     {
       "type": 0,
-      "value": "Select role"
+      "value": "حدد الدور"
     }
   ],
   "label.select-website": [
@@ -1094,7 +1100,7 @@
   "label.transfer-website": [
     {
       "type": 0,
-      "value": "Transfer website"
+      "value": "انقل الموقع"
     }
   ],
   "label.true": [
@@ -1232,7 +1238,7 @@
   "message.action-confirmation": [
     {
       "type": 0,
-      "value": "Type "
+      "value": "اكتب "
     },
     {
       "type": 1,
@@ -1240,7 +1246,7 @@
     },
     {
       "type": 0,
-      "value": " in the box below to confirm."
+      "value": " في المربع أدناه للتأكيد."
     }
   ],
   "message.active-users": [
@@ -1308,7 +1314,7 @@
   "message.confirm-remove": [
     {
       "type": 0,
-      "value": "Are you sure you want to remove "
+      "value": "هل انت متأكد من حذف "
     },
     {
       "type": 1,
@@ -1336,7 +1342,7 @@
   "message.delete-team-warning": [
     {
       "type": 0,
-      "value": "Deleting a team will also delete all team websites."
+      "value": "حذف فريق سيؤدي إلى حذف جميع مواقع الفريق"
     }
   ],
   "message.delete-website-warning": [
@@ -1532,25 +1538,25 @@
   "message.transfer-team-website-to-user": [
     {
       "type": 0,
-      "value": "Transfer this website to your account?"
+      "value": "نقل هذا الموقع إلى حسابك؟"
     }
   ],
   "message.transfer-user-website-to-team": [
     {
       "type": 0,
-      "value": "Select the team to transfer this website to."
+      "value": "اختر الفريق الذي تريد نقل الموقع إليه."
     }
   ],
   "message.transfer-website": [
     {
       "type": 0,
-      "value": "Transfer website ownership to your account or another team."
+      "value": "نقل ملكية الموقع لحسابك أو فريق أخر."
     }
   ],
   "message.triggered-event": [
     {
       "type": 0,
-      "value": "Triggered event"
+      "value": "أُطلق الحدث"
     }
   ],
   "message.user-deleted": [
@@ -1562,7 +1568,7 @@
   "message.viewed-page": [
     {
       "type": 0,
-      "value": "Viewed page"
+      "value": "شوهدت الصفحة"
     }
   ],
   "message.visitor-log": [
@@ -1602,7 +1608,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "أنخفض عدد الزوار"
     }
   ]
 }

public/intl/messages/be-BY.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/bn-BD.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ca-ES.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/cs-CZ.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/da-DK.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/de-CH.json

@@ -1594,7 +1594,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/de-DE.json

@@ -1590,7 +1590,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/el-GR.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/en-GB.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/en-US.json

@@ -1608,7 +1608,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/es-ES.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/fa-IR.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/fi-FI.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/fo-FO.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/fr-FR.json

@@ -1590,7 +1590,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ga-ES.json

@@ -1610,7 +1610,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/he-IL.json

@@ -1590,7 +1590,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/hi-IN.json

@@ -1594,7 +1594,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/hr-HR.json

@@ -1616,7 +1616,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/hu-HU.json

@@ -1606,7 +1606,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/id-ID.json

@@ -1570,7 +1570,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/it-IT.json

@@ -1606,7 +1606,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ja-JP.json

@@ -1596,7 +1596,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/km-KH.json

@@ -1574,7 +1574,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ko-KR.json

@@ -1578,7 +1578,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/lt-LT.json

@@ -1727,7 +1727,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/mn-MN.json

@@ -1616,7 +1616,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ms-MY.json

@@ -1594,7 +1594,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/my-MM.json

@@ -1582,7 +1582,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/nb-NO.json

@@ -1606,7 +1606,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/nl-NL.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/pl-PL.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/pt-BR.json

@@ -1606,7 +1606,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/pt-PT.json

@@ -1606,7 +1606,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ro-RO.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ru-RU.json

@@ -1570,7 +1570,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/si-LK.json

@@ -1608,7 +1608,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/sk-SK.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/sl-SI.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/sv-SE.json

@@ -1606,7 +1606,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ta-IN.json

@@ -1598,7 +1598,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/th-TH.json

@@ -1598,7 +1598,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/tr-TR.json

@@ -1570,7 +1570,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/uk-UA.json

@@ -1578,7 +1578,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/ur-PK.json

@@ -1602,7 +1602,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/vi-VN.json

@@ -1594,7 +1594,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/zh-CN.json

@@ -1594,7 +1594,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

public/intl/messages/zh-TW.json

@@ -1596,7 +1596,7 @@
   "message.visitors-dropped-off": [
     {
       "type": 0,
-      "value": "Visitors droppped off"
+      "value": "Visitors dropped off"
     }
   ]
 }

scripts/update-tracker.js

@@ -10,10 +10,7 @@ if (endPoint) {
 
   const tracker = fs.readFileSync(file);
 
-  fs.writeFileSync(
+  fs.writeFileSync(path.resolve(file), tracker.toString().replace(/\/api\/send/g, endPoint));
-    path.resolve(file),
-    tracker.toString().replace(/"\/api\/send"/g, `"${endPoint}"`),
-  );
 
   console.log(`Updated tracker endpoint: ${endPoint}.`);
 }

src/app/(main)/reports/[reportId]/FieldFilterForm.module.css

@@ -1,9 +1,12 @@
-.selected {
-  font-weight: bold;
-}
-
 .popup {
   display: flex;
+  max-width: 300px;
+  max-height: 400px;
+  overflow-x: hidden;
+}
+
+.popup > div {
+  overflow-y: auto;
 }
 
 .filter {
@@ -17,6 +20,5 @@
 }
 
 .menu {
-  min-width: 360px;
+  min-width: 200px;
-  max-height: 300px;
 }

src/app/(main)/reports/[reportId]/FieldFilterForm.tsx

@@ -27,6 +27,7 @@ export default function FieldFilterForm({
   const { formatValue } = useFormat();
   const { locale } = useLocale();
   const filters = getFilters(type);
+  const [search, setSearch] = useState('');
 
   const formattedValues = useMemo(() => {
     const formatted = {};
@@ -43,6 +44,10 @@ export default function FieldFilterForm({
     return formatted;
   }, [formatValue, locale, name, values]);
 
+  const filteredValues = useMemo(() => {
+    return search ? values.filter(n => n.includes(search)) : values;
+  }, [search, formattedValues]);
+
   const renderFilterValue = value => {
     return filters.find(f => f.value === value)?.label;
   };
@@ -74,14 +79,14 @@ export default function FieldFilterForm({
           )}
           <Dropdown
             className={styles.dropdown}
+            popupProps={{ className: styles.popup }}
             menuProps={{ className: styles.menu }}
-            items={values}
+            items={filteredValues}
             value={value}
             renderValue={renderValue}
             onChange={(key: any) => setValue(key)}
-            style={{
+            allowSearch={true}
-              minWidth: '250px',
+            onSearch={setSearch}
-            }}
           >
             {(value: string) => {
               return <Item key={value}>{formattedValues[value]}</Item>;

src/app/(main)/reports/[reportId]/ReportBody.module.css

@@ -1,5 +1,5 @@
 .body {
-  padding-left: 20px;
+  padding-inline-start: 20px;
   grid-row: 2/3;
   grid-column: 2 / 3;
 }

src/app/(main)/reports/[reportId]/ReportHeader.tsx

@@ -4,6 +4,7 @@ import { useMessages, useApi, useNavigation, useTeamUrl } from 'components/hooks
 import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
 import { REPORT_TYPES } from 'lib/constants';
+import Breadcrumb from 'components/common/Breadcrumb';
 
 export function ReportHeader({ icon }) {
   const { report, updateReport } = useContext(ReportContext);
@@ -57,9 +58,16 @@ export function ReportHeader({ icon }) {
     <div className={styles.header}>
       <div>
         <div className={styles.type}>
-          {formatMessage(
+          <Breadcrumb
-            labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)],
+            data={[
-          )}
+              { label: formatMessage(labels.reports), url: '/reports' },
+              {
+                label: formatMessage(
+                  labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)],
+                ),
+              },
+            ]}
+          />
         </div>
         <div className={styles.title}>
           <Icon size="lg">{icon}</Icon>

src/app/(main)/reports/[reportId]/ReportMenu.module.css

@@ -1,7 +1,7 @@
 .menu {
   width: 300px;
-  padding-right: 20px;
+  padding-inline-end: 20px;
-  border-right: 1px solid var(--base300);
+  border-inline-end: 1px solid var(--base300);
   grid-row: 2 / 3;
   grid-column: 1 / 2;
 }

src/app/(main)/reports/funnel/FunnelChart.module.css

@@ -63,7 +63,7 @@
 
 .value {
   color: var(--base50);
-  margin-right: 20px;
+  margin-inline-end: 20px;
 }
 
 .track {

src/app/(main)/reports/insights/InsightsParameters.module.css

@@ -13,5 +13,5 @@
 
 .popup {
   margin-top: -10px;
-  margin-left: 30px;
+  margin-inline-start: 30px;
 }

src/app/(main)/settings/teams/WebsiteTags.module.css

@@ -7,5 +7,5 @@
 .tag {
   text-align: center;
   margin-bottom: 10px;
-  margin-right: 20px;
+  margin-inline-end: 20px;
 }

src/app/(main)/settings/users/[userId]/UserSettings.tsx

@@ -6,6 +6,7 @@ import PageHeader from 'components/layout/PageHeader';
 import { useMessages } from 'components/hooks';
 import UserWebsites from './UserWebsites';
 import { UserContext } from './UserProvider';
+import Breadcrumb from 'components/common/Breadcrumb';
 
 export function UserSettings({ userId }: { userId: string }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -17,9 +18,23 @@ export function UserSettings({ userId }: { userId: string }) {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
   };
 
+  const breadcrumb = (
+    <Breadcrumb
+      data={[
+        {
+          label: formatMessage(labels.users),
+          url: '/settings/users',
+        },
+        {
+          label: user.username,
+        },
+      ]}
+    />
+  );
+
   return (
     <>
-      <PageHeader title={user?.username} icon={<Icons.User />} />
+      <PageHeader title={user?.username} icon={<Icons.User />} breadcrumb={breadcrumb} />
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>
         <Item key="websites">{formatMessage(labels.websites)}</Item>

src/app/(main)/settings/websites/WebsiteAddButton.tsx

@@ -15,7 +15,7 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
 
   return (
     <ModalTrigger>
-      <Button variant="primary">
+      <Button data-test="button-website-add" variant="primary">
         <Icon>
           <Icons.Plus />
         </Icon>

src/app/(main)/settings/websites/WebsiteAddForm.tsx

@@ -38,12 +38,17 @@ export function WebsiteAddForm({
   return (
     <Form onSubmit={handleSubmit} error={error}>
       <FormRow label={formatMessage(labels.name)}>
-        <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
+        <FormInput
+          data-test="input-name"
+          name="name"
+          rules={{ required: formatMessage(labels.required) }}
+        >
           <TextField autoComplete="off" />
         </FormInput>
       </FormRow>
       <FormRow label={formatMessage(labels.domain)}>
         <FormInput
+          data-test="input-domain"
           name="domain"
           rules={{
             required: formatMessage(labels.required),
@@ -54,7 +59,7 @@ export function WebsiteAddForm({
         </FormInput>
       </FormRow>
       <FormButtons flex>
-        <SubmitButton variant="primary" disabled={false}>
+        <SubmitButton data-test="button-submit" variant="primary" disabled={false}>
           {formatMessage(labels.save)}
         </SubmitButton>
         {onClose && (

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -36,7 +36,7 @@ export function WebsitesTable({
               <>
                 {allowEdit && (
                   <LinkButton href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
-                    <Icon>
+                    <Icon data-test="link-button-edit">
                       <Icons.Edit />
                     </Icon>
                     <Text>{formatMessage(labels.edit)}</Text>

src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx

@@ -66,7 +66,9 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
         description={formatMessage(messages.deleteWebsiteWarning)}
       >
         <ModalTrigger>
-          <Button variant="danger">{formatMessage(labels.delete)}</Button>
+          <Button data-test="button-delete" variant="danger">
+            {formatMessage(labels.delete)}
+          </Button>
           <Modal title={formatMessage(labels.deleteWebsite)}>
             {(close: () => void) => (
               <WebsiteDeleteForm websiteId={websiteId} onSave={handleSave} onClose={close} />

src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx

@@ -27,15 +27,20 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
   return (
     <Form ref={ref} onSubmit={handleSubmit} error={error} values={website}>
       <FormRow label={formatMessage(labels.websiteId)}>
-        <TextField value={website?.id} readOnly allowCopy />
+        <TextField data-test="text-field-websiteId" value={website?.id} readOnly allowCopy />
       </FormRow>
       <FormRow label={formatMessage(labels.name)}>
-        <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
+        <FormInput
+          data-test="input-name"
+          name="name"
+          rules={{ required: formatMessage(labels.required) }}
+        >
           <TextField />
         </FormInput>
       </FormRow>
       <FormRow label={formatMessage(labels.domain)}>
         <FormInput
+          data-test="input-domain"
           name="domain"
           rules={{
             required: formatMessage(labels.required),
@@ -49,7 +54,9 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
         </FormInput>
       </FormRow>
       <FormButtons>
-        <SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
+        <SubmitButton data-test="button-submit" variant="primary">
+          {formatMessage(labels.save)}
+        </SubmitButton>
       </FormButtons>
     </Form>
   );

src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx

@@ -1,14 +1,15 @@
-import { useState, Key, useContext } from 'react';
+import { WebsiteContext } from 'app/(main)/websites/[websiteId]/WebsiteProvider';
-import { Item, Tabs, Button, Text, Icon, useToasts } from 'react-basics';
+import Breadcrumb from 'components/common/Breadcrumb';
-import Link from 'next/link';
+import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
-import WebsiteEditForm from './WebsiteEditForm';
+import Link from 'next/link';
-import WebsiteData from './WebsiteData';
+import { Key, useContext, useState } from 'react';
-import TrackingCode from './TrackingCode';
+import { Button, Icon, Item, Tabs, Text, useToasts } from 'react-basics';
 import ShareUrl from './ShareUrl';
-import { useMessages } from 'components/hooks';
+import TrackingCode from './TrackingCode';
-import { WebsiteContext } from 'app/(main)/websites/[websiteId]/WebsiteProvider';
+import WebsiteData from './WebsiteData';
+import WebsiteEditForm from './WebsiteEditForm';
 
 export function WebsiteSettings({
   websiteId,
@@ -28,9 +29,23 @@ export function WebsiteSettings({
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
   };
 
+  const breadcrumb = (
+    <Breadcrumb
+      data={[
+        {
+          label: formatMessage(labels.websites),
+          url: website.teamId ? `/teams/${website.teamId}/settings/websites` : '/settings/websites',
+        },
+        {
+          label: website.name,
+        },
+      ]}
+    />
+  );
+
   return (
     <>
-      <PageHeader title={website?.name} icon={<Icons.Globe />}>
+      <PageHeader title={website?.name} icon={<Icons.Globe />} breadcrumb={breadcrumb}>
         <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
           <Button variant="primary">
             <Icon>

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.module.css

@@ -58,6 +58,6 @@
     gap: 20px;
     align-items: center;
     justify-content: space-between;
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 }

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -12,7 +12,7 @@ import ReferrersTable from 'components/metrics/ReferrersTable';
 import ScreenTable from 'components/metrics/ScreenTable';
 import EventsTable from 'components/metrics/EventsTable';
 import SideNav from 'components/layout/SideNav';
-import { useNavigation, useMessages } from 'components/hooks';
+import { useNavigation, useMessages, useLocale } from 'components/hooks';
 import LinkButton from 'components/common/LinkButton';
 import styles from './WebsiteExpandedView.module.css';
 
@@ -39,6 +39,7 @@ export default function WebsiteExpandedView({
   websiteId: string;
   domainName?: string;
 }) {
+  const { dir } = useLocale();
   const { formatMessage, labels } = useMessages();
   const {
     router,
@@ -122,7 +123,7 @@ export default function WebsiteExpandedView({
     <div className={styles.layout}>
       <div className={styles.menu}>
         <LinkButton href={pathname} className={styles.back} variant="quiet" scroll={false}>
-          <Icon rotate={180}>
+          <Icon rotate={dir === 'rtl' ? 0 : 180}>
             <Icons.ArrowRight />
           </Icon>
           <Text>{formatMessage(labels.back)}</Text>

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
 import classNames from 'classnames';
-import { Text, Button, Icon } from 'react-basics';
+import Favicon from 'components/common/Favicon';
+import { useMessages, useWebsite } from 'components/hooks';
+import Icons from 'components/icons';
+import ActiveUsers from 'components/metrics/ActiveUsers';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import Favicon from 'components/common/Favicon';
+import { ReactNode } from 'react';
-import ActiveUsers from 'components/metrics/ActiveUsers';
+import { Button, Icon, Text } from 'react-basics';
-import Icons from 'components/icons';
-import { useMessages, useWebsite } from 'components/hooks';
 import styles from './WebsiteHeader.module.css';
 
 export function WebsiteHeader({

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -52,7 +52,6 @@ export function WebsiteMetricsBar({
               change={uniques.change}
             />
             <MetricCard
-              className={styles.card}
               label={formatMessage(labels.bounceRate)}
               value={uniques.value ? (num / uniques.value) * 100 : 0}
               change={
@@ -65,7 +64,6 @@ export function WebsiteMetricsBar({
               reverseColors
             />
             <MetricCard
-              className={styles.card}
               label={formatMessage(labels.averageVisitTime)}
               value={
                 totaltime.value && pageviews.value

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.module.css

@@ -27,7 +27,7 @@
 }
 
 .icon {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .time {

src/app/Providers.tsx

@@ -5,6 +5,7 @@ import { ReactBasicsProvider } from 'react-basics';
 import ErrorBoundary from 'components/common/ErrorBoundary';
 import { useLocale } from 'components/hooks';
 import 'chartjs-adapter-date-fns';
+import { useEffect } from 'react';
 
 const client = new QueryClient({
   defaultOptions: {
@@ -16,7 +17,13 @@ const client = new QueryClient({
 });
 
 function MessagesProvider({ children }) {
-  const { locale, messages } = useLocale();
+  const { locale, messages, dir } = useLocale();
+
+  useEffect(() => {
+    document.documentElement.setAttribute('dir', dir);
+    document.documentElement.setAttribute('lang', locale);
+  }, [locale, dir]);
+
   return (
     <IntlProvider locale={locale} messages={messages[locale]} onError={() => null}>
       {children}

src/app/login/LoginForm.tsx

@@ -42,17 +42,30 @@ export function LoginForm() {
       <div className={styles.title}>umami</div>
       <Form className={styles.form} onSubmit={handleSubmit} error={getMessage(error)}>
         <FormRow label={formatMessage(labels.username)}>
-          <FormInput name="username" rules={{ required: formatMessage(labels.required) }}>
+          <FormInput
+            data-test="input-username"
+            name="username"
+            rules={{ required: formatMessage(labels.required) }}
+          >
             <TextField autoComplete="off" />
           </FormInput>
         </FormRow>
         <FormRow label={formatMessage(labels.password)}>
-          <FormInput name="password" rules={{ required: formatMessage(labels.required) }}>
+          <FormInput
+            data-test="input-password"
+            name="password"
+            rules={{ required: formatMessage(labels.required) }}
+          >
             <PasswordField />
           </FormInput>
         </FormRow>
         <FormButtons>
-          <SubmitButton className={styles.button} variant="primary" disabled={isPending}>
+          <SubmitButton
+            data-test="button-submit"
+            className={styles.button}
+            variant="primary"
+            disabled={isPending}
+          >
             {formatMessage(labels.login)}
           </SubmitButton>
         </FormButtons>

src/components/common/Breadcrumb.module.css

@@ -0,0 +1,10 @@
+.bar {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--base600);
+}
+
+.link span {
+  color: var(--base700) !important;
+}

src/components/common/Breadcrumb.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { Flexbox, Icon, Icons, Text } from 'react-basics';
+import styles from './Breadcrumb.module.css';
+
+export interface BreadcrumbProps {
+  data: {
+    url?: string;
+    label: string;
+  }[];
+}
+
+export function Breadcrumb({ data }: BreadcrumbProps) {
+  return (
+    <Flexbox alignItems="center" gap={3} className={styles.bar}>
+      {data.map((a, i) => {
+        return (
+          <>
+            {a.url ? (
+              <Link href={a.url} className={styles.link}>
+                <Text>{a.label}</Text>
+              </Link>
+            ) : (
+              <Text>{a.label}</Text>
+            )}
+            {i !== data.length - 1 ? (
+              <Icon rotate={270}>
+                <Icons.ChevronDown />
+              </Icon>
+            ) : null}
+          </>
+        );
+      })}
+    </Flexbox>
+  );
+}
+
+export default Breadcrumb;

src/components/common/ErrorMessage.module.css

@@ -11,5 +11,5 @@
 }
 
 .icon {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }

src/components/common/MobileMenu.module.css

@@ -35,5 +35,5 @@ a.item.selected,
 
 .submenu a.item {
   color: var(--base600);
-  margin-left: 40px;
+  margin-inline-start: 40px;
 }

src/components/input/LanguageButton.module.css

@@ -6,7 +6,7 @@
   z-index: var(--z-index-popup);
   border-radius: 5px;
   border: 1px solid var(--border-color);
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 
 .item {

src/components/input/ProfileButton.module.css

@@ -18,7 +18,7 @@
   font-size: 11px;
   color: var(--base600);
   text-align: right;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .name {

src/components/input/ProfileButton.tsx

@@ -25,7 +25,7 @@ export function ProfileButton() {
 
   return (
     <PopupTrigger>
-      <Button variant="quiet">
+      <Button data-test="button-profile" variant="quiet">
         <Icon>
           <Icons.Profile />
         </Icon>
@@ -41,7 +41,7 @@ export function ProfileButton() {
               <Text>{formatMessage(labels.profile)}</Text>
             </Item>
             {!cloudMode && (
-              <Item key="logout" className={styles.item}>
+              <Item data-test="item-logout" key="logout" className={styles.item}>
                 <Icon>
                   <Icons.Logout />
                 </Icon>

src/components/input/TeamsButton.tsx

@@ -23,7 +23,7 @@ export function TeamsButton({
     close();
   };
 
-  if (!result) {
+  if (!result?.count) {
     return null;
   }
 

src/components/input/WebsiteDateFilter.module.css

@@ -13,12 +13,12 @@
 }
 
 .buttons button:first-child {
-  border-top-right-radius: 0;
+  border-start-end-radius: 0;
-  border-bottom-right-radius: 0;
+  border-end-end-radius: 0;
+  border-inline-end: 1px solid var(--base400);
 }
 
 .buttons button:last-child {
-  border-top-left-radius: 0;
+  border-start-start-radius: 0;
-  border-bottom-left-radius: 0;
+  border-end-start-radius: 0;
-  border-left: 1px solid var(--base400) !important;
 }

src/components/input/WebsiteDateFilter.tsx

@@ -1,4 +1,4 @@
-import { useDateRange } from 'components/hooks';
+import { useDateRange, useLocale } from 'components/hooks';
 import { isAfter } from 'date-fns';
 import { getOffsetDateRange } from 'lib/date';
 import { Button, Icon, Icons } from 'react-basics';
@@ -7,6 +7,7 @@ import styles from './WebsiteDateFilter.module.css';
 import { DateRange } from 'lib/types';
 
 export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
+  const { dir } = useLocale();
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { value, startDate, endDate, offset } = dateRange;
   const disableForward =
@@ -22,15 +23,15 @@ export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
 
   return (
     <div className={styles.container}>
-      {value !== 'all' && (
+      {value !== 'all' && !value.startsWith('range') && (
         <div className={styles.buttons}>
           <Button onClick={() => handleIncrement(-1)}>
-            <Icon rotate={90}>
+            <Icon rotate={dir === 'rtl' ? 270 : 90}>
               <Icons.ChevronDown />
             </Icon>
           </Button>
           <Button onClick={() => handleIncrement(1)} disabled={disableForward}>
-            <Icon rotate={270}>
+            <Icon rotate={dir === 'rtl' ? 90 : 270}>
               <Icons.ChevronDown />
             </Icon>
           </Button>

src/components/layout/MenuLayout.module.css

@@ -7,7 +7,7 @@
 .menu {
   width: 240px;
   padding-top: 34px;
-  padding-right: 20px;
+  padding-inline-end: 20px;
 }
 
 .content {

src/components/layout/NavGroup.module.css

@@ -29,12 +29,12 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  border-right: 2px solid var(--base200);
+  border-inline-end: 2px solid var(--base200);
   padding: 1rem 2rem;
   gap: var(--size500);
   font-weight: 600;
   width: 200px;
-  margin-right: -2px;
+  margin-inline-end: -2px;
 }
 
 a.item {
@@ -43,7 +43,7 @@ a.item {
 
 .item.selected {
   color: var(--base900);
-  border-right-color: var(--primary400);
+  border-inline-end-color: var(--primary400);
   background: var(--blue100);
 }
 

src/components/layout/PageHeader.module.css

@@ -27,9 +27,13 @@
   flex: 1;
 }
 
+.breadcrumb {
+  padding-top: 20px;
+}
+
 .icon {
   color: var(--base700);
-  margin-right: 1rem;
+  margin-inline-end: 1rem;
 }
 
 .actions {

src/components/layout/PageHeader.tsx

@@ -7,23 +7,29 @@ export function PageHeader({
   title,
   icon,
   className,
+  breadcrumb,
   children,
 }: {
   title?: ReactNode;
   icon?: ReactNode;
   className?: string;
+  breadcrumb?: ReactNode;
   children?: ReactNode;
 }) {
   return (
-    <div className={classNames(styles.header, className)}>
+    <>
-      {icon && (
+      <div className={styles.breadcrumb}>{breadcrumb}</div>
-        <Icon size="lg" className={styles.icon}>
+      <div className={classNames(styles.header, className)}>
-          {icon}
+        {icon && (
-        </Icon>
+          <Icon size="lg" className={styles.icon}>
-      )}
+            {icon}
-      {title && <div className={styles.title}>{title}</div>}
+          </Icon>
-      <div className={styles.actions}>{children}</div>
+        )}
-    </div>
+
+        {title && <div className={styles.title}>{title}</div>}
+        <div className={styles.actions}>{children}</div>
+      </div>
+    </>
   );
 }