diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js index 9988fe1ead..73e8488316 100644 --- a/frontend/playwright/ui/specs/tokens.spec.js +++ b/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" }); - await expect(tokenContextMenuForSet).toBeVisible(); - await tokenContextMenuForSet.getByText("Rename").click(); + .dblclick(); 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); diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 94dff84af1..0ff9f15831 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs index b4b4f5015e..029244de5b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs +++ b/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}]]]))