🐛 Fix library update tab UX (#9812)

* 🐛 Fix update library modal UI not working properly when updating a lib

*  Add playwright test for bug 14214
This commit is contained in:
Belén Albeza 2026-05-21 19:50:12 +02:00 committed by GitHub
parent 0e399b7ad8
commit 3fd114550f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 753 additions and 1 deletions

View File

@ -0,0 +1,236 @@
{
"~:features": {
"~#set": [
"layout/grid",
"styles/v2",
"fdata/objects-map",
"components/v2",
"fdata/shape-data-type"
]
},
"~:permissions": {
"~:type": "~:membership",
"~:is-owner": true,
"~:is-admin": true,
"~:can-edit": true,
"~:can-read": true,
"~:is-logged": true
},
"~:has-media-trimmed": false,
"~:comment-thread-seqn": 0,
"~:name": "import component",
"~:revn": 6,
"~:modified-at": "~m1730384055106",
"~:vern": 0,
"~:id": "~u3622460c-3408-81e2-8005-2fd0e55888b7",
"~:is-shared": false,
"~:version": 56,
"~:project-id": "~u3622460c-3408-81e2-8005-2fc9059741e0",
"~:created-at": "~m1730103423332",
"~:data": {
"~:pages": [
"~u3622460c-3408-81e2-8005-2fd0e55888b8"
],
"~:pages-index": {
"~u3622460c-3408-81e2-8005-2fd0e55888b8": {
"~: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}}
],
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1.0,
"~:b": 0.0,
"~:c": 0.0,
"~:d": 1.0,
"~:e": 0.0,
"~:f": 0.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,
"~: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": [
"~u2e0995e6-d90f-80ed-8005-2fd17ece8809"
]
}
},
"~u2e0995e6-d90f-80ed-8005-2fd17ece8809": {
"~#shape": {
"~:y": 221,
"~: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,
"~:hide-in-viewer": true,
"~:name": "Rectangle",
"~:width": 237,
"~:type": "~:frame",
"~:points": [
{"~#point": {"~:x": 234, "~:y": 221}},
{"~#point": {"~:x": 471, "~:y": 221}},
{"~#point": {"~:x": 471, "~:y": 382}},
{"~#point": {"~:x": 234, "~:y": 382}}
],
"~:component-root": true,
"~:shape-ref": "~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a",
"~:show-content": true,
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1.0,
"~:b": 0.0,
"~:c": 0.0,
"~:d": 1.0,
"~:e": 0.0,
"~:f": 0.0
}
},
"~:id": "~u2e0995e6-d90f-80ed-8005-2fd17ece8809",
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
"~:component-id": "~u2e0995e6-d90f-80ed-8005-2fd0c20489ce",
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": 234,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 234, "~:y": 221,
"~:width": 237, "~:height": 161,
"~:x1": 234, "~:y1": 221,
"~:x2": 471, "~:y2": 382
}
},
"~:fills": [],
"~:flip-x": null,
"~:height": 161,
"~:component-file": "~u3622460c-3408-81e2-8005-2fc938010233",
"~:flip-y": null,
"~:shapes": [
"~u2e0995e6-d90f-80ed-8005-2fd17ece880a"
]
}
},
"~u2e0995e6-d90f-80ed-8005-2fd17ece880a": {
"~#shape": {
"~:y": 221,
"~:r1": 0,
"~:r2": 0,
"~:r3": 0,
"~:r4": 0,
"~: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": 237,
"~:type": "~:rect",
"~:points": [
{"~#point": {"~:x": 234, "~:y": 221}},
{"~#point": {"~:x": 471, "~:y": 221}},
{"~#point": {"~:x": 471, "~:y": 382}},
{"~#point": {"~:x": 234, "~:y": 382}}
],
"~:shape-ref": "~u2e0995e6-d90f-80ed-8005-2fd0bd35e183",
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1.0,
"~:b": 0.0,
"~:c": 0.0,
"~:d": 1.0,
"~:e": 0.0,
"~:f": 0.0
}
},
"~:constraints-v": "~:scale",
"~:constraints-h": "~:scale",
"~:id": "~u2e0995e6-d90f-80ed-8005-2fd17ece880a",
"~:parent-id": "~u2e0995e6-d90f-80ed-8005-2fd17ece8809",
"~:frame-id": "~u2e0995e6-d90f-80ed-8005-2fd17ece8809",
"~:strokes": [],
"~:x": 234,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 234, "~:y": 221,
"~:width": 237, "~:height": 161,
"~:x1": 234, "~:y1": 221,
"~:x2": 471, "~:y2": 382
}
},
"~:fills": [{"~:fill-color": "#B1B2B5", "~:fill-opacity": 1}],
"~:flip-x": null,
"~:ry": 0,
"~:height": 161,
"~:flip-y": null
}
}
},
"~:id": "~u3622460c-3408-81e2-8005-2fd0e55888b8",
"~:name": "Page 1",
"~:background": "#e8e9ea"
}
},
"~:id": "~u3622460c-3408-81e2-8005-2fd0e55888b7",
"~:options": {
"~:components-v2": true
},
"~:components": {}
}
}

View File

@ -0,0 +1,243 @@
{
"~:features": {
"~#set": [
"layout/grid",
"styles/v2",
"fdata/objects-map",
"components/v2",
"fdata/shape-data-type"
]
},
"~:permissions": {
"~:type": "~:membership",
"~:is-owner": true,
"~:is-admin": true,
"~:can-edit": true,
"~:can-read": true,
"~:is-logged": true
},
"~:has-media-trimmed": true,
"~:comment-thread-seqn": 0,
"~:name": "published component",
"~:revn": 3,
"~:modified-at": "~m1730103592325",
"~:vern": 0,
"~:id": "~u3622460c-3408-81e2-8005-2fc938010233",
"~:is-shared": true,
"~:version": 56,
"~:project-id": "~u3622460c-3408-81e2-8005-2fc9059741e0",
"~:created-at": "~m1730101410834",
"~:data": {
"~:pages": [
"~u3622460c-3408-81e2-8005-2fc938010234"
],
"~:pages-index": {
"~u3622460c-3408-81e2-8005-2fc938010234": {
"~: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}}
],
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1.0,
"~:b": 0.0,
"~:c": 0.0,
"~:d": 1.0,
"~:e": 0.0,
"~:f": 0.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,
"~: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": [
"~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a"
]
}
},
"~u2e0995e6-d90f-80ed-8005-2fd0bd35e183": {
"~#shape": {
"~:y": 214,
"~:r1": 0,
"~:r2": 0,
"~:r3": 0,
"~:r4": 0,
"~: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": 237,
"~:type": "~:rect",
"~:points": [
{"~#point": {"~:x": 238, "~:y": 214}},
{"~#point": {"~:x": 475, "~:y": 214}},
{"~#point": {"~:x": 475, "~:y": 375}},
{"~#point": {"~:x": 238, "~:y": 375}}
],
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1.0,
"~:b": 0.0,
"~:c": 0.0,
"~:d": 1.0,
"~:e": 0.0,
"~:f": 0.0
}
},
"~:constraints-v": "~:scale",
"~:constraints-h": "~:scale",
"~:id": "~u2e0995e6-d90f-80ed-8005-2fd0bd35e183",
"~:parent-id": "~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a",
"~:frame-id": "~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a",
"~:strokes": [],
"~:x": 238,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 238, "~:y": 214,
"~:width": 237, "~:height": 161,
"~:x1": 238, "~:y1": 214,
"~:x2": 475, "~:y2": 375
}
},
"~:fills": [{"~:fill-color": "#3656b4", "~:fill-opacity": 1}],
"~:flip-x": null,
"~:ry": 0,
"~:height": 161,
"~:flip-y": null
}
},
"~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a": {
"~#shape": {
"~:y": 214,
"~: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,
"~:hide-in-viewer": true,
"~:name": "Rectangle",
"~:width": 237,
"~:type": "~:frame",
"~:points": [
{"~#point": {"~:x": 238, "~:y": 214}},
{"~#point": {"~:x": 475, "~:y": 214}},
{"~#point": {"~:x": 475, "~:y": 375}},
{"~#point": {"~:x": 238, "~:y": 375}}
],
"~:component-root": true,
"~:show-content": true,
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1.0,
"~:b": 0.0,
"~:c": 0.0,
"~:d": 1.0,
"~:e": 0.0,
"~:f": 0.0
}
},
"~:id": "~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a",
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
"~:component-id": "~u2e0995e6-d90f-80ed-8005-2fd0c20489ce",
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": 238,
"~:main-instance": true,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 238, "~:y": 214,
"~:width": 237, "~:height": 161,
"~:x1": 238, "~:y1": 214,
"~:x2": 475, "~:y2": 375
}
},
"~:fills": [],
"~:flip-x": null,
"~:height": 161,
"~:component-file": "~u3622460c-3408-81e2-8005-2fc938010233",
"~:flip-y": null,
"~:shapes": [
"~u2e0995e6-d90f-80ed-8005-2fd0bd35e183"
]
}
}
},
"~:id": "~u3622460c-3408-81e2-8005-2fc938010234",
"~:name": "Page 1"
}
},
"~:id": "~u3622460c-3408-81e2-8005-2fc938010233",
"~:options": {
"~:components-v2": true
},
"~:components": {
"~u2e0995e6-d90f-80ed-8005-2fd0c20489ce": {
"~:id": "~u2e0995e6-d90f-80ed-8005-2fd0c20489ce",
"~:name": "Rectangle",
"~:path": "",
"~:modified-at": "~m1730103592327",
"~:main-instance-id": "~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a",
"~:main-instance-page": "~u3622460c-3408-81e2-8005-2fc938010234"
}
}
}
}

View File

@ -0,0 +1 @@
[]

View File

@ -0,0 +1,224 @@
{
"~#set": [
{
"~:name": "published component",
"~:revn": 3,
"~:modified-at": "~m1730103592325",
"~:vern": 0,
"~:thumbnail-uri": "http://localhost:3449/assets/by-id/878a76a2-6235-4541-ba8a-d4f17cf5253c",
"~:id": "~u3622460c-3408-81e2-8005-2fc938010233",
"~:is-shared": true,
"~:project-id": "~u3622460c-3408-81e2-8005-2fc9059741e0",
"~:created-at": "~m1730101410834",
"~:library-summary": {
"~:components": {
"~:count": 1,
"~:sample": [
{
"~:id": "~u2e0995e6-d90f-80ed-8005-2fd0c20489ce",
"~:name": "Rectangle",
"~:path": "",
"~:modified-at": "~m1730103592327",
"~:main-instance-id": "~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a",
"~:main-instance-page": "~u3622460c-3408-81e2-8005-2fc938010234",
"~:objects": {
"~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a": {
"~#shape": {
"~:y": 214,
"~: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,
"~:hide-in-viewer": true,
"~:name": "Rectangle",
"~:width": 237,
"~:type": "~:frame",
"~:points": [
{
"~#point": {
"~:x": 238,
"~:y": 214
}
},
{
"~#point": {
"~:x": 475,
"~:y": 214
}
},
{
"~#point": {
"~:x": 475,
"~:y": 375
}
},
{
"~#point": {
"~:x": 238,
"~:y": 375
}
}
],
"~:component-root": true,
"~:show-content": true,
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1.0,
"~:b": 0.0,
"~:c": 0.0,
"~:d": 1.0,
"~:e": 0.0,
"~:f": 0.0
}
},
"~:id": "~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a",
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
"~:component-id": "~u2e0995e6-d90f-80ed-8005-2fd0c20489ce",
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
"~:strokes": [],
"~:x": 238,
"~:main-instance": true,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 238,
"~:y": 214,
"~:width": 237,
"~:height": 161,
"~:x1": 238,
"~:y1": 214,
"~:x2": 475,
"~:y2": 375
}
},
"~:fills": [],
"~:flip-x": null,
"~:height": 161,
"~:component-file": "~u3622460c-3408-81e2-8005-2fc938010233",
"~:flip-y": null,
"~:shapes": [
"~u2e0995e6-d90f-80ed-8005-2fd0bd35e183"
]
}
},
"~u2e0995e6-d90f-80ed-8005-2fd0bd35e183": {
"~#shape": {
"~:y": 214,
"~:r1": 0,
"~:r2": 0,
"~:r3": 0,
"~:r4": 0,
"~: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": 237,
"~:type": "~:rect",
"~:points": [
{
"~#point": {
"~:x": 238,
"~:y": 214
}
},
{
"~#point": {
"~:x": 475,
"~:y": 214
}
},
{
"~#point": {
"~:x": 475,
"~:y": 375
}
},
{
"~#point": {
"~:x": 238,
"~:y": 375
}
}
],
"~:proportion-lock": false,
"~:transform-inverse": {
"~#matrix": {
"~:a": 1.0,
"~:b": 0.0,
"~:c": 0.0,
"~:d": 1.0,
"~:e": 0.0,
"~:f": 0.0
}
},
"~:constraints-v": "~:scale",
"~:constraints-h": "~:scale",
"~:id": "~u2e0995e6-d90f-80ed-8005-2fd0bd35e183",
"~:parent-id": "~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a",
"~:frame-id": "~u2e0995e6-d90f-80ed-8005-2fd0c2033a5a",
"~:strokes": [],
"~:x": 238,
"~:proportion": 1,
"~:selrect": {
"~#rect": {
"~:x": 238,
"~:y": 214,
"~:width": 237,
"~:height": 161,
"~:x1": 238,
"~:y1": 214,
"~:x2": 475,
"~:y2": 375
}
},
"~:fills": [
{
"~:fill-color": "#3656b4",
"~:fill-opacity": 1
}
],
"~:flip-x": null,
"~:ry": 0,
"~:height": 161,
"~:flip-y": null
}
}
}
}
]
},
"~:media": {
"~:count": 0,
"~:sample": []
},
"~:colors": {
"~:count": 0,
"~:sample": []
},
"~:typographies": {
"~:count": 0,
"~:sample": []
}
}
}
]
}

View File

@ -110,3 +110,51 @@ test("Bug 10113 - Empty library modal for non-empty library", async ({
workspace.page.getByText("Publish empty library"),
).not.toBeVisible();
});
test("BUG 14214 - Updates tab refreshes after syncing a freshly linked library", async ({
page,
}) => {
const workspace = new WasmWorkspacePage(page);
await workspace.setupEmptyFile(page);
await workspace.mockRPC(
new RegExp(`get\\-file\\?id=${mainFileId}`),
"workspace/get-file-14214_main.json",
);
await workspace.mockRPC(
new RegExp(`get\\-file\\?id=${sharedFileId}`),
"workspace/get-file-14214_shared.json",
);
await workspace.mockRPC(
"get-file-libraries?file-id=*",
"workspace/get-file-libraries-14214.json",
);
await workspace.mockRPC(
"get-team-shared-files?team-id=*",
"workspace/get-team-shared-files-14214.json",
);
await workspace.mockRPC(
"link-file-to-library",
"workspace/link-file-to-library.json",
);
await workspace.goToWorkspace({ fileId: mainFileId, pageId: mainPageId });
// Open the library modal
await workspace.clickAssets();
await workspace.openLibrariesModal();
await workspace.librariesModal
.getByRole("button", { name: "Connect library" })
.click();
// Switch to the Updates tab — the library should appear as needing update.
await workspace.librariesModal.getByRole("tab", { name: "Updates" }).click();
const updatesPanel = workspace.librariesModal.getByRole("tabpanel", {
name: "UPDATES",
});
await updatesPanel.getByRole("button", { name: "Update" }).click();
await expect(
updatesPanel.getByText("There are no Shared Libraries that need update"),
).toBeVisible();
});

View File

@ -1162,7 +1162,7 @@
(update [_ state]
(if (and (not= library-id (:current-file-id state))
(nil? asset-id))
(d/assoc-in-when state [:files library-id :synced-at] (ct/now))
(d/update-in-when state [:files library-id] assoc :synced-at (ct/now))
state))
ptk/WatchEvent