[Feature] Projects Management | View Archived Project (list & gallery) #3658
Conversation
WalkthroughThe changes update the codebase to improve code formatting and internationalization. The VSCode settings now enable automatic formatting on save. Several UI components have been modified to replace hard-coded English strings with translatable keys, thereby enhancing locale support. Additionally, a new constant in the page component allows filtering of archived projects based on a URL parameter, and the sidebar navigation has been updated to include a working link for archived projects. Various locale JSON files have been enhanced with new keys for archiving and restoring actions. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Sidebar
participant PageComponent
participant DataTable
participant GridItem
User->>Sidebar: Click "Archived Projects"
Sidebar-->>User: Redirect to /projects?archived=true
User->>PageComponent: Request archived projects page
PageComponent->>PageComponent: Parse 'archived' query parameter
PageComponent->>DataTable: Pass `archived` prop
PageComponent->>GridItem: Pass `isArchived` prop
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
apps/web/app/[locale]/projects/components/grid-item.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. apps/web/app/[locale]/projects/components/page-component.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. apps/web/components/app-sidebar.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (8)
apps/web/locales/pl.json (1)
371-373: New Localization Keys (ARCHIVE_AT and RESTORE) in Polish Locale
The new keys"ARCHIVE_AT": "Archiwizuj o"and"RESTORE": "Przywróć"have been introduced to support the archived projects feature. Please verify that the translation for"ARCHIVE_AT"(currently “Archiwizuj o”) accurately reflects its intended usage (for example, when displaying a timestamp) within the UI. If a more descriptive or contextually appropriate translation (e.g., “Zarchiwizowano”) is preferred, consider updating it for improved clarity and consistency.apps/web/locales/bg.json (1)
371-373: New Localization Keys (ARCHIVE_AT and RESTORE) in Bulgarian Locale
The added keys"ARCHIVE_AT": "Архивиране на"and"RESTORE": "Възстановяване"are intended to support the new archiving functionality. Please ensure that the translation for"ARCHIVE_AT"clearly communicates its intended meaning (typically used to indicate a timestamp or an archival moment) and is consistent with similar localized entries in other language files.apps/web/locales/en.json (1)
371-375: Localization Keys for Archiving in English
The new keys"ARCHIVE","ARCHIVE_AT", and"RESTORE"have been added under the"common"section. Please confirm that these entries are consistent with the usage in UI components (for example, in the DataTableProject and GridItem components) and that their names exactly match the keys used in other locales.apps/web/locales/fr.json (1)
371-373: French Localization for Archiving Functionality
The new entries"ARCHIVE": "Archive","ARCHIVE_AT": "Archiver le", and"RESTORE": "Restaurer"have been added. Confirm that the phrasing (including the spacing and punctuation) meets your style guidelines, and that these keys are consistently referenced in the app following the feature update.apps/web/app/[locale]/projects/components/data-table.tsx (4)
236-236: Internationalize the "Archived At" text.The column header text is hardcoded in English, which doesn't align with the application's internationalization approach. Other column headers in this file use the translation function
t().- <span>Archived At</span> + <span>{t('common.ARCHIVE_AT')}</span>
537-538: Use theme variables instead of hardcoded colors.The button styling uses hardcoded color values which makes it harder to maintain consistent theming across the application.
- className={` bg-[#E2E8F0] text-[#3E1DAD] gap-2 group flex items-center rounded-md px-2 py-2 text-xs`} + className={`bg-secondary text-primary gap-2 group flex items-center rounded-md px-2 py-2 text-xs`}
561-572: Eliminate state duplication in columnVisibility.The columnVisibility is defined twice - once in the initial state and again in the table configuration. This creates a maintenance risk if one is updated but not the other.
- columnVisibility : { - project: true, - status: !archived, - archivedAt: archived, - startDate: true, - endDate: true, - members: true, - managers: true, - teams: true, - actions: !archived, - restore: archived, - }, + columnVisibility,
62-63: Type inconsistency in component props declaration.The component is using a mixed approach for defining props - an inline object type in the function parameters rather than a separate interface, which is inconsistent with TypeScript best practices.
Consider creating a dedicated interface for the component props:
interface DataTableProjectProps { data: ProjectTableDataType[]; loading: boolean; archived?: boolean; } export const DataTableProject = memo((props: DataTableProjectProps) => { const { data, loading, archived = false } = props; // ...
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (22)
.vscode/settings.json(2 hunks)apps/web/app/[locale]/projects/components/data-table.tsx(6 hunks)apps/web/app/[locale]/projects/components/grid-item.tsx(3 hunks)apps/web/app/[locale]/projects/components/page-component.tsx(4 hunks)apps/web/components/app-sidebar.tsx(2 hunks).vscode/settings.json(1 hunks)apps/web/app/[locale]/projects/components/data-table.tsx(1 hunks)apps/web/app/[locale]/projects/components/data-table.tsx(2 hunks)apps/web/app/[locale]/projects/components/grid-item.tsx(2 hunks)apps/web/locales/ar.json(2 hunks)apps/web/locales/bg.json(2 hunks)apps/web/locales/de.json(2 hunks)apps/web/locales/en.json(2 hunks)apps/web/locales/es.json(2 hunks)apps/web/locales/fr.json(2 hunks)apps/web/locales/he.json(2 hunks)apps/web/locales/it.json(1 hunks)apps/web/locales/nl.json(1 hunks)apps/web/locales/pl.json(1 hunks)apps/web/locales/pt.json(1 hunks)apps/web/locales/ru.json(1 hunks)apps/web/locales/zh.json(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
apps/web/app/[locale]/projects/components/page-component.tsx (1)
Learnt from: CREDO23
PR: ever-co/ever-teams#3626
File: apps/web/app/[locale]/projects/components/page-component.tsx:119-119
Timestamp: 2025-02-28T09:17:46.802Z
Learning: In the projects page component, filtering of projects based on the active team has been moved out of the useEffect hook that fetches organization projects, and is now handled in the pagination logic instead.
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (18)
.vscode/settings.json (1)
11-11: Enable Auto-Format on Save
Uncommenting and setting"editor.formatOnSave": trueis a straightforward improvement that ensures code is automatically formatted on save. This change supports consistent code styling aligned with your Prettier configuration.apps/web/locales/nl.json (1)
371-373: Add New Localization Keys for Archiving
The new keys"ARCHIVE_AT": "Archiveren op"and"RESTORE": "Herstellen"have been correctly added to the "common" section. These additions will ensure that the archiving feature is fully supported in Dutch, and the translations can be consistently used across the UI components.apps/web/locales/ru.json (1)
371-373: Integrate New Archiving Localization Entries for Russian
The changes introducing"ARCHIVE_AT": "Архивировать на"and"RESTORE": "Восстановить"in the common section effectively enhance internationalization support for archive functionalities. Please verify that these keys are properly referenced in the UI components handling archived projects to ensure consistency across locales.apps/web/locales/he.json (1)
371-373: New Archive Localization Keys in Hebrew
The keys"ARCHIVE_AT": "ארכוב בתאריך"and"RESTORE": "שחזר"have been added to extend the archiving functionality. The translations appear appropriate and consistent with the existing language tone. Please ensure these keys are referenced in the relevant UI components (such as in DataTableProject and GridItem) and double-check for consistency with similar changes in other locale files.apps/web/locales/ar.json (1)
353-355: New Archive Localization Keys in Arabic
The new entries"ARCHIVE_AT": "أرشفة في"and"RESTORE": "استعادة"have been introduced alongside the existing"ARCHIVE": "أرشيف". The translations seem accurate and aligned with the intended archival functionality. Verify that these keys are consistently integrated in the application UI and that similar changes in other locale files remain in sync.apps/web/locales/zh.json (1)
372-374: Chinese Translation for Archive Feature Keys
The added keys"ARCHIVE","ARCHIVE_AT", and"RESTORE"now carry the translations"存档","归档于", and"恢复"respectively. These translations appear correct; please verify they are integrated with the UI (e.g. in the archived projects components) to ensure proper rendering.apps/web/locales/pt.json (1)
372-374: Proper internationalization for archive functionality.The addition of these translation keys for "ARCHIVE_AT" and "RESTORE" aligns with the PR objective to implement archived project viewing functionality. These translations will allow Portuguese users to properly interact with the archiving features.
apps/web/locales/it.json (1)
372-374: Appropriate Italian translations for archive features.These translations for "ARCHIVE_AT" and "RESTORE" are correctly implemented to support the archived projects feature in Italian. The consistent approach across localization files ensures a uniform user experience regardless of language preference.
apps/web/components/app-sidebar.tsx (2)
245-245: Archived projects URL now properly implemented.The URL for the "Archived projects" link has been updated to include a query parameter
?archived=true. This enables navigation to filtered archived projects, which directly implements the PR objective for viewing archived projects.
339-339:❓ Verification inconclusive
Verify if NavProjects component should be commented out.
The NavProjects component has been commented out, which removes project-related navigation from the sidebar. This seems inconsistent with the PR objective of implementing project viewing functionality.
Is this intentional? Please confirm if the NavProjects component should remain commented out or if this was an oversight. The change may impact how users navigate through projects.
🏁 Script executed:
#!/bin/bash # Search for usages of NavProjects to understand its purpose grep -r "NavProjects" --include="*.tsx" --include="*.ts" .Length of output: 219
Potential Unintentional Removal of Project Navigation
It appears that the
NavProjectscomponent, defined inapps/web/components/nav-projects.tsx, is currently commented out inapps/web/components/app-sidebar.tsx(line 339). Given that the PR aims to implement project viewing functionality, please confirm whether this change is intentional. If the project navigation is meant to remain active, consider re-enabling the component; otherwise, it would be helpful to clarify in the PR why it has been disabled.apps/web/locales/es.json (1)
371-373: Localization keys correctly added for archive functionality.The new translation keys for archive functionality have been properly added to the Spanish localization file. These keys will support the internationalization of the archived projects feature.
apps/web/locales/de.json (1)
371-373: Localization keys correctly added for archive functionality.The new translation keys for archive functionality have been properly added to the German localization file with appropriate translations. These keys will ensure the archived projects feature works correctly for German-speaking users.
apps/web/app/[locale]/projects/components/grid-item.tsx (2)
88-88: Properly localized the restore button text.The hardcoded "Restore" text has been replaced with the localized version using the translation function, improving internationalization.
110-122: Properly implemented archived project display with localization.The archived date section has been correctly implemented with:
- Localized "Archive At" label using the translation function
- Consistent date formatting using moment.js
- Proper fallback display when archive date is not available
This implementation ensures a consistent user experience across different languages.
apps/web/app/[locale]/projects/components/page-component.tsx (4)
66-66: Well-implemented URL parameter for toggling archived projects view.Using a URL parameter to control the visibility of archived projects is a clean approach that enables bookmarking and sharing specific views. This implementation makes the feature discoverable and follows web application best practices.
102-118: Project filtering logic correctly handles archived status.The filtering logic has been properly updated to:
- Consider the archived status of projects
- Include the necessary
archivedAtproperty in the project dataThis implementation maintains the existing pattern while adding support for the new archiving feature.
123-123: Appropriate dependency added to useEffect.Adding
showArchivedProjectsto the dependency array ensures the filtering logic reruns when the archived parameter changes, which is necessary for the feature to work correctly.
220-220: Correctly propagated archived state to child components.The archived state is properly passed to both the DataTableProject and GridItem components, ensuring consistent behavior across different view modes.
Also applies to: 241-241
| const a = rowA.original.startDate ? moment(rowA.original.startDate).toDate() : new Date(0); // Default to epoch if no date | ||
| const b = rowB.original.startDate ? moment(rowB.original.startDate).toDate() : new Date(0); | ||
|
|
||
| return b.getTime() - a.getTime(); |
There was a problem hiding this comment.
Fix incorrect sorting logic in archivedAt column.
The sorting function is comparing startDate values instead of archivedAt values, which will lead to incorrect sorting results when viewing archived projects.
sortingFn: (rowA, rowB) => {
- const a = rowA.original.startDate ? moment(rowA.original.startDate).toDate() : new Date(0); // Default to epoch if no date
- const b = rowB.original.startDate ? moment(rowB.original.startDate).toDate() : new Date(0);
+ const a = rowA.original.archivedAt ? moment(rowA.original.archivedAt).toDate() : new Date(0); // Default to epoch if no date
+ const b = rowB.original.archivedAt ? moment(rowB.original.archivedAt).toDate() : new Date(0);
return b.getTime() - a.getTime();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const a = rowA.original.startDate ? moment(rowA.original.startDate).toDate() : new Date(0); // Default to epoch if no date | |
| const b = rowB.original.startDate ? moment(rowB.original.startDate).toDate() : new Date(0); | |
| return b.getTime() - a.getTime(); | |
| const a = rowA.original.archivedAt ? moment(rowA.original.archivedAt).toDate() : new Date(0); // Default to epoch if no date | |
| const b = rowB.original.archivedAt ? moment(rowB.original.archivedAt).toDate() : new Date(0); | |
| return b.getTime() - a.getTime(); |
| { | ||
| id: 'restore', | ||
| cell: () => ( | ||
| <button | ||
| className={` bg-[#E2E8F0] text-[#3E1DAD] gap-2 group flex items-center rounded-md px-2 py-2 text-xs`} | ||
| > | ||
| <RotateCcw size={15} /> <span>{t("common.RESTORE")}</span> | ||
| </button> | ||
| ), |
There was a problem hiding this comment.
Implement restore functionality and internationalize button text.
The restore button is currently non-functional and its text is hardcoded. You should add an onClick handler and use the translation function for the button text.
- cell: () => (
+ cell: ({ row }) => (
<button
+ onClick={() => {
+ // Implement the restore logic here
+ console.log('Restore project with ID:', row.original.project.id);
+ }}
className={` bg-[#E2E8F0] text-[#3E1DAD] gap-2 group flex items-center rounded-md px-2 py-2 text-xs`}
>
- <RotateCcw size={15} /> <span>Restore</span>
+ <RotateCcw size={15} /> <span>{t('common.RESTORE')}</span>
</button>
),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { | |
| id: 'restore', | |
| cell: () => ( | |
| <button | |
| className={` bg-[#E2E8F0] text-[#3E1DAD] gap-2 group flex items-center rounded-md px-2 py-2 text-xs`} | |
| > | |
| <RotateCcw size={15} /> <span>{t("common.RESTORE")}</span> | |
| </button> | |
| ), | |
| { | |
| id: 'restore', | |
| cell: ({ row }) => ( | |
| <button | |
| onClick={() => { | |
| // Implement the restore logic here | |
| console.log('Restore project with ID:', row.original.project.id); | |
| }} | |
| className={` bg-[#E2E8F0] text-[#3E1DAD] gap-2 group flex items-center rounded-md px-2 py-2 text-xs`} | |
| > | |
| <RotateCcw size={15} /> <span>{t('common.RESTORE')}</span> | |
| </button> | |
| ), |
Description
Close #3317
Type of Change
Checklist
Current screenshots
Loom
Summary by CodeRabbit