✨ Remove tokens tree node

frontend/src/app/main/ui/ds/layers/layer_button.cljs

@@ -8,7 +8,9 @@
   (:require-macros
    [app.main.style :as stl])
   (:require
+   [app.main.refs :as refs]
    [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
+   [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
 (def ^:private schema:layer-button
@@ -19,17 +21,19 @@
    [:expandable {:optional true} :boolean]
    [:expanded {:optional true} :boolean]
    [:icon {:optional true} :string]
-   [:on-toggle-expand fn?]])
+   [:on-toggle-expand {:optional true} fn?]
+   [:on-context-menu {:optional true} fn?]])
 
 (mf/defc layer-button*
   {::mf/schema schema:layer-button}
-  [{:keys [label description class is-expandable expanded icon on-toggle-expand children] :rest props}]
+  [{:keys [label description class is-expandable expanded icon on-toggle-expand on-context-menu children] :rest props}]
   (let [button-props (mf/spread-props props
                                       {:class [class (stl/css-case :layer-button true
                                                                    :layer-button--expandable is-expandable
                                                                    :layer-button--expanded expanded)]
                                        :type "button"
-                                       :on-click on-toggle-expand})]
+                                       :on-click on-toggle-expand
+                                       :on-context-menu on-context-menu})]
     [:div {:class (stl/css :layer-button-wrapper)}
      [:> "button" button-props
       [:div {:class (stl/css :layer-button-content)}

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

@@ -10,6 +10,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.pprint :as pp]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.tokens.application :as dwta]
@@ -88,7 +89,7 @@
 
         expandable? (d/nilv (seq tokens) false)
 
-        on-context-menu
+        on-pill-context-menu
         (mf/use-fn
          (fn [event token]
            (dom/prevent-default event)
@@ -98,6 +99,17 @@
                        :errors (:errors token)
                        :token-id (:id token)}))))
 
+        on-node-context-menu
+        (mf/use-fn
+         (fn [event node]
+           (dom/prevent-default event)
+           (pp/pprint node)
+           #_(st/emit! (dwtl/assign-token-context-menu
+                        {:type :token
+                         :position (dom/get-client-position event)
+                         :errors (:errors token)
+                         :token-id (:id token)}))))
+
         on-toggle-open-click
         (mf/use-fn
          (mf/deps type expandable?)
@@ -159,4 +171,5 @@
                         :selected-token-set-id selected-token-set-id
                         :is-selected-inside-layout is-selected-inside-layout
                         :on-token-pill-click on-token-pill-click
-                        :on-context-menu on-context-menu}])]))
+                        :on-pill-context-menu on-pill-context-menu
+                        :on-node-context-menu on-node-context-menu}])]))

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

@@ -10,9 +10,11 @@
    [app.common.path-names :as cpn]
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.workspace.tokens.library-edit :as dwtl]
+   [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.ds.layers.layer-button :refer [layer-button*]]
    [app.main.ui.workspace.tokens.management.token-pill :refer [token-pill*]]
+   [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
 (def ^:private schema:folder-node
@@ -26,7 +28,8 @@
    [:selected-token-set-id {:optional true} :any]
    [:tokens-lib {:optional true} :any]
    [:on-token-pill-click {:optional true} fn?]
-   [:on-context-menu {:optional true} fn?]])
+   [:on-pill-context-menu {:optional true} fn?]
+   [:on-node-context-menu {:optional true} fn?]])
 
 (mf/defc folder-node*
   {::mf/schema schema:folder-node}
@@ -39,22 +42,28 @@
            selected-token-set-id
            tokens-lib
            on-token-pill-click
-           on-context-menu]}]
+           on-pill-context-menu
+           on-node-context-menu]}]
   (let [full-path (str (name type) "." (:path node))
         is-folder-expanded (contains? (set (or unfolded-token-paths [])) full-path)
-
         swap-folder-expanded (mf/use-fn
                               (mf/deps (:path node) type)
                               (fn []
                                 (let [path (str (name type)  "." (:path node))]
-                                  (st/emit! (dwtl/toggle-token-path path)))))]
+                                  (st/emit! (dwtl/toggle-token-path path)))))
+        node-context-menu-prep (mf/use-fn
+                                (mf/deps on-node-context-menu node)
+                                (fn [event]
+                                  (when on-node-context-menu
+                                    (on-node-context-menu event node))))]
     [:li {:class (stl/css :folder-node)}
      [:> layer-button* {:label (:name node)
                         :expanded is-folder-expanded
                         :aria-expanded is-folder-expanded
                         :aria-controls (str "folder-children-" (:path node))
                         :is-expandable (not (:leaf node))
-                        :on-toggle-expand swap-folder-expanded}]
+                        :on-toggle-expand swap-folder-expanded
+                        :on-context-menu node-context-menu-prep}]
      (when is-folder-expanded
        (let [children-fn (:children-fn node)]
          [:div {:class (stl/css :folder-children-wrapper)
@@ -72,7 +81,7 @@
                                      :is-selected-inside-layout is-selected-inside-layout
                                      :active-theme-tokens active-theme-tokens
                                      :on-token-pill-click on-token-pill-click
-                                     :on-context-menu on-context-menu
+                                     :on-node-context-menu on-node-context-menu
                                      :tokens-lib tokens-lib
                                      :selected-token-set-id selected-token-set-id}]]
                   (let [id (:id (:leaf child))
@@ -84,7 +93,7 @@
                       :is-selected-inside-layout is-selected-inside-layout
                       :active-theme-tokens active-theme-tokens
                       :on-click on-token-pill-click
-                      :on-context-menu on-context-menu}])))))]))]))
+                      :on-context-menu on-pill-context-menu}])))))]))]))
 
 (def ^:private schema:token-tree
   [:map
@@ -97,7 +106,8 @@
    [:selected-token-set-id {:optional true} :any]
    [:tokens-lib {:optional true} :any]
    [:on-token-pill-click {:optional true} fn?]
-   [:on-context-menu {:optional true} fn?]])
+   [:on-pill-context-menu {:optional true} fn?]
+   [:on-node-context-menu {:optional true} fn?]])
 
 (mf/defc token-tree*
   {::mf/schema schema:token-tree}
@@ -110,12 +120,19 @@
            tokens-lib
            selected-token-set-id
            on-token-pill-click
-           on-context-menu]}]
+           on-pill-context-menu
+           on-node-context-menu]}]
   (let [separator "."
         tree (mf/use-memo
               (mf/deps tokens)
               (fn []
-                (cpn/build-tree-root tokens separator)))]
+                (cpn/build-tree-root tokens separator)))
+        can-edit? (:can-edit (deref refs/permissions))
+        on-node-context-menu (mf/use-fn
+                              (mf/deps can-edit? on-node-context-menu)
+                              (fn [event node]
+                                (when can-edit?
+                                  (on-node-context-menu event node))))]
     [:div {:class (stl/css :token-tree-wrapper)}
      (for [node tree]
        (if (:leaf node)
@@ -127,7 +144,7 @@
              :is-selected-inside-layout is-selected-inside-layout
              :active-theme-tokens active-theme-tokens
              :on-click on-token-pill-click
-             :on-context-menu on-context-menu}])
+             :on-context-menu on-pill-context-menu}])
           ;; Render segment folder
          [:ul {:class (stl/css :node-parent)
                :key (:path node)}
@@ -138,6 +155,6 @@
                             :is-selected-inside-layout is-selected-inside-layout
                             :active-theme-tokens active-theme-tokens
                             :on-token-pill-click on-token-pill-click
-                            :on-context-menu on-context-menu
+                            :on-node-context-menu on-node-context-menu
                             :tokens-lib tokens-lib
                             :selected-token-set-id selected-token-set-id}]]))]))