feat: extract segment header into ads #38679
Conversation
github-actions
bot
added
IDE Pod
WalkthroughThe pull request introduces a new Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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
|
![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 (4)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.stories.tsx (3)
39-39: Extract magic numbers to constants.Hard-coded style values (height: 32, top: 0.5, minWidth: 24) should be extracted to theme constants or style variables for consistency and maintainability.
Also applies to: 59-59
41-54: Consider simplifying the story implementation.The current implementation includes many tabs with different states. Consider reducing the complexity to demonstrate the core functionality more clearly, perhaps with just 2-3 tabs.
66-70: Consider adding more story variants.The current implementation only shows a basic case. Consider adding variants with different widths and child component combinations to better demonstrate the component's flexibility.
app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.tsx (1)
5-7: Add JSDoc comments for better documentation.Consider adding JSDoc comments to describe the interface and its prop.
+/** + * Props for the SegmentHeader component + */ interface SegmentHeaderProps { + /** The content to be rendered inside the segment header */ children: React.ReactNode; }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.mdx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.stories.tsx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.styles.ts(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.tsx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/index.ts
- app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.styles.ts
- app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.mdx
⏰ Context from checks skipped due to timeout of 90000ms (9)
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
- GitHub Check: chromatic-deployment
- GitHub Check: chromatic-deployment
- GitHub Check: storybook-tests
🔇 Additional comments (5)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.stories.tsx (3)
1-17: LGTM! Well-organized imports and type-safe constant definition.
18-24: LGTM! Proper Storybook metadata configuration.
30-30: Address the TODO comment.The comment indicates that the children components are temporary. Please ensure this is addressed before merging.
Would you like me to help track this by creating a GitHub issue?
app/client/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.tsx (2)
1-3: Clean and well-organized imports!The imports are minimal and well-structured, using namespace import for styles.
8-10: Clean implementation!The component follows React best practices with a simple and focused implementation.
Let's verify the styled component implementation:
✅ Verification successful
Styled component implementation verified ✓
Clean styling implementation using design system variables for consistent theming.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if the styles file exists and contains the Root component fd -e ts "SegmentHeader.styles.ts" -x cat {} | grep -A 5 "export const Root"Length of output: 286
...ient/packages/design-system/ads/src/Templates/EntityExplorer/SegmentHeader/SegmentHeader.tsx
Show resolved
Hide resolved
| children: React.ReactNode; | ||
| } | ||
| export function SegmentHeader({ children }: SegmentHeaderProps) { | ||
| return <Styled.Root>{children}</Styled.Root>; |
There was a problem hiding this comment.
can we not do it in the below format?
<Styled.Root>
{props.leftControl}
<ScrollArea>
<Tabs>
<TabsList>
{tabs.map(() => <Tab />)
<AddTab />
<AddButton />
</TabsList>
</Tabs>
</ScrollArea>
{props.righControl}
</Styled.Root>
CC: @hetunandu
There was a problem hiding this comment.
Short answer - no.
Long answer is - it's too limiting and super inconvenient to work with, at the same time this approach does not offer any protection against passing literally anything in those props. Additionally we cannot have tabs wrapped up in this particular component as it is in ADS and tabs will be wrapped up in all kinds of business logic.
There was a problem hiding this comment.
As per our discussion, this will need a bit more thought, moving it to a draft state for now.
|
This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected. |
Description
Extract SegmentHeader component into ADS templates.
Fixes #37688
Automation
/ok-to-test tags="@tag.Sanity"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12789984820
Commit: 27a8d4b
Cypress dashboard.
Tags:
@tag.SanitySpec:
Wed, 15 Jan 2025 14:45:08 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
SegmentHeadercomponent for the design systemDocumentation
SegmentHeader