fix(web): disable the save button when creating a new item with inval…

…id metadata (#1327) * fix: disable save button with invalid value * add: test
reearth · Dec 5, 2024 · 4204334 · 4204334
1 parent c0799b4
commit 4204334
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/web/e2e/project/item/metadata/text.spec.ts b/web/e2e/project/item/metadata/text.spec.ts
@@ -132,6 +132,10 @@ test("Text metadata editing has succeeded", async ({ page }) => {
   await expect(page.getByRole("main")).toContainText("new text1 description");
   await expect(page.getByRole("textbox").nth(0)).toHaveValue("text2");
   await expect(page.getByRole("textbox").nth(1)).toHaveValue("text1");
+  await page.getByLabel("new text1(unique)").click();
+  await page.getByLabel("new text1(unique)").fill("text22");
+  await expect(page.getByRole("button", { name: "Save" })).toBeDisabled();
+  await page.getByLabel("new text1(unique)").fill("text2");
 
   await page.getByRole("button", { name: "Save" }).click();
   await closeNotification(page);

diff --git a/web/src/components/molecules/Content/Form/index.tsx b/web/src/components/molecules/Content/Form/index.tsx
@@ -463,6 +463,19 @@ const ContentForm: React.FC<Props> = ({
     }
   }, [itemId, metaFieldsGet, onMetaItemUpdate, item?.metadata?.id]);
 
+  const handleMetaValuesChange = useCallback(async () => {
+    if (itemId) return;
+    try {
+      await metaForm.validateFields();
+    } catch (e) {
+      if ((e as ValidateErrorEntity).errorFields.length > 0) {
+        setIsDisabled(true);
+        return;
+      }
+    }
+    setIsDisabled(false);
+  }, [itemId, metaForm]);
+
   const items: MenuProps["items"] = useMemo(() => {
     const menuItems = [
       {
@@ -679,7 +692,11 @@ const ContentForm: React.FC<Props> = ({
         </FormItemsWrapper>
       </StyledForm>
       <SideBarWrapper>
-        <Form form={metaForm} layout="vertical" initialValues={initialMetaFormValues}>
+        <Form
+          form={metaForm}
+          layout="vertical"
+          initialValues={initialMetaFormValues}
+          onValuesChange={handleMetaValuesChange}>
           <ContentSidebarWrapper item={item} onNavigateToRequest={onNavigateToRequest} />
           {model?.metadataSchema?.fields?.map(field => {
             const FieldComponent = FIELD_TYPE_COMPONENT_MAP[field.type];