feat(web): add support for multi-group ordering

web/e2e/project/schema.spec.ts

@@ -4,7 +4,7 @@ import { closeNotification } from "@reearth-cms/e2e/common/notification";
 import { expect, test } from "@reearth-cms/e2e/utils";
 
 import { handleFieldForm } from "./utils/field";
-import { crudGroup } from "./utils/group";
+import { createGroup, crudGroup } from "./utils/group";
 import { createModel, crudModel } from "./utils/model";
 import { createProject, deleteProject } from "./utils/project";
 
@@ -97,6 +97,41 @@ test("Group creating from adding field has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "Cancel" }).click();
 });
 
+test("Group reordering has succeeded", async ({ page }) => {
+  await createGroup(page, "group1", "group1");
+  await createGroup(page, "group2", "group2");
+  await expect(
+    page.getByRole("main").getByRole("menu").last().getByRole("menuitem").nth(0),
+  ).toContainText("group1");
+  await expect(
+    page.getByRole("main").getByRole("menu").last().getByRole("menuitem").nth(1),
+  ).toContainText("group2");
+  await page
+    .getByRole("main")
+    .getByRole("menu")
+    .last()
+    .getByRole("menuitem")
+    .nth(1)
+    .dragTo(page.getByRole("main").getByRole("menu").last().getByRole("menuitem").nth(0));
+  await closeNotification(page);
+  await expect(
+    page.getByRole("main").getByRole("menu").last().getByRole("menuitem").nth(0),
+  ).toContainText("group2");
+  await expect(
+    page.getByRole("main").getByRole("menu").last().getByRole("menuitem").nth(1),
+  ).toContainText("group1");
+  await createGroup(page, "group3", "group3");
+  await expect(
+    page.getByRole("main").getByRole("menu").last().getByRole("menuitem").nth(0),
+  ).toContainText("group2");
+  await expect(
+    page.getByRole("main").getByRole("menu").last().getByRole("menuitem").nth(1),
+  ).toContainText("group1");
+  await expect(
+    page.getByRole("main").getByRole("menu").last().getByRole("menuitem").nth(2),
+  ).toContainText("group3");
+});
+
 test("Text field CRUD has succeeded", async ({ page }) => {
   await createModel(page);
   await page.locator("li").filter({ hasText: "Text" }).locator("div").first().click();

web/e2e/project/utils/group.ts

@@ -3,17 +3,17 @@ import { Page } from "@playwright/test";
 import { closeNotification } from "@reearth-cms/e2e/common/notification";
 import { expect } from "@reearth-cms/e2e/utils";
 
-export async function createGroup(page: Page) {
+export async function createGroup(page: Page, name = "e2e group name", key = "e2e-group-key") {
   await page.getByText("Schema").first().click();
   await page.getByRole("button", { name: "plus Add" }).last().click();
   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("#name").fill(name);
   await page.getByLabel("New Group").locator("#key").click();
-  await page.getByLabel("New Group").locator("#key").fill("e2e-group-key");
+  await page.getByLabel("New Group").locator("#key").fill(key);
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByTitle("e2e group name")).toBeVisible();
-  await expect(page.getByText("#e2e-group-key")).toBeVisible();
+  await expect(page.getByTitle(name, { exact: true })).toBeVisible();
+  await expect(page.getByText(`#${key}`)).toBeVisible();
 }
 
 const updateGroupName = "new e2e group name";

web/src/components/molecules/Model/ModelsList/Groups.tsx

@@ -13,6 +13,7 @@ type Props = {
   onClose: () => void;
   onCreate: (data: { name: string; description: string; key: string }) => Promise<void>;
   onGroupSelect?: (groupId: string) => void;
+  onUpdateGroupsOrder: (groupIds: string[]) => void;
 };
 
 const Groups: React.FC<Props> = ({
@@ -25,6 +26,7 @@ const Groups: React.FC<Props> = ({
   onClose,
   onCreate,
   onGroupSelect,
+  onUpdateGroupsOrder,
 }) => {
   return (
     <>
@@ -34,6 +36,7 @@ const Groups: React.FC<Props> = ({
         collapsed={collapsed}
         onGroupSelect={onGroupSelect}
         onModalOpen={onModalOpen}
+        onUpdateGroupsOrder={onUpdateGroupsOrder}
       />
       <FormModal
         open={open}

web/src/components/molecules/Model/ModelsList/GroupsList.tsx

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { useCallback, useMemo } from "react";
+import ReactDragListView from "react-drag-listview";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
@@ -13,6 +14,7 @@ type Props = {
   collapsed?: boolean;
   onModalOpen: () => void;
   onGroupSelect?: (groupId: string) => void;
+  onUpdateGroupsOrder: (groupIds: string[]) => void;
 };
 
 const GroupsList: React.FC<Props> = ({
@@ -21,6 +23,7 @@ const GroupsList: React.FC<Props> = ({
   collapsed,
   onModalOpen,
   onGroupSelect,
+  onUpdateGroupsOrder,
 }) => {
   const t = useT();
 
@@ -35,14 +38,16 @@ const GroupsList: React.FC<Props> = ({
 
   const items = useMemo(
     () =>
-      groups?.map(group => ({
-        label: (
-          <div ref={group.id === selectedKey ? scrollToSelected : undefined}>
-            {collapsed ? <Icon icon="dot" /> : group.name}
-          </div>
-        ),
-        key: group.id,
-      })),
+      groups
+        ?.sort((a, b) => a.order - b.order)
+        .map(group => ({
+          label: (
+            <div ref={group.id === selectedKey ? scrollToSelected : undefined}>
+              {collapsed ? <Icon icon="dot" /> : group.name}
+            </div>
+          ),
+          key: group.id,
+        })),
     [collapsed, groups, scrollToSelected, selectedKey],
   );
 
@@ -53,6 +58,17 @@ const GroupsList: React.FC<Props> = ({
     [onGroupSelect],
   );
 
+  const onDragEnd = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      if (toIndex < 0 || !groups) return;
+      const [removed] = groups.splice(fromIndex, 1);
+      groups.splice(toIndex, 0, removed);
+      const groupIds = groups.map(group => group.id);
+      onUpdateGroupsOrder(groupIds);
+    },
+    [groups, onUpdateGroupsOrder],
+  );
+
   return (
     <SchemaStyledMenu>
       {collapsed ? (
@@ -68,13 +84,18 @@ const GroupsList: React.FC<Props> = ({
         </Header>
       )}
       <MenuWrapper>
-        <StyledMenu
-          selectedKeys={selectedKeys}
-          mode={collapsed ? "vertical" : "inline"}
-          collapsed={collapsed}
-          items={items}
-          onClick={handleClick}
-        />
+        <ReactDragListView
+          nodeSelector=".ant-menu-item"
+          lineClassName="dragLine"
+          onDragEnd={(fromIndex, toIndex) => onDragEnd(fromIndex, toIndex)}>
+          <StyledMenu
+            selectedKeys={selectedKeys}
+            mode={collapsed ? "vertical" : "inline"}
+            collapsed={collapsed}
+            items={items}
+            onClick={handleClick}
+          />
+        </ReactDragListView>
       </MenuWrapper>
     </SchemaStyledMenu>
   );

web/src/components/molecules/Schema/types.ts

@@ -97,6 +97,7 @@ export type Group = {
   description: string;
   key: string;
   schema: Schema;
+  order: number;
 };
 
 export type ModelFormValues = {

web/src/components/organisms/DataConverters/schema.ts

@@ -11,6 +11,7 @@ export const fromGraphQLGroup = (group: Maybe<GQLGroup>): Group | undefined => {
     name: group.name,
     description: group.description,
     key: group.key,
+    order: group.order,
     schema: {
       id: group.schema?.id,
       fields: group.schema?.fields.map(

web/src/components/organisms/Project/ModelsMenu/hooks.ts

@@ -13,6 +13,7 @@ import {
   useCreateModelMutation,
   useUpdateModelsOrderMutation,
   useCreateGroupMutation,
+  useUpdateGroupsOrderMutation,
   useCheckModelKeyAvailabilityLazyQuery,
   useCheckGroupKeyAvailabilityLazyQuery,
   Model as GQLModel,
@@ -186,6 +187,26 @@ export default ({ modelId }: Params) => {
     [currentWorkspace?.id, projectId, createNewGroup, navigate, t],
   );
 
+  const [updateGroupsOrder] = useUpdateGroupsOrderMutation({
+    refetchQueries: ["GetGroups"],
+  });
+
+  const handleUpdateGroupsOrder = useCallback(
+    async (groupIds: string[]) => {
+      const group = await updateGroupsOrder({
+        variables: {
+          groupIds,
+        },
+      });
+      if (group.errors) {
+        Notification.error({ message: t("Failed to update groups order.") });
+        return;
+      }
+      Notification.success({ message: t("Successfully updated groups order!") });
+    },
+    [updateGroupsOrder, t],
+  );
+
   return {
     models,
     groups,
@@ -200,5 +221,6 @@ export default ({ modelId }: Params) => {
     handleGroupCreate,
     handleGroupKeyCheck,
     handleUpdateModelsOrder,
+    handleUpdateGroupsOrder,
   };
 };

web/src/components/organisms/Project/ModelsMenu/index.tsx

@@ -41,6 +41,7 @@ const ModelsMenu: React.FC<Props> = ({
     handleModelKeyCheck,
     handleGroupKeyCheck,
     handleUpdateModelsOrder,
+    handleUpdateGroupsOrder,
   } = useHooks({
     modelId: selectedSchemaType === "model" ? schemaId : undefined,
   });
@@ -74,6 +75,7 @@ const ModelsMenu: React.FC<Props> = ({
             onGroupKeyCheck={handleGroupKeyCheck}
             onClose={handleGroupModalClose}
             onCreate={handleGroupCreate}
+            onUpdateGroupsOrder={handleUpdateGroupsOrder}
           />
         )}
       </ModelListBody>