EuiCustomLink causing error on feast-ui NPM package

[pcminh0505]

Hi, I'm new to Feast and Feast UI, trying to construct a React app using your feast-ui package to display multiple feature repos on the UI.

It seems to me that the current NPM package of feast-ui is having some problems with the custom component EuiCustomLink that fails to parse the path

Expected Behavior

Here's the UI with the feast ui SDK inside one feature_repo project. I'm using the one inside your feast/ui/feature_repo folder on credit_scoring. There was no problem when I clicked Feature View/credit_history

It is Worth noticing that the date_added = 2022-02-6 is related to the NPM package issue.

Current Behavior

When I tried replicating with a React app, managing multiple projects (later will show the projects-list.json), it prompted the error that could not query the time in the path. The Data Sources and Entities tabs are fine, only for the Feature Views and Feature Services that you're applying some filter.

Steps to reproduce

1. Setup the boilerplate project like the official docs
2. Run feast apply inside the feast/ui/feature_repo to get the registry.db file
3. Copy the registry.db file to the /public directory of React app
4. Specify the projects-list.json file as:

{
  "projects": [
    {
      "name": "Credit Score Project",
      "description": "Project for credit scoring team and associated models.",
      "id": "credit_scoring_aws",
      "registryPath": "/credit_scoring_aws.db"
    },
    {
      "name": "Driver Ranking Project",
      "description": "Project for driver ranking team and associated models.",
      "id": "driver_ranking",
      "registryPath": "/driver_ranking.db"
    }
  ]
}

5. Let the <FeastUI /> as a default component in index.js file and run yarn start

Specifications

I tried both using the latest dependency packages version and downgrade to meet the exact version in the feast/ui repo, but none of them worked.

"dependencies": {
    "@elastic/datemath": "^5.0.3",
    "@elastic/eui": "^94.1.0",
    "@emotion/react": "^11.11.4",
    "@feast-dev/feast-ui": "^0.36.1",
    "@types/d3": "^7.4.3",
    "d3": "^7.9.0",
    "inter-ui": "^4.0.2",
    "moment": "^2.30.1",
    "prop-types": "^15.8.1",
    "query-string": "^9.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.22.3",
    "react-scripts": "^5.0.0",
    "typescript": "^5.4.5",
    "use-query-params": "^2.2.1",
    "web-vitals": "^2.1.4",
    "zod": "^3.22.4"
  },

Possible Solution

I think the error prompted quite clearly that there's an issue with the EuiCustomLink. I hope this bug report can help you investigate it for the official release (as I know it's still [BETA] version) on the current implementation of react-router-dom and EuiLink

Thanks for this great project. Looking forward to your response soon!

[pcminh0505]

Based on the reply on react-router

On EuiCustomLink.jsx:

const returnToUrl = new URL(to, window.location.origin);
navigate({
     pathname: returnToUrl.pathname,
     search: returnToUrl.searchParams.toString()
});

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lokeshrangineni]

@pcminh0505 - I have tested this issue with the most recent feast UI and i could not replicate the issue. Please let me know if you can replicate the issue again.

[pcminh0505]

Hi @lokeshrangineni

Can you check my repo setup via this link? https://github.com/pcminh0505/feast-infra/tree/master/your-feast-ui .

I also include the screen recording here: https://vimeo.com/933219632?share=copy

Thanks a lot!

[lokeshrangineni]

Hi @pcminh0505,

Thank you for sharing the source code and video. It became little easy to replicate the issue on my local.

After investigating the dependencies and comparing with actual feast UI project dependencies realized you are using latest version of react-roter-dom than dependency version of feast-ui.

feast-ui is using "react-router-dom": "6.2.1",
where as your project is using "react-router-dom": "^6.22.3",

Seems like react-router version 6.22.3 is having issues so if you update that version to 6.2.1 then i don't see the issue.

There are too many places to modify the navigate method to apply the fix of the future react dom version. We can update the code whenever we update the react router version in future.

[pcminh0505]

Hi @lokeshrangineni ,

I tried to downgrade the react-router-dom to "6.2.1" and it worked perfectly!. Thank you for your help.

I'm happy if you close this issue.