fix(web): show request title on linked request and item title on requ…

…est content (#1300) * show request title on linked request * show item title on request detail * fix: e2e test * fix: use item id for key
reearth · Nov 13, 2024 · 6a889ca · 6a889ca
1 parent 10044d3
commit 6a889ca
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 52 deletions.
diff --git a/web/e2e/project/request.spec.ts b/web/e2e/project/request.spec.ts
@@ -2,21 +2,20 @@ import { closeNotification } from "@reearth-cms/e2e/common/notification";
 import { expect, test } from "@reearth-cms/e2e/utils";
 
 import { crudComment } from "./utils/comment";
-import { createRequest } from "./utils/item";
-import { createModel } from "./utils/model";
+import { createTitleField, itemTitle, titleFieldName } from "./utils/field";
+import { createItem, createRequest, requestTitle } from "./utils/item";
+import { createModel, modelName } from "./utils/model";
 import { createProject, deleteProject } from "./utils/project";
 import { createWorkspace, deleteWorkspace } from "./utils/workspace";
 
-const requestTitle = "title";
-
 test.beforeEach(async ({ reearth, page }) => {
   await reearth.goto("/", { waitUntil: "domcontentloaded" });
-  const username = await page.locator("a").nth(1).locator("div").nth(2).locator("p").innerText();
-
   await createWorkspace(page);
   await createProject(page);
   await createModel(page);
-  await createRequest(page, username, requestTitle);
+  await createTitleField(page);
+  await createItem(page);
+  await createRequest(page);
 });
 
 test.afterEach(async ({ page }) => {
@@ -78,7 +77,7 @@ test("Request closing and reopening has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "Reopen" }).click();
   await closeNotification(page);
   await page.getByLabel("Back").click();
-  await expect(page.locator("tbody").getByText("title", { exact: true })).toBeVisible();
+  await expect(page.locator("tbody").getByText(requestTitle, { exact: true })).toBeVisible();
   await expect(page.locator("tbody").getByText("WAITING")).toBeVisible();
   await page.getByLabel("", { exact: true }).check();
   await page.getByText("Close").click();
@@ -137,15 +136,30 @@ test("Creating a new request and adding to request has succeeded", async ({ page
   await expect(page.getByRole("button", { name: "collapsed e2e model name" }).nth(1)).toBeVisible();
 });
 
-test("Navigating from request to item has succeeded", async ({ page }) => {
-  await page.getByText("Request", { exact: true }).click();
-  await page.getByLabel("edit").locator("svg").click();
-  const itemLink = page
-    .getByRole("button", { name: "collapsed e2e model name /" })
-    .getByRole("button");
-  const itemId = await itemLink.innerText();
-  await itemLink.click();
-  await expect(page.getByRole("main")).toContainText("Content");
-  await expect(page.getByRole("main")).toContainText("e2e model name");
-  await expect(page.getByRole("main")).toContainText(itemId);
+test("Navigating between item and request has succeeded", async ({ page }) => {
+  await page.getByRole("button", { name: requestTitle }).first().click();
+  await expect(page.getByText(`Request / ${requestTitle}`)).toBeVisible();
+  await expect(page.getByRole("heading", { name: requestTitle })).toBeVisible();
+  await page.getByRole("button", { name: itemTitle }).last().click();
+  await page.getByLabel(`${titleFieldName}Title`).click();
+  await page.getByLabel(`${titleFieldName}Title`).fill("");
+  await page.getByRole("button", { name: "Save" }).click();
+  await closeNotification(page);
+  const itemId = await page
+    .getByRole("main")
+    .locator("p")
+    .filter({ hasText: "ID" })
+    .locator("div > span")
+    .innerText();
+  await expect(page.getByText(`${modelName} / ${itemId}`)).toBeVisible();
+  const newRequestTitle = "newRequestTitle";
+  await createRequest(page, newRequestTitle);
+  await page.getByLabel(`${titleFieldName}Title`).click();
+  await page.getByLabel(`${titleFieldName}Title`).fill("newItemTitle");
+  await page.getByRole("button", { name: "Save" }).click();
+  await closeNotification(page);
+  await page.getByRole("button", { name: newRequestTitle }).first().click();
+  await expect(
+    page.getByRole("button", { name: `collapsed ${modelName} / ${itemId}` }),
+  ).toBeVisible();
 });
diff --git a/web/e2e/project/utils/field.ts b/web/e2e/project/utils/field.ts
@@ -12,3 +12,18 @@ export async function handleFieldForm(page: Page, name: string, key = name) {
   await expect(page.getByText(`${name}#${key}`)).toBeVisible();
   await closeNotification(page);
 }
+
+export const titleFieldName = "titleFieldName";
+export const itemTitle = "itemTitle";
+
+export async function createTitleField(page: Page) {
+  await page.locator("li").filter({ hasText: "Text" }).locator("div").first().click();
+  await page.getByLabel("Display name").click();
+  await page.getByLabel("Display name").fill(titleFieldName);
+  await page.getByLabel("Use as title").check();
+  await page.getByRole("tab", { name: "Default value" }).click();
+  await page.getByLabel("Set default value").click();
+  await page.getByLabel("Set default value").fill(itemTitle);
+  await page.getByRole("button", { name: "OK" }).click();
+  await closeNotification(page);
+}
diff --git a/web/e2e/project/utils/item.ts b/web/e2e/project/utils/item.ts
@@ -2,16 +2,28 @@ import { Page } from "@playwright/test";
 
 import { closeNotification } from "@reearth-cms/e2e/common/notification";
 
-export async function createRequest(page: Page, reviewerName: string, title: string) {
+export const requestTitle = "requestTitle";
+
+export async function createItem(page: Page) {
   await page.getByText("Content").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await page.getByRole("button", { name: "Save" }).click();
   await closeNotification(page);
-  await page.getByRole("button", { name: "New Request" }).click();
-  await page.getByLabel("Title").click();
-  await page.getByLabel("Title").fill(title);
-  await page.locator(".ant-select-selection-overflow").click();
+}
 
+export async function createRequest(page: Page, title = requestTitle) {
+  await page.getByRole("button", { name: "ellipsis" }).click();
+  await page.getByRole("menuitem", { name: "New Request" }).click();
+  await page.getByLabel("Title").last().click();
+  await page.getByLabel("Title").last().fill(title);
+  await page.locator(".ant-select-selection-overflow").click();
+  const reviewerName = await page
+    .locator("a")
+    .nth(1)
+    .locator("div")
+    .nth(2)
+    .locator("p")
+    .innerText();
   await page.getByTitle(reviewerName).locator("div").click();
   await page.locator(".ant-select-selection-overflow").click();
   await page.getByRole("button", { name: "OK" }).click();

diff --git a/web/e2e/project/utils/model.ts b/web/e2e/project/utils/model.ts
@@ -3,7 +3,9 @@ import { Page } from "@playwright/test";
 import { closeNotification } from "@reearth-cms/e2e/common/notification";
 import { expect } from "@reearth-cms/e2e/utils";
 
-export async function createModel(page: Page, name = "e2e model name", key = "e2e-model-key") {
+export const modelName = "e2e model name";
+
+export async function createModel(page: Page, name = modelName, key = "e2e-model-key") {
   await page.getByText("Schema").first().click();
   await page.getByRole("button", { name: "plus Add" }).first().click();
   await page.getByLabel("Model name").click();

diff --git a/web/src/components/molecules/Content/Form/SidebarWrapper.tsx b/web/src/components/molecules/Content/Form/SidebarWrapper.tsx
@@ -78,7 +78,7 @@ const ContentSidebarWrapper: React.FC<Props> = ({ item, onNavigateToRequest }) =
                         onClick={() => {
                           onNavigateToRequest(request.id);
                         }}>
-                        {request.id}
+                        {request.title}
                       </StyledButton>
                     }
                   />

diff --git a/web/src/components/molecules/Content/types.ts b/web/src/components/molecules/Content/types.ts
@@ -39,7 +39,7 @@ export type Item = {
   threadId: string;
   comments: Comment[];
   assets: ItemAsset[];
-  requests: Pick<Request, "id" | "state">[];
+  requests: Pick<Request, "id" | "state" | "title">[];
 };
 
 export type FormItem = {

diff --git a/web/src/components/molecules/Request/Details/RequestDescription.tsx b/web/src/components/molecules/Request/Details/RequestDescription.tsx
@@ -7,7 +7,7 @@ import Collapse from "@reearth-cms/components/atoms/Collapse";
 import AntDComment from "@reearth-cms/components/atoms/Comment";
 import Tooltip from "@reearth-cms/components/atoms/Tooltip";
 import UserAvatar from "@reearth-cms/components/atoms/UserAvatar";
-import { Request } from "@reearth-cms/components/molecules/Request/types";
+import { Request, ItemInRequest } from "@reearth-cms/components/molecules/Request/types";
 import { Group } from "@reearth-cms/components/molecules/Schema/types";
 import { dateTimeFormat } from "@reearth-cms/utils/format";
 
@@ -34,8 +34,8 @@ export const RequestDescription: React.FC<Props> = ({
   );
 
   const headerGet = useCallback(
-    (modelName?: string, modelId?: string, itemId?: string) => {
-      if (modelName && modelId && itemId) {
+    ({ modelName, modelId, id: itemId, title }: ItemInRequest) => {
+      if (modelName && modelId) {
         return (
           <>
             {`${modelName} / `}
@@ -44,7 +44,7 @@ export const RequestDescription: React.FC<Props> = ({
               onClick={() => {
                 onNavigateToItemEdit(modelId, itemId);
               }}>
-              {itemId}
+              {title || itemId}
             </StyledButton>
           </>
         );
@@ -66,11 +66,10 @@ export const RequestDescription: React.FC<Props> = ({
           <RequestItemsWrapper>
             {currentRequest.items
               .filter(item => item.schema)
-              .map((item, index) => (
-                <Collapse key={index}>
-                  <StyledPanel header={headerGet(item.modelName, item.modelId, item.id)} key={1}>
+              .map(item => (
+                <Collapse key={item.id}>
+                  <StyledPanel header={headerGet(item)} key={1}>
                     <RequestItemForm
-                      key={index}
                       schema={item.schema}
                       initialFormValues={item.initialValues}
                       referencedItems={item.referencedItems}

diff --git a/web/src/components/molecules/Request/types.ts b/web/src/components/molecules/Request/types.ts
@@ -17,15 +17,18 @@ export type Request = {
   updatedAt: Date;
   approvedAt?: Date;
   closedAt?: Date;
-  items: {
-    id: string;
-    modelId?: string;
-    modelName?: string;
-    version?: string;
-    schema?: Schema;
-    initialValues: Record<string, unknown>;
-    referencedItems: FormItem[];
-  }[];
+  items: ItemInRequest[];
+};
+
+export type ItemInRequest = {
+  id: string;
+  title: string;
+  modelId?: string;
+  modelName?: string;
+  version?: string;
+  schema?: Schema;
+  initialValues: Record<string, unknown>;
+  referencedItems: FormItem[];
 };
 
 export type RequestItem = {

diff --git a/web/src/components/organisms/DataConverters/content.ts b/web/src/components/organisms/DataConverters/content.ts
@@ -63,7 +63,12 @@ export const fromGraphQLItem = (GQLItem: GQLItem | undefined): Item | undefined
     assets: GQLItem.assets
       ?.map(asset => asset && { id: asset.id, fileName: asset.fileName })
       .filter((asset): asset is ItemAsset => asset !== null),
-    requests: GQLItem.requests?.map(request => ({ id: request.id, state: request.state })) ?? [],
+    requests:
+      GQLItem.requests?.map(request => ({
+        id: request.id,
+        state: request.state,
+        title: request.title,
+      })) ?? [],
   };
 };
 
@@ -101,6 +106,7 @@ export const fromGraphQLRequest = (request: GQLRequest): Request => ({
   closedAt: request.closedAt ?? undefined,
   items: request.items?.map(item => ({
     id: item.itemId,
+    title: item.item?.value.title ?? "",
     modelId: item?.item?.value.modelId,
     modelName: item?.item?.value.model.name,
     version: item?.version ?? "",

diff --git a/web/src/components/organisms/Project/Content/hooks.ts b/web/src/components/organisms/Project/Content/hooks.ts
@@ -81,6 +81,7 @@ export default () => {
           title: request.title,
           state: request.state as GQLRequestState,
         },
+        refetchQueries: ["GetItem"],
       });
       if (item.errors || !item.data?.updateRequest) {
         Notification.error({ message: t("Failed to update request.") });
@@ -100,7 +101,7 @@ export default () => {
         variables: {
           itemIds: itemIds,
         },
-        refetchQueries: ["SearchItem", "GetItem", "GetItemsByIds"],
+        refetchQueries: ["SearchItem", "GetItem"],
       });
       if (item.errors || !item.data?.publishItem) {
         Notification.error({ message: t("Failed to publish items.") });

diff --git a/web/src/gql/fragments/request.ts b/web/src/gql/fragments/request.ts
@@ -15,6 +15,7 @@ export const requestFragment = gql`
         refs
         value {
           id
+          title
           schemaId
           modelId
           model {