Conversation
WalkthroughThis pull request adds two new translation keys ("quickstart_guide" and "not_right_now") to the localized JSON files for English, Spanish, French, Japanese, and Chinese. It also introduces several UI component modifications in the home dashboard area, including new hooks for routing and project state, improved error handling, and adjustments to empty state rendering. Additionally, a new HomeLoader component is added, the MobX observer pattern is implemented in the NoProjectsEmptyState component, and a loading state is integrated into the home workspace store. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DashboardWidgets
participant Nav as usePathname
participant Project as useProject
participant Loader as HomeLoader
participant Empty as NoProjectsEmptyState
User->>DashboardWidgets: Navigate to home dashboard
DashboardWidgets->>Nav: Get current pathname
DashboardWidgets->>Project: Retrieve project loader state
alt Loader active (not "loaded")
Project-->>DashboardWidgets: Return loader status
DashboardWidgets->>Loader: Render HomeLoader
else Loader complete ("loaded")
Project-->>DashboardWidgets: Return loader status
DashboardWidgets->>Empty: Conditionally render NoProjectsEmptyState
end
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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
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: 0
🧹 Nitpick comments (6)
web/core/components/home/widgets/empty-states/no-projects.tsx (2)
110-121: Add a default case in the switch statement.
The isComplete() function relies on matching specific strings. Consider adding a default case to ensure a boolean is always returned, even if a new flag is introduced in the future.const isComplete = (type: string) => { switch (type) { case "projects": return joinedProjectIds?.length > 0; case "visited_members": return storedValue?.visited_members; case "visited_workspace": return storedValue?.visited_workspace; case "visited_profile": return storedValue?.visited_profile; + default: + return false; // or handle in another appropriate way } };
123-123: Optional early return check.
Returning null if storedValue.hide is true is a concise approach. Just be sure that transitioning from "hide: true" back to "false" is accounted for if the user wants the guide again.web/core/components/home/widgets/links/use-links.tsx (1)
45-87: Consider standardizing error handling across methods.The error handling pattern differs between methods:
create: useserror?.data?.url?.errorupdateandremove: useerror?.data?.errorConsider standardizing the error handling approach across all methods for better maintainability.
// in update method setToast({ - message: error?.data?.error ?? t("links.toasts.not_updated.message"), + message: error?.data?.url?.error ?? t("links.toasts.not_updated.message"), type: TOAST_TYPE.ERROR, title: t("links.toasts.not_updated.title"), }); // in remove method setToast({ - message: error?.data?.error ?? t("links.toasts.not_removed.message"), + message: error?.data?.url?.error ?? t("links.toasts.not_removed.message"), type: TOAST_TYPE.ERROR, title: t("links.toasts.not_removed.title"), });web/core/components/home/home-dashboard-widgets.tsx (1)
68-68: Consider using a more robust way to check for wiki app context.The current check
pathname.includes(/${workspaceSlug.toString()}/pages)might be fragile if the URL structure changes. Consider using a dedicated constant or route configuration.+ const WIKI_PATH_SUFFIX = '/pages'; + const isWikiApp = pathname.endsWith(`/${workspaceSlug.toString()}${WIKI_PATH_SUFFIX}`); - const isWikiApp = pathname.includes(`/${workspaceSlug.toString()}/pages`);web/core/store/workspace/home.ts (1)
83-87: Consider improving error handling.The error handling could be improved by cleaning up the state before rethrowing the error.
} catch (error) { + runInAction(() => { + // Reset state on error + this.widgets = []; + this.widgetsMap = {}; + this.loading = false; + }); - console.error("Failed to fetch widgets"); - this.loading = false; throw error; }packages/i18n/src/locales/fr/translations.json (1)
549-550: New French Translation Keys for Home Empty State
The new keys "quickstart_guide" and "not_right_now" have been added with appropriate French translations ("Guide de démarrage rapide" and "Pas maintenant"). This update is consistent with similar changes made in the other locale files and enhances user guidance in the home empty state.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
packages/i18n/src/locales/en/translations.json(1 hunks)packages/i18n/src/locales/es/translations.json(1 hunks)packages/i18n/src/locales/fr/translations.json(1 hunks)packages/i18n/src/locales/ja/translations.json(1 hunks)packages/i18n/src/locales/zh-CN/translations.json(1 hunks)web/core/components/home/home-dashboard-widgets.tsx(3 hunks)web/core/components/home/widgets/empty-states/no-projects.tsx(5 hunks)web/core/components/home/widgets/links/use-links.tsx(1 hunks)web/core/components/home/widgets/loaders/home-loader.tsx(1 hunks)web/core/components/home/widgets/loaders/index.ts(1 hunks)web/core/components/home/widgets/recents/index.tsx(2 hunks)web/core/components/stickies/layout/stickies-list.tsx(1 hunks)web/core/store/workspace/home.ts(4 hunks)web/core/store/workspace/link.store.ts(0 hunks)
💤 Files with no reviewable changes (1)
- web/core/store/workspace/link.store.ts
✅ Files skipped from review due to trivial changes (1)
- web/core/components/stickies/layout/stickies-list.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (18)
web/core/components/home/widgets/empty-states/no-projects.tsx (7)
2-3: Well-structured imports.
The newly added imports for "mobx-react," "lucide-react," "useLocalStorage," "cn," and additional store hooks are cohesive and well-organized.Also applies to: 6-6, 9-9, 12-12, 15-15
18-18: Good use of MobX.
Wrapping the component with observer() ensures reactive updates whenever observable data changes. This is a valid approach for real-time UI updates.
26-26: Potential null check.
When referencing joinedProjectIds, ensure that you handle potential undefined or null values (e.g., if the user or project data fails to load).
28-33: LocalStorage usage.
Storing progress flags for a quickstart guide in local storage is typically safe. However, be mindful not to store sensitive user data or PII here to prevent unintended exposure.
46-47: Consistent icon usage and flag definitions.
Adding the icon elements and flag properties is a clear approach to keep the UI and state tracking in sync. The "size-10" class is consistently applied, which aids style uniformity.Also applies to: 63-64, 74-75, 103-103
126-190: Great quickstart guide UI structure.
Mapping over EMPTY_STATE_DATA is a clean way to handle multiple steps. The storage updates (setValue) correctly record progress. The layout is visually clear and easy to maintain.
193-193: No concerns regarding the closing block.
Overall, the component's structure is complete and consistent with React best practices.web/core/components/home/widgets/loaders/index.ts (1)
2-2: Useful expansion of exports.
Exporting from "./home-loader" provides a convenient way to structure and reuse loader functionality outside this file.web/core/components/home/widgets/loaders/home-loader.tsx (2)
1-5: Client-side loader definition.
Using "use client" ensures this code runs client-side for immediate user feedback. The lodash "range" utility and the "@plane/ui" Loader are an appropriate pairing for rendering skeleton loaders.
7-22: Readable and concise loading structure.
Mapping over three loader items provides a clear approach to display placeholders across multiple sections. This is simple, effective, and aligns well with furnishing a consistent UI skeleton.web/core/components/home/widgets/links/use-links.tsx (1)
45-47: LGTM! Improved error handling for URL-specific errors.The changes enhance error handling by providing more specific error messages related to URL validation.
web/core/components/home/home-dashboard-widgets.tsx (1)
70-70: LGTM! Added proper loading state handling.The addition of loading state handling with
HomeLoaderimproves user experience by providing visual feedback during data fetching.web/core/components/home/widgets/recents/index.tsx (1)
16-16: LGTM! Improved component responsibility.The removal of project-related logic and its relocation to the parent component improves separation of concerns and follows the single responsibility principle.
web/core/store/workspace/home.ts (1)
10-10: LGTM! Added proper loading state management.The addition of the
loadingobservable and its management infetchWidgetsimproves state handling and user experience.Also applies to: 29-29, 40-40, 74-85
packages/i18n/src/locales/zh-CN/translations.json (1)
549-550: New Translation Keys Added: "quickstart_guide" and "not_right_now"
The additions of these two new keys in the "home" empty state are clear and appear to align with the overall localization strategy. Please verify that these Chinese translations mirror the intended tone and meaning from the corresponding entries in other locales to maintain consistency across languages.packages/i18n/src/locales/ja/translations.json (1)
549-550: New Translation Keys Added for Home Empty State
The addition of "quickstart_guide" with the value "クイックスタートガイド" and "not_right_now" with the value "今はしない" is clear and consistent with similar entries in other locale files. Please verify that these keys are used correctly in the home widget’s empty state UI and that their translations accurately convey the intended meaning.packages/i18n/src/locales/en/translations.json (1)
379-380: New Translation Keys Added for Home Widget:
The keys "quickstart_guide" and "not_right_now" have been added under the "home.empty" section. Their messages ("Your quickstart guide" and "Not right now") are clear and concise, matching the tone and style of other UI text in the file. Please ensure that these keys are similarly updated across other locale files for consistency.packages/i18n/src/locales/es/translations.json (1)
548-551: New Translation Keys Added for Home Empty StateThe new keys "quickstart_guide" with value "Guía de inicio rápido" and "not_right_now" with value "Ahora no" have been accurately added under the "home.empty" section. Their translations are consistent with the corresponding keys in other locale files as described in the AI summary and PR objectives. Please ensure that these keys are used consistently across the different language files to keep the UI uniform.
2 participants
Description
This PR has the following changes:
Summary by CodeRabbit