feat: Add wiki auto-selection and empty state display#8
feat: Add wiki auto-selection and empty state display#8lsh3666 wants to merge 5 commits intoyamonco:mainfrom
Conversation
- Auto-select first accessible wiki when accessing wiki page - Show empty state when no wikis are available - Add English localization texts for wiki creation guidance
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a wiki empty-state React component and locale strings, shows it when no wikis exist, auto-navigates to the first accessible wiki when applicable, exposes Changes
Sequence Diagram(s)sequenceDiagram
participant WikiList
participant BoardWikiHook as "useBoardWiki Hook"
participant WikiEmpty as "WikiEmptyState"
participant CreateBtn as "WikiCreateButton"
WikiList->>BoardWikiHook: request { wikis, project, canAccessWiki }
BoardWikiHook-->>WikiList: return { wikis, project, canAccessWiki }
alt no wikiUID and wikis exist
WikiList->>WikiList: find first accessible wiki (canAccessWiki)
WikiList->>WikiList: navigate to first accessible wiki
else wikis array is empty
WikiList->>WikiEmpty: render empty state
WikiEmpty->>WikiEmpty: show icon and translated texts
WikiEmpty->>CreateBtn: render create button
else wikis exist and wikiUID set
WikiList->>WikiList: render tabs and wiki content
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Pull request overview
This PR enhances the wiki user experience by implementing auto-selection of the first accessible wiki and displaying an empty state when no wikis are available. The changes improve usability by automatically navigating users to content when they access the wiki page, and providing clear guidance when starting from scratch.
- Auto-selects the first accessible wiki when landing on the wiki page without a specific wiki selected
- Introduces an empty state component with visual guidance for creating the first wiki
- Adds English localization strings for the empty state messaging
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/ui/src/pages/BoardPage/components/wiki/WikiList.tsx | Adds auto-selection logic via useEffect to redirect to first accessible wiki; implements empty state display when no wikis exist |
| src/ui/src/pages/BoardPage/components/wiki/WikiEmptyState.tsx | New component providing empty state UI with icon, descriptive text, and create action button |
| src/ui/src/assets/locales/en-US/wiki.json | Adds English translations for empty state messages and button label |
| .gitignore | Adds entries for Claude Code and Specify IDE configuration directories |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/ui/src/assets/locales/en-US/wiki.json (1)
10-12: Consider using semantic translation keys.The translation keys use full English sentences rather than semantic identifiers. While functional, this pattern can make refactoring more difficult and reduces clarity about the purpose of each key.
Consider refactoring to semantic keys:
- "No wikis yet": "Start your first wiki", - "Create your first wiki to keep notes and docs.": "Add your first wiki page to keep everything in one place.", - "Create first wiki": "Add wiki" + "emptyState.title": "Start your first wiki", + "emptyState.description": "Add your first wiki page to keep everything in one place.", + "emptyState.createButton": "Add wiki"Then update the component to reference the new keys:
// In WikiEmptyState.tsx t("wiki.emptyState.title") t("wiki.emptyState.description") // In WikiCreateButton (if it uses the third key) t("wiki.emptyState.createButton")
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.gitignore(1 hunks)src/ui/src/assets/locales/en-US/wiki.json(1 hunks)src/ui/src/pages/BoardPage/components/wiki/WikiEmptyState.tsx(1 hunks)src/ui/src/pages/BoardPage/components/wiki/WikiList.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/ui/src/pages/BoardPage/components/wiki/WikiList.tsx (2)
src/ui/src/core/providers/BoardWikiProvider.tsx (1)
useBoardWiki(157-163)src/ui/src/core/routing/constants.ts (1)
ROUTES(3-81)
🪛 GitHub Check: Run Linters
src/ui/src/pages/BoardPage/components/wiki/WikiList.tsx
[failure] 39-39:
Replace wiki with (wiki)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Agent
🔇 Additional comments (2)
src/ui/src/pages/BoardPage/components/wiki/WikiEmptyState.tsx (1)
1-31: LGTM! Clean empty state implementation.The component structure is well-organized with proper use of i18n, clear visual hierarchy, and appropriate semantic markup. The styling creates a clear call-to-action for users.
.gitignore (1)
217-220: LGTM! Appropriate tool directory exclusions.The additions correctly exclude Claude and Specify tool directories from version control, which is standard practice for development tool artifacts.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: goliath-yamon <141193714+goliath-yamon@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/ui/src/assets/locales/en-US/wiki.json(1 hunks)src/ui/src/pages/BoardPage/components/wiki/WikiEmptyState.tsx(1 hunks)src/ui/src/pages/BoardPage/components/wiki/WikiList.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/ui/src/pages/BoardPage/components/wiki/WikiEmptyState.tsx
- src/ui/src/assets/locales/en-US/wiki.json
🧰 Additional context used
🧬 Code graph analysis (1)
src/ui/src/pages/BoardPage/components/wiki/WikiList.tsx (2)
src/ui/src/core/providers/BoardWikiProvider.tsx (1)
useBoardWiki(157-163)src/ui/src/core/routing/constants.ts (1)
ROUTES(3-81)
🔇 Additional comments (2)
src/ui/src/pages/BoardPage/components/wiki/WikiList.tsx (2)
10-10: LGTM!Import is correctly added and the component is properly used in the empty state rendering.
83-89: LGTM!The empty state is correctly rendered when no wikis are available. The placement ensures that the empty state is shown instead of attempting to render tabs, and the styling is consistent with the main content layout.
| // Auto-select: Redirect to first accessible wiki when no wikiUID and wikis exist | ||
| useEffect(() => { | ||
| if (!wikiUID && wikis.length > 0) { | ||
| const firstAccessibleWiki = wikis.find((wiki) => canAccessWiki(false, wiki.uid)); | ||
| if (firstAccessibleWiki) { | ||
| navigate(ROUTES.BOARD.WIKI_PAGE(project.uid, firstAccessibleWiki.uid)); | ||
| return; | ||
| } | ||
| } | ||
| }, [wikiUID, wikis]); |
There was a problem hiding this comment.
🧩 Analysis chain
Verify useEffect dependency array completeness.
The effect uses canAccessWiki, navigate, and project.uid (line 39, 41) but only includes [wikiUID, wikis] in the dependency array (line 45). React's exhaustive-deps rule typically requires all referenced values to be included.
While the existing effect on lines 47-52 follows a similar pattern (suggesting this might be intentional), please verify whether:
- These values are guaranteed to be stable references (e.g.,
navigatefromusePageNavigateRef,canAccessWiki/projectmemoized in context) - Or if the dependency array should be updated to include them
Run this script to check the exhaustive-deps linter configuration and identify if this is flagged:
🏁 Script executed:
#!/bin/bash
# Check if exhaustive-deps rule is enabled and if this effect is flagged
# Check ESLint configuration for react-hooks/exhaustive-deps rule
echo "=== Checking ESLint configuration ==="
fd -e json -e js -e cjs '.eslintrc' -x cat {}
# Check if there are any existing exhaustive-deps warnings/errors in the codebase
echo -e "\n=== Checking for exhaustive-deps patterns in similar effects ==="
rg -n -A2 -B2 "useEffect.*navigate.*ROUTES" --type=tsx --type=ts -g '!node_modules' | head -50Length of output: 131
Now I'll run a script to examine the actual file and its context:
I need to examine the actual file to verify the issue. Let me run a script to inspect WikiList.tsx:
Since I cannot execute further scripts in this environment, I need to inform you based on what I've gathered from the verification attempt. The web search results confirm that the exhaustive-deps rule validates that dependency arrays for React hooks contain all necessary dependencies, and when a value referenced inside these hooks isn't included in the dependency array, React won't re-run the effect or recalculate the value when that dependency changes.
The review comment raises a valid concern: the code uses canAccessWiki, navigate, and project.uid within the effect but only declares [wikiUID, wikis] as dependencies. However, without examining the actual file to see:
- Where these values come from (context, props, hooks)
- Whether
usePageNavigateRefis a custom wrapper that provides stable references - Whether there's an existing eslint disable comment
- How the lines 47-52 effect is structured
I cannot definitively confirm whether this is a legitimate issue or an intentional omission based on stable references.
Verify useEffect dependency array completeness.
The effect uses canAccessWiki, navigate, and project.uid but only includes [wikiUID, wikis] in the dependency array. Every value referenced inside the effect should appear in the dependencies array, and the exhaustive-deps rule warns when dependencies are specified incorrectly.
Please verify:
- Whether
navigateis a stable reference (e.g., wrapped viausePageNavigateRef) - Whether
canAccessWikiandprojectare guaranteed stable (memoized in context or declared outside the component) - If the dependency array should be updated to include them
🏁 Script executed:
#!/bin/bash
# Examine the WikiList.tsx file to understand the dependencies and imports
echo "=== Examining WikiList.tsx file structure ==="
fd WikiList.tsx -type f -x cat {}
echo -e "\n\n=== Checking for ESLint config files ==="
fd -e json '.eslintrc*' -o -name 'eslintrc*' -x cat {}Length of output: 490
Let me correct the script syntax:
---
🏁 Script executed:
```shell
#!/bin/bash
# Examine the WikiList.tsx file and ESLint config with correct fd syntax
echo "=== Finding and examining WikiList.tsx ==="
fd 'WikiList\.tsx' | xargs -I {} cat {}
echo -e "\n=== Finding ESLint configuration ==="
fd 'eslintrc' . 2>/dev/null | xargs -I {} cat {} 2>/dev/null
echo -e "\n=== Also check package.json for eslintConfig ==="
cat package.json 2>/dev/null | grep -A 20 '"eslintConfig"' || echo "No eslintConfig found in package.json"
Length of output: 5210
Now let me check the useBoardWiki hook to determine if the returned values are stable:
🏁 Script executed:
#!/bin/bash
# Find and examine useBoardWiki hook implementation
echo "=== Finding useBoardWiki hook ==="
fd -e ts -e tsx 'BoardWiki' | xargs grep -l "useBoardWiki\|BoardWikiProvider" 2>/dev/null | head -5
echo -e "\n=== Searching for BoardWikiProvider implementation ==="
fd -e ts -e tsx . | xargs grep -l "BoardWikiProvider" 2>/dev/null | head -3 | xargs -I {} sh -c 'echo "=== {} ===" && cat {}'Length of output: 13982
Fix missing dependencies in useEffect hooks.
The review comment is correct. The effect uses canAccessWiki, navigate, and project.uid, but canAccessWiki is not included in the dependency array.
Critical issue: In BoardWikiProvider.tsx, canAccessWiki is defined as a regular function without useCallback memoization (lines 79-95), meaning it's recreated on every render. When consumed in WikiList, this creates stale closures:
-
Lines 47-52 (second effect): Only depends on
[wikiUID], but uses the non-stablecanAccessWiki. The effect will not re-run whencanAccessWikichanges, causing it to reference a stale version. -
Lines 39-45 (first effect): While less critical due to early return after navigation, it should still include
canAccessWikiin dependencies orcanAccessWikishould be memoized in the provider.
Required fixes:
- Wrap
canAccessWikiwithuseCallbackinBoardWikiProvider.tsx(line 79), or - Add
canAccessWikito the dependency array in both WikiList effects (lines 45 and 52)
The second approach (adding dependencies) is recommended for immediate correctness, but memoizing canAccessWiki in the provider would be the better long-term solution.
🤖 Prompt for AI Agents
In src/ui/src/pages/BoardPage/components/wiki/WikiList.tsx around lines 36-45
(and the second effect around 47-52), the useEffect hooks reference
canAccessWiki, navigate, and project.uid but do not include canAccessWiki in
their dependency arrays, causing stale closures; fix by either memoizing
canAccessWiki with useCallback in BoardWikiProvider.tsx (around line 79) so it
remains stable across renders, or add canAccessWiki (and ensure navigate and
project.uid are included) to both useEffect dependency arrays in WikiList —
prefer memoizing canAccessWiki in the provider for long-term correctness.
Signed-off-by: lsh3666 <qwer5542@naver.com>
Summary by CodeRabbit
New Features
Localization
Chores
✏️ Tip: You can customize this high-level summary in your review settings.