fix(web): enable "use as title" option for text, textArea, and markdo…

…wnText only (#1305) * impl * fix: e2e tests
reearth · Nov 18, 2024 · 095131f · 095131f
1 parent f17321e
commit 095131f
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 23 deletions.
diff --git a/web/e2e/project/item/fields/asset.spec.ts b/web/e2e/project/item/fields/asset.spec.ts
@@ -124,7 +124,7 @@ test("Asset field editing has succeeded", async ({ page }) => {
   await page.getByLabel("Description(optional)").click();
   await page.getByLabel("Description(optional)").fill("new asset1 description");
   await page.getByLabel("Support multiple values").check();
-  await page.getByLabel("Use as title").check();
+  await expect(page.getByLabel("Use as title")).toBeHidden();
   await page.getByRole("tab", { name: "Validation" }).click();
   await page.getByLabel("Make field required").check();
   await page.getByLabel("Set field as unique").check();
@@ -148,12 +148,12 @@ test("Asset field editing has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
   await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText(
-    "new asset1 *#new-asset1(unique)Title",
+    "new asset1 *#new-asset1(unique)",
   );
   await page.getByText("Content").click();
   await expect(page.locator("thead")).toContainText("new asset1");
   await page.getByRole("button", { name: "plus New Item" }).click();
-  await expect(page.locator("label")).toContainText("new asset1(unique)Title");
+  await expect(page.locator("label")).toContainText("new asset1(unique)");
   await expect(page.getByRole("main")).toContainText("new asset1 description");
   await expect(page.locator(".css-7g0azd").nth(0)).toContainText(uploadFileName_2);
   await expect(page.locator(".css-7g0azd").nth(1)).toContainText(uploadFileName_1);

diff --git a/web/e2e/project/item/fields/boolean.spec.ts b/web/e2e/project/item/fields/boolean.spec.ts
@@ -73,7 +73,7 @@ test("Boolean field editing has succeeded", async ({ page }) => {
   await page.getByLabel("Description(optional)").click();
   await page.getByLabel("Description(optional)").fill("new boolean1 description");
   await page.getByLabel("Support multiple values").check();
-  await page.getByLabel("Use as title").check();
+  await expect(page.getByLabel("Use as title")).toBeHidden();
   await page.getByRole("tab", { name: "Validation" }).click();
   await expect(
     page.locator("label").filter({ hasText: "Make field required" }).locator("span").nth(1),
@@ -90,7 +90,7 @@ test("Boolean field editing has succeeded", async ({ page }) => {
   await expect(page.getByRole("switch").nth(1)).toHaveAttribute("aria-checked", "true");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByText("new boolean1#new-boolean1Title")).toBeVisible();
+  await expect(page.getByText("new boolean1#new-boolean1")).toBeVisible();
   await page.getByText("Content").click();
   await expect(page.locator("thead")).toContainText("new boolean1");
   await expect(page.getByRole("switch", { name: "check" })).toBeVisible();

diff --git a/web/e2e/project/item/fields/date.spec.ts b/web/e2e/project/item/fields/date.spec.ts
@@ -76,7 +76,7 @@ test("Date field editing has succeeded", async ({ page }) => {
   await page.getByLabel("Description(optional)").click();
   await page.getByLabel("Description(optional)").fill("new date1 description");
   await page.getByLabel("Support multiple values").check();
-  await page.getByLabel("Use as title").check();
+  await expect(page.getByLabel("Use as title")).toBeHidden();
   await page.getByRole("tab", { name: "Validation" }).click();
   await page.getByLabel("Make field required").check();
   await page.getByLabel("Set field as unique").check();
@@ -97,7 +97,7 @@ test("Date field editing has succeeded", async ({ page }) => {
   await expect(page.locator("thead")).toContainText("new date1");
   await expect(page.locator("tbody")).toContainText("2024-01-01");
   await page.getByRole("button", { name: "plus New Item" }).click();
-  await expect(page.locator("label")).toContainText("new date1(unique)Title");
+  await expect(page.locator("label")).toContainText("new date1(unique)");
   await expect(page.getByRole("textbox").nth(0)).toHaveValue("2024-01-03");
   await expect(page.getByRole("textbox").nth(1)).toHaveValue("2024-01-02");
   await page.getByRole("button", { name: "plus New" }).click();

diff --git a/web/e2e/project/item/fields/int.spec.ts b/web/e2e/project/item/fields/int.spec.ts
@@ -79,7 +79,7 @@ test("Int field editing has succeeded", async ({ page }) => {
   await page.getByLabel("Description(optional)").click();
   await page.getByLabel("Description(optional)").fill("new int1 description");
   await page.getByLabel("Support multiple values").check();
-  await page.getByLabel("Use as title").check();
+  await expect(page.getByLabel("Use as title")).toBeHidden();
   await page.getByRole("tab", { name: "Validation" }).click();
   await page.getByLabel("Set minimum value").click();
   await page.getByLabel("Set minimum value").fill("10");
@@ -112,7 +112,7 @@ test("Int field editing has succeeded", async ({ page }) => {
   await expect(page.locator("thead")).toContainText("new int1");
   await expect(page.getByRole("cell", { name: "1", exact: true })).toBeVisible();
   await page.getByRole("button", { name: "plus New Item" }).click();
-  await expect(page.getByText("new int1(unique)Title")).toBeVisible();
+  await expect(page.getByText("new int1(unique)")).toBeVisible();
   await expect(page.getByRole("spinbutton").nth(0)).toHaveValue("2");
   await expect(page.getByRole("spinbutton").nth(1)).toHaveValue("3");
   await page.getByRole("button", { name: "Save" }).click();

diff --git a/web/e2e/project/item/fields/option.spec.ts b/web/e2e/project/item/fields/option.spec.ts
@@ -127,7 +127,7 @@ test("Option field editing has succeeded", async ({ page }) => {
   await page.locator("#values").nth(3).click();
   await page.locator("#values").nth(3).fill("fifth");
   await page.getByLabel("Support multiple values").check();
-  await page.getByLabel("Use as title").check();
+  await expect(page.getByLabel("Use as title")).toBeHidden();
   await page.getByRole("tab", { name: "Validation" }).click();
   await page.getByLabel("Make field required").check();
   await page.getByLabel("Set field as unique").check();
@@ -172,7 +172,7 @@ test("Option field editing has succeeded", async ({ page }) => {
   await expect(page.locator("thead")).toContainText("option1");
   await expect(page.getByText("third")).toBeVisible();
   await page.getByRole("button", { name: "plus New Item" }).click();
-  await expect(page.getByText("new option1(unique)Title")).toBeVisible();
+  await expect(page.getByText("new option1(unique)")).toBeVisible();
   await expect(page.getByText("new first")).toBeVisible();
   await expect(page.getByText("new third")).toBeVisible();
   await page.getByRole("button", { name: "Save" }).click();

diff --git a/web/e2e/project/item/fields/url.spec.ts b/web/e2e/project/item/fields/url.spec.ts
@@ -79,7 +79,7 @@ test("URL field editing has succeeded", async ({ page }) => {
   await page.getByLabel("Description(optional)").click();
   await page.getByLabel("Description(optional)").fill("new url1 description");
   await page.getByLabel("Support multiple values").check();
-  await page.getByLabel("Use as title").check();
+  await expect(page.getByLabel("Use as title")).toBeHidden();
   await page.getByRole("tab", { name: "Validation" }).click();
   await page.getByLabel("Make field required").check();
   await page.getByLabel("Set field as unique").check();
@@ -96,7 +96,7 @@ test("URL field editing has succeeded", async ({ page }) => {
   await expect(page.locator("thead")).toContainText("new url1");
   await expect(page.getByRole("cell", { name: "http://test1.com", exact: true })).toBeVisible();
   await page.getByRole("button", { name: "plus New Item" }).click();
-  await expect(page.getByText("new url1(unique)Title")).toBeVisible();
+  await expect(page.getByText("new url1(unique)")).toBeVisible();
   await expect(page.getByRole("textbox").nth(0)).toHaveValue("http://test1.com");
   await expect(page.getByRole("textbox").nth(1)).toHaveValue("http://test2.com");
   await page.getByRole("button", { name: "Save" }).click();

diff --git a/web/src/components/molecules/Content/types.ts b/web/src/components/molecules/Content/types.ts
@@ -27,6 +27,7 @@ export type Metadata = {
 export type Item = {
   id: string;
   version: string;
+  title: string;
   schemaId: string;
   createdBy?: Partial<User>;
   updatedBy?: Partial<User>;

diff --git a/web/src/components/molecules/Schema/FieldModal/hooks.ts b/web/src/components/molecules/Schema/FieldModal/hooks.ts
@@ -264,7 +264,6 @@ export default (
     if (Array.isArray(defaultValue)) {
       defaultValue = [...defaultValue].sort();
     }
-
     if (JSON.stringify(emptyConvert(changedValue)) === JSON.stringify(emptyConvert(defaultValue))) {
       changedKeys.current.delete(key);
     } else {
@@ -338,11 +337,8 @@ export default (
 
   const isTitleDisabled = useMemo(
     () =>
-      isMeta ||
-      selectedType === "Group" ||
-      selectedType === "GeometryObject" ||
-      selectedType === "GeometryEditor",
-    [isMeta, selectedType],
+      !(selectedType === "Text" || selectedType === "TextArea" || selectedType === "MarkdownText"),
+    [selectedType],
   );
 
   const ObjectSupportType = useMemo(

diff --git a/web/src/components/organisms/DataConverters/content.ts b/web/src/components/organisms/DataConverters/content.ts
@@ -20,6 +20,7 @@ export const fromGraphQLItem = (GQLItem: GQLItem | undefined): Item | undefined
   return {
     id: GQLItem.id,
     version: GQLItem.version,
+    title: GQLItem.title ?? "",
     fields: GQLItem.fields.map(
       field =>
         ({

diff --git a/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts b/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts
@@ -596,12 +596,10 @@ export default () => {
   const title = useMemo(() => {
     let result = currentModel?.name ?? "";
     if (currentItem) {
-      const titleField = currentModel?.schema.fields.find(field => field.isTitle);
-      const titleValue = titleField && initialFormValues[titleField.id];
-      result += ` / ${titleValue || currentItem.id}`;
+      result += ` / ${currentItem.title || currentItem.id}`;
     }
     return result;
-  }, [currentItem, currentModel?.name, currentModel?.schema.fields, initialFormValues]);
+  }, [currentItem, currentModel?.name]);
 
   return {
     loadingReference,