✨ Add warning when editing a token name

frontend/src/app/main/ui/workspace/tokens/form.cljs

@@ -18,6 +18,7 @@
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
+   [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.main.ui.workspace.colorpicker :as colorpicker]
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
    [app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
@@ -239,7 +240,10 @@
            (mf/set-ref-val! cancel-ref node)))
 
         ;; Name
-        touched-name? (mf/use-state false)
+        touched-name* (mf/use-state false)
+        touched-name? (deref touched-name*)
+        warning-name-change* (mf/use-state false)
+        warning-name-change? (deref warning-name-change*)
         name-ref (mf/use-var (:name token))
         name-errors (mf/use-state nil)
         validate-name
@@ -252,13 +256,15 @@
 
         on-blur-name
         (mf/use-fn
-         (mf/deps cancel-ref)
+         (mf/deps cancel-ref touched-name? warning-name-change?)
          (fn [e]
            (let [node (dom/get-related-target e)
                  on-cancel-btn (= node (mf/ref-val cancel-ref))]
              (when-not on-cancel-btn
                (let [value (dom/get-target-val e)
                      errors (validate-name value)]
+                 (when touched-name?
+                   (reset! warning-name-change* true))
                  (reset! name-errors errors))))))
 
         on-update-name-debounced
@@ -273,7 +279,7 @@
         (mf/use-fn
          (mf/deps on-update-name-debounced)
          (fn [e]
-           (reset! touched-name? true)
+           (reset! touched-name* true)
            (reset! name-ref (dom/get-target-val e))
            (on-update-name-debounced e)))
 
@@ -416,7 +422,13 @@
                     :key error
                     :typography "body-small"
                     :class (stl/css :error)}
-          error])]
+          error])
+
+       (when (and warning-name-change? (= action "edit"))
+         [:div {:class (stl/css :warning-name-change-notification-wrapper)}
+          [:> context-notification
+           {:level :warning
+            :content (tr "workspace.token.warning-name-change")}]])]
 
       [:div {:class (stl/css :input-row)}
        [:> input-tokens*

frontend/src/app/main/ui/workspace/tokens/form.scss

@@ -44,6 +44,10 @@
   font-size: $fs-12;
 }
 
+.warning-name-change-notification-wrapper {
+  margin-block-start: $s-16;
+}
+
 .error {
   padding: $s-4 $s-6;
   margin-bottom: 0;

frontend/translations/en.po

@@ -6713,6 +6713,10 @@ msgstr "Enter %s token name"
 msgid "workspace.token.token-value"
 msgstr "Value"
 
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.warning-name-change"
+msgstr "Renaming this token will break any reference to its old name."
+
 #: src/app/main/ui/workspace/tokens/form.cljs
 msgid "workspace.token.enter-token-value"
 msgstr "Enter token value or alias"

frontend/translations/es.po

@@ -6704,6 +6704,10 @@ msgstr "Introduce un nombre para el token %s"
 msgid "workspace.token.token-value"
 msgstr "Valor"
 
+#: src/app/main/ui/workspace/tokens/form.cljs
+msgid "workspace.token.warning-name-change"
+msgstr "Al renombrar este token se romperán las referencias al nombre anterior"
+
 #: src/app/main/ui/workspace/tokens/form.cljs
 msgid "workspace.token.enter-token-value"
 msgstr "Introduce un valor o alias"