feat(web): project recycle bin

server/e2e/gql_project_test.go

@@ -210,10 +210,15 @@ func TestFindStarredByWorkspace(t *testing.T) {
 	project2ID := createProject(e, "Project 2")
 	project3ID := createProject(e, "Project 3")
 	project4ID := createProject(e, "Project 4")
+	project5ID := createProject(e, "Project 5")
 
 	starProject(e, project1ID)
 	starProject(e, project3ID)
 
+	// star and deleted 'Project 5'
+	starProject(e, project5ID)
+	deleteProject(e, project5ID)
+
 	requestBody := GraphQLRequest{
 		OperationName: "GetStarredProjects",
 		Query: `
@@ -251,6 +256,8 @@ func TestFindStarredByWorkspace(t *testing.T) {
 	nodeCount := int(nodes.Length().Raw())
 	assert.Equal(t, 2, nodeCount, "Expected 2 nodes in the response")
 
+	nodes.Length().Equal(2) // 'Project 1' and 'Project 3'
+
 	starredProjectsMap := make(map[string]bool)
 	for _, node := range nodes.Iter() {
 		obj := node.Object()
@@ -275,7 +282,6 @@ func TestFindStarredByWorkspace(t *testing.T) {
 	assert.True(t, starredProjectsMap[project3ID], "Project 3 should be starred")
 	assert.False(t, starredProjectsMap[project2ID], "Project 2 should not be starred")
 	assert.False(t, starredProjectsMap[project4ID], "Project 4 should not be starred")
-
 }
 
 func starProject(e *httpexpect.Expect, projectID string) {
@@ -467,39 +473,10 @@ func TestDeleteProjects(t *testing.T) {
 	createProject(e, "project3-test")
 
 	// Deleted 'project2'
-	requestBody := GraphQLRequest{
-		OperationName: "UpdateProject",
-		Query: `mutation UpdateProject($input: UpdateProjectInput!) {
-			updateProject(input: $input) {
-				project {
-					id
-					name
-					isDeleted
-					updatedAt
-					__typename
-				}
-				__typename
-			}
-		}`,
-		Variables: map[string]any{
-			"input": map[string]any{
-				"projectId": project2ID,
-				"deleted":   true,
-			},
-		},
-	}
-
-	e.POST("/api/graphql").
-		WithHeader("Origin", "https://example.com").
-		WithHeader("X-Reearth-Debug-User", uID.String()).
-		WithHeader("Content-Type", "application/json").
-		WithJSON(requestBody).
-		Expect().
-		Status(http.StatusOK).
-		JSON()
+	deleteProject(e, project2ID)
 
 	// check
-	requestBody = GraphQLRequest{
+	requestBody := GraphQLRequest{
 		OperationName: "GetDeletedProjects",
 		Query: `
 			query GetDeletedProjects($teamId: ID!) {
@@ -530,3 +507,44 @@ func TestDeleteProjects(t *testing.T) {
 	deletedProjects.Value("nodes").Array().Length().Equal(1)
 	deletedProjects.Value("nodes").Array().First().Object().Value("name").Equal("project2-test")
 }
+
+func deleteProject(e *httpexpect.Expect, projectID string) {
+
+	updateProjectMutation := GraphQLRequest{
+		OperationName: "UpdateProject",
+		Query: `mutation UpdateProject($input: UpdateProjectInput!) {
+			updateProject(input: $input) {
+				project {
+					id
+					name
+					isDeleted
+					updatedAt
+					__typename
+				}
+				__typename
+			}
+		}`,
+		Variables: map[string]any{
+			"input": map[string]any{
+				"projectId": projectID,
+				"deleted":   true,
+			},
+		},
+	}
+
+	response := e.POST("/api/graphql").
+		WithHeader("Origin", "https://example.com").
+		WithHeader("X-Reearth-Debug-User", uID.String()).
+		WithHeader("Content-Type", "application/json").
+		WithJSON(updateProjectMutation).
+		Expect().
+		Status(http.StatusOK).
+		JSON().
+		Object().
+		Value("data").Object().
+		Value("updateProject").Object().
+		Value("project").Object()
+
+	response.ValueEqual("id", projectID).
+		ValueEqual("isDeleted", true)
+}

server/internal/adapter/gql/gqlmodel/convert_project.go

@@ -65,6 +65,7 @@ func ToProject(p *project.Project) *Project {
 		EnableGa:          p.EnableGA(),
 		TrackingID:        p.TrackingID(),
 		Starred:           p.Starred(),
+		IsDeleted:         p.IsDeleted(),
 	}
 }
 

server/internal/infrastructure/mongo/mongodoc/project.go

@@ -128,5 +128,6 @@ func (d *ProjectDocument) Model() (*project.Project, error) {
 		TrackingID(d.TrackingID).
 		// Scene(scene).
 		Starred(d.Starred).
+		Deleted(d.Deleted).
 		Build()
 }

server/internal/infrastructure/mongo/project.go

@@ -114,6 +114,10 @@ func (r *Project) FindStarredByWorkspace(ctx context.Context, id accountdomain.W
 	filter := bson.M{
 		"team":    id.String(),
 		"starred": true,
+		"$or": []bson.M{
+			{"deleted": false},
+			{"deleted": bson.M{"$exists": false}},
+		},
 	}
 
 	return r.find(ctx, filter)

server/pkg/project/builder.go

@@ -161,3 +161,8 @@ func (b *Builder) Starred(starred bool) *Builder {
 	b.p.starred = starred
 	return b
 }
+
+func (b *Builder) Deleted(deleted bool) *Builder {
+	b.p.isDeleted = deleted
+	return b
+}

web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx

@@ -2,6 +2,8 @@ import { Button, PopupMenu, TextInput } from "@reearth/beta/lib/reearth-ui";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC } from "react";
 
+import ProjectDeleteModal from "../ProjectDeleteModal";
+
 import useHooks from "./hooks";
 import { ProjectProps } from "./types";
 
@@ -10,7 +12,8 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
   selectedProjectId,
   onProjectOpen,
   onProjectSelect,
-  onProjectUpdate
+  onProjectUpdate,
+  onProjectDelete
 }) => {
   const theme = useTheme();
 
@@ -21,19 +24,23 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
     isHovered,
     isStarred,
     hasMapOrStoryPublished,
+    projectDeleteModalVisible,
     handleProjectNameChange,
     handleProjectNameBlur,
     handleProjectHover,
     handleProjectNameDoubleClick,
-    handleProjectStarClick
+    handleProjectStarClick,
+    handleDeleteModelClose,
+    handleProjectDelete
     // exportModalVisible,
     // closeExportModal,
     // handleExportProject
   } = useHooks({
     project,
     selectedProjectId,
     onProjectUpdate,
-    onProjectSelect
+    onProjectSelect,
+    onProjectDelete
   });
 
   return (
@@ -87,6 +94,13 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
           />
         </CardFooter>
       </Card>
+      {projectDeleteModalVisible && (
+        <ProjectDeleteModal
+          isVisible={projectDeleteModalVisible}
+          onClose={handleDeleteModelClose}
+          onProjectDelete={() => handleProjectDelete(project.id)}
+        />
+      )}
       {/* MEMO: this modal will be used in the future */}
       {/* <Modal visible={exportModalVisible} size="small">
         <ModalPanel

web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts

@@ -15,13 +15,15 @@ type Props = {
   selectedProjectId?: string;
   onProjectUpdate?: (project: ProjectType, projectId: string) => void;
   onProjectSelect?: (e?: MouseEvent<Element>, projectId?: string) => void;
+  onProjectDelete?: (projectId?: string) => void;
 };
 
 export default ({
   project,
   selectedProjectId,
   onProjectUpdate,
-  onProjectSelect
+  onProjectSelect,
+  onProjectDelete
 }: Props) => {
   const t = useT();
   const { useStoriesQuery } = useStorytellingFetcher();
@@ -32,6 +34,8 @@ export default ({
   const [projectName, setProjectName] = useState(project.name);
   const [isHovered, setIsHovered] = useState(false);
   const [isStarred, setIsStarred] = useState(project.starred);
+    const [projectDeleteModalVisible, setProjectDeleteModalVisible] = useState(false);
+
   // MEMO: this modal state and function will be used in the future
   // const [exportModalVisible, setExportModalVisible] = useState(false);
 
@@ -79,6 +83,14 @@ export default ({
     setIsStarred(project.starred);
   }, [project.starred]);
 
+   const handleDeleteModelOpen = useCallback(() => {
+     setProjectDeleteModalVisible(true);
+   }, []);
+
+   const handleDeleteModelClose = useCallback(() => {
+     setProjectDeleteModalVisible(false);
+   }, []);
+
   const popupMenu: PopupMenuItem[] = [
     {
       id: "rename",
@@ -97,6 +109,12 @@ export default ({
       title: t("Export"),
       icon: "downloadSimple",
       onClick: () => handleExportProject()
+    },
+    {
+      id: "remove",
+      title: t("Remove"),
+      icon: "trash",
+      onClick: () => handleDeleteModelOpen()
     }
   ];
 
@@ -143,18 +161,28 @@ export default ({
     return hasMapPublished || hasStoryPublished;
   }, [stories, project.status]);
 
+  const handleProjectDelete = useCallback((projectId?: string) => {
+     if (!projectId) return;
+    onProjectDelete?.(projectId);
+    handleDeleteModelClose()
+ }, [handleDeleteModelClose, onProjectDelete])
+
   return {
     isEditing,
     projectName,
     isHovered,
     popupMenu,
     isStarred,
     hasMapOrStoryPublished,
+    projectDeleteModalVisible,
     handleProjectNameChange,
     handleProjectNameBlur,
     handleProjectHover,
     handleProjectNameDoubleClick,
     handleProjectStarClick,
-    handleExportProject
+    handleExportProject,
+    handleDeleteModelOpen,
+    handleDeleteModelClose,
+    handleProjectDelete
   };
 };

web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/types.ts

@@ -8,4 +8,5 @@ export type ProjectProps = {
   onProjectOpen?: () => void;
   onProjectSelect?: (e?: MouseEvent<Element>, projectId?: string) => void;
   onProjectUpdate?: (project: ProjectType, projectId: string) => void;
+  onProjectDelete?: (projectId?: string) => void;
 };

web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectDeleteModal.tsx

@@ -0,0 +1,68 @@
+import {
+  Button,
+  Icon,
+  Modal,
+  ModalPanel,
+  Typography
+} from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+import { FC } from "react";
+
+type Props = {
+  isVisible: boolean;
+  onClose: () => void;
+  onProjectDelete: () => void;
+};
+const ProjectDeleteModal: FC<Props> = ({
+  isVisible,
+  onClose,
+  onProjectDelete
+}) => {
+  const t = useT();
+  return (
+    <Modal size="small" visible={isVisible}>
+      <ModalPanel
+        actions={
+          <>
+            <Button size="normal" title="Cancel" onClick={onClose} />
+            <Button
+              size="normal"
+              title="Remove"
+              appearance="dangerous"
+              onClick={onProjectDelete}
+            />
+          </>
+        }
+        appearance="simple"
+      >
+        <Wrapper>
+          <WarningIcon icon="warning" />
+          <Typography size="body">
+            {t("Your project will be move to trash.")}
+          </Typography>
+          <Typography size="body">
+            {t(
+              "This means the project will no longer be published. But you can still see and restore you project from recycle bin."
+            )}
+          </Typography>
+        </Wrapper>
+      </ModalPanel>
+    </Modal>
+  );
+};
+
+export default ProjectDeleteModal;
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: theme.spacing.large,
+  gap: theme.spacing.normal
+}));
+
+const WarningIcon = styled(Icon)(({ theme }) => ({
+  width: "24px",
+  height: "24px",
+  color: theme.warning.main
+}));