✨ Create sets inside folders

frontend/src/app/main/data/tokens.cljs

@@ -108,11 +108,9 @@
          (dch/commit-changes changes)
          (wtu/update-workspace-tokens))))))
 
-(defn create-token-set [token-set]
-  (let [new-token-set (merge
-                       {:name "Token Set"
-                        :tokens []}
-                       token-set)]
+(defn create-token-set [set-name token-set]
+  (let [new-token-set (-> token-set
+                          (update :name #(if (empty? %) set-name (ctob/join-set-path [% set-name]))))]
     (ptk/reify ::create-token-set
       ptk/WatchEvent
       (watch [it _ _]

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

@@ -37,14 +37,14 @@
   (st/emit! (dwts/set-selected-token-set-name set-name)))
 
 (defn on-update-token-set [set-name token-set]
-  (st/emit! (wdt/update-token-set set-name token-set)))
+  (st/emit! (wdt/update-token-set set-name (ctob/update-name token-set set-name))))
 
 (defn on-update-token-set-group [set-group-path set-group-fname]
   (st/emit! (wdt/rename-token-set-group set-group-path set-group-fname)))
 
-(defn on-create-token-set [_ token-set]
+(defn on-create-token-set [set-name token-set]
   (st/emit! (ptk/event ::ev/event {::ev/name "create-tokens-set"}))
-  (st/emit! (wdt/create-token-set token-set)))
+  (st/emit! (wdt/create-token-set set-name token-set)))
 
 (mf/defc editing-label
   [{:keys [default-value on-cancel on-submit]}]
@@ -243,7 +243,7 @@
         on-edit-submit'
         (mf/use-fn
          (mf/deps set on-edit-submit)
-         #(on-edit-submit set-name (ctob/update-name set %)))
+         #(on-edit-submit % set))
 
         on-drag
         (mf/use-fn
@@ -319,7 +319,7 @@
            on-toggle-set-group
            set-node]
     :as props}]
-  (let [{:keys [on-edit] :as ctx} (sets-context/use-context)
+  (let [{:keys [on-edit new-path] :as ctx} (sets-context/use-context)
         collapsed-paths (mf/use-state #{})
         collapsed?
         (mf/use-fn
@@ -331,29 +331,11 @@
            (swap! collapsed-paths #(if (contains? % path)
                                      (disj % path)
                                      (conj % path)))))]
-    (for [[index {:keys [group? path parent-path depth] :as node}]
-          (d/enumerate (ctob/walk-sets-tree-seq set-node :walk-children? #(contains? @collapsed-paths %)))]
-      (if (not group?)
-        (let [editing-id (sets-context/set-path->id path)]
-          [:& sets-tree-set
-           {:key editing-id
-            :set (:set node)
-            :label (last path)
-            :active? active?
-            :selected? (selected? (get-in node [:set :name]))
-            :draggable? draggable?
-            :on-select on-select
-            :tree-path path
-            :tree-depth depth
-            :tree-index index
-            :tree-parent-path parent-path
-            :on-toggle on-toggle-set
-            :editing-id editing-id
-            :editing? editing?
-            :on-edit on-edit
-            :on-edit-reset on-edit-reset
-            :on-edit-submit on-edit-submit-set
-            :collapsed-paths collapsed-paths}])
+    (for [[index {:keys [new? group? path parent-path depth] :as node}]
+          (d/enumerate (ctob/walk-sets-tree-seq set-node {:skip-children-pred #(contains? @collapsed-paths %)
+                                                          :new-editing-set-path new-path}))]
+      (cond
+        group?
         (let [editing-id (sets-context/set-group-path->id path)]
           [:& sets-tree-set-group
            {:key editing-id
@@ -374,6 +356,49 @@
             :collapsed? (collapsed? path)
             :on-toggle-collapse on-toggle-collapse
             :on-toggle on-toggle-set-group
+            :collapsed-paths collapsed-paths}])
+
+        new?
+        (let [editing-id (sets-context/set-path->id path)]
+          [:& sets-tree-set
+           {:key editing-id
+            :set (ctob/make-token-set :name (if (empty? parent-path)
+                                              ""
+                                              (ctob/join-set-path parent-path)))
+            :label ""
+            :active? (constantly true)
+            :selected? (constantly true)
+            :on-select (constantly nil)
+            :tree-path path
+            :tree-depth depth
+            :tree-index index
+            :tree-parent-path parent-path
+            :on-toggle (constantly nil)
+            :editing-id editing-id
+            :editing? (constantly true)
+            :on-edit-reset on-edit-reset
+            :on-edit-submit on-create-token-set}])
+
+        :else
+        (let [editing-id (sets-context/set-path->id path)]
+          [:& sets-tree-set
+           {:key editing-id
+            :set (:set node)
+            :label (last path)
+            :active? active?
+            :selected? (selected? (get-in node [:set :name]))
+            :draggable? draggable?
+            :on-select on-select
+            :tree-path path
+            :tree-depth depth
+            :tree-index index
+            :tree-parent-path parent-path
+            :on-toggle on-toggle-set
+            :editing-id editing-id
+            :editing? editing?
+            :on-edit on-edit
+            :on-edit-reset on-edit-reset
+            :on-edit-submit on-edit-submit-set
             :collapsed-paths collapsed-paths}])))))
 
 (mf/defc controlled-sets-list
@@ -390,45 +415,31 @@
            on-select
            context]
     :as _props}]
-  (let [{:keys [editing? new? on-edit on-reset] :as ctx} (or context (sets-context/use-context))
+  (let [{:keys [editing? on-edit on-reset new-path] :as ctx} (or context (sets-context/use-context))
         theme-modal? (= origin "theme-modal")
         can-edit? (:can-edit (deref refs/permissions))
         draggable? (and (not theme-modal?) can-edit?)]
     [:fieldset {:class (stl/css :sets-list)}
      (if (and theme-modal?
-              (empty? token-sets))
+              (empty? token-sets)
+              (not new-path))
        [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message-sets)}
         (tr "workspace.token.no-sets-create")]
-       (if (and theme-modal?
-                (empty? token-sets))
-         [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message-sets)}
-          (tr "workspace.token.no-sets-create")]
-         [:*
-          [:& sets-tree
-           {:draggable? draggable?
-            :set-node token-sets
-            :selected? token-set-selected?
-            :on-select on-select
-            :active? token-set-active?
-            :group-active? token-set-group-active?
-            :on-toggle-set on-toggle-token-set
-            :on-toggle-set-group on-toggle-token-set-group
-            :editing? editing?
-            :on-edit on-edit
-            :on-edit-reset on-reset
-            :on-edit-submit-set on-update-token-set
-            :on-edit-submit-group on-update-token-set-group}]
-          (when new?
-            [:& sets-tree-set
-             {:set (ctob/make-token-set :name "")
-              :label ""
-              :selected? (constantly true)
-              :active? (constantly true)
-              :editing? (constantly true)
-              :on-select (constantly nil)
-              :on-edit (constantly nil)
-              :on-edit-reset on-reset
-              :on-edit-submit on-create-token-set}])]))]))
+       [:& sets-tree
+        {:draggable? draggable?
+         :set-node token-sets
+         :selected? token-set-selected?
+         :on-select on-select
+         :active? token-set-active?
+         :group-active? token-set-group-active?
+         :on-toggle-set on-toggle-token-set
+         :on-toggle-set-group on-toggle-token-set-group
+         :editing? editing?
+         :on-create-token-set on-create-token-set
+         :on-edit on-edit
+         :on-edit-reset on-reset
+         :on-edit-submit-set on-update-token-set
+         :on-edit-submit-group on-update-token-set-group}])]))
 
 
 (mf/defc sets-list

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

@@ -15,14 +15,12 @@
 (defn set-path->id [set-path]
   (dm/str "set-" set-path))
 
-(def initial {:editing-id nil
-              :new? false})
+(def initial {})
 
 (def context (mf/create-context initial))
 
 (def static-context
   {:editing? (constantly false)
-   :new? false
    :on-edit (constantly nil)
    :on-create (constantly nil)
    :on-reset (constantly nil)})
@@ -37,7 +35,7 @@
 
 (defn use-context []
   (let [ctx (mf/use-ctx context)
-        {:keys [editing-id new?]} @ctx
+        {:keys [editing-id new-path]} @ctx
         editing? (mf/use-callback
                   (mf/deps editing-id)
                   #(= editing-id %))
@@ -45,11 +43,12 @@
                  (fn [editing-id]
                    (reset! ctx (assoc @ctx :editing-id editing-id))))
         on-create (mf/use-fn
-                   #(swap! ctx assoc :editing-id (random-uuid) :new? true))
+                   (fn [path]
+                     (swap! ctx assoc :editing-id (random-uuid) :new-path path)))
         on-reset (mf/use-fn
                   #(reset! ctx initial))]
     {:editing? editing?
-     :new? new?
+     :new-path new-path
      :on-edit on-edit
      :on-create on-create
      :on-reset on-reset}))

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

@@ -35,19 +35,27 @@
 
 (mf/defc menu
   [{:keys [group? path]}]
-  (let [{:keys [on-edit]} (sets-context/use-context)
-        edit-name (mf/use-fn
-                   (mf/deps group?)
-                   (fn []
-                     (let [path (if group?
-                                  (sets-context/set-group-path->id path)
-                                  (sets-context/set-path->id path))]
-                       (on-edit path))))
-        delete-set (mf/use-fn #(st/emit! (wdt/delete-token-set-path group? path)))]
+  (let [{:keys [on-create on-edit]} (sets-context/use-context)
+        create-set-at-path
+        (mf/use-fn
+         (mf/deps path)
+         #(on-create path))
+
+        edit-name
+        (mf/use-fn
+         (mf/deps group?)
+         (fn []
+           (let [path (if group?
+                        (sets-context/set-group-path->id path)
+                        (sets-context/set-path->id path))]
+             (on-edit path))))
+
+        delete-set
+        (mf/use-fn
+         #(st/emit! (wdt/delete-token-set-path group? path)))]
     [:ul {:class (stl/css :context-list)}
-     ;; TODO Implement
-     ;; (when (ctob/prefixed-set-path-final-group? prefixed-set-path)
-     ;;   [:& menu-entry {:title "Add set to this group" :on-click js/console.log}])
+     (when group?
+       [:& menu-entry {:title (tr "workspace.token.add-set-to-group") :on-click create-set-at-path}])
      [:& menu-entry {:title (tr "labels.rename") :on-click edit-name}]
      [:& menu-entry {:title (tr "labels.delete")  :on-click delete-set}]]))
 
@@ -66,6 +74,7 @@
     [:& dropdown {:show (boolean mdata)
                   :on-close #(st/emit! wdt/hide-token-set-context-menu)}
      [:div {:class (stl/css :token-set-context-menu)
+            :data-testid "tokens-context-menu-for-set"
             :ref dropdown-ref
             :style {:top top :left left}
             :on-context-menu prevent-default}

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

@@ -201,13 +201,13 @@
 
 (mf/defc add-set-button
   [{:keys [on-open style]}]
-  (let [{:keys [on-create new?]} (sets-context/use-context)
+  (let [{:keys [on-create new-path]} (sets-context/use-context)
         on-click #(do
                     (on-open)
-                    (on-create))
+                    (on-create []))
         can-edit?  (:can-edit (deref refs/permissions))]
     (if (= style "inline")
-      (when-not new?
+      (when-not new-path
         (if can-edit?
           [:div {:class (stl/css :empty-sets-wrapper)}
            [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message)}
@@ -227,9 +227,9 @@
 (mf/defc theme-sets-list
   [{:keys [on-open]}]
   (let [token-sets (mf/deref refs/workspace-ordered-token-sets)
-        {:keys [new?] :as ctx} (sets-context/use-context)]
+        {:keys [new-path] :as ctx} (sets-context/use-context)]
     (if (and (empty? token-sets)
-             (not new?))
+             (not new-path))
       [:& add-set-button {:on-open on-open
                           :style "inline"}]
       [:& h/sortable-container {}