From b46574bef6fa1d5cac9ebe099983c43adbbd1d4d Mon Sep 17 00:00:00 2001
From: Xavier Julian <xavier.julian@kaleidos.net>
Date: Thu, 13 Mar 2025 13:26:41 +0100
Subject: [PATCH] :sparkles: Add a warning tooltip over import tokens button

---
 .../src/app/main/ui/workspace/tokens/sidebar.cljs   |  6 +++++-
 .../src/app/main/ui/workspace/tokens/sidebar.scss   | 13 +++++++++++++
 frontend/translations/en.po                         |  4 ++++
 frontend/translations/es.po                         |  4 ++++
 4 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 2add34dce..a2d35b10d 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -22,6 +22,7 @@
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
@@ -408,7 +409,10 @@
       (when can-edit?
         [:> dropdown-menu-item* {:class (stl/css :import-export-menu-item)
                                  :on-click on-display-file-explorer}
-         (tr "labels.import")])
+         [:div {:class (stl/css :import-menu-item)}
+          [:div (tr "labels.import")]
+          [:div {:class (stl/css :import-export-menu-item-icon) :title (tr "workspace.token.import-tooltip")}
+           [:> i/icon* {:icon-id i/info :aria-label (tr "workspace.token.import-tooltip")}]]]])
       [:> dropdown-menu-item* {:class (stl/css :import-export-menu-item)
                                :on-click on-export}
        (tr "labels.export")]]]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index bcbb5ca95..01a8d245c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -129,6 +129,19 @@
   }
 }
 
+.import-export-menu-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.import-menu-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+}
+
 .theme-select-wrapper {
   display: grid;
   grid-template-columns: 1fr 0.28fr;
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 089b29197..c1121b031 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -6789,6 +6789,10 @@ msgstr "TOKENS -  %s"
 msgid "workspace.token.tools"
 msgstr "Tools"
 
+#: src/app/main/ui/workspace/tokens/sidebar.cljs:415
+msgid "workspace.token.import-tooltip"
+msgstr "Importing a JSON file will override all your current tokens, sets and themes"
+
 #: src/app/main/ui/workspace/tokens/token_pill.cljs:123
 msgid "workspace.token.value-not-valid"
 msgstr "The value is not valid"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index fa4069833..868d10d22 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -6782,6 +6782,10 @@ msgstr "Valor"
 msgid "workspace.token.tools"
 msgstr "Herramientas"
 
+#: src/app/main/ui/workspace/tokens/sidebar.cljs:415
+msgid "workspace.token.import-tooltip"
+msgstr "Al importar un fichero JSON sobreescribirás todos tus tokens, sets y themes"
+
 #: src/app/main/ui/workspace/tokens/token_pill.cljs:123
 msgid "workspace.token.value-not-valid"
 msgstr "El valor no es válido"