chore: cleanup

Author: xandervedder

packages/data-access/src/mappers/DashboardQuery.ts

@@ -23,9 +23,7 @@ export class DashboardQuery<TModel, TPartitionKeyFields extends keyof TModel, TR
     return new DashboardQuery(this.ModelClass, [...this.whereConditions, whereCondition]);
   }
 
-  public findPartitionKeyRange(
-    start: string
-  ): DashboardQuery<TModel, TPartitionKeyFields, TRowKeyFields> {
+  public findPartitionKeyRange(start: string): DashboardQuery<TModel, TPartitionKeyFields, TRowKeyFields> {
     const whereCondition: string = odata`PartitionKey ge ${start}`;
     return new DashboardQuery(this.ModelClass, [...this.whereConditions, whereCondition]);
   }

packages/stryker-elements/src/lib/atoms/dropdown.ts

@@ -12,7 +12,7 @@ export class Dropdown extends BaseElement {
   @property({ type: Array })
   options: { name: string; value: string }[] = [];
 
-  @property({ type: String	})
+  @property({ type: String })
   selectedOption = '';
 
   @property({ type: Boolean })
@@ -26,13 +26,16 @@ export class Dropdown extends BaseElement {
         @change="${this.#handleChange}"
       >
         ${when(
-          this.withDisabledEmtpyOption, 
-          () => html`<option value="" disabled selected>Select an option</option>`, 
-          () => nothing
+          this.withDisabledEmtpyOption,
+          () => html`<option value="" disabled selected>Select an option</option>`,
+          () => nothing,
+        )}
+        ${map(
+          this.options,
+          (option) => html`
+            <option value="${option.value}" ?selected="${option.value === this.selectedOption}">${option.name}</option>
+          `,
         )}
-        ${map(this.options, (option) => html`
-          <option value="${option.value}" ?selected="${option.value === this.selectedOption}">${option.name}</option>
-        `)}
       </select>
     `;
   }

packages/stryker-elements/src/lib/atoms/hr.ts

@@ -15,7 +15,7 @@ export class Hr extends BaseElement {
     const color = classMap({ 'bg-neutral-700': this.color === 'normal', 'bg-neutral-400': this.color === 'bright' });
 
     if (this.direction === 'vertical') {
-      return html`<hr class="${color} w-[3px] rounded h-full" />`;
+      return html`<hr class="${color} h-full w-[3px] rounded" />`;
     }
 
     return html`<hr class="${color} my-2 rounded border-t-[3px]" />`;

packages/stryker-elements/src/lib/molecules/split-layout.ts

@@ -11,7 +11,7 @@ export class SplitLayout extends BaseElement {
 
   render() {
     return html`
-      <div class="flex p-4 ${classMap({ 'bg-elementsDark': this.withBackground })}">
+      <div class="${classMap({ 'bg-elementsDark': this.withBackground })} flex p-4">
         <div class="max-w-split">
           <slot name="left"></slot>
         </div>

packages/stryker-elements/src/lib/molecules/tab-panels.ts

@@ -1,9 +1,9 @@
-import { html, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { map } from "lit/directives/map.js";
-import { classMap } from "lit/directives/class-map.js";
+import { html, TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
 
-import { BaseElement } from "../base-element";
+import { BaseElement } from '../base-element';
 
 @customElement('sme-tab-panels')
 export class TabPanels extends BaseElement {
@@ -14,32 +14,31 @@ export class TabPanels extends BaseElement {
   panels: TemplateResult<1>[] = [];
 
   @state()
-  activeTab: number = 0;
+  activeTab = 0;
 
   render() {
     return html`
-      <div class="w-full h-full">
-        <div class="flex bg-red-900 justify-center">
+      <div class="h-full w-full">
+        <div class="flex justify-center bg-red-900">
           ${map(this.tabs, (tab, index) => {
-            return html` 
+            return html`
               <sme-button
                 @click="${this.#handleTabChange}"
-                class="${classMap({ 
+                class="${classMap({
                   'bg-red-700': index === this.activeTab,
                   'border-red-500': index === this.activeTab, // separate on multiple lines because it cannot contain whitespace
-                  'border-transparent': index !== this.activeTab
-                })} border-0 border-b-2 px-2 font-bold transition text-md text-white" 
-                type="plain" 
-              >${tab}</sme-button>
-            `; 
+                  'border-transparent': index !== this.activeTab,
+                })} text-md border-0 border-b-2 px-2 font-bold text-white transition"
+                type="plain"
+                >${tab}</sme-button
+              >
+            `;
           })}
         </div>
-        <div class="w-full h-full">
+        <div class="h-full w-full">
           ${map(this.panels, (panel, index) => {
             return html`
-              <div id="panel-${index}" class="${classMap({ 'hidden': index !== this.activeTab })}">
-                ${panel}
-              </div>
+              <div id="panel-${index}" class="${classMap({ hidden: index !== this.activeTab })}">${panel}</div>
             `;
           })}
         </div>
@@ -54,10 +53,8 @@ export class TabPanels extends BaseElement {
   }
 }
 
-
 declare global {
   interface HTMLElementTagNameMap {
     'sme-tab-panels': TabPanels;
   }
 }
-

packages/stryker-elements/src/stories/atoms/hr.stories.ts

@@ -7,7 +7,7 @@ export default {
   title: 'Atoms/Hr',
 } as Meta;
 
-export const Default: StoryObj = {  
+export const Default: StoryObj = {
   name: 'Default',
   render: () => html`<sme-hr></sme-hr>`,
 };

packages/stryker-elements/src/stories/molecules/tab-panels.stories.ts

@@ -11,6 +11,9 @@ export default {
 export const Default: StoryObj = {
   name: 'Default',
   render: () => {
-    return html`<sme-tab-panels .tabs="${["Report", "Compare"]}" .panels="${[html`<div>report</div>`, html`<div>compare</div>`]}"></sme-tab-panels>`;
+    return html`<sme-tab-panels
+      .tabs="${['Report', 'Compare']}"
+      .panels="${[html`<div>report</div>`, html`<div>compare</div>`]}"
+    ></sme-tab-panels>`;
   },
 };

packages/website-backend/src/controllers/version.controller.ts

@@ -1,8 +1,15 @@
 import fs from 'fs/promises';
-import { version as frontendVersion } from '@stryker-mutator/dashboard-frontend';
 import { Controller, Get, Param } from '@nestjs/common';
+
+import {
+  createMutationTestingReportMapper,
+  DashboardQuery,
+  MutationTestingReport,
+  MutationTestingReportMapper,
+} from '@stryker-mutator/dashboard-data-access';
+import { version as frontendVersion } from '@stryker-mutator/dashboard-frontend';
+
 import { parseSlug } from '../utils/utils.js';
-import { createMutationTestingReportMapper, DashboardQuery, MutationTestingReport, MutationTestingReportMapper, Project, ProjectMapper } from '@stryker-mutator/dashboard-data-access';
 
 const dashboardVersion = (
   JSON.parse(await fs.readFile(new URL('../../../package.json', import.meta.url), 'utf-8')) as { version: string }
@@ -26,11 +33,13 @@ export default class VersionController {
       frontend: frontendVersion,
     };
   }
-  
-  @Get("/:slug(*)")
+
+  @Get('/:slug(*)')
   public async getVersionsForReport(@Param('slug') slug: string): Promise<string[]> {
     const { project } = parseSlug(slug);
-    const reports = await this.#reportMapper.findAll(DashboardQuery.create(MutationTestingReport).findPartitionKeyRange(project));
+    const reports = await this.#reportMapper.findAll(
+      DashboardQuery.create(MutationTestingReport).findPartitionKeyRange(project),
+    );
     return reports.map((project) => project.model.version);
   }
 }

packages/website-frontend/src/pages/report.page.ts

@@ -8,30 +8,29 @@ import type { ThemeChangedEvent } from 'mutation-testing-elements';
 import 'mutation-testing-elements';
 import { MutationTestResult } from 'mutation-testing-report-schema';
 
-
 import { reportService } from '../services/report.service';
 import { locationService } from '../services/location.service';
 import { versionService } from '../services/version.service';
 
-type Reports = { 
-  main: MutationTestResult | undefined, 
-  left: MutationTestResult | undefined, 
-  right: MutationTestResult | undefined 
-};
+interface Reports {
+  main: MutationTestResult | undefined;
+  left: MutationTestResult | undefined;
+  right: MutationTestResult | undefined;
+}
 
 @customElement('stryker-dashboard-report-page')
 export class ReportPage extends LitElement {
   @state()
   didNotFindReport = false;
 
   @state()
-  loaded = { left: true, right: true }
+  loaded = { left: true, right: true };
 
   @state()
   reports: Reports = {
     main: undefined,
     left: undefined,
-    right: undefined
+    right: undefined,
   };
 
   @state()
@@ -44,7 +43,7 @@ export class ReportPage extends LitElement {
   sse: string | undefined;
 
   @state()
-  versions: { name: string, value: string }[] = [];
+  versions: { name: string; value: string }[] = [];
 
   override connectedCallback(): void {
     super.connectedCallback();
@@ -73,7 +72,7 @@ export class ReportPage extends LitElement {
     });
 
     void versionService.versions(this.#baseSlug).then((versions) => {
-      this.versions = versions.map(version => ({ name: version, value: version }));
+      this.versions = versions.map((version) => ({ name: version, value: version }));
     });
   }
 
@@ -105,10 +104,10 @@ export class ReportPage extends LitElement {
 
     return html`
       <sme-loader ?doneWithLoading="${!!this.reports.main}">
-        ${when(this.reports.main, () => { 
+        ${when(this.reports.main, () => {
           return html`
-            <sme-tab-panels 
-              .tabs="${["Report", "Compare"]}" 
+            <sme-tab-panels
+              .tabs="${['Report', 'Compare']}"
               .panels="${[this.#renderReport(), this.#renderCompareView()]}"
             ></sme-tab-panels>
           `;
@@ -118,21 +117,20 @@ export class ReportPage extends LitElement {
   }
 
   #renderReport() {
-    return html`
-      <mutation-test-report-app
-        @theme-changed=${this.#handleThemeChange}
-        .titlePostfix="${this.#title}"
-        .report="${this.reports.main}"
-        sse="${ifDefined(this.sse)}"
-      ></mutation-test-report-app>`;
+    return html` <mutation-test-report-app
+      @theme-changed=${this.#handleThemeChange}
+      .titlePostfix="${this.#title}"
+      .report="${this.reports.main}"
+      sse="${ifDefined(this.sse)}"
+    ></mutation-test-report-app>`;
   }
 
   #renderCompareView() {
     return html`
       <sme-split-layout withBackground>
         <div slot="left">
-          <sme-dropdown 
-            @dropdownChanged="${(e: CustomEvent) => this.#handleLeftVersionChange(e)}" 
+          <sme-dropdown
+            @dropdownChanged="${(e: CustomEvent<{ value: string }>) => this.#handleLeftVersionChange(e)}"
             .options="${this.versions}"
             .selectedOption="${this.selection.left}"
           ></sme-dropdown>
@@ -144,8 +142,8 @@ export class ReportPage extends LitElement {
           </sme-loader>
         </div>
         <div slot="right">
-          <sme-dropdown 
-            @dropdownChanged="${(e: CustomEvent) => this.#handleRightVersionChange(e)}" 
+          <sme-dropdown
+            @dropdownChanged="${(e: CustomEvent<{ value: string }>) => this.#handleRightVersionChange(e)}"
             .options="${this.versions}"
             .selectedOption="${this.selection.right}"
             ?withDisabledEmtpyOption="${this.selection.right !== undefined}"
@@ -174,7 +172,7 @@ export class ReportPage extends LitElement {
   async #handleVersionChange(event: CustomEvent<{ value: string }>, direction: 'left' | 'right') {
     this.loaded = { ...this.loaded, [direction]: false };
 
-    const report = await reportService.getReport(this.#configureSlugWithVersion(event.detail.value))
+    const report = await reportService.getReport(this.#configureSlugWithVersion(event.detail.value));
     if (report == undefined) {
       return;
     }
@@ -185,7 +183,7 @@ export class ReportPage extends LitElement {
 
     setTimeout(() => {
       this.reports = { ...this.reports, [direction]: report };
-      this.loaded = { ...this.loaded, [direction]: true };  
+      this.loaded = { ...this.loaded, [direction]: true };
     }, 250);
   }