🐛 Fix sets and set groups with same name cannot be renamed

frontend/playwright/ui/specs/tokens.spec.js

@@ -511,9 +511,7 @@ test.describe("Tokens: Sets Tab", () => {
     // Creates nesting by renaming set with double click
     await tokenThemesSetsSidebar
       .getByRole("button", { name: "light-renamed" })
-      .click({ button: "right" });
+      .dblclick();
-    await expect(tokenContextMenuForSet).toBeVisible();
-    await tokenContextMenuForSet.getByText("Rename").click();
     await changeSetInput(tokenThemesSetsSidebar, "nested/light");
 
     await assertSetsList(tokenThemesSetsSidebar, [
@@ -558,6 +556,45 @@ test.describe("Tokens: Sets Tab", () => {
     ]);
   });
 
+  test("User can create & edit sets and set groups with an identical name", async ({
+    page,
+  }) => {
+    const { tokenThemesSetsSidebar, tokenContextMenuForSet } =
+      await setupEmptyTokensFile(page);
+
+    const tokensTabButton = tokenThemesSetsSidebar
+      .getByRole("button", { name: "Add set" })
+      .click();
+
+    await createSet(tokenThemesSetsSidebar, "core/colors");
+    await createSet(tokenThemesSetsSidebar, "core");
+    await assertSetsList(tokenThemesSetsSidebar, ["core", "colors", "core"]);
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "core" })
+      .nth(0)
+      .dblclick();
+    await changeSetInput(tokenThemesSetsSidebar, "core-group-renamed");
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core-group-renamed",
+      "colors",
+      "core",
+    ]);
+
+    await page.keyboard.press(`ControlOrMeta+z`);
+    await assertSetsList(tokenThemesSetsSidebar, ["core", "colors", "core"]);
+
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "core" })
+      .nth(1)
+      .dblclick();
+    await changeSetInput(tokenThemesSetsSidebar, "core-set-renamed");
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core",
+      "colors",
+      "core-set-renamed",
+    ]);
+  });
+
   test("Fold/Unfold set", async ({ page }) => {
     const { tokenThemesSetsSidebar, tokenSetGroupItems } =
       await setupTokensFile(page);

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

@@ -65,6 +65,11 @@
     (st/emit! (ptk/data-event ::ev/event {::ev/name "create-token-set" :name name})
               (dt/create-token-set name))))
 
+(defn group-edition-id
+  "Prefix editing groups `edition-id` so it can be differentiated from sets with the same id."
+  [edition-id]
+  (str "group-" edition-id))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; COMPONENTS
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -166,6 +171,7 @@
                         {:position (dom/get-client-position event)
                          :is-group true
                          :id id
+                         :edition-id (group-edition-id id)
                          :path tree-path})))))
 
         on-collapse-click
@@ -176,7 +182,7 @@
            (on-toggle-collapse tree-path)))
 
         on-double-click
-        (mf/use-fn (mf/deps id) #(on-start-edition id))
+        (mf/use-fn (mf/deps id) #(on-start-edition (group-edition-id id)))
 
         on-checkbox-click
         (mf/use-fn
@@ -268,6 +274,7 @@
                         {:position (dom/get-client-position event)
                          :is-group false
                          :id id
+                         :edition-id id
                          :path tree-path})))))
 
         on-double-click
@@ -399,7 +406,7 @@
           :is-active (is-token-set-group-active path)
           :is-selected false
           :is-draggable is-draggable
-          :is-editing (= edition-id id)
+          :is-editing (= edition-id (group-edition-id id))
           :is-collapsed (collapsed? path)
           :on-select on-select
 

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

@@ -34,7 +34,7 @@
 
 (mf/defc menu*
   {::mf/private true}
-  [{:keys [is-group id path]}]
+  [{:keys [is-group id edition-id path]}]
   (let [create-set-at-path
         (mf/use-fn (mf/deps path) #(st/emit! (dt/start-token-set-creation path)))
 
@@ -42,7 +42,7 @@
         (mf/use-fn
          (mf/deps id)
          (fn []
-           (st/emit! (dt/start-token-set-edition id))))
+           (st/emit! (dt/start-token-set-edition edition-id))))
 
         on-delete
         (mf/use-fn
@@ -57,7 +57,7 @@
 
 (mf/defc token-set-context-menu*
   []
-  (let [{:keys [position is-group id path]}
+  (let [{:keys [position is-group id edition-id path]}
         (mf/deref ref:token-sets-context-menu)
 
         position-top
@@ -78,4 +78,5 @@
             :on-context-menu prevent-default}
       [:> menu* {:is-group is-group
                  :id id
+                 :edition-id edition-id
                  :path path}]]]))