feat: save variable/resource even with validation errors (#4798)

Closes https://github.com/webstudio-is/webstudio/issues/4753

Variable validation especially resources shouldn't be too destructive.
User may configure complex resource and get it all wiped out because url
is invalid or header has empty value.

Here I tweaked the logic to require only not duplicated "name" and
everything else is saved even when invalid.

This will not break anything in generation process and will still show
user an error.

<img width="649" alt="Screenshot 2025-01-28 at 14 18 11"
src="https://github.com/user-attachments/assets/0916d250-a864-4362-bf1f-67b6c15024ef"
/>
This commit is contained in:
Bogdan Chadkin
2025-01-28 18:24:43 +04:00
committed by GitHub
parent 6b04c9762d
commit c0b73ba145
4 changed files with 17 additions and 9 deletions

View File

@ -813,7 +813,14 @@ export const VariablePopoverTrigger = ({
if (requiresUpgrade) {
return;
}
if (event.currentTarget.checkValidity()) {
const nameElement =
event.currentTarget.elements.namedItem("name");
// make sure only name is valid and allow to save everything else
// to avoid loosing complex configuration when closed accidentally
if (
nameElement instanceof HTMLInputElement &&
nameElement.checkValidity()
) {
const formData = new FormData(event.currentTarget);
panelRef.current?.save(formData);
// close popover whenever new variable is created

View File

@ -38,7 +38,7 @@
"@lexical/selection": "^0.21.0",
"@lexical/utils": "^0.21.0",
"@lezer/common": "^1.2.3",
"@lezer/css": "^1.1.9",
"@lezer/css": "^1.1.10",
"@lezer/highlight": "^1.2.1",
"@nanostores/react": "^0.8.0",
"@nkzw/use-relative-time": "^1.1.0",

View File

@ -158,6 +158,7 @@ export const FloatingPanel = ({
width={width}
height={height}
{...position}
aria-describedby={undefined}
onInteractOutside={(event) => {
// When a dialog is centered, we don't want to close it when clicking outside
// This allows having inline and left positioned dialogs open at the same time as a centered dialog,

14
pnpm-lock.yaml generated
View File

@ -182,8 +182,8 @@ importers:
specifier: ^1.2.3
version: 1.2.3
'@lezer/css':
specifier: ^1.1.9
version: 1.1.9
specifier: ^1.1.10
version: 1.1.10
'@lezer/highlight':
specifier: ^1.2.1
version: 1.2.1
@ -3699,8 +3699,8 @@ packages:
'@lezer/common@1.2.3':
resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
'@lezer/css@1.1.9':
resolution: {integrity: sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==}
'@lezer/css@1.1.10':
resolution: {integrity: sha512-V5/89eDapjeAkWPBpWEfQjZ1Hag3aYUUJOL8213X0dFRuXJ4BXa5NKl9USzOnaLod4AOpmVCkduir2oKwZYZtg==}
'@lezer/highlight@1.2.1':
resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
@ -9805,7 +9805,7 @@ snapshots:
'@codemirror/language': 6.10.8
'@codemirror/state': 6.5.1
'@lezer/common': 1.2.3
'@lezer/css': 1.1.9
'@lezer/css': 1.1.10
'@codemirror/lang-html@6.4.9':
dependencies:
@ -9816,7 +9816,7 @@ snapshots:
'@codemirror/state': 6.5.1
'@codemirror/view': 6.36.2
'@lezer/common': 1.2.3
'@lezer/css': 1.1.9
'@lezer/css': 1.1.10
'@lezer/html': 1.3.10
'@codemirror/lang-javascript@6.2.2':
@ -10657,7 +10657,7 @@ snapshots:
'@lezer/common@1.2.3': {}
'@lezer/css@1.1.9':
'@lezer/css@1.1.10':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1