🎉 Rename token group - display modal

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

@@ -145,8 +145,7 @@
            (let [token-ids (set tokens-in-path-ids)
                  remaining-tokens (filter (fn [token]
                                             (not (contains? token-ids (:id token))))
-                                          selected-token-set-tokens)
-                 _ (prn "Remaining tokens:" remaining-tokens)]
+                                          selected-token-set-tokens)]
              (seq remaining-tokens))))
 
         delete-token
@@ -169,13 +168,18 @@
         ;; node-to-rename (mf/use-state nil)
         ;; node-to-rename* (deref node-to-rename)
 
+        ;; rename-node
+        ;; (fn [node type]
+        ;;   (st/emit! (dwtl/assign-token-node-context-menu nil))
+        ;;   (st/emit! (modal/show :tokens/rename-node {:node node
+        ;;                                              :type type})))
+
         rename-node
-        (mf/with-memo []
-          (fn [node type]
-            (mf/portal
-             (st/emit! (dwtl/assign-token-node-context-menu nil)
-                       (modal/show :tokens/rename-node {:node node
-                                                        :type type})))))
+        (mf/use-fn
+         (fn [node type]
+           (prn "Open rename node modal")
+           (modal/show! :tokens/rename-node {:node node
+                                             :type type})))
 
         delete-node
         (mf/with-memo [selected-token-set-tokens selected-token-set-id]
@@ -206,6 +210,7 @@
      [:& token-context-menu {:on-delete-token delete-token}]
      [:> token-node-context-menu* {:on-rename-node rename-node
                                    :on-delete-node delete-node}]
+     ;;  [:> rename-node-modal* {}]
 
      [:> selected-set-info* {:tokens-lib tokens-lib
                              :selected-token-set-id selected-token-set-id}]

frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.cljs

@@ -16,7 +16,7 @@
         (mf/use-fn
          (mf/deps [])
          (fn []
-           (prn "Close rename node modal")))]
+           (modal/hide!)))]
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-dialog)}
@@ -25,6 +25,4 @@
                         :aria-label (tr "labels.close")
                         :variant "ghost"
                         :icon i/close}]
-      "Rename node modal for node:"
-      [:pre (str node)]
-      [:pre (str type)]]]))
+      (str "Rename node modal for node: " node " of type: " type)]]))

frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.scss

@@ -0,0 +1,41 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "ds/_sizes.scss" as *;
+@use "ds/typography.scss" as t;
+
+@use "refactor/common-refactor.scss" as deprecated;
+
+.modal-overlay {
+  --modal-title-foreground-color: var(--color-foreground-primary);
+  --modal-text-foreground-color: var(--color-foreground-secondary);
+
+  @extend .modal-overlay-base;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  block-size: 100%;
+  inline-size: 100%;
+  background-color: var(--overlay-color);
+}
+
+.close-btn {
+  position: absolute;
+  inset-block-start: $sz-6;
+  inset-inline-end: $sz-6;
+}
+
+.modal-dialog {
+  @extend .modal-container-base;
+  inline-size: 100%;
+  max-inline-size: 32rem;
+  max-block-size: unset;
+  user-select: none;
+  position: relative;
+}

frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.cljs

@@ -42,7 +42,7 @@
                                (let [node (get mdata :node)
                                      type (get mdata :type)]
                                  (when node
-                                   on-rename-node node type))))
+                                   (on-rename-node node type)))))
         delete-node          (mf/use-fn
                               (mf/deps mdata)
                               (fn []