🐛 Fix user cant submit existing token when editing name only (#5658)

* 🐛 Fix user cant submit existing token when editing it

frontend/playwright/data/workspace/get-file-fragment-tokens.json

@@ -0,0 +1,469 @@
+{
+  "~:id": "~u51e13852-1a8e-8037-8005-9eabb500f7c7",
+  "~:file-id": "~u51e13852-1a8e-8037-8005-9e9413a1f1f6",
+  "~:created-at": "~m1737542758401",
+  "~:data": {
+    "~:options": {},
+    "~:objects": {
+      "~u00000000-0000-0000-0000-000000000000": {
+        "~#shape": {
+          "~:y": 0,
+          "~:hide-fill-on-export": false,
+          "~:transform": {
+            "~#matrix": {
+              "~:a": 1.0,
+              "~:b": 0.0,
+              "~:c": 0.0,
+              "~:d": 1.0,
+              "~:e": 0.0,
+              "~:f": 0.0
+            }
+          },
+          "~:rotation": 0,
+          "~:name": "Root Frame",
+          "~:width": 0.01,
+          "~:type": "~:frame",
+          "~:points": [
+            {
+              "~#point": {
+                "~:x": 0.0,
+                "~:y": 0.0
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 0.01,
+                "~:y": 0.0
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 0.01,
+                "~:y": 0.01
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 0.0,
+                "~:y": 0.01
+              }
+            }
+          ],
+          "~:r2": 0,
+          "~:proportion-lock": false,
+          "~:transform-inverse": {
+            "~#matrix": {
+              "~:a": 1.0,
+              "~:b": 0.0,
+              "~:c": 0.0,
+              "~:d": 1.0,
+              "~:e": 0.0,
+              "~:f": 0.0
+            }
+          },
+          "~:r3": 0,
+          "~:r1": 0,
+          "~:id": "~u00000000-0000-0000-0000-000000000000",
+          "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+          "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+          "~:strokes": [],
+          "~:x": 0,
+          "~:proportion": 1.0,
+          "~:r4": 0,
+          "~:selrect": {
+            "~#rect": {
+              "~:x": 0,
+              "~:y": 0,
+              "~:width": 0.01,
+              "~:height": 0.01,
+              "~:x1": 0,
+              "~:y1": 0,
+              "~:x2": 0.01,
+              "~:y2": 0.01
+            }
+          },
+          "~:fills": [
+            {
+              "~:fill-color": "#FFFFFF",
+              "~:fill-opacity": 1
+            }
+          ],
+          "~:flip-x": null,
+          "~:height": 0.01,
+          "~:flip-y": null,
+          "~:shapes": [
+            "~uc5b31054-fb6d-80a9-8005-9eab7c0c8759",
+            "~uc5b31054-fb6d-80a9-8005-9eab169af180",
+            "~uc5b31054-fb6d-80a9-8005-9eab3a0c8159"
+          ]
+        }
+      },
+      "~uc5b31054-fb6d-80a9-8005-9eab169af180": {
+        "~#shape": {
+          "~:y": 605.5,
+          "~:transform": {
+            "~#matrix": {
+              "~:a": 1.0,
+              "~:b": 0.0,
+              "~:c": 0.0,
+              "~:d": 1.0,
+              "~:e": 0.0,
+              "~:f": 0.0
+            }
+          },
+          "~:rotation": 0,
+          "~:grow-type": "~:fixed",
+          "~:hide-in-viewer": false,
+          "~:name": "Rectangle",
+          "~:width": 278,
+          "~:type": "~:rect",
+          "~:points": [
+            {
+              "~#point": {
+                "~:x": 388,
+                "~:y": 605.5
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 666,
+                "~:y": 605.5
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 666,
+                "~:y": 680.5
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 388,
+                "~:y": 680.5
+              }
+            }
+          ],
+          "~:r2": 8,
+          "~:proportion-lock": false,
+          "~:transform-inverse": {
+            "~#matrix": {
+              "~:a": 1.0,
+              "~:b": 0.0,
+              "~:c": 0.0,
+              "~:d": 1.0,
+              "~:e": 0.0,
+              "~:f": 0.0
+            }
+          },
+          "~:layout-item-v-sizing": "~:fix",
+          "~:r3": 8,
+          "~:r1": 8,
+          "~:id": "~uc5b31054-fb6d-80a9-8005-9eab169af180",
+          "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+          "~:applied-tokens": {
+            "~:fill": "button.primary.background",
+            "~:r1": "button.borderRadius",
+            "~:r2": "button.borderRadius",
+            "~:r3": "button.borderRadius",
+            "~:r4": "button.borderRadius"
+          },
+          "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+          "~:strokes": [],
+          "~:x": 388,
+          "~:proportion": 1,
+          "~:r4": 8,
+          "~:selrect": {
+            "~#rect": {
+              "~:x": 388,
+              "~:y": 605.5,
+              "~:width": 278,
+              "~:height": 75,
+              "~:x1": 388,
+              "~:y1": 605.5,
+              "~:x2": 666,
+              "~:y2": 680.5
+            }
+          },
+          "~:fills": [
+            {
+              "~:fill-color": "#7f9cf5"
+            }
+          ],
+          "~:flip-x": null,
+          "~:height": 75,
+          "~:flip-y": null
+        }
+      },
+      "~uc5b31054-fb6d-80a9-8005-9eab3a0c8159": {
+        "~#shape": {
+          "~:y": 625,
+          "~:transform": {
+            "~#matrix": {
+              "~:a": 1.0,
+              "~:b": 0.0,
+              "~:c": 0.0,
+              "~:d": 1.0,
+              "~:e": 0.0,
+              "~:f": 0.0
+            }
+          },
+          "~:rotation": 0,
+          "~:grow-type": "~:auto-width",
+          "~:content": {
+            "~:type": "root",
+            "~:children": [
+              {
+                "~:type": "paragraph-set",
+                "~:children": [
+                  {
+                    "~:line-height": "1.2",
+                    "~:font-style": "normal",
+                    "~:children": [
+                      {
+                        "~:line-height": "1.2",
+                        "~:font-style": "normal",
+                        "~:typography-ref-id": null,
+                        "~:text-transform": "none",
+                        "~:text-align": "left",
+                        "~:font-id": "sourcesanspro",
+                        "~:font-size": "30",
+                        "~:font-weight": "400",
+                        "~:typography-ref-file": null,
+                        "~:text-direction": "ltr",
+                        "~:font-variant-id": "regular",
+                        "~:text-decoration": "none",
+                        "~:letter-spacing": "0",
+                        "~:fills": [
+                          {
+                            "~:fill-color": "#ffffff"
+                          }
+                        ],
+                        "~:font-family": "sourcesanspro",
+                        "~:text": "Button"
+                      }
+                    ],
+                    "~:typography-ref-id": null,
+                    "~:text-transform": "none",
+                    "~:text-align": "left",
+                    "~:font-id": "sourcesanspro",
+                    "~:key": "2623a",
+                    "~:font-size": "30",
+                    "~:font-weight": "400",
+                    "~:typography-ref-file": null,
+                    "~:text-direction": "ltr",
+                    "~:type": "paragraph",
+                    "~:font-variant-id": "regular",
+                    "~:text-decoration": "none",
+                    "~:letter-spacing": "0",
+                    "~:fills": [
+                      {
+                        "~:fill-color": "#ffffff"
+                      }
+                    ],
+                    "~:font-family": "sourcesanspro"
+                  }
+                ]
+              }
+            ]
+          },
+          "~:hide-in-viewer": false,
+          "~:name": "Button",
+          "~:width": 87,
+          "~:type": "~:text",
+          "~:points": [
+            {
+              "~#point": {
+                "~:x": 483.5,
+                "~:y": 625
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 570.5,
+                "~:y": 625
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 570.5,
+                "~:y": 661
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 483.5,
+                "~:y": 661
+              }
+            }
+          ],
+          "~:transform-inverse": {
+            "~#matrix": {
+              "~:a": 1.0,
+              "~:b": 0.0,
+              "~:c": 0.0,
+              "~:d": 1.0,
+              "~:e": 0.0,
+              "~:f": 0.0
+            }
+          },
+          "~:id": "~uc5b31054-fb6d-80a9-8005-9eab3a0c8159",
+          "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+          "~:applied-tokens": {
+            "~:fill": "button.primary.text"
+          },
+          "~:position-data": [
+            {
+              "~#rect": {
+                "~:y": 662.3333345651627,
+                "~:font-style": "normal",
+                "~:text-transform": "none",
+                "~:font-size": "30px",
+                "~:font-weight": "400",
+                "~:y1": -1.3333333730697632,
+                "~:width": 86.60417175292969,
+                "~:text-decoration": "none solid rgb(0, 0, 0)",
+                "~:letter-spacing": "normal",
+                "~:x": 483.5,
+                "~:x1": 0,
+                "~:y2": 37.33333456516266,
+                "~:fills": [
+                  {
+                    "~:fill-color": "#ffffff"
+                  }
+                ],
+                "~:x2": 86.60417175292969,
+                "~:direction": "ltr",
+                "~:font-family": "sourcesanspro",
+                "~:height": 38.66666793823242,
+                "~:text": "Button"
+              }
+            }
+          ],
+          "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+          "~:x": 483.5,
+          "~:selrect": {
+            "~#rect": {
+              "~:x": 483.5,
+              "~:y": 625,
+              "~:width": 87,
+              "~:height": 36,
+              "~:x1": 483.5,
+              "~:y1": 625,
+              "~:x2": 570.5,
+              "~:y2": 661
+            }
+          },
+          "~:flip-x": null,
+          "~:height": 36,
+          "~:flip-y": null
+        }
+      },
+      "~uc5b31054-fb6d-80a9-8005-9eab7c0c8759": {
+        "~#shape": {
+          "~:y": 396,
+          "~:transform": {
+            "~#matrix": {
+              "~:a": 1.0,
+              "~:b": 0.0,
+              "~:c": 0.0,
+              "~:d": 1.0,
+              "~:e": 0.0,
+              "~:f": 0.0
+            }
+          },
+          "~:rotation": 0,
+          "~:grow-type": "~:fixed",
+          "~:hide-in-viewer": false,
+          "~:name": "Rectangle",
+          "~:width": 494,
+          "~:type": "~:rect",
+          "~:points": [
+            {
+              "~#point": {
+                "~:x": 280,
+                "~:y": 396
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 774,
+                "~:y": 396
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 774,
+                "~:y": 890
+              }
+            },
+            {
+              "~#point": {
+                "~:x": 280,
+                "~:y": 890
+              }
+            }
+          ],
+          "~:r2": 8,
+          "~:proportion-lock": false,
+          "~:transform-inverse": {
+            "~#matrix": {
+              "~:a": 1.0,
+              "~:b": 0.0,
+              "~:c": 0.0,
+              "~:d": 1.0,
+              "~:e": 0.0,
+              "~:f": 0.0
+            }
+          },
+          "~:r3": 8,
+          "~:r1": 8,
+          "~:id": "~uc5b31054-fb6d-80a9-8005-9eab7c0c8759",
+          "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+          "~:applied-tokens": {
+            "~:fill": "card.background",
+            "~:r1": "card.borderRadius",
+            "~:r2": "card.borderRadius",
+            "~:r3": "card.borderRadius",
+            "~:r4": "card.borderRadius"
+          },
+          "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+          "~:strokes": [],
+          "~:x": 280,
+          "~:proportion": 1,
+          "~:r4": 8,
+          "~:selrect": {
+            "~#rect": {
+              "~:x": 280,
+              "~:y": 396,
+              "~:width": 494,
+              "~:height": 494,
+              "~:x1": 280,
+              "~:y1": 396,
+              "~:x2": 774,
+              "~:y2": 890
+            }
+          },
+          "~:fills": [
+            {
+              "~:fill-color": "#ffffff"
+            }
+          ],
+          "~:flip-x": null,
+          "~:height": 494,
+          "~:flip-y": null
+        }
+      }
+    },
+    "~:id": "~u51e13852-1a8e-8037-8005-9e9413a1f1f7",
+    "~:name": "Page 1",
+    "~:background": "#e8eae9",
+    "~:guides": {
+      "~uc5b31054-fb6d-80a9-8005-9eaaba69431e": {
+        "~:position": 182,
+        "~:frame-id": null,
+        "~:id": "~uc5b31054-fb6d-80a9-8005-9eaaba69431e",
+        "~:axis": "~:x"
+      }
+    }
+  }
+}

frontend/playwright/ui/pages/WorkspacePage.js

@@ -89,8 +89,12 @@ export class WorkspacePage extends BaseWebSocketPage {
       "token-update-create-modal",
     );
     this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar");
+    this.tokensSidebar = page.getByTestId("tokens-sidebar");
     this.tokenSetItems = page.getByTestId("tokens-set-item");
     this.tokenSetGroupItems = page.getByTestId("tokens-set-group-item");
+    this.tokenContextMenuForToken = page.getByTestId(
+      "tokens-context-menu-for-token",
+    );
   }
 
   async goToWorkspace({

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

@@ -7,7 +7,7 @@ test.beforeEach(async ({ page }) => {
   await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json");
 });
 
-const setupFileWithTokens = async (page) => {
+const setupEmptyTokensFile = async (page) => {
   const workspacePage = new WorkspacePage(page);
   await workspacePage.setupEmptyFile();
   await workspacePage.mockRPC(
@@ -29,12 +29,44 @@ const setupFileWithTokens = async (page) => {
   };
 };
 
+const setupTokensFile = async (page) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    "get-team?id=*",
+    "workspace/get-team-tokens.json",
+  );
+  await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-tokens.json");
+  await workspacePage.mockRPC(
+    /get\-file\-fragment\?/,
+    "workspace/get-file-fragment-tokens.json",
+  );
+
+  await workspacePage.goToWorkspace({
+    fileId: "51e13852-1a8e-8037-8005-9e9413a1f1f6",
+    pageId: "51e13852-1a8e-8037-8005-9e9413a1f1f7",
+  });
+
+  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+  await tokensTabButton.click();
+
+  return {
+    workspacePage,
+    tokensUpdateCreateModal: workspacePage.tokensUpdateCreateModal,
+    tokenThemesSetsSidebar: workspacePage.tokenThemesSetsSidebar,
+    tokenSetItems: workspacePage.tokenSetItems,
+    tokenSetGroupItems: workspacePage.tokenSetGroupItems,
+    tokensSidebar: workspacePage.tokensSidebar,
+    tokenContextMenuForToken: workspacePage.tokenContextMenuForToken,
+  };
+};
+
 test.describe("Tokens: Tokens Tab", () => {
   test("Clicking tokens tab button opens tokens sidebar tab", async ({
     page,
   }) => {
     const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupFileWithTokens(page);
+      await setupEmptyTokensFile(page);
 
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
 
@@ -46,7 +78,7 @@ test.describe("Tokens: Tokens Tab", () => {
     page,
   }) => {
     const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupFileWithTokens(page);
+      await setupEmptyTokensFile(page);
 
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
     await tokensTabPanel.getByTitle("Add token: Color").click();
@@ -106,9 +138,56 @@ test.describe("Tokens: Tokens Tab", () => {
     ).toHaveAttribute("aria-checked", "true");
   });
 
+  test("User edits token and auto created set show up in the sidebar", async ({
+    page,
+  }) => {
+    const {
+      workspacePage,
+      tokensUpdateCreateModal,
+      tokenThemesSetsSidebar,
+      tokensSidebar,
+      tokenContextMenuForToken,
+    } = await setupTokensFile(page);
+
+    await expect(tokensSidebar).toBeVisible();
+
+    const tokensColorGroup = tokensSidebar.getByRole("button", {
+      name: "Color 92",
+    });
+    await expect(tokensColorGroup).toBeVisible;
+    await tokensColorGroup.click();
+
+    const colorToken = tokensSidebar.getByRole("button", {
+      name: "colors.blue.100",
+    });
+    await expect(colorToken).toBeVisible;
+    await colorToken.click({ button: "right" });
+
+    await expect(tokenContextMenuForToken).toBeVisible();
+    await tokenContextMenuForToken.getByText("Edit token").click();
+
+    await expect(tokensUpdateCreateModal).toBeVisible();
+
+    const nameField = tokensUpdateCreateModal.getByLabel("Name");
+    await nameField.pressSequentially(".changed");
+
+    const submitButton = tokensUpdateCreateModal.getByRole("button", {
+      name: "Save",
+    });
+    await expect(submitButton).toBeEnabled();
+    await submitButton.click();
+
+    await expect(tokensUpdateCreateModal).not.toBeVisible();
+
+    const colorTokenChanged = tokensSidebar.getByRole("button", {
+      name: "colors.blue.100.changed",
+    });
+    expect(colorTokenChanged).toBeVisible();
+  });
+
   test("User creates grouped color token", async ({ page }) => {
     const { workspacePage, tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupFileWithTokens(page);
+      await setupEmptyTokensFile(page);
 
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
     await tokensTabPanel.getByTitle("Add token: Color").click();
@@ -156,7 +235,7 @@ test.describe("Tokens: Sets Tab", () => {
   //     tokenThemesSetsSidebar,
   //     tokenSetItems,
   //     tokenSetGroupItems,
-  //   } = await setupFileWithTokens(page);
+  //   } = await setupEmptyTokensFile(page);
   //
   //   const tokensTabButton = tokenThemesSetsSidebar
   //     .getByRole("button", { name: "Add set" })

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

@@ -392,6 +392,7 @@
     [:& dropdown {:show is-open?
                   :on-close #(st/emit! dt/hide-token-context-menu)}
      [:div {:class (stl/css :token-context-menu)
+            :data-testid "tokens-context-menu-for-token"
             :ref dropdown-ref
             :data-direction dropdown-direction
             :style {:--bottom (if (= dropdown-direction "up")

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

@@ -216,7 +216,8 @@
 (mf/defc form
   {::mf/wrap-props false}
   [{:keys [token token-type action selected-token-set-name]}]
-  (let [token (or token {:type token-type})
+  (let [create? (not (instance? ctob/Token token))
+        token (or token {:type token-type})
         token-properties (wtty/get-token-properties token)
         color? (wtt/color-token? token)
         selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
@@ -292,7 +293,8 @@
         color-ramp-open? (mf/use-state false)
         value-input-ref (mf/use-ref nil)
         value-ref (mf/use-var (:value token))
-        token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
+        token-resolve-result* (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
+        token-resolve-result (deref token-resolve-result*)
         set-resolve-value
         (mf/use-fn
          (fn [token-or-err]
@@ -301,7 +303,7 @@
                      token-or-err
                      (:resolved-value token-or-err))]
              (when color? (reset! color (if error? nil v)))
-             (reset! token-resolve-result v))))
+             (reset! token-resolve-result* v))))
         on-update-value-debounced (use-debonced-resolve-callback name-ref token active-theme-tokens set-resolve-value)
         on-update-value (mf/use-fn
                          (mf/deps on-update-value-debounced)
@@ -321,10 +323,10 @@
                                 (fn []
                                   (swap! color-ramp-open? not)))
 
-        value-error? (seq (:errors @token-resolve-result))
+        value-error? (seq (:errors token-resolve-result))
         valid-value-field? (and
                             (not value-error?)
-                            (valid-value? @token-resolve-result))
+                            (valid-value? token-resolve-result))
 
         ;; Description
         description-ref (mf/use-var (:description token))
@@ -395,6 +397,22 @@
            (dom/prevent-default e)
            (modal/hide!)))]
 
+    ;; Clear form token cache on mount
+    (mf/use-effect
+     (fn []
+       (reset! form-token-cache-atom nil)))
+
+    ;; Update the value when editing an existing token
+    ;; so the user doesn't have to interact with the form to validate the token
+    (mf/use-effect
+     (mf/deps create? resolved-tokens token token-resolve-result set-resolve-value)
+     (fn []
+       (when (and (not create?)
+                  (not token-resolve-result)
+                  resolved-tokens)
+         (-> (get resolved-tokens @name-ref)
+             (set-resolve-value)))))
+
     [:form {:class (stl/css :form-wrapper)
             :on-submit on-submit}
      [:div {:class (stl/css :token-rows)}
@@ -443,10 +461,10 @@
           [:> input-token-color-bullet*
            {:color @color :on-click on-display-colorpicker}])]
        (when @color-ramp-open?
-         [:> ramp* {:color (some-> (or @token-resolve-result (:value token))
+         [:> ramp* {:color (some-> (or token-resolve-result (:value token))
                                    (tinycolor/valid-color))
                     :on-change on-update-color}])
-       [:& token-value-or-errors {:result-or-errors @token-resolve-result}]]
+       [:& token-value-or-errors {:result-or-errors token-resolve-result}]]
 
       [:div {:class (stl/css :input-row)}
        [:> input-tokens*

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

@@ -370,7 +370,8 @@
         (use-resize-hook :tokens 200 38 400 :y false nil)]
     [:div {:class (stl/css :sidebar-wrapper)}
      [:& themes-sets-tab {:resize-height size-pages-opened}]
-     [:article {:class (stl/css :tokens-section-wrapper)}
+     [:article {:class (stl/css :tokens-section-wrapper)
+                :data-testid "tokens-sidebar"}
       [:div {:class (stl/css :resize-area-horiz)
              :on-pointer-down on-pointer-down-pages
              :on-lost-pointer-capture on-lost-pointer-capture-pages