Add new files and configurations for Playwright & Next.js & Script - …

…demo report

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g pnpm && pnpm install
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "nyxb.vscode-styled-colors"
+  ]
+}

next-js/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  extends: ["custom"],
+  globals: {
+    NODE_ENV: "readonly"
+  },
+  env: {
+    node: true
+  },
+  plugins: [
+    'import'
+  ],
+  rules: {
+    'turbo/no-undeclared-env-vars': 'off',
+    'import/named': 'error',
+  },
+};
+
+
+// module.exports = {
+//   // extends: ["eslint:recommended", "next"],
+//   extends: ["custom"],
+
+//   // extends: ["next", "next/core-web-vitals"],
+// };
+
+

next-js/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env.production 
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+/.examples/
+/public/copydb/

next-js/.vscode/launch.json

@@ -0,0 +1,38 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+
+    {
+      "name": "Attach to Chrome",
+      "port": 9222,
+      "request": "attach",
+      "type": "chrome",
+      "webRoot": "${workspaceFolder}"
+    },
+
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "cwd": "${workspaceFolder}/apps/web",
+      "serverReadyAction": {
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

next-js/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "files.exclude": {
+    ".next": true,
+    ".vercel": true,
+    ".vscode": true
+  }
+}

next-js/README.md

@@ -0,0 +1,18 @@
+# Configuration
+- `pnpm install` to install dependencies
+- `pnpm add next react react-dom` to add next.js and react dependencies in the Playwright test project
+- `pnpm add react@canary react-dom@canary` to add the latest version of React and React DOM
+
+
+
+# Prisma with MongoDB
+- `pnpx prisma generate` to generate the Prisma client
+- `pnpx prisma studio` to open the Prisma Studio
+- `pnpx prisma db push` Whenever you update your Prisma schema, you will need to run the
+
+<!-- https://www.mongodb.com/docs/atlas/reference/partner-integrations/vercel/#std-label-vercel-access-lists -->
+
+# Clean up the cache and node_modules
+pnpm store prune
+pnpm rm --recursive node_modules
+pnpm install

next-js/app/api/index/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+import { getIndexReport } from "../../db/actions/getReportIndexAction";
+
+export async function GET() {
+  const index = await getIndexReport();
+
+  return NextResponse.json({
+    indexData: index,
+  });
+}

next-js/app/api/reports/route.ts

@@ -0,0 +1,14 @@
+"use server";
+
+import { NextResponse } from "next/server";
+import { getReportAction } from "../../db/actions/getReportAction";
+
+export async function GET() {
+  const reports = await getReportAction();
+
+  // const reportName = reports?.filter((report: any) => report?.tests.some((test: any) => test.dirName === params.reportName));
+
+  return NextResponse.json({
+    reports,
+  });
+}

next-js/app/components/layout/Footer.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+import { Flex, Text, Box } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import Image from "next/image";
+import Link from "next/link";
+
+const Footer = () => {
+  const year = new Date().getFullYear() || "";
+  const isTabletSize = useMediaQuery("(max-width: 1039px)");
+
+  return (
+    <Box>
+      <Flex className='footer' gap='0.5rem' justify='center' align='center' direction='row' wrap='wrap' rowGap={5} bg='background1.6' py={30} w='100%'>
+        <Link href='https://www.tbardini.com/'>
+          <Image src={"/images/TBardini-dot-light.png"} alt={"TBardini navigation logo"} width={isTabletSize ? 100 : 100} height={isTabletSize ? 50 : 75} />
+        </Link>
+        <a href='/'>
+          <Text c='text1.0' fw='bolder' fz={isTabletSize ? "0.75rem" : "1rem"} pt='xs'>
+            &copy; {year}
+          </Text>
+        </a>
+      </Flex>
+    </Box>
+  );
+};
+
+export default Footer;

next-js/app/components/layout/Navbar.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import React, { useRef, useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { useAppContext } from "@/context";
+import { useMediaQuery, useDisclosure } from "@mantine/hooks";
+import Image from "next/image";
+import { Box, Flex, Text, Transition, Burger, Paper, Anchor } from "@mantine/core";
+import SelectPreviousReport from "../shared/SelectPreviousReport";
+import HistoryBanner from "@/app/components/shared/HistoryBanner";
+import Link from "next/link";
+
+const Navbar = () => {
+  const pathname = usePathname();
+  const { selectReportContext } = useAppContext();
+  const [opened, { toggle: toggleDropdown, close: closeDropdown }] = useDisclosure(false);
+
+  const isTabletSize = useMediaQuery("(max-width: 1039px)");
+
+  const dropdownRef = useRef<HTMLDivElement>(null); // Ref for the dropdown
+  const burgerRef = useRef<HTMLButtonElement>(null); // Ref for the burger icon
+
+  // Setup event listener for outside clicks
+  useEffect(() => {
+    // Specify the type for 'event' as 'MouseEvent'
+    const handleOutsideClick = (event: MouseEvent) => {
+      // Ensure the elements exist before calling 'contains'
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) && burgerRef.current && !burgerRef.current.contains(event.target as Node)) {
+        closeDropdown();
+      }
+    };
+
+    if (opened) {
+      document.addEventListener("mousedown", handleOutsideClick);
+    }
+
+    // Cleanup the event listener
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [opened, closeDropdown]);
+
+  const isHistoryPage = pathname.endsWith("/e2e/history");
+  const isReportPage = pathname.endsWith("/e2e") && !isHistoryPage;
+
+  return (
+    <>
+      <Box maw={1280}>
+        <Flex
+          w='100%'
+          // className='md:h-28 sm:h20 py-2'
+          className='py-2'
+          pt={isTabletSize ? 20 : 20}
+          bg='background1.2'
+          pos='fixed'
+          top={0}
+          style={{
+            zIndex: 299,
+            boxShadow: "0px 0px 8px 0px rgba(0, 0, 0, 0.1)",
+          }}
+        >
+          <Box w='100%' h='100%' maw={1280} mx='auto' px='1rem' pt={isTabletSize ? 0 : 20}>
+            <Flex h='100%' w='100%' justify={{ base: "center", sm: "space-between" }} align='center' px='1rem'>
+              <Link href='/' onClick={closeDropdown}>
+                <Flex justify={{ base: "center", sm: "space-between" }} align='center' px='1rem' direction='row'>
+                  <Box style={{ display: "block", position: "fixed", mr: 2 }}>
+                    <Image src={"/animations/tb-logo-glasses.gif"} alt={"TBardini navigation logo"} width={isTabletSize ? 120 : 120} height={isTabletSize ? 50 : 75} />
+                  </Box>
+                  <Text display={{ base: "block", sm: "block" }} c='text1.9' style={{ fontSize: isTabletSize ? "1.9rem" : "2.4rem", fontWeight: 700, paddingLeft: "130px" }}>
+                    DEMO REPORT
+                  </Text>
+                </Flex>
+              </Link>
+              {!isTabletSize && (
+                <Flex align='center' justify='center' gap='lg'>
+                  <Box mt='lg'>
+                    {/* Link to the history page of the current report */}
+                    {isReportPage && (
+                      <Link href={`${pathname}/history`}>
+                        <Anchor fw='600' component='a' size='sm' c='text1.9' underline='hover'>
+                          History View
+                        </Anchor>
+                      </Link>
+                    )}
+                    {isHistoryPage && (
+                      <Link href={pathname.replace("/e2e/history", "/e2e")}>
+                        <Anchor fw='600' component='a' size='sm' c='text1.9' underline='hover'>
+                          Back to Report
+                        </Anchor>
+                      </Link>
+                    )}
+                  </Box>
+
+                  <SelectPreviousReport closeDropdown={closeDropdown} />
+                </Flex>
+              )}
+              {isTabletSize && (
+                <>
+                  <Burger ref={burgerRef} ml='auto' display={{ base: "initial", md: "none" }} color='#00205B' opened={opened} onClick={toggleDropdown} aria-label='Toggle navigation' />
+
+                  <Transition transition='slide-down' duration={100} mounted={opened}>
+                    {(styles) => (
+                      <Paper ref={dropdownRef} withBorder shadow='md' p='md' style={{ ...styles, position: "absolute", top: "100%", left: 0, right: 0, zIndex: 500 }}>
+                        <SelectPreviousReport closeDropdown={closeDropdown} />
+                        <Box mt='lg' style={{ textAlign: "center" }} onClick={toggleDropdown}>
+                          {isReportPage && (
+                            <Link href={`${pathname}/history`}>
+                              <Anchor fw='600' component='a' size='sm' c='text1.9' underline='hover'>
+                                History View
+                              </Anchor>
+                            </Link>
+                          )}
+                          {isHistoryPage && (
+                            <Link href={pathname.replace("/e2e/history", "/e2e")}>
+                              <Anchor fw='600' component='a' size='sm' c='text1.9' underline='hover'>
+                                Back to Report
+                              </Anchor>
+                            </Link>
+                          )}
+                        </Box>
+                      </Paper>
+                    )}
+                  </Transition>
+                </>
+              )}
+            </Flex>
+          </Box>
+        </Flex>
+        {selectReportContext !== 0 && (
+          <Box style={{ position: "fixed", zIndex: 2 }} top={isTabletSize ? "75px" : "108px"} right='0' w='100%' mx='auto'>
+            <HistoryBanner closeDropdown={closeDropdown} />
+          </Box>
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default Navbar;