chore: Moving navigation header to Explorer templates in ADS #38131
Conversation
…o chore/segmented-header-ads
WalkthroughThe changes in this pull request primarily involve the replacement of the Changes
Assessment against linked issues
Suggested labels
Suggested reviewers
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
|
github-actions
bot
added
IDE Pod
![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
🧹 Outside diff range and nitpick comments (2)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/NavigationHeader/NavigationHeader.tsx (2)
16-20: Consider using CSS custom properties for the max-width value.The hard-coded max-width value could be moved to a design token for better maintainability.
const Container = styled(Flex)` #editor-pane-segment-control { - max-width: 247px; + max-width: var(--ads-v2-spaces-segment-control-width, 247px); } `;
34-39: Consider adding aria-label for accessibility.The SegmentedControl could benefit from an accessibility label.
<SegmentedControl id="editor-pane-segment-control" + aria-label="Editor pane navigation" onChange={onSegmentChange} options={options} value={selectedSegment} />
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/NavigationHeader/NavigationHeader.tsx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/NavigationHeader/index.tsx(1 hunks)app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- app/client/packages/design-system/ads/src/Templates/EntityExplorer/NavigationHeader/index.tsx
🔇 Additional comments (2)
app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx (1)
12-29: Clean implementation of NavigationHeader.
The migration to NavigationHeader maintains the existing functionality while simplifying the component structure. Props are correctly passed and the options array is well-structured.
app/client/packages/design-system/ads/src/Templates/EntityExplorer/NavigationHeader/NavigationHeader.tsx (1)
26-33: Well-structured container with design system tokens.
Good use of design system tokens for spacing, background color, and layout properties.
app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx
Outdated
Show resolved
Hide resolved
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12303042761. |
|
Deploy-Preview-URL: https://ce-38131.dp.appsmith.com |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
app/client/src/pages/Editor/IDE/EditorPane/components/SegmentSwitcher.tsx (1)
7-31: Consider adding error handling for segment changesThe component looks well-structured, but it might benefit from error handling in case the segment change fails.
const SegmentSwitcher = () => { const { segment } = useCurrentEditorState(); - const { onSegmentChange } = useSegmentNavigation(); + const { onSegmentChange: handleSegmentChange } = useSegmentNavigation(); + + const onSegmentChange = (value: string) => { + try { + handleSegmentChange(value); + } catch (error) { + // Handle or log error + console.error('Failed to change segment:', error); + } + };app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx (2)
9-14: Consider using a more specific type for selectedSegmentThe selectedSegment prop is typed as string, but it seems to be constrained to specific values from EditorEntityTab.
interface Props { - selectedSegment: string; + selectedSegment: EditorEntityTab; - onSegmentChange: (value: string) => void; + onSegmentChange: (value: EditorEntityTab) => void; options: SegmentedControlOption[]; children?: React.ReactNode | React.ReactNode[]; }
16-20: Consider extracting magic number to a constantThe max-width value of 247px should be defined as a constant for better maintainability.
+const SEGMENT_CONTROL_MAX_WIDTH = 247; + const Container = styled(Flex)` #editor-pane-segment-control { - max-width: 247px; + max-width: ${SEGMENT_CONTROL_MAX_WIDTH}px; } `;
📜 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/EditorSegments/EditorSegments.tsx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/index.tsx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts(1 hunks)app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx(2 hunks)app/client/src/pages/Editor/IDE/EditorPane/components/SegmentSwitcher.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts
🔇 Additional comments (1)
app/client/src/pages/Editor/IDE/EditorPane/Explorer.tsx (1)
44-44: LGTM! Clean implementation of the segment switcher
The replacement of SegmentedHeader with SegmentSwitcher is well-integrated with the existing routing logic.
...nt/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx
Outdated
Show resolved
Hide resolved
...nt/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx
Outdated
Show resolved
Hide resolved
...nt/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx
Outdated
Show resolved
Hide resolved
…o chore/segmented-header-ads
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx (1)
Line range hint
84-92: Consider simplifying the complex selectorThe selector for the separator is becoming quite complex with multiple
:not()conditions. Consider breaking this down into separate CSS classes or using a more maintainable approach.Here's a suggested refactor that uses a class-based approach:
- &:not(:hover):not(:last-child):not([data-selected="true"]):not( - :has(+ [data-selected="true"]) - ):after { + &:after { content: ""; position: absolute; right: 0; width: 1px; height: 16px; background-color: var(--ads-v2-colors-control-field-default-border); + display: none; } + + &:not(:last-child):not([data-selected="true"]):not(:hover):not(:has(+ [data-selected="true"])):after { + display: block; + }app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.types.ts (1)
3-8: LGTM! Consider adding JSDoc commentsThe interface is well-structured with clear prop types. The props follow React's controlled component pattern with
selectedSegmentandonSegmentChange.Consider adding JSDoc comments to document the interface and its props:
+/** + * Props for the EditorSegments component + */ export interface EditorSegmentsProps { + /** Currently selected segment value */ selectedSegment: string; + /** Callback fired when segment selection changes */ onSegmentChange: (value: string) => void; + /** Available segment options */ options: SegmentedControlOption[]; + /** Optional child elements to render */ children?: React.ReactNode | 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/SegmentedControl/SegmentedControl.styles.tsx(2 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.styles.ts(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.types.ts(1 hunks)app/client/src/pages/Editor/IDE/hooks.ts(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.styles.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx
🔇 Additional comments (3)
app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx (1)
58-60: LGTM: Clean hover state implementation
The hover state implementation follows the design system's color tokens and maintains consistency with the existing patterns.
app/client/src/pages/Editor/IDE/hooks.ts (2)
77-89: LGTM! Consistent URL construction pattern
The URL construction is consistently updated across all segments (QUERIES, JS, UI) using the new baseParentEntityId parameter.
30-31: Verify enterprise edition hook availability
The new imports are from enterprise edition modules. Let's ensure these hooks are properly exported and available.
...ckages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.types.ts
Show resolved
Hide resolved
There was a problem hiding this comment.
We're missing a story for EditorSemgents component.
Still missing a story. Like I've mentioned in parallel PR - developing components for ADS must be done using Storybook.. Not only it gives a convenient development environment, but also serves as a catalogue for other developers.
|
@alex-golovanov Also, for this component specifically as well, it doesn't make sense to have a story, as it might create more confusion with |
ankitakinger
added
ok-to-test
Your conversation with Hetu does not make much difference, if a component is created in ADS it needs a story. My objective reasoning is in a comment above, please do not dismiss it with a simple "it does not make any sense". |
…o chore/segmented-header-ads
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.stories.tsx (1)
12-15: Document the reason for ESLint disableWhile the template implementation is correct, please add a comment explaining why the ESLint rule needs to be disabled here.
-// eslint-disable-next-line react/function-component-definition +// eslint-disable-next-line react/function-component-definition +// This is a Storybook template function, not a React componentapp/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.mdx (1)
7-14: Fix typo and enhance documentation clarityThere's a duplicate "is" in the first sentence. Also, consider structuring the constraints as a list for better readability.
-Editor Segments is is built on top of the ADS component +Editor Segments is built on top of the ADS component Constraints: - Max-width: 247px - Extra padding around segments🧰 Tools
🪛 LanguageTool
[duplication] ~9-~9: Possible typo: you repeated a word
Context: ... /> # Editor Segments Editor Segments is is built on top of the ADS component - Seg...(ENGLISH_WORD_REPEAT_RULE)
[typographical] ~11-~11: Usually, there’s no comma before “if”.
Context: ...cceptchildrento add more UI controls, if needed. These will be placed on the rig...(IF_NO_COMMA)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.mdx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.stories.tsx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx(1 hunks)app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/index.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx
🧰 Additional context used
🪛 LanguageTool
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.mdx
[duplication] ~9-~9: Possible typo: you repeated a word
Context: ... /> # Editor Segments Editor Segments is is built on top of the ADS component - Seg...
(ENGLISH_WORD_REPEAT_RULE)
[typographical] ~11-~11: Usually, there’s no comma before “if”.
Context: ...ccept children to add more UI controls, if needed. These will be placed on the rig...
(IF_NO_COMMA)
🔇 Additional comments (7)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/index.tsx (1)
1-2: LGTM! Verify referenced modules.
The barrel file pattern is correctly implemented.
Let's verify the referenced modules and check for potential circular dependencies:
✅ Verification successful
✅ Barrel exports are correctly implemented and safe
Both referenced modules exist and there are no circular dependencies:
EditorSegments.tsxexports the componentEditorSegments.types.tsexists for type definitions- No circular imports detected
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence of referenced modules and check for circular dependencies
# Check if the referenced modules exist
fd -e ts -e tsx "EditorSegments\.(tsx|ts)" "app/client/packages/design-system/ads/src/Templates/EntityExplorer"
# Check for potential circular dependencies
rg -l "from.*EditorSegments/index" "app/client/packages/design-system/ads/src/Templates/EntityExplorer"
Length of output: 316
Script:
#!/bin/bash
# Check for the types file existence
fd -e ts "EditorSegments\.types\.ts" "app/client/packages/design-system/ads/src/Templates/EntityExplorer"
# Check content of EditorSegments.tsx to verify exports
rg -A 5 "^export" "app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx"
# Look for any imports of index in EditorSegments.tsx to check circular deps
rg "from.*index" "app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.tsx"
Length of output: 479
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.stories.tsx (4)
1-10: LGTM: Story configuration follows best practices
The imports and story configuration are well-structured and follow Storybook conventions.
17-39: LGTM: Comprehensive default story setup
The default story effectively demonstrates the component's features including labels, icons, and disabled states.
41-79: LGTM: Good coverage of component variants
The stories effectively demonstrate different component configurations with icons-only and labels-only variants.
81-101: LGTM: Good demonstration of component extensibility
The story effectively shows how to extend the component with children elements. However, let's verify that the Button component is consistently styled across the design system.
✅ Verification successful
The previous search didn't provide enough context. Let's try to find the Button component's implementation and its styling patterns in the design system.
LGTM: Button implementation follows design system patterns
The Button component usage in the story is consistent with the design system's implementation. The kind="secondary" and isIconButton props are properly supported in the core Button component, and the styling is handled through the StyledButton component. Other stories in the codebase use similar patterns for secondary buttons.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for consistent Button styling across the design system
ast-grep --pattern 'const Button = $$$'
Length of output: 88252
Script:
#!/bin/bash
# Let's check for Button component usage and styling in the design system
rg -A 5 "Button.*kind=\"secondary\"" app/client/packages/design-system/
Length of output: 2168
Script:
#!/bin/bash
# Search for Button component's implementation in the design system
ast-grep --pattern 'const Button = $$$' app/client/packages/design-system/
Length of output: 7332
Script:
#!/bin/bash
# Look for Button's style definitions
rg -A 5 "StyledButton" app/client/packages/design-system/
Length of output: 7404
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.mdx (2)
1-5: LGTM: Documentation setup follows standards
The MDX configuration and imports are properly structured.
15-25: LGTM: Well-structured documentation with clear examples
The anatomy section and examples effectively demonstrate the component's usage patterns.
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12369811259. |
|
Deploy-Preview-URL: https://ce-38131.dp.appsmith.com |
...ges/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.stories.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.stories.tsx (2)
12-15: Simplify template implementationThe template function can be more concise by using an implicit return.
-const Template = (args: EditorSegmentsProps) => { - return <EditorSegments {...args}>{args.children}</EditorSegments>; -}; +const Template = (args: EditorSegmentsProps) => ( + <EditorSegments {...args}>{args.children}</EditorSegments> +);
81-101: Document isFullWidth prop usageConsider adding a comment explaining when and why the isFullWidth prop should be used, as it affects the component's layout behavior.
EditorSegmentsStoryWithChildren.args = { options: [ // ... ], defaultValue: "queries", + // Use isFullWidth when the component needs to span the entire container width + // Useful when adding children that need consistent spacing isFullWidth: true, children: <Button isIconButton kind="secondary" startIcon="plus" />, };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.stories.tsx(1 hunks)
🔇 Additional comments (4)
app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.stories.tsx (4)
7-10: Update story title structure
The story title structure should be "ADS/Templates/EntityExplorer/EditorSegments" to maintain consistency with the folder path.
- title: "ADS/Templates/Entity Explorer/Editor Segments",
+ title: "ADS/Templates/EntityExplorer/EditorSegments",17-39: LGTM! Well-structured default story
Good demonstration of all component features including labels, icons, and disabled state.
61-79: LGTM! Clear demonstration of label-only variant
The story effectively shows the component's flexibility in handling different content types.
41-59: Consider adding ARIA labels for icon-only segments
When using icons without labels, ensure screen readers can properly announce the segments.
## Description Moving navigation header to Explorer templates in ADS Fixes [#37614](#37614) [#37612](#37612) [#37611](#37611) ## Automation /ok-to-test tags="@tag.IDE, @tag.Sanity" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/12380719410> > Commit: 440da6d > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12380719410&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.IDE, @tag.Sanity` > Spec: > <hr>Tue, 17 Dec 2024 21:00:53 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new `SegmentSwitcher` component for enhanced segment navigation. - Added `EditorSegments` component for rendering a segmented control interface. - **Improvements** - Replaced the `SegmentedHeader` with `SegmentSwitcher` in the explorer pane for improved user experience. - Updated the header component to use the new `NavigationHeader` for better segment management. - Enhanced hover interactions and simplified separator logic within the segmented control. - **Exports** - New exports for `EditorSegments` and `SegmentSwitcher` components to facilitate usage across modules. - Added new documentation for the `EditorSegments` component to provide usage guidelines and examples. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Description
Moving navigation header to Explorer templates in ADS
Fixes #37614 #37612 #37611
Automation
/ok-to-test tags="@tag.IDE, @tag.Sanity"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12380719410
Commit: 440da6d
Cypress dashboard.
Tags:
@tag.IDE, @tag.SanitySpec:
Tue, 17 Dec 2024 21:00:53 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
SegmentSwitchercomponent for enhanced segment navigation.EditorSegmentscomponent for rendering a segmented control interface.SegmentedHeaderwithSegmentSwitcherin the explorer pane for improved user experience.NavigationHeaderfor better segment management.EditorSegmentsandSegmentSwitchercomponents to facilitate usage across modules.EditorSegmentscomponent to provide usage guidelines and examples.