feat(Dashboard2/Navigation): add path navigation [YTFRONT-5216] #1314
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reviewer's GuideThis PR introduces direct path navigation to the Dashboard2 navigation widget by embedding a PathEditor with a confirm button, wiring up URL updates via react-router, auto-selecting input on focus, enriching item icon logic with node attributes, and exposing a toggle setting, along with supporting API and styling adjustments. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
|
Storybook is ready. |
Contributor
|
Playwright components report is ready. |
Contributor
|
Statoscope report is ready. |
Contributor
|
No test reports are available for this run. |
KostyaAvtushko
force-pushed
the
dash_nav_sear
branch
from
51c20c2 to
a08e64c
Compare
KostyaAvtushko
force-pushed
the
dash_nav_sear
branch
3 times, most recently
from
0c9a1f4 to
8a1ef5c
Compare
KostyaAvtushko
requested review from
SimbiozizV,
evtaranov and
ma-efremoff
as code owners
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- Extract the path normalization (trailing slash trimming) into a shared utility (e.g. normalizePath) to improve readability and avoid duplication.
- Use URLSearchParams (or similar) instead of manual string concatenation to build the navigation URL, ensuring correct encoding of query parameters.
- Move the inline Button style (
height: '100%') into a SCSS class rather than using inline styles to keep styling consistent and maintainable.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Extract the path normalization (trailing slash trimming) into a shared utility (e.g. normalizePath) to improve readability and avoid duplication.
- Use URLSearchParams (or similar) instead of manual string concatenation to build the navigation URL, ensuring correct encoding of query parameters.
- Move the inline Button style (`height: '100%'`) into a SCSS class rather than using inline styles to keep styling consistent and maintainable.
## Individual Comments
### Comment 1
<location> `packages/ui/src/ui/containers/PathEditor/PathEditor.tsx:312-319` </location>
<code_context>
}
};
- renderInput() {
+ renderBaseInput() {
const {placeholder, autoFocus, hasClear, disabled} = this.props;
</code_context>
<issue_to_address>
**suggestion:** Consider keyboard accessibility for the confirm button.
Support triggering the onApply action via keyboard events, such as the Enter key, when hasConfirmButton is true.
Suggested implementation:
```typescript
handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
const {hasConfirmButton, onApply} = this.props;
const {path} = this.state;
if (hasConfirmButton && event.key === 'Enter' && typeof onApply === 'function') {
onApply(path);
}
};
renderInput() {
const {hasConfirmButton, onApply} = this.props;
const {path} = this.state;
if (!hasConfirmButton) {
```
```typescript
renderBaseInput() {
const {placeholder, autoFocus, hasClear, disabled, hasConfirmButton} = this.props;
const {path} = this.state;
return (
<input
type="text"
value={path}
placeholder={placeholder}
autoFocus={autoFocus}
disabled={disabled}
onChange={this.handleInputChange}
onKeyDown={hasConfirmButton ? this.handleInputKeyDown : undefined}
/>
);
}
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
309
to
+319
| ); | ||
| } | ||
|
|
||
| renderInput() { | ||
| const {hasConfirmButton, onApply} = this.props; | ||
| const {path} = this.state; | ||
|
|
||
| if (!hasConfirmButton) { |
There was a problem hiding this comment.
suggestion: Consider keyboard accessibility for the confirm button.
Support triggering the onApply action via keyboard events, such as the Enter key, when hasConfirmButton is true.
Suggested implementation:
handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
const {hasConfirmButton, onApply} = this.props;
const {path} = this.state;
if (hasConfirmButton && event.key === 'Enter' && typeof onApply === 'function') {
onApply(path);
}
};
renderInput() {
const {hasConfirmButton, onApply} = this.props;
const {path} = this.state;
if (!hasConfirmButton) { renderBaseInput() {
const {placeholder, autoFocus, hasClear, disabled, hasConfirmButton} = this.props;
const {path} = this.state;
return (
<input
type="text"
value={path}
placeholder={placeholder}
autoFocus={autoFocus}
disabled={disabled}
onChange={this.handleInputChange}
onKeyDown={hasConfirmButton ? this.handleInputKeyDown : undefined}
/>
);
}
KostyaAvtushko
force-pushed
the
dash_nav_sear
branch
from
8a1ef5c to
7ebcf04
Compare
Collaborator
|
Some CI actions are failed |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
https://nda.ya.ru/t/SMdmjkxC7KLvxg
## Summary by SourceryAdd manual path navigation to the Dashboard2 Navigation widget by integrating a PathEditor input with a confirm button, toggled via a new widget setting, and refactor related API requests to support node icon attributes.
New Features:
Enhancements: