From 44afb556c98c739389743ca5ac99244a843dd113 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Wed, 13 Nov 2024 12:23:34 +0100
Subject: [PATCH] ci: Auto-format inline CSS classes with prettier

---
 .pre-commit-config.yaml                       |  2 +
 frontend/.prettierrc.js                       |  2 +
 frontend/package-lock.json                    | 49 ++++++++++++++++++-
 frontend/package.json                         |  2 +
 .../app/general/footer/footer.component.html  |  3 +-
 .../model-diagram-dialog.component.html       |  3 +-
 .../model-complexity-badge.component.html     |  6 ++-
 .../feedback-dialog.component.html            | 16 +++---
 .../feedback-dialog.component.ts              |  3 +-
 .../floating-window-manager.component.html    |  3 +-
 .../create-session-history.component.html     |  3 +-
 11 files changed, 75 insertions(+), 17 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 76d87e0fc0..c24d8a7d7c 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -106,6 +106,8 @@ repos:
           - 'prettier-plugin-tailwindcss@^0.6.8'
           - '@trivago/prettier-plugin-sort-imports@^4.3.0'
           - 'tailwindcss@^3.4.12'
+          - 'prettier-plugin-classnames@^0.7.4'
+          - 'prettier-plugin-merge@^0.7.1'
   - repo: https://github.com/Lucas-C/pre-commit-hooks
     rev: v1.5.5
     hooks:
diff --git a/frontend/.prettierrc.js b/frontend/.prettierrc.js
index dc72f5ebbb..569a061ad4 100644
--- a/frontend/.prettierrc.js
+++ b/frontend/.prettierrc.js
@@ -7,6 +7,8 @@ module.exports = {
   plugins: [
     require.resolve("prettier-plugin-tailwindcss"),
     require.resolve("@trivago/prettier-plugin-sort-imports"),
+    require.resolve("prettier-plugin-classnames"),
+    require.resolve("prettier-plugin-merge"),
   ],
   importOrder: ["^[./]"],
   importOrderParserPlugins: ["typescript", "decorators-legacy"],
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 956634bd27..4c14bd2f44 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -29,6 +29,8 @@
         "ngx-skeleton-loader": "^9.0.0",
         "ngx-toastr": "^19.0.0",
         "npm": "^10.9.0",
+        "prettier-plugin-classnames": "^0.7.4",
+        "prettier-plugin-merge": "^0.7.1",
         "puppeteer": "^23.6.1",
         "rxjs": "~7.8.1",
         "semver": "^7.6.3",
@@ -9652,6 +9654,15 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/diff": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -18806,7 +18817,6 @@
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
       "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
-      "devOptional": true,
       "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -18818,6 +18828,43 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-classnames": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-classnames/-/prettier-plugin-classnames-0.7.4.tgz",
+      "integrity": "sha512-QDhISdUeYcwHHtsHBs+xImIeT+6DObStqxO1Aouv6biBXpdXa9OfOjeGiJ+GdcWYfN47WTbdcBKjFqYgflRVYQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/prettier-plugin-merge": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-merge/-/prettier-plugin-merge-0.7.1.tgz",
+      "integrity": "sha512-R3dSlv3kAlScjd/liWjTkGHcUrE4MBhPKKBxVOvHK7+FY2P5SEmLarZiD11VUEuaMRK0L7zqIurX6JcRYS9Y5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "diff": "5.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      }
+    },
     "node_modules/prettier-plugin-tailwindcss": {
       "version": "0.6.8",
       "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 209498bde8..03c6e43b23 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,6 +36,8 @@
     "ngx-skeleton-loader": "^9.0.0",
     "ngx-toastr": "^19.0.0",
     "npm": "^10.9.0",
+    "prettier-plugin-classnames": "^0.7.4",
+    "prettier-plugin-merge": "^0.7.1",
     "puppeteer": "^23.6.1",
     "rxjs": "~7.8.1",
     "semver": "^7.6.3",
diff --git a/frontend/src/app/general/footer/footer.component.html b/frontend/src/app/general/footer/footer.component.html
index 20345c7aa0..88d4548c1c 100644
--- a/frontend/src/app/general/footer/footer.component.html
+++ b/frontend/src/app/general/footer/footer.component.html
@@ -5,7 +5,8 @@
 
 <hr />
 <div
-  class="flex h-full flex-wrap items-end justify-center px-3 py-2 text-gray-500 md:mx-5 md:justify-between"
+  class="flex h-full flex-wrap items-end justify-center px-3 py-2 text-gray-500 md:mx-5
+    md:justify-between"
 >
   <app-version class="px-2 pb-2 md:basis-1/3 md:p-0"></app-version>
   <div class="px-2 text-center md:basis-1/3">
diff --git a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
index 10a21be6b2..f3b18bd12b 100644
--- a/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
+++ b/frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
@@ -95,7 +95,8 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
             }
           } @else {
             <div
-              class="mb-2 flex h-[200px] flex-col items-center justify-center rounded border border-gray-400 py-[15px] text-center"
+              class="mb-2 flex h-[200px] flex-col items-center justify-center rounded border
+                border-gray-400 py-[15px] text-center"
             >
               <mat-icon class="scale-[2] text-red-900">error</mat-icon> <br />
               Diagram export has failed. <br />
diff --git a/frontend/src/app/projects/project-detail/model-overview/model-complexity-badge/model-complexity-badge.component.html b/frontend/src/app/projects/project-detail/model-overview/model-complexity-badge/model-complexity-badge.component.html
index d6d7800ce9..ff229af7d7 100644
--- a/frontend/src/app/projects/project-detail/model-overview/model-complexity-badge/model-complexity-badge.component.html
+++ b/frontend/src/app/projects/project-detail/model-overview/model-complexity-badge/model-complexity-badge.component.html
@@ -29,7 +29,8 @@
   } @else if (errorCode === "FILE_NOT_FOUND") {
     <div
       (click)="openModelComplexityBadgeDocs()"
-      class="flex size-full cursor-pointer items-center justify-between rounded border border-gray-400 p-2 text-center"
+      class="flex size-full cursor-pointer items-center justify-between rounded border
+        border-gray-400 p-2 text-center"
     >
       <mat-icon class="basis-[60px] scale-[2]">open_in_new</mat-icon>
       <span class="basis-[calc(100%-60px)]">
@@ -40,7 +41,8 @@
     </div>
   } @else {
     <div
-      class="flex size-full items-center justify-between rounded border border-gray-400 p-2 text-center"
+      class="flex size-full items-center justify-between rounded border border-gray-400 p-2
+        text-center"
     >
       <mat-icon class="basis-[60px] scale-[2]">error</mat-icon>
       <span class="basis-[calc(100%-60px)]"
diff --git a/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html b/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html
index a8bedf7dfe..b711e18722 100644
--- a/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html
+++ b/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html
@@ -25,15 +25,13 @@ <h1 class="text-lg font-semibold">
           [attr.data-testid]="'rating-' + rating"
           mat-icon-button
           type="button"
-          [class]="
-            [
-              '!flex',
-              getColorForRating(rating),
-              this.feedbackForm.get('rating')?.value === rating
-                ? '!bg-gray-200'
-                : '',
-            ].join(' ')
-          "
+          [ngClass]="[
+            '!flex',
+            getColorForRating(rating),
+            this.feedbackForm.get('rating')?.value === rating
+              ? '!bg-gray-200'
+              : '',
+          ]"
         >
           <mat-icon>
             @switch (rating) {
diff --git a/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.ts b/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.ts
index 7748f0815d..68c2d39dba 100644
--- a/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.ts
+++ b/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.ts
@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { AsyncPipe } from '@angular/common';
+import { AsyncPipe, NgClass } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import {
   FormControl,
@@ -55,6 +55,7 @@ interface DialogData {
     ReactiveFormsModule,
     FormsModule,
     AsyncPipe,
+    NgClass,
   ],
   templateUrl: './feedback-dialog.component.html',
 })
diff --git a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html
index c8947ed764..1913fb7ee4 100644
--- a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html
+++ b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html
@@ -18,7 +18,8 @@
         (cdkDragEnded)="dragStop()"
       >
         <div
-          class="flex cursor-grab items-center justify-between gap-2 rounded-t p-1 active:cursor-grabbing"
+          class="flex cursor-grab items-center justify-between gap-2 rounded-t p-1
+            active:cursor-grabbing"
           [ngClass]="session.focused ? 'bg-slate-100' : 'bg-slate-300'"
           cdkDragHandle
         >
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-session-history/create-session-history.component.html b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-session-history/create-session-history.component.html
index 4f4e1d6373..85011069ed 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-session-history/create-session-history.component.html
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-session-history/create-session-history.component.html
@@ -17,7 +17,8 @@
     }
     @for (session of sortedResolvedHistory; track $index) {
       <button
-        class="flex w-full flex-row items-center justify-between gap-5 rounded border bg-slate-100 p-2"
+        class="flex w-full flex-row items-center justify-between gap-5 rounded border
+          bg-slate-100 p-2"
         (click)="requestSession(session)"
       >
         <div class="w-full flex-col items-center">