🐛 Fix token set selection & rename (#5783)

* 🐛 Fix set selection

* 🐛 Fix set name not being updated

* ♻️ Add better list assertion & test set renaming

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

@@ -298,15 +298,27 @@ test.describe("Tokens: Tokens Tab", () => {
 });
 
 test.describe("Tokens: Sets Tab", () => {
+  const changeSetInput = async (sidebar, setName, finalKey = "Enter") => {
+    const setInput = sidebar.locator("input:focus");
+    await expect(setInput).toBeVisible();
+    await setInput.fill(setName);
+    await setInput.press(finalKey);
+  };
+
   const createSet = async (sidebar, setName, finalKey = "Enter") => {
     const tokensTabButton = sidebar
       .getByRole("button", { name: "Add set" })
       .click();
 
-    const setInput = sidebar.locator("input:focus");
+    await changeSetInput(sidebar, setName, (finalKey = "Enter"));
-    await expect(setInput).toBeVisible();
+  };
-    await setInput.fill(setName);
+
-    await setInput.press(finalKey);
+  const assertSetsList = async (el, sets) => {
+    const buttons = await el.getByRole("button").allTextContents();
+    const filteredButtons = buttons.filter(
+      (text) => text && text !== "Create one.",
+    );
+    await expect(filteredButtons).toEqual(sets);
   };
 
   test("User creates sets tree structure by entering a set path", async ({
@@ -327,11 +339,46 @@ test.describe("Tokens: Sets Tab", () => {
     await createSet(tokenThemesSetsSidebar, "core/colors/light");
     await createSet(tokenThemesSetsSidebar, "core/colors/dark");
 
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core",
+      "colors",
+      "light",
+      "dark",
+    ]);
+
+    // User renames set
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "light" })
+      .click({ button: "right" });
+    await expect(tokenContextMenuForSet).toBeVisible();
+    await tokenContextMenuForSet.getByText("Rename").click();
+    await changeSetInput(tokenThemesSetsSidebar, "light-renamed");
+
     // User cancels during editing
     await createSet(tokenThemesSetsSidebar, "core/colors/dark", "Escape");
 
-    await expect(tokenSetItems).toHaveCount(2);
+    await assertSetsList(tokenThemesSetsSidebar, [
-    await expect(tokenSetGroupItems).toHaveCount(2);
+      "core",
+      "colors",
+      "light-renamed",
+      "dark",
+    ]);
+
+    // Creates nesting by renaming set with double click
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "light-renamed" })
+      .click({ button: "right" });
+    await expect(tokenContextMenuForSet).toBeVisible();
+    await tokenContextMenuForSet.getByText("Rename").click();
+    await changeSetInput(tokenThemesSetsSidebar, "nested/light");
+
+    await assertSetsList(tokenThemesSetsSidebar, [
+      "core",
+      "colors",
+      "nested",
+      "light",
+      "dark",
+    ]);
 
     // Create set in group
     await tokenThemesSetsSidebar
@@ -339,13 +386,16 @@ test.describe("Tokens: Sets Tab", () => {
       .click({ button: "right" });
     await expect(tokenContextMenuForSet).toBeVisible();
     await tokenContextMenuForSet.getByText("Add set to this group").click();
+    await changeSetInput(tokenThemesSetsSidebar, "sizes/small");
 
-    const setInput = tokenThemesSetsSidebar.locator("input:focus");
+    await assertSetsList(tokenThemesSetsSidebar, [
-    await expect(setInput).toBeVisible();
+      "core",
-    await setInput.fill("sizes/small");
+      "colors",
-    await setInput.press("Enter");
+      "nested",
-
+      "light",
-    await expect(tokenSetItems).toHaveCount(3);
+      "dark",
-    await expect(tokenSetGroupItems).toHaveCount(3);
+      "sizes",
+      "small",
+    ]);
   });
 });

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

@@ -19,6 +19,7 @@
    [app.main.data.notifications :as ntf]
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.data.workspace.tokens.selected-set :as dwts]
+   [app.main.data.workspace.undo :as dwu]
    [app.main.store :as st]
    [app.main.ui.workspace.tokens.update :as wtu]
    [app.util.i18n :refer [tr]]
@@ -221,15 +222,20 @@
   (ptk/reify ::drop-token-set
     ptk/WatchEvent
     (watch [it state _]
-      (try
+      (let [undo-id (js/Symbol)]
-        (when-let [changes (clt/generate-move-token-set (pcb/empty-changes it) (get-tokens-lib state) drop-opts)]
+        (try
-          (rx/of
+          (when-let [changes (clt/generate-move-token-set (pcb/empty-changes it) (get-tokens-lib state) drop-opts)]
-           (dch/commit-changes changes)
+            (rx/of
-           (some-> (get-in changes [:redo-changes 0 :to-path]) (dwts/set-selected-token-set-name))
+             (dwu/start-undo-transaction undo-id)
-           (wtu/update-workspace-tokens)))
+             (dch/commit-changes changes)
-        (catch js/Error e
+             (some-> (get-in changes [:redo-changes 0 :to-path])
-          (rx/of
+                     (ctob/join-set-path)
-           (drop-error (ex-data e))))))))
+                     (dwts/set-selected-token-set-name))
+             (wtu/update-workspace-tokens)
+             (dwu/commit-undo-transaction undo-id)))
+          (catch js/Error e
+            (rx/of
+             (drop-error (ex-data e)))))))))
 
 (defn update-create-token
   [{:keys [token prev-token-name]}]

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

@@ -37,7 +37,7 @@
   (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 (ctob/update-name token-set set-name))))
+  (st/emit! (wdt/update-token-set (:name token-set) (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)))