feat(web): Export & Import Project #1154
Conversation
WalkthroughThe changes introduce functionalities for importing and exporting projects within the dashboard's project management system. This includes the addition of hooks for managing the import and export processes, modifications to the UI for file input, and enhancements to the API for handling project data. The updates span multiple files, improving both user interaction and the underlying logic for project management. Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml ⛔ Files ignored due to path filters (4)
📒 Files selected for processing (10)
🚧 Files skipped from review as they are similar to previous changes (10)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
✅ Deploy Preview for reearth-web ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
m-abe-dev
changed the title
m-abe-dev
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 16
🧹 Outside diff range and nitpick comments (10)
web/src/services/gql/queries/project.ts (1)
219-225: LGTM: IMPORT_PROJECT mutation is well-implementedThe IMPORT_PROJECT mutation is correctly implemented. It uses the Upload scalar for file input and returns projectData, which aligns with the expected functionality for importing a project.
For consistency with the EXPORT_PROJECT mutation, consider wrapping the input in an object:
- mutation ImportProject($file: Upload!) { - importProject(input: { file: $file }) { + mutation ImportProject($input: ImportProjectInput!) { + importProject(input: $input) { projectData } }This change would make the mutation more extensible if additional input fields are needed in the future.
web/src/services/i18n/translations/en.yml (7)
26-26: Add the actual translation for "Import".The new translation key "Import" has been added correctly. However, the translation string is empty. Consider adding the actual English translation, which in this case would likely be "Import" as well.
-Import: '' +Import: 'Import'
27-27: Add the actual translation for "Export".The new translation key "Export" has been added correctly. However, the translation string is empty. Consider adding the actual English translation, which in this case would likely be "Export" as well.
-Export: '' +Export: 'Export'
347-347: Add the actual translation for "Failed to export project."The new translation key "Failed to export project." has been added correctly. However, the translation string is empty. Consider adding the actual English translation.
-Failed to export project.: '' +Failed to export project.: 'Failed to export project.'
348-348: Add the actual translation and ensure consistency in punctuation.The new translation key "Successfully exported project!" has been added. However, consider the following points:
- The translation string is empty. Add the actual English translation.
- The use of an exclamation mark in the key is inconsistent with other similar keys in the file (e.g., "Successfully added one or more assets."). Consider removing it for consistency.
-Successfully exported project!: '' +Successfully exported project.: 'Successfully exported project.'
349-349: Add the actual translation for "Failed to import project."The new translation key "Failed to import project." has been added correctly. However, the translation string is empty. Consider adding the actual English translation.
-Failed to import project.: '' +Failed to import project.: 'Failed to import project.'
350-350: Add the actual translation and ensure consistency in punctuation.The new translation key "Successfully imported project!" has been added. However, consider the following points:
- The translation string is empty. Add the actual English translation.
- The use of an exclamation mark in the key is inconsistent with other similar keys in the file (e.g., "Successfully added one or more assets."). Consider removing it for consistency.
-Successfully imported project!: '' +Successfully imported project.: 'Successfully imported project.'
Line range hint
26-351: Consider improving overall file structure and consistency.While the new translation keys have been added successfully, there are a few general improvements that could enhance the maintainability and consistency of the file:
Grouping: The new entries are added at the end of the file. Consider grouping related translations together for better organization and easier maintenance.
Punctuation Consistency: There's inconsistent use of punctuation in the keys (e.g., some end with periods, others don't). Establish a consistent rule for punctuation in translation keys.
Empty Values: All new entries have empty string values. While this is valid YAML, it's recommended to add the actual translations to avoid potential issues in the application.
Duplicate Keys: Be cautious of potentially duplicate keys with slight variations (e.g., "Export" and "Export Project"). Ensure each key serves a unique purpose.
Consider implementing a more structured approach to organizing translations, such as grouping by feature or page, to improve maintainability as the project grows.
web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx (1)
47-63: Consider simplifying by removinguseMemoThe
actionscomponent is relatively simple and may not require memoization withuseMemo. Removing it could simplify the code without significant performance impact.web/src/services/api/projectApi.ts (1)
451-458: Consider redirecting after successful importAfter successfully importing a project, enhancing the user experience by redirecting them to the newly imported project or refreshing the project list can provide immediate feedback and access to the imported content.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (4)
web/src/beta/lib/reearth-ui/components/Icon/Icons/DownloadSimple.svgis excluded by!**/*.svgweb/src/beta/lib/reearth-ui/components/Icon/Icons/SignIn.svgis excluded by!**/*.svgweb/src/services/gql/__gen__/gql.tsis excluded by!**/__gen__/**web/src/services/gql/__gen__/graphql.tsis excluded by!**/__gen__/**
📒 Files selected for processing (10)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts (5 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (4 hunks)
- web/src/beta/lib/reearth-ui/components/Icon/icons.ts (3 hunks)
- web/src/services/api/projectApi.ts (3 hunks)
- web/src/services/gql/queries/project.ts (1 hunks)
- web/src/services/i18n/translations/en.yml (2 hunks)
- web/src/services/i18n/translations/ja.yml (2 hunks)
🧰 Additional context used
🪛 Biome
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
[error] 83-88: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
🔇 Additional comments (30)
web/src/services/gql/queries/project.ts (2)
211-217: LGTM: EXPORT_PROJECT mutation is well-definedThe EXPORT_PROJECT mutation is correctly implemented. It takes a projectId as input and returns projectData, which aligns with the expected functionality for exporting a project.
210-225: Summary: Export and Import mutations successfully addedThe EXPORT_PROJECT and IMPORT_PROJECT mutations have been successfully added to the file. These additions:
- Align with the PR objectives of implementing project export and import functionality.
- Follow consistent naming conventions and code style with existing mutations.
- Are placed logically at the end of the file, maintaining good code organization.
The implementation looks solid and ready for integration with the rest of the system.
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (3)
12-12: LGTM: Import statements and hook usage updated correctly.The changes to the import statements and hook usage are consistent with the new import functionality. The addition of
useRefandhandleImportProjectare appropriate for implementing the file input and handling the import process.Also applies to: 43-43
59-60: LGTM: File input reference added correctly.The
useRefhook is appropriately used to create a reference for the hidden file input. This is a standard approach for programmatically triggering file selection dialogs in React applications.
310-312: LGTM: HiddenFileInput styled component added correctly.The
HiddenFileInputstyled component is well-implemented. It effectively hides the file input visually while maintaining its functionality and accessibility. This is a good practice for creating custom-styled file inputs.web/src/beta/lib/reearth-ui/components/Icon/icons.ts (2)
43-43: LGTM: DownloadSimple icon import added correctly.The import for the DownloadSimple icon is correctly added and maintains consistency with the existing import pattern. The alphabetical order of imports is also preserved.
110-110: LGTM: SignIn icon import added correctly.The import for the SignIn icon is correctly added and maintains consistency with the existing import pattern. The alphabetical order of imports is also preserved.
web/src/services/i18n/translations/ja.yml (6)
26-27: Translations for Import and Export look good!The Japanese translations for "Import" (インポート) and "Export" (エクスポート) are correct and consistent with standard UI terminology in Japanese.
34-35: Updated translations for Rename and Project Setting are appropriate.The Japanese translations for "Rename" (名称変更) and "Project Setting" (プロジェクト設定) are correct and more natural than the previous empty strings. These translations accurately convey the meaning of the original English terms.
347-348: Project export message translations are accurate.The Japanese translations for the project export failure and success messages are correct and maintain proper Japanese grammar and punctuation. They effectively convey the intended meaning to the user.
349-350: Project import message translations are correct and consistent.The Japanese translations for the project import failure and success messages are accurate and maintain consistency with the export messages. They use proper Japanese grammar and effectively communicate the outcome of the import process to the user.
351-351: Translation for "Export Project" is appropriate and consistent.The Japanese translation for "Export Project" (プロジェクトのエクスポート) is correct and maintains consistency with the previously added "Export" translation. It accurately conveys the meaning of the English term in a natural Japanese phrase.
Line range hint
26-351: Overall, the Japanese translations are well-implemented and consistent.The new and updated translations in this file accurately convey the meaning of the English terms and are consistent with Japanese UI conventions. The additions for project export and import functionalities are particularly well-implemented, maintaining grammatical correctness and natural phrasing in Japanese. These changes will effectively support the new features for Japanese-speaking users.
web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts (6)
3-6: ImportinguseProjectFetchercorrectlyThe import statement correctly adds
useProjectFetcherfrom@reearth/services/api.
35-35: State variableexportModalVisibleinitializedThe state variable
exportModalVisibleis correctly initialized usinguseState(false).
57-63: Modal handlers are correctly implementedThe functions
openExportModalandcloseExportModalare properly defined usinguseCallbackto manage the modal's visibility state.
95-100: Export option added to the popup menuThe export option is correctly added to the popup menu with the appropriate title and icon.
158-161: New properties added to the return objectThe properties
exportModalVisible,closeExportModal, andhandleExportProjectare correctly added to the return statement of the hook.
28-28: Verify the usage ofuseExportProjectEnsure that
useExportProjectis correctly initialized. It's destructured fromuseProjectFetcher(), and later used as an async function. Verify thatuseExportProjectreturns the necessary function for exporting the project.To confirm its usage and definition, run the following script:
✅ Verification successful
Verified:
useExportProjectis correctly initialized and used as an async function.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check the definition and usage of `useExportProject`. # Test: Find the export statement of `useExportProject`. rg --type=typescript 'export function useExportProject' src/ # Test: Find where `useExportProject` is imported and used. rg --type=typescript 'useExportProject' src/Length of output: 177
Script:
#!/bin/bash # Description: Check the definition and usage of `useExportProject`. # Test: Find the export statement of `useExportProject`. rg --type=ts 'export function useExportProject' src/ # Test: Find where `useExportProject` is imported and used. rg --type=ts 'useExportProject' src/Length of output: 181
Script:
#!/bin/bash # Description: Check the definition and usage of `useExportProject` within the correct directory. # Test: Find the export statement of `useExportProject` in web/src/. rg --type=ts 'export function useExportProject' web/src/ # Test: Find where `useExportProject` is imported and used in web/src/. rg --type=ts 'useExportProject' web/src/Length of output: 622
web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx (4)
1-7: Imports are correctly updatedThe imports of
ModalandModalPanelfrom"@reearth/beta/lib/reearth-ui"are necessary for the new export modal functionality.
10-10:useMemoimport is appropriateImporting
useMemofrom"react"is appropriate as it's used for memoizing theactionscomponent.
22-22: Translation hookuseTis correctly utilizedUsing the
useThook for internationalization ensures that modal texts are properly translated.
36-39: Destructured hooks are properly expandedThe additional hooks
exportModalVisible,closeExportModal, andhandleExportProjectare appropriately destructured fromuseHooks.web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx (4)
5-7: Importing necessary UI componentsThe addition of
Typography,Modal, andModalPanelimports is appropriate for implementing the export modal functionality.
10-10: Utilizing internationalization withuseThookImporting
useTfrom@reearth/services/i18nenhances internationalization support by enabling translation of text strings within the component.
24-24: Initializing the translation functionInitializing the translation function
twithconst t = useT();correctly sets up internationalization for this component.
49-52: Destructuring additional handlers fromuseHooksThe destructuring of
exportModalVisible,closeExportModal, andhandleExportProjectfromuseHooksintegrates the export modal's state and handlers into the component effectively.web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (3)
41-42: Import new hooks correctlyThe addition of
useStarredProjectsQueryanduseImportProjectfromuseProjectFetcheris appropriate and aligns with their usage in the code.
60-61: IncludefetchMoreandrefetchfor data managementAdding
fetchMoreandrefetchto the destructured return fromuseProjectsQueryensures you can manage project data effectively, especially after importing a new project.
280-281: Verify integration ofhandleImportProjectEnsure that
handleImportProjectis correctly connected to the file input element and that the file input accepts the appropriate file types for project import. This verification will prevent potential issues during the import process.
web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
Outdated
Show resolved
Hide resolved
web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
Outdated
Show resolved
Hide resolved
web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
Outdated
Show resolved
Hide resolved
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
Outdated
Show resolved
Hide resolved
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
Outdated
Show resolved
Hide resolved
m-abe-dev
force-pushed
the
update/uiux_for_import_and_export
branch
from
fee1137
to
caf5c45
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (1)
Line range hint
1-312: Overall assessment: Import functionality well-implemented with minor improvement needed.The changes to implement the import functionality are generally well-done. The file input ref, hidden input, and new action button are correctly implemented. The only improvement needed is adding a key prop to the fragment containing the action buttons.
Consider enhancing the user experience by adding loading states and error handling for the import process in the
handleImportProjectfunction, which is likely implemented in theuseHookscustom hook.🧰 Tools
🪛 Biome
[error] 83-88: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (4)
web/src/beta/lib/reearth-ui/components/Icon/Icons/DownloadSimple.svgis excluded by!**/*.svgweb/src/beta/lib/reearth-ui/components/Icon/Icons/SignIn.svgis excluded by!**/*.svgweb/src/services/gql/__gen__/gql.tsis excluded by!**/__gen__/**web/src/services/gql/__gen__/graphql.tsis excluded by!**/__gen__/**
📒 Files selected for processing (10)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts (5 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (4 hunks)
- web/src/beta/lib/reearth-ui/components/Icon/icons.ts (3 hunks)
- web/src/services/api/projectApi.ts (3 hunks)
- web/src/services/gql/queries/project.ts (1 hunks)
- web/src/services/i18n/translations/en.yml (2 hunks)
- web/src/services/i18n/translations/ja.yml (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (9)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
- web/src/beta/lib/reearth-ui/components/Icon/icons.ts
- web/src/services/api/projectApi.ts
- web/src/services/gql/queries/project.ts
- web/src/services/i18n/translations/en.yml
- web/src/services/i18n/translations/ja.yml
🧰 Additional context used
🪛 Biome
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
[error] 83-88: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
🔇 Additional comments (3)
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (3)
12-12: LGTM: Import statements and hook destructuring updated correctly.The changes to import
useRefand includehandleImportProjectin the hook destructuring are appropriate for implementing the new import functionality.Also applies to: 43-43
59-60: LGTM: File input ref correctly initialized.The
useRefhook is properly used to create a reference for the file input element, which will be used to trigger the file selection dialog programmatically.
309-312: LGTM: HiddenFileInput styled component correctly implemented.The
HiddenFileInputstyled component is properly defined to hide the file input visually while maintaining its functionality. This is a good practice for creating custom-styled file inputs.
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (3)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (4 hunks)
- web/src/services/api/projectApi.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
- web/src/services/api/projectApi.ts
🧰 Additional context used
🪛 Biome
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
[error] 83-88: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
🔇 Additional comments (4)
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (4)
12-12: LGTM: Necessary imports and hook usage for project import functionality.The addition of
useRefandhandleImportProjectare appropriate for implementing the new project import feature.Also applies to: 43-43
59-60: LGTM: Proper use of useRef for file input.The
useRefhook is correctly implemented to create a reference for the hidden file input, which will be used to trigger the file selection dialog.
66-89: Add key prop to the fragment containing action buttons.The implementation of the "Import" button and hidden file input is correct. However, to improve React's rendering efficiency and address the static analysis warning, add a
keyprop to the fragment or its child elements.Apply this change to add a key to the fragment:
- <> + <React.Fragment key="action-buttons"> <ManagerHeaderButton key={"create-project"} // ... other props /> <ManagerHeaderButton key={"import-project"} // ... other props /> <HiddenFileInput // ... other props /> - </> + </React.Fragment>This change will resolve the static analysis warning and improve React's rendering efficiency.
🧰 Tools
🪛 Biome
[error] 83-88: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
310-312: LGTM: Proper implementation of hidden file input.The
HiddenFileInputstyled component is correctly implemented to visually hide the file input while maintaining its functionality. This is a good practice for creating custom-styled file inputs.
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
Outdated
Show resolved
Hide resolved
m-abe-dev
force-pushed
the
update/uiux_for_import_and_export
branch
from
b17e0fa
to
90d3506
Compare
web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
Outdated
Show resolved
Hide resolved
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
Outdated
Show resolved
Hide resolved
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
Outdated
Show resolved
Hide resolved
m-abe-dev
force-pushed
the
update/uiux_for_import_and_export
branch
from
01c1f53
to
cdd0221
Compare
Co-authored-by: lby <[email protected]>
Overview
What I've done
What I haven't done
How I tested
Which point I want you to review particularly
Memo
Summary by CodeRabbit
Release Notes
New Features
.zipfile.Bug Fixes
Localization Updates
These updates significantly enhance project management capabilities within the application.