[WEB-3759]chore: updated module and pages detail header#6903
[WEB-3759]chore: updated module and pages detail header#6903
Conversation
WalkthroughThe changes update two header components in the web application. In the module header, an unused dropdown option is removed, and a new quick actions component is incorporated with adjusted imports and styling. In the page header, a new access icon component is introduced to display specific icons based on the page’s archived status and access level. Button classes and icon display logic have been modified to better reflect the intended UI improvements. Changes
Sequence Diagram(s)sequenceDiagram
participant UI
participant MIH as ModuleIssuesHeader
participant MQA as ModuleQuickActions
UI->>MIH: Render module header
MIH->>MQA: Invoke ModuleQuickActions with props
MQA-->>MIH: Return rendered quick actions
MIH->>UI: Render updated header view
sequenceDiagram
participant UI
participant PH as PageHeader
participant PAI as PageAccessIcon
UI->>PH: Render page header
PH->>PAI: Request icon based on page data
PAI->>PAI: Determine archived status and access level
PAI-->>PH: Return corresponding icon (Archive, Earth, or Lock)
PH->>UI: Render page link with access icon
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ 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 (
|
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
vamsikrishnamathala
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: 1
🧹 Nitpick comments (2)
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx (1)
23-33: Consider type-safety improvement for PageAccessIcon component.The component accepts the entire page object but should properly define its props interface for better type safety.
-const PageAccessIcon = (page: TPage) => ( +interface PageAccessIconProps { + archived_at?: string | null; + access: EPageAccess; +} + +const PageAccessIcon = ({ archived_at, access }: PageAccessIconProps) => ( <div> - {page.archived_at ? ( + {archived_at ? ( <ArchiveIcon className="h-2.5 w-2.5 text-custom-text-300" /> - ) : page.access === EPageAccess.PUBLIC ? ( + ) : access === EPageAccess.PUBLIC ? ( <Earth className="h-2.5 w-2.5 text-custom-text-300" /> ) : ( <Lock className="h-2.5 w-2.5 text-custom-text-300" /> )} </div> );web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx (1)
307-313: Standardize size utility in customClassName.The
size-6utility in the customClassName might not be standard Tailwind CSS. Consider usingw-6 h-6for better compatibility.- customClassName="flex-shrink-0 flex items-center justify-center size-6 bg-custom-background-80/70 rounded" + customClassName="flex-shrink-0 flex items-center justify-center w-6 h-6 bg-custom-background-80/70 rounded"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx(4 hunks)web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx (2)
web/core/components/modules/quick-actions.tsx (1)
ModuleQuickActions(30-210)web/core/store/router.store.ts (2)
projectId(85-87)workspaceSlug(69-71)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (10)
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx (4)
5-5: Good choice of icons for the various access states.The selection of
Earth,Lock, andArchiveIconare intuitive visual indicators for public, private, and archived pages respectively.
7-8: Good addition of the EPageAccess import.Adding the EPageAccess enum from constants is a proper way to handle the access level comparison rather than using string literals.
62-67: Good UI enhancement with the access icon.The layout of the page link with access indicator improves user experience by clearly showing the page status at a glance.
113-113: Consistent icon usage.Using
FileTexticon consistently for page-related UI elements improves visual coherence.web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx (6)
3-3: Added necessary useRef import.Correctly added useRef import to support the new ModuleQuickActions implementation.
8-8: Streamlined imports.Removed unused ArrowRight icon to keep imports clean and relevant.
32-32: Added ModuleQuickActions component.The addition of ModuleQuickActions will enhance functionality with a comprehensive set of module management options.
55-56: Added needed ref for context menu.The parentRef will properly position the context menu relative to its parent element.
302-302: Improved button styling.Added background color to provide better visual feedback for the toggle sidebar button.
305-305: Simplified icon styling.Simplified the conditional styling for the PanelRight icon for better maintainability.
| <ModuleQuickActions | ||
| parentRef={parentRef} | ||
| moduleId={moduleId?.toString()} | ||
| projectId={projectId.toString()} | ||
| workspaceSlug={workspaceSlug.toString()} | ||
| customClassName="flex-shrink-0 flex items-center justify-center size-6 bg-custom-background-80/70 rounded" | ||
| /> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify whether parentRef is being correctly applied.
The ModuleQuickActions component is correctly implemented, but I don't see where the parentRef is attached to a DOM element in the component.
🏁 Script executed:
#!/bin/bash
# Check if parentRef is used elsewhere in the component
# First, let's look for any div with ref={parentRef} in this file
rg -A 2 -B 2 "ref={parentRef}" "web/app/\[workspaceSlug\]/(projects)/projects/(detail)/\[projectId\]/modules/(detail)/header.tsx" || echo "No explicit ref assignment found"
# Let's also check how ModuleQuickActions uses parentRef in the component implementation
rg -A 5 "const { parentRef" "web/core/components/modules/quick-actions.tsx" || echo "parentRef usage not found in quick-actions.tsx"Length of output: 596
Action Required: Attach the Parent Reference
After verifying the code in both the header file and the ModuleQuickActions component, it appears that the parentRef prop is passed correctly to the ModuleQuickActions component but is not being attached to any DOM element—neither in the header file nor within the component implementation.
-
Header File (
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx):
TheparentRefis passed as a prop but no DOM element has aref={parentRef}assignment. -
ModuleQuickActions Component (
web/core/components/modules/quick-actions.tsx):
A search for aparentRefassignment in the component did not reveal any explicit usage, indicating that the ref is not attached to any DOM element within this component.
Recommendation:
Either update the ModuleQuickActions component to assign parentRef to a relevant DOM element (e.g., a top-level <div ref={parentRef}>) if it is needed for functionality, or remove it from the props if it is no longer required.
* chore: added panel collapse and quick action menu for module detail header * fix: updated pages header swithcer
3 participants
Description
Updated toggle module sidebar button. Added quick actions menu for header.
Updated switcher for pages added icons for indicating public, private or archived.
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
WEB-3759
Summary by CodeRabbit
New Features
Enhancements