chore: nest routes and v3 future flags (#433)

* nest routes and add `v3` future flags

* chore: use playwright (#434)

* migrate from cypress to playwright

* get playwright actions to work

* update deploy workflow

* we dont need the database for now

* modify playwright deploy worflow

* i hope this does not fail

* increase playwright timeout

* wait for main section on landing page before each test

* add `--fail-on-flaky-tests` flag

* we actually dont need that flag

* reduce timeout limit as this takes way to long in actions

* debug failing actions on safari

* remove video recording

* empty `BrowserContext` on every test to resolve hydration errors on `webkit` tests

* update tests

Author: freds-dev

.eslintrc.cjs

@@ -7,9 +7,8 @@ module.exports = {
     "prettier",
   ],
   env: {
-    "cypress/globals": true,
   },
-  plugins: ["cypress", "unicorn"],
+  plugins: ["unicorn"],
   // We're using vitest which has a very similar API to jest
   // (so the linting plugins work nicely), but we have to
   // set the jest version explicitly.

.github/workflows/deploy.yml

@@ -76,8 +76,8 @@ jobs:
       - name: ⚡ Run vitest
         run: npm run test -- --coverage
 
-  cypress:
-    name: ⚫️ Cypress
+  playwright:
+    name: 🎭 Playwright
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
@@ -114,13 +114,18 @@ jobs:
       - name: ⚙️ Build
         run: npm run build
 
-      - name: 🌳 Cypress run
-        uses: cypress-io/github-action@v6
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
         with:
-          start: npm run start:mocks
-          wait-on: http://localhost:8811
-        env:
-          PORT: 8811
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
 
   build:
     name: 🐳 Build

.gitignore

@@ -10,10 +10,12 @@ node_modules
 .env
 .cache
 
-/cypress/screenshots
-/cypress/videos
 /postgres-data
 /pgdata
 
 /db/imports/*.csv
 measurements.csv
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierignore

@@ -4,8 +4,6 @@ node_modules
 /public/build
 .env
 
-/cypress/screenshots
-/cypress/videos
 /postgres-data
 
 /app/styles/**/*.css

app/components/daterange-filter.tsx

@@ -14,7 +14,7 @@ import {
 import { useEffect, useState } from "react";
 import { Calendar } from "./ui/calendar";
 import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
-import type { loader } from "~/routes/explore.$deviceId";
+import type { loader } from "~/routes/explore+/$deviceId+/_$deviceId";
 import type { DateRange } from "react-day-picker";
 import { PopoverClose } from "@radix-ui/react-popover";
 import dateTimeRanges from "~/lib/date-ranges";

app/components/device-detail/device-detail-box.tsx

@@ -13,7 +13,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "../ui/accordion";
-import type { loader } from "~/routes/explore.$deviceId";
+import type { loader } from "~/routes/explore+/$deviceId+/_$deviceId";
 import {
   ChevronUp,
   Minus,

app/components/header/menu/index.tsx

@@ -1,4 +1,10 @@
-import { Form, Link, useNavigation, useSearchParams } from "@remix-run/react";
+import {
+  Form,
+  Link,
+  useMatches,
+  useNavigation,
+  useSearchParams,
+} from "@remix-run/react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -35,6 +41,7 @@ export default function Menu() {
   const navigation = useNavigation();
   const isLoggingOut = Boolean(navigation.state === "submitting");
   const user = useOptionalUser();
+  const matches = useMatches();
 
   const { t } = useTranslation("menu");
 
@@ -92,26 +99,32 @@ export default function Menu() {
                   <Spinner />
                 </div>
               )}
-              <Link to="/explore">
-                <DropdownMenuItem className="cursor-pointer">
-                  <Compass className="mr-2 h-5 w-5" />
-                  <span>{"Explore"}</span>
-                </DropdownMenuItem>
-              </Link>
-              <Link to="/profile/me">
-                <DropdownMenuItem className="cursor-pointer">
-                  <User2 className="mr-2 h-5 w-5" />
-                  Profile
-                </DropdownMenuItem>
-              </Link>
+              {!(matches[1].pathname === "/explore") && (
+                <Link to="/explore">
+                  <DropdownMenuItem className="cursor-pointer">
+                    <Compass className="mr-2 h-5 w-5" />
+                    <span>{"Explore"}</span>
+                  </DropdownMenuItem>
+                </Link>
+              )}
+              {!(matches[1].pathname === "/profile") && (
+                <Link to="/profile/me">
+                  <DropdownMenuItem className="cursor-pointer">
+                    <User2 className="mr-2 h-5 w-5" />
+                    Profile
+                  </DropdownMenuItem>
+                </Link>
+              )}
 
-              <Link to="/settings">
-                <DropdownMenuItem className=" cursor-pointer">
-                  <Settings className="mr-2 h-5 w-5" />
-                  <span>{"Settings"}</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-              </Link>
+              {!(matches[1].pathname === "/settings") && (
+                <Link to="/settings/profile">
+                  <DropdownMenuItem className=" cursor-pointer">
+                    <Settings className="mr-2 h-5 w-5" />
+                    <span>{"Settings"}</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </Link>
+              )}
             </DropdownMenuGroup>
           )}
           <DropdownMenuGroup>

app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx

@@ -15,7 +15,7 @@ import { X } from "lucide-react";
 import { Checkbox } from "~/components/ui/checkbox";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { Button } from "~/components/ui/button";
-import type { loader } from "~/routes/explore";
+import type { loader } from "~/routes/explore+/_explore";
 
 export function PhenomenonSelect() {
   const data = useLoaderData<typeof loader>();

app/components/landing/connect.tsx

@@ -3,7 +3,7 @@ import { BookA, Wrench } from "lucide-react";
 export default function Connect() {
   return (
     <section
-      id="connect"
+      id="connect-section"
       className="flex justify-between mx-32 gap-20 border-t border-gray-200 py-20"
     >
       <div id="left" className="w-1/2 flex flex-col gap-10">

app/components/landing/features.tsx

@@ -11,7 +11,7 @@ import {
 export default function Features() {
   return (
     <section
-      id="features"
+      id="features-section"
       className="flex justify-between mx-32 gap-10 border-t border-gray-200 py-20"
     >
       <div id="left" className="w-1/2 flex flex-col gap-10">