Merge branch 'main' into refactor-css

digitalservicebund · Jan 14, 2025 · 0051c5e · 0051c5e
2 parents 4a72fb7 + fa72873
commit 0051c5e
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 60 deletions.
diff --git a/packages/dito/.env.example b/packages/dito/.env.example
@@ -1,2 +1,3 @@
 ENCRYPTION_KEY= #Should be a random alphanumeric string of 32 characters
-UNLEASH_KEY= # Get this from Unleash Admin Dashboard
+UNLEASH_KEY= # Get this from Unleash Admin Dashboard
+TRACKING_DISABLED=true
diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
@@ -24,6 +24,7 @@ import {
   isRouteErrorResponse,
   useLoaderData,
   useRouteError,
+  useRouteLoaderData,
 } from "@remix-run/react";
 import { marked, type Tokens } from "marked";
 import React, { type ReactNode } from "react";
@@ -57,6 +58,7 @@ export function loader({ request }: LoaderFunctionArgs) {
     BASE_URL,
     PLAUSIBLE_DOMAIN,
     PLAUSIBLE_SCRIPT,
+    trackingDisabled: process.env.TRACKING_DISABLED === "true",
     featureFlags,
   };
 }
@@ -258,7 +260,7 @@ function Document({
 }: Readonly<{
   children: ReactNode;
   error?: boolean;
-  trackingScript: React.ReactNode;
+  trackingScript?: React.ReactNode;
 }>) {
   const nonce = useNonce();
 
@@ -267,7 +269,7 @@ function Document({
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        {trackingScript}
+        {trackingScript && trackingScript}
         <Meta />
         <Links />
       </head>
@@ -283,18 +285,20 @@ function Document({
 }
 
 export default function App() {
-  const { PLAUSIBLE_DOMAIN, PLAUSIBLE_SCRIPT, featureFlags } =
+  const { PLAUSIBLE_DOMAIN, PLAUSIBLE_SCRIPT, trackingDisabled, featureFlags } =
     useLoaderData<typeof loader>();
 
   return (
     <Document
       trackingScript={
-        <script
-          key={"app-tracking"}
-          defer
-          data-domain={PLAUSIBLE_DOMAIN}
-          src={PLAUSIBLE_SCRIPT}
-        />
+        !trackingDisabled && (
+          <script
+            key={"app-tracking"}
+            defer
+            data-domain={PLAUSIBLE_DOMAIN}
+            src={PLAUSIBLE_SCRIPT}
+          />
+        )
       }
     >
       {/* .parent-bg-blue can be set by child components to set the background of main to blue (e.g. used for question pages) */}
@@ -306,6 +310,7 @@ export default function App() {
 }
 
 export function ErrorBoundary() {
+  const loaderData = useRouteLoaderData<typeof loader>("root");
   const error = useRouteError();
 
   let errorStatus = `${500}`;
@@ -331,12 +336,14 @@ Vielen Dank für Ihr Verständnis.`;
     <Document
       error={true}
       trackingScript={
-        <script
-          key={"error-tracking"}
-          defer
-          data-domain={CLIENT_PLAUSIBLE_DOMAIN}
-          src={CLIENT_PLAUSIBLE_SCRIPT}
-        />
+        loaderData?.trackingDisabled && (
+          <script
+            key={"error-tracking"}
+            defer
+            data-domain={CLIENT_PLAUSIBLE_DOMAIN}
+            src={CLIENT_PLAUSIBLE_SCRIPT}
+          />
+        )
       }
     >
       <main id="error" className="grow">

diff --git a/packages/dito/app/routes/beispiele.visualisierungen.tsx b/packages/dito/app/routes/beispiele.visualisierungen.tsx
@@ -43,28 +43,20 @@ export const loader = async () => {
   return visualisationsData.visualisierungen;
 };
 
-const groupByRegelung = (visualisations: Visualisierung[]) => {
-  const grouped = new Map<string, Visualisierung[]>();
-
-  visualisations.forEach((visualisation) => {
-    const regelung = visualisation.Digitalcheck?.Regelungsvorhaben;
-
-    if (regelung?.Titel) {
-      if (!grouped.has(regelung.Titel)) {
-        grouped.set(regelung.Titel, []);
-      }
-      grouped.get(regelung.Titel)?.push(visualisation);
-    }
-  });
-
-  return grouped;
-};
-
 export default function BeispieleVisualisierungen() {
   const visualisationsData = useLoaderData<typeof loader>();
 
   // Group visualisations by Regelung
-  const groupedVisualisations = groupByRegelung(visualisationsData);
+  const groupedVisualisations = visualisationsData.reduce(
+    (acc, item) => {
+      const title = item.Digitalcheck?.Regelungsvorhaben?.Titel;
+      if (!title) return acc;
+      acc[title] = acc[title] ?? [];
+      acc[title].push(item);
+      return acc;
+    },
+    {} as Record<string, Visualisierung[]>,
+  );
   return (
     <>
       <Background backgroundColor="blue">
@@ -82,7 +74,7 @@ export default function BeispieleVisualisierungen() {
         </Container>
       </Background>
       <Container>
-        {Array.from(groupedVisualisations.entries()).map(
+        {Object.entries(groupedVisualisations).map(
           ([regelungTitle, visualisations]) => (
             <div key={regelungTitle} className="ds-stack-8">
               <Link

diff --git a/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx b/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx
@@ -131,9 +131,12 @@ export default function ResultPage({
                     <RichText markdown={intro} className="mt-40 first:mt-0" />
                     <ul className="ds-stack-16 mt-16 pl-0">
                       {reasons
-                        .toSorted((reason) =>
-                          reason.answer === "yes" ? -1 : 1,
-                        )
+                        .toSorted((a, b) => {
+                          if (a.answer === b.answer) {
+                            return 0; // Keep the original order
+                          }
+                          return a.answer === "yes" ? -1 : 1; // "yes" comes before "no"
+                        })
                         .map((reason) => getReasonListItem(reason))}
                     </ul>
                   </React.Fragment>

diff --git a/packages/dito/app/utils/trackCustomEvent.server.ts b/packages/dito/app/utils/trackCustomEvent.server.ts
@@ -15,8 +15,11 @@ export default async function trackCustomEvent(
   event: { name: string; props?: Record<string, string> },
 ) {
   const startTime = Date.now();
-  if (process.env.NODE_ENV === "development") {
-    console.log("TRACKING", event);
+  if (
+    process.env.TRACKING_DISABLED === "true" ||
+    process.env.NODE_ENV === "development"
+  ) {
+    console.log("Tracking is disabled. Event not sent: ", event);
     return;
   }
 

diff --git a/packages/dito/tests/a11y/general.spec.ts b/packages/dito/tests/a11y/general.spec.ts
@@ -5,29 +5,29 @@ import allRoutes from "resources/allRoutes";
 import { ROUTE_PRINCIPLES, ROUTE_SUPPORT } from "resources/staticRoutes";
 
 test.describe("basic example a11y test", () => {
-  test.setTimeout(60000);
-  test("check a11y of all routes", async ({ page }) => {
-    for (const route of allRoutes.filter(
+  allRoutes
+    .filter(
       (allRoute) =>
         !allRoute.url.endsWith(".pdf") &&
         !allRoute.url.endsWith(ROUTE_SUPPORT.url),
-    )) {
-      // Listen for redirects and update URL if needed
-      const response = await page.goto(route.url);
-
-      if (
-        (response !== null && response.status() === 302) ||
-        (response !== null && response.status() === 301)
-      ) {
-        const redirectedUrl = response.headers()["location"];
-        await page.goto(redirectedUrl);
-      }
-
-      const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
-      console.log("Checking A11Y on route:", route.url);
-      expect(accessibilityScanResults.violations).toEqual([]);
-    }
-  });
+    )
+    .forEach((route) => {
+      test(`check a11y of ${route.title}`, async ({ page }) => {
+        // Listen for redirects and update URL if needed
+        const response = await page.goto(route.url);
+
+        if (
+          (response !== null && response.status() === 302) ||
+          (response !== null && response.status() === 301)
+        ) {
+          const redirectedUrl = response.headers()["location"];
+          await page.goto(redirectedUrl);
+        }
+
+        const accessibilityResults = await new AxeBuilder({ page }).analyze();
+        expect(accessibilityResults.violations).toEqual([]);
+      });
+    });
 
   test("check a11y of example pages", async ({ page }) => {
     await page.goto(