fix: Fix showing selected navigation item in UI sidebar #4969
Conversation
This file contains 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
Our `useMatchSubpath` hook uses these two react-router-dom hooks: 1. useResolvedPath 2. useMatch After some investigation, I found that useMatch doesn't work with relative or partial paths: remix-run/react-router#8684 (comment). Furthermore, in our Sidebar useResolvedPath doesn't include any parts of the current page pathname in the result, resulting in just e.g. /data-source, and thus useMatch doesn't return a match. Not sure exactly why this happens, since we get a full resolved path when calling useMatchSubpath in at least RegularFeatureInstance.tsx, but it's probably related to where we render the components in the component tree, and Sidebar is rendered outside the React Router Outlet component. I found out these differences with some console.logs in useMatchSubpath. The fix is to include the full path when calling useMatchSubpath in Sidebar, so that it fully matches the current location used by useMatch. Signed-off-by: Harri Lehtola <peruukki@hotmail.com>
redhatHameed
approved these changes
Jan 26, 2025
franciscojavierarceo
pushed a commit
that referenced
this pull request
Feb 4, 2025
# [0.44.0](v0.43.0...v0.44.0) (2025-02-04) ### Bug Fixes * Adding periodic check to fix the sporadic failures of the operator e2e tests. ([#4952](#4952)) ([1d086be](1d086be)) * Adding the feast-operator/bin to the .gitignore directory. Somehow it… ([#5005](#5005)) ([1a027ee](1a027ee)) * Changed Env Vars for e2e tests ([#4975](#4975)) ([fa0084f](fa0084f)) * Fix GitHub Actions to pass authentication ([#4963](#4963)) ([22b9138](22b9138)), closes [#4937](#4937) [#4939](#4939) [#4941](#4941) [#4940](#4940) [#4943](#4943) [#4944](#4944) [#4945](#4945) [#4946](#4946) [#4947](#4947) [#4948](#4948) [#4951](#4951) [#4954](#4954) [#4957](#4957) [#4958](#4958) [#4959](#4959) [#4960](#4960) [#4962](#4962) * Fix showing selected navigation item in UI sidebar ([#4969](#4969)) ([8ac6a85](8ac6a85)) * Invalid column names in get_historical_features when there are field mappings on join keys ([#4886](#4886)) ([c9aca2d](c9aca2d)) * Read project data from the 'projects' key while loading the registry state in the Feast UI ([#4772](#4772)) ([cb81939](cb81939)) * Remove grpcurl dependency from Operator ([#4972](#4972)) ([439e0b9](439e0b9)) * Removed the dry-run flag to test and we will add it back later. ([#5007](#5007)) ([d112b52](d112b52)) * Render UI navigation items as links instead of buttons ([#4970](#4970)) ([1267703](1267703)) * Resolve Operator CRD bloat due to long field descriptions ([#4985](#4985)) ([7593bb3](7593bb3)) * Update manifest to add feature server image for odh ([#4973](#4973)) ([6a1c102](6a1c102)) * Updating release workflows to refer to yml instead of yaml ([#4935](#4935)) ([02b0a68](02b0a68)) * Use locally built feast-ui package in dev feature-server image ([#4998](#4998)) ([0145e55](0145e55)) ### Features * Added OWNERS file for OpenshiftCI ([#4991](#4991)) ([86a2ee8](86a2ee8)) * Adding Milvus demo to examples ([#4910](#4910)) ([2daf852](2daf852)) * Adding retrieve_online_documents endpoint ([#5002](#5002)) ([6607d3d](6607d3d)) * Adding support to return additional features from vector retrieval for Milvus db ([#4971](#4971)) ([6ce08d3](6ce08d3)) * Creating/updating the stable branch after the release. ([#5003](#5003)) ([e9b53cc](e9b53cc)) * Implementing online_read for MilvusOnlineStore ([#4996](#4996)) ([92dde13](92dde13)) * Improve exception message for unsupported Snowflake data types ([#4779](#4779)) ([5992364](5992364)) * Operator add feast ui deployment ([#4930](#4930)) ([b026d0c](b026d0c)) * Updating documents to highlight v2 api for Vector Similarity Se… ([#5000](#5000)) ([32b82a4](32b82a4))
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.
What this PR does / why we need it:
Fixes showing the currently active/selected navigation item in the sidebar.
Before
After
Which issue(s) this PR fixes:
No related issues as far as I know, just something I happened to notice.
Misc
Our
useMatchSubpathhook uses these two react-router-dom hooks:useResolvedPathuseMatchAfter some investigation, I found that
useMatchdoesn't work with relative or partial paths. Furthermore, in our SidebaruseResolvedPathdoesn't include any parts of the current page pathname in the result, resulting in just e.g./data-source, and thususeMatchnever returns a match.Not sure exactly why this happens, since we get a full resolved path when calling
useMatchSubpathin at leastRegularFeatureInstance.tsx, but it's probably related to where we render the components in the component tree, and Sidebar is rendered outside the React Router Outlet component.I found out these differences with some
console.logs inuseMatchSubpath.The fix is to include the full path when calling
useMatchSubpathin Sidebar, so that it fully matches the current location used byuseMatch.