fix(website-frontend): background color staying the same after viewin…

…g report (#899)
stryker-mutator · Sep 13, 2024 · 0954989 · 0954989
1 parent 3b8ce2e
commit 0954989
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 3 deletions.
diff --git a/packages/website-frontend/README.md b/packages/website-frontend/README.md
@@ -16,3 +16,11 @@ Run `npm run build` to build the project. The build artifacts will be stored in
 ## Running tests
 
 Run `npm run test` to execute the tests via [Vitest](https://vitest.dev/) and [Playwright](https://playwright.dev/).
+
+## Adding a report to the dashboard
+
+If you need to add a report quickly to the report, please use the following link:
+
+https://stryker-mutator.io/docs/General/dashboard/#send-a-report-via-curl
+
+An example report can be found [here](./test/unit/testResources/simple-report.json).
diff --git a/packages/website-frontend/index.html b/packages/website-frontend/index.html
@@ -2,8 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Try out the Stryker dashboard, home for your test quality" />
+    <link rel="icon" href="/assets/favicon.ico" sizes="48x48" />
+    <link rel="stylesheet" href="/src/main.css" />
     <title>Stryker Dashboard</title>
     <script type="module" src="./src/app.ts"></script>
   </head>

diff --git a/packages/website-frontend/public/assets/favicon.ico b/packages/website-frontend/public/assets/favicon.ico
diff --git a/packages/website-frontend/public/robots.txt b/packages/website-frontend/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /repos/
+Disallow: /reports/
+Disallow: /auth/
diff --git a/packages/website-frontend/src/main.css b/packages/website-frontend/src/main.css
@@ -0,0 +1,15 @@
+html,
+body,
+stryker-dashboard {
+  height: 100%;
+  width: 100%;
+}
+
+stryker-dashboard {
+  display: flex;
+  flex-direction: column;
+}
+
+stryker-dashboard #outlet {
+  flex-grow: 1;
+}
diff --git a/packages/website-frontend/src/pages/report.page.ts b/packages/website-frontend/src/pages/report.page.ts
@@ -34,7 +34,7 @@ export class ReportPage extends LitElement {
       }
 
       if (isMutationTestResult(report)) {
-        document.body.style.backgroundColor = 'rgb(24, 24, 27)';
+        this.#prepareStyling();
 
         if (isPendingReport(report)) {
           this.sse = `/api/real-time/${this.#sseSlug}`;
@@ -48,6 +48,14 @@ export class ReportPage extends LitElement {
     });
   }
 
+  #prepareStyling() {
+    this.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    `;
+  }
+
   override render() {
     if (this.didNotFindReport) {
       return html`
@@ -114,7 +122,7 @@ export class ReportPage extends LitElement {
   }
 
   #handleThemeChange(event: CustomEvent<{ themeBackgroundColor: string }>): void {
-    document.body.style.backgroundColor = event.detail.themeBackgroundColor;
+    this.style.backgroundColor = event.detail.themeBackgroundColor;
   }
 }