fix(web): improve the performance related to the group (#1104)

* remove redundant code * fix: jumping to ia new model when creating it * fix: unify model and group * remove redundant code * fix: getGroups and getGroup * add test for creating group * fix: createGroup test behavior * fix: default value bug * fix: remove graphql api from GroupItem
reearth · Mar 19, 2024 · ac66e45 · ac66e45
1 parent 82b62a6
commit ac66e45
Show file tree

Hide file tree

Showing 23 changed files with 359 additions and 483 deletions.
diff --git a/web/e2e/project/item/fields/group.spec.ts b/web/e2e/project/item/fields/group.spec.ts
@@ -116,6 +116,7 @@ test("Group field creating and updating has succeeded", async ({ page }) => {
   await expect(page.getByRole("alert").last()).toContainText("Successfully updated field!");
   await closeNotification(page);
   await page.getByText("Content").click();
+  await page.getByText("e2e model name").click();
   await page.getByRole("link", { name: "edit", exact: true }).click();
   await expect(page.getByRole("main")).toContainText("new text1(unique)");
   await expect(page.getByRole("main")).toContainText("new text1 description");
@@ -304,6 +305,7 @@ test("Group field editing has succeeded", async ({ page }) => {
   await closeNotification(page);
 
   await page.getByText("Content").click();
+  await page.getByText("e2e model name").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await page.getByRole("button", { name: "plus New" }).click();
   await expect(page.getByRole("textbox").nth(0)).toHaveValue("text1");

diff --git a/web/e2e/project/schema.spec.ts b/web/e2e/project/schema.spec.ts
@@ -33,14 +33,46 @@ test("Group CRUD has succeeded", async ({ page }) => {
   await crudGroup(page);
 });
 
+test("Group creating from adding field has succeeded", async ({ page }) => {
+  await createModel(page);
+  await page.locator("li").filter({ hasText: "Group" }).locator("div").first().click();
+  await page.getByRole("button", { name: "Create Group" }).click();
+  await expect(page.getByLabel("New Group")).toContainText("New Group");
+  await expect(page.getByRole("button", { name: "OK" })).toBeDisabled();
+
+  await page.getByLabel("New Group").locator("#name").click();
+  await page.getByLabel("New Group").locator("#name").fill("e2e group name");
+  await page.getByLabel("New Group").locator("#key").click();
+  await page.getByLabel("New Group").locator("#key").fill("e2e-group-key");
+  await page.getByRole("button", { name: "OK" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully created group!");
+  await closeNotification(page);
+  await expect(
+    page.getByRole("menuitem", { name: "e2e group name" }).locator("span"),
+  ).toBeVisible();
+  await expect(page.getByText("e2e group name#e2e-group-key")).toBeVisible();
+  await expect(page.getByText("FieldsMeta Data")).not.toBeVisible();
+  await expect(
+    page.locator("li").filter({ hasText: "Reference" }).locator("div").first(),
+  ).not.toBeVisible();
+  await expect(
+    page.locator("li").filter({ hasText: "Group" }).locator("div").first(),
+  ).not.toBeVisible();
+  await page.locator("li").filter({ hasText: "Text" }).locator("div").first().click();
+  await handleFieldForm(page, "text");
+  await expect(page.getByRole("alert").last()).toContainText("Successfully created field!");
+  await closeNotification(page);
+  await page.getByText("e2e model name").click();
+  await page.locator("li").filter({ hasText: "Group" }).locator("div").first().click();
+  await expect(page.getByRole("heading", { name: "Create Group" })).toBeVisible();
+  await page.getByLabel("Select Group").click();
+  await expect(page.getByText("e2e group name #e2e-group-key")).toBeVisible();
+  await page.getByRole("button", { name: "Cancel" }).click();
+});
+
 test("Text field CRUD has succeeded", async ({ page }) => {
   await createModel(page);
-  await page
-    .locator("li")
-    .filter({ hasText: "TextHeading and titles, one-" })
-    .locator("div")
-    .first()
-    .click();
+  await page.locator("li").filter({ hasText: "Text" }).locator("div").first().click();
   await handleFieldForm(page, "text");
   await expect(page.getByRole("alert").last()).toContainText("Successfully created field!");
   await closeNotification(page);

diff --git a/web/e2e/project/utils/group.ts b/web/e2e/project/utils/group.ts
@@ -13,7 +13,6 @@ export async function createGroup(page: Page) {
   await page.getByRole("button", { name: "OK" }).click();
   await expect(page.getByRole("alert").last()).toContainText("Successfully created group!");
   await closeNotification(page);
-  await page.getByText("e2e group name").click();
   await expect(page.getByTitle("e2e group name")).toBeVisible();
   await expect(page.getByText("#e2e-group-key")).toBeVisible();
 }

diff --git a/web/src/components/molecules/Common/Form/GroupItem/hooks.ts b/web/src/components/molecules/Common/Form/GroupItem/hooks.ts
diff --git a/web/src/components/molecules/Common/Form/GroupItem/index.tsx b/web/src/components/molecules/Common/Form/GroupItem/index.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useCallback, useMemo, MouseEvent } from "react";
+import { useCallback, useMemo, MouseEvent, useState, useEffect } from "react";
 
 import Collapse from "@reearth-cms/components/atoms/Collapse";
 import Icon from "@reearth-cms/components/atoms/Icon";
@@ -13,14 +13,12 @@ import {
 import { DefaultField } from "@reearth-cms/components/molecules/Content/Form/fields/FieldComponents";
 import { FIELD_TYPE_COMPONENT_MAP } from "@reearth-cms/components/molecules/Content/Form/fields/FieldTypesMap";
 import { FormItem, ItemAsset } from "@reearth-cms/components/molecules/Content/types";
-import { Field } from "@reearth-cms/components/molecules/Schema/types";
+import { Field, Group } from "@reearth-cms/components/molecules/Schema/types";
 import {
   AssetSortType,
   SortDirection,
 } from "@reearth-cms/components/organisms/Project/Asset/AssetList/hooks";
 
-import useHooks from "./hooks";
-
 type Props = {
   value?: string;
   onChange?: (value: string) => void;
@@ -68,6 +66,7 @@ type Props = {
   disableMoveUp?: boolean;
   disableMoveDown?: boolean;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 };
 
 const GroupItem: React.FC<Props> = ({
@@ -112,11 +111,21 @@ const GroupItem: React.FC<Props> = ({
   disableMoveUp,
   disableMoveDown,
   onGetAsset,
+  onGroupGet,
 }) => {
   const { Panel } = Collapse;
-  const { group } = useHooks(parentField?.typeProperty?.groupId);
 
-  const fields = useMemo(() => group?.schema.fields, [group?.schema.fields]);
+  const [fields, setFields] = useState<Field[]>();
+
+  useEffect(() => {
+    const handleFieldsSet = async (id: string) => {
+      const group = await onGroupGet(id);
+      setFields(group?.schema.fields);
+    };
+
+    if (parentField?.typeProperty?.groupId) handleFieldsSet(parentField.typeProperty.groupId);
+  }, [onGroupGet, parentField?.typeProperty?.groupId]);
+
   const itemGroupId = useMemo(() => value ?? "", [value]);
 
   const handleMoveUp = useCallback(

diff --git a/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx b/web/src/components/molecules/Common/MultiValueField/MultiValueGroup/index.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import moment from "moment";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import { FormInstance } from "@reearth-cms/components/atoms/Form";
@@ -26,7 +26,6 @@ type Props = {
   onChange?: (value: string[]) => void;
   parentField: Field;
   form?: FormInstance<any>;
-  groups?: Group[];
   fields?: Field[];
   linkedItemsModalList?: FormItem[];
   linkItemModalTitle: string;
@@ -65,12 +64,12 @@ type Props = {
   setFileList: (fileList: UploadFile<File>[]) => void;
   setUploadModalVisibility: (visible: boolean) => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 };
 
 const MultiValueGroup: React.FC<Props> = ({
   className,
   parentField,
-  groups,
   form,
   fields,
   value = [],
@@ -108,6 +107,7 @@ const MultiValueGroup: React.FC<Props> = ({
   setFileList,
   setUploadModalVisibility,
   onGetAsset,
+  onGroupGet,
 }) => {
   const t = useT();
 
@@ -126,12 +126,7 @@ const MultiValueGroup: React.FC<Props> = ({
     [onChange, value],
   );
 
-  const group = useMemo<Group | undefined>(
-    () => groups?.find(g => g.id === parentField.typeProperty?.groupId),
-    [groups, parentField.typeProperty?.groupId],
-  );
-
-  const handleAdd = useCallback(() => {
+  const handleAdd = useCallback(async () => {
     const currentValues = value || [];
     const itemGroupId = newID();
 
@@ -143,6 +138,8 @@ const MultiValueGroup: React.FC<Props> = ({
 
     // set default value
     const newValues = { ...form?.getFieldsValue() };
+    if (!parentField.typeProperty?.groupId) return;
+    const group = await onGroupGet(parentField.typeProperty.groupId);
     group?.schema.fields.forEach((field: Field) => {
       const defaultValue = field.typeProperty?.defaultValue;
       const setValue = (value: any) => {
@@ -177,7 +174,7 @@ const MultiValueGroup: React.FC<Props> = ({
           break;
       }
     });
-  }, [form, group?.schema.fields, onChange, value]);
+  }, [form, onChange, onGroupGet, parentField.typeProperty?.groupId, value]);
 
   return (
     <div className={className}>
@@ -227,6 +224,7 @@ const MultiValueGroup: React.FC<Props> = ({
                 disableMoveUp={key === 0}
                 disableMoveDown={key === value.length - 1}
                 onGetAsset={onGetAsset}
+                onGroupGet={onGroupGet}
               />
             </FieldWrapper>
           );

diff --git a/web/src/components/molecules/Content/Details/index.tsx b/web/src/components/molecules/Content/Details/index.tsx
@@ -16,7 +16,7 @@ import {
   SortDirection,
 } from "@reearth-cms/components/organisms/Project/Asset/AssetList/hooks";
 
-export type Props = {
+type Props = {
   linkedItemsModalList?: FormItem[];
   showPublishAction?: boolean;
   requests: Request[];
@@ -40,7 +40,6 @@ export type Props = {
   commentsPanel?: JSX.Element;
   requestModalShown: boolean;
   addItemToRequestModalShown: boolean;
-  groups?: Group[];
   workspaceUserMembers: UserMember[];
   totalCount: number;
   page: number;
@@ -102,6 +101,7 @@ export type Props = {
   onAddItemToRequestModalClose: () => void;
   onAddItemToRequestModalOpen: () => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 };
 
 const ContentDetailsMolecule: React.FC<Props> = ({
@@ -129,7 +129,6 @@ const ContentDetailsMolecule: React.FC<Props> = ({
   requestModalShown,
   addItemToRequestModalShown,
   workspaceUserMembers,
-  groups,
   totalCount,
   page,
   pageSize,
@@ -173,6 +172,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
   onAddItemToRequestModalOpen,
   onAssetTableChange,
   onGetAsset,
+  onGroupGet,
 }) => {
   return (
     <ComplexInnerContents
@@ -192,7 +192,6 @@ const ContentDetailsMolecule: React.FC<Props> = ({
         ) : (
           <ContentForm
             item={item}
-            groups={groups}
             linkItemModalTitle={linkItemModalTitle}
             linkItemModalTotalCount={linkItemModalTotalCount}
             linkItemModalPage={linkItemModalPage}
@@ -254,6 +253,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
             onAddItemToRequestModalClose={onAddItemToRequestModalClose}
             workspaceUserMembers={workspaceUserMembers}
             onGetAsset={onGetAsset}
+            onGroupGet={onGroupGet}
           />
         )
       }

diff --git a/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/GroupField.tsx b/web/src/components/molecules/Content/Form/fields/ComplexFieldComponents/GroupField.tsx
@@ -15,7 +15,6 @@ import {
 interface GroupFieldProps {
   field: Field;
   form?: FormInstance<any>;
-  groups?: Group[];
   linkedItemsModalList?: FormItem[];
   linkItemModalTitle: string;
   formItemsData: FormItem[];
@@ -53,12 +52,12 @@ interface GroupFieldProps {
   setFileList: (fileList: UploadFile<File>[]) => void;
   setUploadModalVisibility: (visible: boolean) => void;
   onGetAsset: (assetId: string) => Promise<string | undefined>;
+  onGroupGet: (id: string) => Promise<Group | undefined>;
 }
 
 const GroupField: React.FC<GroupFieldProps> = ({
   field,
   form,
-  groups,
   linkedItemsModalList,
   linkItemModalTitle,
   formItemsData,
@@ -92,6 +91,7 @@ const GroupField: React.FC<GroupFieldProps> = ({
   setFileList,
   setUploadModalVisibility,
   onGetAsset,
+  onGroupGet,
 }) => {
   return (
     <Form.Item
@@ -102,7 +102,6 @@ const GroupField: React.FC<GroupFieldProps> = ({
         <MultiValueGroup
           parentField={field}
           form={form}
-          groups={groups}
           linkedItemsModalList={linkedItemsModalList}
           linkItemModalTitle={linkItemModalTitle}
           onSearchTerm={onSearchTerm}
@@ -136,6 +135,7 @@ const GroupField: React.FC<GroupFieldProps> = ({
           setFileList={setFileList}
           setUploadModalVisibility={setUploadModalVisibility}
           onGetAsset={onGetAsset}
+          onGroupGet={onGroupGet}
         />
       ) : (
         <GroupItem
@@ -173,6 +173,7 @@ const GroupField: React.FC<GroupFieldProps> = ({
           setFileList={setFileList}
           setUploadModalVisibility={setUploadModalVisibility}
           onGetAsset={onGetAsset}
+          onGroupGet={onGroupGet}
         />
       )}
     </Form.Item>