[FEAT] Navbar redesign#3701
Open
Taras-Hlukhovetskyi wants to merge 15 commits into
Open
Conversation
## 📝 Description <!-- A clear, concise summary of what this PR does. --> <!-- Include context, motivation, or related issues (e.g., "Replaces Sass with CSS Modules"). --> This PR implements the redesigned MLRun navbar according to the Figma specifications. The new design uses Shadcn UI components and Tailwind CSS. --- <!-- List the main updates in this PR. --> <!-- Example: - Replaced Sass styles with CSS Modules - Updated Button component props for accessibility - Adjusted CI workflow to run on push for all branches --> --- - [x] I have given the PR a well-structured title describing the domain and the specific change that was made - [x] I tested the changes in the browser (locally or via preview build) - [ ] I confirmed that existing tests pass - [ ] I added or updated unit / integration tests (if needed) - [ ] I checked that this change doesn’t introduce new console warnings or lint / formatting errors - [x] I updated the relevant Jira ticket with the appropriate details and status --- - Related ticket / issue: https://iguazio.atlassian.net/browse/ML-11729 - Figma / design spec: https://www.figma.com/design/YrZgmH5kOTcJyy6hTyiGhH/%F0%9F%A6%8E-Shell---Admin?node-id=2016-77394&p=f&t=0I6k4N68w3wDSub5-0 - Documentation: --- - [ ] Yes - [x] No <!-- If yes, describe what breaks and how to migrate: --> <!-- Example: Renamed prop `variant` → `type` in Button component --> --- Includes DRC change - [x] Yes - [ ] No If yes -> requires bump NPM version --- <!-- Optional: other context, performance considerations, or follow-up work --> <!-- Example: - TODO: Migrate remaining components away from Sass - Known issue: minor layout flicker on mobile --> --- <!-- Include before/after screenshots, GIFs, or video demos if the change affects UI. --> <!-- You can drag and drop images here directly in the PR. --> ---
## 📝 Description <!-- A clear, concise summary of what this PR does. --> <!-- Include context, motivation, or related issues (e.g., "Replaces Sass with CSS Modules"). --> Adds data-testid attributes to sidebar navigation components --- ## 🛠️ Changes Made <!-- List the main updates in this PR. --> <!-- Example: - Replaced Sass styles with CSS Modules - Updated Button component props for accessibility - Adjusted CI workflow to run on push for all branches --> --- ## ✅ Checklist - [x] I have given the PR a well-structured title describing the domain and the specific change that was made - [x] I tested the changes in the browser (locally or via preview build) - [ ] I confirmed that existing tests pass - [ ] I added or updated unit / integration tests (if needed) - [ ] I checked that this change doesn’t introduce new console warnings or lint / formatting errors - [ ] I updated the relevant Jira ticket with the appropriate details and status --- ## 🔗 References - Related ticket / issue: - Figma / design spec: - Documentation: --- ## 🚨 Potentially Breaking Changes - [ ] Yes - [x] No <!-- If yes, describe what breaks and how to migrate: --> <!-- Example: Renamed prop `variant` → `type` in Button component --> --- Includes DRC change - [ ] Yes - [x] No If yes -> requires bump NPM version --- ## 🔍 Additional Notes <!-- Optional: other context, performance considerations, or follow-up work --> <!-- Example: - TODO: Migrate remaining components away from Sass - Known issue: minor layout flicker on mobile --> --- ## 📸 Screenshots / Demos <!-- Include before/after screenshots, GIFs, or video demos if the change affects UI. --> <!-- You can drag and drop images here directly in the PR. --> ---
[CHORE] Navbar rebase dev
<!-- Title structure should start with a flag - either of these: [FEAT] [FIX] [CHORE] [CI] [DOCS] [STYLE] [REFACTOR] [TEST] [BUILD] [PERF] Followed by a clear representation - e.g: [STYLE] Reformat components for linting compliance [CI] Run tests on push for all branches [FEAT] Add dark mode toggle in header --> ## 📝 Description <!-- A clear, concise summary of what this PR does. --> <!-- Include context, motivation, or related issues (e.g., "Replaces Sass with CSS Modules"). --> Remove the inner page tab from `Jobs` and `Models` pages --- ## 🛠️ Changes Made <!-- List the main updates in this PR. --> <!-- Example: - Replaced Sass styles with CSS Modules - Updated Button component props for accessibility - Adjusted CI workflow to run on push for all branches --> --- ## ✅ Checklist - [x] I have given the PR a well-structured title describing the domain and the specific change that was made - [x] I tested the changes in the browser (locally or via preview build) - [ ] I confirmed that existing tests pass - [ ] I added or updated unit / integration tests (if needed) - [x] I checked that this change doesn’t introduce new console warnings or lint / formatting errors - [x] I updated the relevant Jira ticket with the appropriate details and status --- ## 🔗 References - Related ticket / issue: https://ecliptos.atlassian.net/browse/ML-12583 - Figma / design spec: - Documentation: --- ## 🚨 Potentially Breaking Changes - [ ] Yes - [x] No <!-- If yes, describe what breaks and how to migrate: --> <!-- Example: Renamed prop `variant` → `type` in Button component --> --- Includes DRC change - [ ] Yes - [x] No If yes -> requires bump NPM version --- ## 🔍 Additional Notes <!-- Optional: other context, performance considerations, or follow-up work --> <!-- Example: - TODO: Migrate remaining components away from Sass - Known issue: minor layout flicker on mobile --> --- ## 📸 Screenshots / Demos <!-- Include before/after screenshots, GIFs, or video demos if the change affects UI. --> <!-- You can drag and drop images here directly in the PR. --> <img width="1373" height="848" alt="image" src="https://github.com/user-attachments/assets/b9b63859-2eda-41b8-bda3-29ca1f252196" /> ---
…lrun#3670) <!-- Title structure should start with a flag - either of these: [FEAT] [FIX] [CHORE] [CI] [DOCS] [STYLE] [REFACTOR] [TEST] [BUILD] [PERF] Followed by a clear representation - e.g: [STYLE] Reformat components for linting compliance [CI] Run tests on push for all branches [FEAT] Add dark mode toggle in header --> ## 📝 Description <!-- A clear, concise summary of what this PR does. --> <!-- Include context, motivation, or related issues (e.g., "Replaces Sass with CSS Modules"). --> When navigating to an inner page (job, function, artifact, alert, etc.), the breadcrumbs now display the item name as the last step. Refactored Breadcrumbs to accept an itemName prop and render it as a final typed crumb. Updated all relevant page components to pass the appropriate route param. --- <!-- List the main updates in this PR. --> <!-- Example: - Replaced Sass styles with CSS Modules - Updated Button component props for accessibility - Adjusted CI workflow to run on push for all branches --> - Breadcrumbs now shows the inner page item name as the last crumb when navigating to a specific item - Refactored breadcrumb internals to use typed path objects instead of raw path strings - Updated all page components to pass the relevant route param to `<Breadcrumbs itemName={...} />` - Improved dropdown with pre-computed links, includes search, and an "All Projects" footer link - Minor styling polish: ellipsis truncation, smaller max-width, redesigned dropdown --- - [x] I have given the PR a well-structured title describing the domain and the specific change that was made - [x] I tested the changes in the browser (locally or via preview build) - [x] I confirmed that existing tests pass - [ ] I added or updated unit / integration tests (if needed) - [x] I checked that this change doesn’t introduce new console warnings or lint / formatting errors - [x] I updated the relevant Jira ticket with the appropriate details and status --- - Related ticket / issue: https://ecliptos.atlassian.net/browse/ML-12584 - Figma / design spec: - Documentation: --- - [ ] Yes - [x] No <!-- If yes, describe what breaks and how to migrate: --> <!-- Example: Renamed prop `variant` → `type` in Button component --> --- Includes DRC change - [ ] Yes - [x] No If yes -> requires bump NPM version --- <!-- Optional: other context, performance considerations, or follow-up work --> <!-- Example: - TODO: Migrate remaining components away from Sass - Known issue: minor layout flicker on mobile --> --- <!-- Include before/after screenshots, GIFs, or video demos if the change affects UI. --> <!-- You can drag and drop images here directly in the PR. --> <img width="1491" height="587" alt="image" src="https://github.com/user-attachments/assets/4f441487-a252-4a7e-abf3-543c9ff367fc" /> ---
<!-- Title structure should start with a flag - either of these: [FEAT] [FIX] [CHORE] [CI] [DOCS] [STYLE] [REFACTOR] [TEST] [BUILD] [PERF] Followed by a clear representation - e.g: [STYLE] Reformat components for linting compliance [CI] Run tests on push for all branches [FEAT] Add dark mode toggle in header --> ## 📝 Description <!-- A clear, concise summary of what this PR does. --> <!-- Include context, motivation, or related issues (e.g., "Replaces Sass with CSS Modules"). --> The arrow separators between breadcrumb steps previously opened a dropdown (projects list or screens list) when clicked. This behavior has been removed, the arrows are now static visual dividers with no interaction. --- <!-- List the main updates in this PR. --> <!-- Example: - Replaced Sass styles with CSS Modules - Updated Button component props for accessibility - Adjusted CI workflow to run on push for all branches --> - Removed all dropdown-related state, handlers, refs, and effects from Breadcrumbs and BreadcrumbsStep - Deleted the BreadcrumbsDropdown component and its styles - Replaced the clickable RoundedIcon arrow with a static <div class="breadcrumbs__separator"> --- - [x] I have given the PR a well-structured title describing the domain and the specific change that was made - [x] I tested the changes in the browser (locally or via preview build) - [x] I confirmed that existing tests pass - [ ] I added or updated unit / integration tests (if needed) - [x] I checked that this change doesn’t introduce new console warnings or lint / formatting errors - [ ] I updated the relevant Jira ticket with the appropriate details and status --- - Related ticket / issue: https://ecliptos.atlassian.net/browse/ML-12660 - Figma / design spec: - Documentation: --- - [ ] Yes - [x] No <!-- If yes, describe what breaks and how to migrate: --> <!-- Example: Renamed prop `variant` → `type` in Button component --> --- Includes DRC change - [ ] Yes - [x] No If yes -> requires bump NPM version --- <!-- Optional: other context, performance considerations, or follow-up work --> <!-- Example: - TODO: Migrate remaining components away from Sass - Known issue: minor layout flicker on mobile --> --- <!-- Include before/after screenshots, GIFs, or video demos if the change affects UI. --> <!-- You can drag and drop images here directly in the PR. --> ---
<!-- Title structure should start with a flag - either of these: [FEAT] [FIX] [CHORE] [CI] [DOCS] [STYLE] [REFACTOR] [TEST] [BUILD] [PERF] Followed by a clear representation - e.g: [STYLE] Reformat components for linting compliance [CI] Run tests on push for all branches [FEAT] Add dark mode toggle in header --> ## 📝 Description <!-- A clear, concise summary of what this PR does. --> <!-- Include context, motivation, or related issues (e.g., "Replaces Sass with CSS Modules"). --> This PR removes that last item name in Feature Store breadcrumb --- ## 🛠️ Changes Made <!-- List the main updates in this PR. --> <!-- Example: - Replaced Sass styles with CSS Modules - Updated Button component props for accessibility - Adjusted CI workflow to run on push for all branches --> --- ## ✅ Checklist - [x] I have given the PR a well-structured title describing the domain and the specific change that was made - [x] I tested the changes in the browser (locally or via preview build) - [ ] I confirmed that existing tests pass - [ ] I added or updated unit / integration tests (if needed) - [ ] I checked that this change doesn’t introduce new console warnings or lint / formatting errors - [x] I updated the relevant Jira ticket with the appropriate details and status --- ## 🔗 References - Related ticket / issue: https://ecliptos.atlassian.net/browse/ML-12661 - Figma / design spec: - Documentation: --- ## 🚨 Potentially Breaking Changes - [ ] Yes - [x] No <!-- If yes, describe what breaks and how to migrate: --> <!-- Example: Renamed prop `variant` → `type` in Button component --> --- Includes DRC change - [ ] Yes - [x] No If yes -> requires bump NPM version --- ## 🔍 Additional Notes <!-- Optional: other context, performance considerations, or follow-up work --> <!-- Example: - TODO: Migrate remaining components away from Sass - Known issue: minor layout flicker on mobile --> --- ## 📸 Screenshots / Demos <!-- Include before/after screenshots, GIFs, or video demos if the change affects UI. --> <!-- You can drag and drop images here directly in the PR. --> ---
<!-- Title structure should start with a flag - either of these: [FEAT] [FIX] [CHORE] [CI] [DOCS] [STYLE] [REFACTOR] [TEST] [BUILD] [PERF] Followed by a clear representation - e.g: [STYLE] Reformat components for linting compliance [CI] Run tests on push for all branches [FEAT] Add dark mode toggle in header --> ## 📝 Description <!-- A clear, concise summary of what this PR does. --> <!-- Include context, motivation, or related issues (e.g., "Replaces Sass with CSS Modules"). --> Fixes the search input in the project dropdown scrolling along with the project list. The input now stays pinned at the top while the list scrolls independently. Also adds a max height to the dropdown to contain the list. --- ## 🛠️ Changes Made <!-- List the main updates in this PR. --> <!-- Example: - Replaced Sass styles with CSS Modules - Updated Button component props for accessibility - Adjusted CI workflow to run on push for all branches --> - Made the search input fixed - Added max height to the dropdown content to bound the scrollable area --- ## ✅ Checklist - [x] I have given the PR a well-structured title describing the domain and the specific change that was made - [x] I tested the changes in the browser (locally or via preview build) - [ ] I confirmed that existing tests pass - [ ] I added or updated unit / integration tests (if needed) - [x] I checked that this change doesn’t introduce new console warnings or lint / formatting errors - [x] I updated the relevant Jira ticket with the appropriate details and status --- ## 🔗 References - Related ticket / issue: https://ecliptos.atlassian.net/browse/ML-12662 - Figma / design spec: - Documentation: --- ## 🚨 Potentially Breaking Changes - [ ] Yes - [ ] No <!-- If yes, describe what breaks and how to migrate: --> <!-- Example: Renamed prop `variant` → `type` in Button component --> --- Includes DRC change - [ ] Yes - [ ] No If yes -> requires bump NPM version --- ## 🔍 Additional Notes <!-- Optional: other context, performance considerations, or follow-up work --> <!-- Example: - TODO: Migrate remaining components away from Sass - Known issue: minor layout flicker on mobile --> --- ## 📸 Screenshots / Demos <!-- Include before/after screenshots, GIFs, or video demos if the change affects UI. --> <!-- You can drag and drop images here directly in the PR. --> <img width="320" height="628" alt="Screenshot 2026-05-27 at 15 22 45" src="https://github.com/user-attachments/assets/da2e2ed5-2eaa-41c8-9d2f-9ae41b21680b" /> ---
<!-- Title structure should start with a flag - either of these: [FEAT] [FIX] [CHORE] [CI] [DOCS] [STYLE] [REFACTOR] [TEST] [BUILD] [PERF] Followed by a clear representation - e.g: [STYLE] Reformat components for linting compliance [CI] Run tests on push for all branches [FEAT] Add dark mode toggle in header --> ## 📝 Description <!-- A clear, concise summary of what this PR does. --> <!-- Include context, motivation, or related issues (e.g., "Replaces Sass with CSS Modules"). --> When the sidebar opens, the active navigation item was not brought into view. Users navigating to items below the fold (e.g. "ML functions" when collapsible sections are expanded) would see the sidebar open at the top with no scroll to the active item. --- ## 🛠️ Changes Made <!-- List the main updates in this PR. --> <!-- Example: - Replaced Sass styles with CSS Modules - Updated Button component props for accessibility - Adjusted CI workflow to run on push for all branches --> - When the sidebar opens, it now waits for the expand animation to finish (300ms) and then scrolls to the active item if it's out of view - Previously the scroll only happened when navigating to a new page - now it also happens when the sidebar itself opens --- ## ✅ Checklist - [x] I have given the PR a well-structured title describing the domain and the specific change that was made - [x] I tested the changes in the browser (locally or via preview build) - [ ] I confirmed that existing tests pass - [ ] I added or updated unit / integration tests (if needed) - [x] I checked that this change doesn’t introduce new console warnings or lint / formatting errors - [x] I updated the relevant Jira ticket with the appropriate details and status --- ## 🔗 References - Related ticket / issue: https://ecliptos.atlassian.net/browse/ML-12665 - Figma / design spec: - Documentation: --- ## 🚨 Potentially Breaking Changes - [ ] Yes - [x] No <!-- If yes, describe what breaks and how to migrate: --> <!-- Example: Renamed prop `variant` → `type` in Button component --> --- Includes DRC change - [ ] Yes - [x] No If yes -> requires bump NPM version --- ## 🔍 Additional Notes <!-- Optional: other context, performance considerations, or follow-up work --> <!-- Example: - TODO: Migrate remaining components away from Sass - Known issue: minor layout flicker on mobile --> block: 'nearest' is used so the scroll only triggers if the item is actually out of view - if it's already visible, nothing moves. --- ## 📸 Screenshots / Demos <!-- Include before/after screenshots, GIFs, or video demos if the change affects UI. --> <!-- You can drag and drop images here directly in the PR. --> ---
<!-- Title structure should start with a flag - either of these: [FEAT] [FIX] [CHORE] [CI] [DOCS] [STYLE] [REFACTOR] [TEST] [BUILD] [PERF] Followed by a clear representation - e.g: [STYLE] Reformat components for linting compliance [CI] Run tests on push for all branches [FEAT] Add dark mode toggle in header --> ## 📝 Description <!-- A clear, concise summary of what this PR does. --> <!-- Include context, motivation, or related issues (e.g., "Replaces Sass with CSS Modules"). --> --- ## 🛠️ Changes Made <!-- List the main updates in this PR. --> <!-- Example: - Replaced Sass styles with CSS Modules - Updated Button component props for accessibility - Adjusted CI workflow to run on push for all branches --> --- ## ✅ Checklist - [x] I have given the PR a well-structured title describing the domain and the specific change that was made - [x] I tested the changes in the browser (locally or via preview build) - [ ] I confirmed that existing tests pass - [ ] I added or updated unit / integration tests (if needed) - [x] I checked that this change doesn’t introduce new console warnings or lint / formatting errors - [ ] I updated the relevant Jira ticket with the appropriate details and status --- ## 🔗 References - Related ticket / issue: https://ecliptos.atlassian.net/browse/ML-9626 - Figma / design spec: - Documentation: --- ## 🚨 Potentially Breaking Changes - [ ] Yes - [ ] No <!-- If yes, describe what breaks and how to migrate: --> <!-- Example: Renamed prop `variant` → `type` in Button component --> --- Includes DRC change - [ ] Yes - [x] No If yes -> requires bump NPM version --- ## 🔍 Additional Notes <!-- Optional: other context, performance considerations, or follow-up work --> <!-- Example: - TODO: Migrate remaining components away from Sass - Known issue: minor layout flicker on mobile --> --- ## 📸 Screenshots / Demos <!-- Include before/after screenshots, GIFs, or video demos if the change affects UI. --> <!-- You can drag and drop images here directly in the PR. --> ---
Collaborator
Author
|
@pini-sh-panda @muli-cohen PR CI failed because we need merge ==> publish ==> bump DRC |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
📝 Description
🛠️ Changes Made
✅ Checklist
🔗 References
🚨 Potentially Breaking Changes
Includes DRC change
If yes -> requires bump NPM version
🔍 Additional Notes
📸 Screenshots / Demos