fix(web): improve project import (#1199)

Co-authored-by: airslice <[email protected]>
reearth · Oct 29, 2024 · d2a9662 · d2a9662
1 parent 9959544
commit d2a9662
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 83 deletions.
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
@@ -32,9 +32,6 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
     handleProjectStarClick,
     handleProjectRemoveModal,
     handleProjectRemove
-    // exportModalVisible,
-    // closeExportModal,
-    // handleExportProject
   } = useHooks({
     project,
     selectedProjectId,
@@ -101,17 +98,6 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
           onProjectRemove={() => handleProjectRemove(project.id)}
         />
       )}
-      {/* MEMO: this modal will be used in the future */}
-      {/* <Modal visible={exportModalVisible} size="small">
-        <ModalPanel
-          title={t("Export Project")}
-          actions={actions}
-          onCancel={closeExportModal}
-          appearance="normal"
-        >
-          <ModalContent />
-        </ModalPanel>
-      </Modal> */}
     </>
   );
 };
@@ -185,8 +171,3 @@ const CardTitle = styled("div")(({ theme }) => ({
   textOverflow: "ellipsis",
   cursor: "pointer"
 }));
-
-// const ModalContent = styled("div")(() => ({
-//   width: "100%",
-//   height: "272px"
-// }));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
@@ -49,9 +49,6 @@ const ProjectListViewItem: FC<ProjectProps> = ({
     handleProjectStarClick,
     handleProjectRemoveModal,
     handleProjectRemove
-    // exportModalVisible,
-    // closeExportModal,
-    // handleExportProject
   } = useHooks({
     project,
     selectedProjectId,
@@ -130,17 +127,6 @@ const ProjectListViewItem: FC<ProjectProps> = ({
           onProjectRemove={() => handleProjectRemove(project.id)}
         />
       )}
-      {/* MEMO: this modal will be used in the future */}
-      {/* <Modal visible={exportModalVisible} size="small">
-        <ModalPanel
-          title={t("Export Project")}
-          actions={actions}
-          onCancel={closeExportModal}
-          appearance="normal"
-        >
-          <ModalContent />
-        </ModalPanel>
-      </Modal> */}
     </>
   );
 };
@@ -230,8 +216,3 @@ const TitleWrapper = styled("div")(({ theme }) => ({
   overflow: "hidden",
   textOverflow: "ellipsis"
 }));
-
-// const ModalContent = styled("div")(() => ({
-//   width: "100%",
-//   height: "272px"
-// }));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
@@ -36,8 +36,6 @@ export default ({
   const [isStarred, setIsStarred] = useState(project.starred);
   const [projectRemoveModalVisible, setProjectRemoveModalVisible] =
     useState(false);
-  // MEMO: this modal state and function will be used in the future
-  // const [exportModalVisible, setExportModalVisible] = useState(false);
 
   const handleProjectNameChange = useCallback((newValue: string) => {
     setProjectName(newValue);
@@ -70,13 +68,7 @@ export default ({
   const handleExportProject = useCallback(async () => {
     if (!project.id) return;
 
-    const result = await useExportProject(project.id);
-
-    if (result.status === "success") {
-      console.log("export success");
-    } else {
-      console.error("Failed to export project:", result.status);
-    }
+    await useExportProject(project.id);
   }, [useExportProject, project.id]);
 
   useEffect(() => {
@@ -102,7 +94,7 @@ export default ({
     },
     {
       id: "export",
-      title: t("Export"),
+      title: t("Export (Experimental)"),
       icon: "downloadSimple",
       onClick: () => handleExportProject()
     },

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
@@ -239,13 +239,16 @@ export default (workspaceId?: string) => {
     async (event: React.ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files?.[0];
       if (file) {
-        const result = await useImportProject(file);
+        const result = await useImportProject({
+          teamId: workspaceId || "",
+          file
+        });
         if (result.status === "success") {
           await refetch();
         }
       }
     },
-    [useImportProject, refetch]
+    [useImportProject, workspaceId, refetch]
   );
 
   // project remove

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
@@ -56,24 +56,6 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // const actions = useMemo(
-  //   () => (
-  //     <>
-  //       <Button
-  //         title={t("Cancel")}
-  //         appearance={"secondary"}
-  //         onClick={closeExportModal}
-  //       />
-  //       <Button
-  //         title={t("Export")}
-  //         appearance={"primary"}
-  //         onClick={handleExportProject}
-  //       />
-  //     </>
-  //   ),
-  //   [handleExportProject, closeExportModal, t]
-  // );
-
   return (
     <ManagerWrapper onClick={() => handleProjectSelect(undefined)}>
       <ManagerHeader
@@ -90,7 +72,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
             />
             <ManagerHeaderButton
               key={"import-project"}
-              title={t("Import")}
+              title={t("Import (Experimental)")}
               managerSize="large"
               icon="signIn"
               appearance="secondary"

diff --git a/web/src/services/api/projectApi.ts b/web/src/services/api/projectApi.ts
@@ -14,7 +14,8 @@ import {
   DeleteProjectInput,
   ArchiveProjectMutationVariables,
   UpdateProjectBasicAuthMutationVariables,
-  UpdateProjectAliasMutationVariables
+  UpdateProjectAliasMutationVariables,
+  ImportProjectInput
 } from "@reearth/services/gql/__gen__/graphql";
 import {
   ARCHIVE_PROJECT,
@@ -527,12 +528,12 @@ export default () => {
   const [importProjectMutation] = useMutation(IMPORT_PROJECT);
 
   const useImportProject = useCallback(
-    async (file: File) => {
-      if (!file) return { status: "error" };
+    async (input: ImportProjectInput) => {
+      if (!input) return { status: "error" };
 
       try {
         const { data, errors } = await importProjectMutation({
-          variables: { file }
+          variables: { ...input }
         });
 
         if (errors || !data?.importProject) {

diff --git a/web/src/services/gql/__gen__/gql.ts b/web/src/services/gql/__gen__/gql.ts
@@ -61,7 +61,7 @@ const documents = {
     "\n  mutation DeleteProject($projectId: ID!) {\n    deleteProject(input: { projectId: $projectId }) {\n      projectId\n    }\n  }\n": types.DeleteProjectDocument,
     "\n  query GetStarredProjects($teamId: ID!) {\n    starredProjects(teamId: $teamId) {\n\t\t\t\tnodes {\n\t\t\t\t\tid\n\t\t\t\t\tname\n\t\t\t\t\tstarred\n          scene {\n            id\n          }\n\t\t\t\t}\n\t\t\t\ttotalCount\n\t\t\t}\n  }\n": types.GetStarredProjectsDocument,
     "\n  mutation ExportProject($projectId: ID!) {\n    exportProject(input: { projectId: $projectId }) {\n      projectDataPath\n    }\n  }\n": types.ExportProjectDocument,
-    "\n  mutation ImportProject($file: Upload!) {\n    importProject(input: { file: $file }) {\n      projectData\n    }\n  }\n": types.ImportProjectDocument,
+    "\n  mutation ImportProject($teamId: ID!, $file: Upload!) {\n    importProject(input: { teamId: $teamId, file: $file }) {\n      projectData\n    }\n  }\n": types.ImportProjectDocument,
     "\n  query GetDeletedProjects($teamId: ID!) {\n    deletedProjects(teamId: $teamId) {\n\t\t\tnodes {\n\t\t\t\tid\n\t\t\t\tname\n\t\t\t\tisDeleted\n        imageUrl\n\t\t\t\t}\n\t\t\ttotalCount\n\t\t}\n  }\n": types.GetDeletedProjectsDocument,
     "\n  mutation UpdatePropertyValue(\n    $propertyId: ID!\n    $schemaGroupId: ID\n    $itemId: ID\n    $fieldId: ID!\n    $value: Any\n    $type: ValueType!\n    $lang: Lang\n  ) {\n    updatePropertyValue(\n      input: {\n        propertyId: $propertyId\n        schemaGroupId: $schemaGroupId\n        itemId: $itemId\n        fieldId: $fieldId\n        value: $value\n        type: $type\n      }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.UpdatePropertyValueDocument,
     "\n  mutation AddPropertyItem(\n    $propertyId: ID!\n    $schemaGroupId: ID!\n    $lang: Lang\n  ) {\n    addPropertyItem(\n      input: {\n        propertyId: $propertyId\n        schemaGroupId: $schemaGroupId\n      }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.AddPropertyItemDocument,
@@ -306,7 +306,7 @@ export function gql(source: "\n  mutation ExportProject($projectId: ID!) {\n
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\n  mutation ImportProject($file: Upload!) {\n    importProject(input: { file: $file }) {\n      projectData\n    }\n  }\n"): (typeof documents)["\n  mutation ImportProject($file: Upload!) {\n    importProject(input: { file: $file }) {\n      projectData\n    }\n  }\n"];
+export function gql(source: "\n  mutation ImportProject($teamId: ID!, $file: Upload!) {\n    importProject(input: { teamId: $teamId, file: $file }) {\n      projectData\n    }\n  }\n"): (typeof documents)["\n  mutation ImportProject($teamId: ID!, $file: Upload!) {\n    importProject(input: { teamId: $teamId, file: $file }) {\n      projectData\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

diff --git a/web/src/services/gql/__gen__/graphql.ts b/web/src/services/gql/__gen__/graphql.ts
diff --git a/web/src/services/gql/queries/project.ts b/web/src/services/gql/queries/project.ts
@@ -219,8 +219,8 @@ export const EXPORT_PROJECT = gql(`
 `);
 
 export const IMPORT_PROJECT = gql(`
-  mutation ImportProject($file: Upload!) {
-    importProject(input: { file: $file }) {
+  mutation ImportProject($teamId: ID!, $file: Upload!) {
+    importProject(input: { teamId: $teamId, file: $file }) {
       projectData
     }
   }

diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
@@ -37,7 +37,7 @@ Last Created: ''
 First Created: ''
 Last Updated: ''
 New Project: ''
-Import: ''
+Import (Experimental): ''
 All projects: ''
 Search Result for: ''
 Project Name: ''
@@ -46,7 +46,7 @@ Created At: ''
 No Project has been created yet: ''
 Rename: ''
 Project Setting: ''
-Export: ''
+Export (Experimental): ''
 Move to Recycle Bin: ''
 Create new project: ''
 Project Name *: ''

diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
@@ -36,8 +36,8 @@ No Member match your search.: ''
 Last Created: ''
 First Created: ''
 Last Updated: ''
-New Project: ''
-Import: ''
+New Project: 新規プロジェクト
+Import (Experimental): ''
 All projects: ''
 Search Result for: ''
 Project Name: ''
@@ -46,7 +46,7 @@ Created At: ''
 No Project has been created yet: ''
 Rename: 名称変更
 Project Setting: プロジェクト設定
-Export: エクスポート
+Export (Experimental): ''
 Move to Recycle Bin: ''
 Create new project: ''
 Project Name *: ''