From 42b25479b34810633ed2ba922bdcd52bd6919e6d Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 10 May 2024 10:36:56 +0200
Subject: [PATCH] Highlight invalid token values

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 10 +++++++---
 frontend/src/app/main/ui/workspace/tokens/sidebar.scss |  5 +++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index ce44eeec9..3926ed056 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -20,10 +20,14 @@
 (mf/defc token-pill
   {::mf/wrap-props false}
   [{:keys [on-click token highlighted?]}]
-  (let [{:keys [name value]} token]
+  (let [{:keys [name value]} token
+        resolved-value (try
+                         (wtc/resolve-token-value token)
+                         (catch js/Error _ nil))]
     [:div {:class (stl/css-case :token-pill true
-                                :token-pill-highlighted highlighted?)
-           :title (str "Token value: " value)
+                                :token-pill-highlighted highlighted?
+                                :token-pill-invalid (not resolved-value))
+           :title (str (if resolved-value "Token value: " "Invalid token value: ") value)
            :on-click on-click}
      name]))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 75cd515bc..3a0284050 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -27,4 +27,9 @@
     color: var(--button-primary-foreground-color-rest);
     background: var(--button-primary-background-color-rest);
   }
+
+  &.token-pill-invalid {
+    color: var(--status-color-error-500);
+    opacity: 0.8;
+  }
 }