feat!: Include PUBLIC_URL in defaultProjectListPromise URL in /ui

peruukki · redhatHameed · commit 2f0f7b386c72 · 2025-03-07T07:28:18.000-05:00
We currently always fetch the project list from the root path by
default, even if the UI is served from a non-root path via PUBLIC_URL.

It seems reasonable to assume that the project list would be served
from the same path as the UI by default, so change the default project
list URL to include the basename from PUBLIC_URL. This way you don't
need to specify a custom `projectListPromise` for this base case, as
shown by the changes in ui/src/index.tsx.

BREAKING CHANGE:
The PUBLIC_URL environment variable is now taken into account by default
when fetching the projects list. This is a breaking change only if all
these points apply:

1. You're using Feast UI as a module

2. You're serving the UI files from a non-root path via the PUBLIC_URL
   environment variable

3. You're serving the project list from the root path

4. You're not passing the `feastUIConfigs.projectListPromise` prop to
   the FeastUI component

In this case, you need to explicitly fetch the project list from the
root path via the `feastUIConfigs.projectListPromise` prop:

```diff
 const root = createRoot(document.getElementById("root")!);
 root.render(
   &lt;React.StrictMode&gt;
-    &lt;FeastUI /&gt;
+    &lt;FeastUI
+      feastUIConfigs={{
+        projectListPromise: fetch("/projects-list.json", {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }).then((res) =&gt; res.json())
+      }}
+    /&gt;
   &lt;/React.StrictMode&gt;
 );
```

Signed-off-by: Harri Lehtola &lt;peruukki@hotmail.com&gt;
diff --git a/docs/reference/alpha-web-ui.md b/docs/reference/alpha-web-ui.md
@@ -102,7 +102,7 @@ The advantage of importing Feast UI as a module is in the ease of customization.
 
 ##### Fetching the Project List
 
-You can use `projectListPromise` to provide a promise that overrides where the Feast UI fetches the project list from.
+By default, the Feast UI fetches the project list from the app root path. You can use `projectListPromise` to provide a promise that overrides where it's fetched from.
 
 ```jsx
 <FeastUI
diff --git a/ui/README.md b/ui/README.md
@@ -77,7 +77,7 @@ The advantage of importing Feast UI as a module is in the ease of customization.
 
 ##### Fetching the Project List
 
-You can use `projectListPromise` to provide a promise that overrides where the Feast UI fetches the project list from.
+By default, the Feast UI fetches the project list from the app root path. You can use `projectListPromise` to provide a promise that overrides where it's fetched from.
 
 ```jsx
 <FeastUI
diff --git a/ui/src/FeastUI.tsx b/ui/src/FeastUI.tsx
@@ -25,7 +25,7 @@ const FeastUI = ({ reactQueryClient, feastUIConfigs }: FeastUIProps) => {
     >
       <QueryClientProvider client={queryClient}>
         <QueryParamProvider adapter={ReactRouter6Adapter}>
-          <FeastUISansProviders feastUIConfigs={feastUIConfigs} />
+          <FeastUISansProviders basename={basename} feastUIConfigs={feastUIConfigs} />
         </QueryParamProvider>
       </QueryClientProvider>
     </BrowserRouter>
diff --git a/ui/src/FeastUISansProviders.tsx b/ui/src/FeastUISansProviders.tsx
@@ -40,8 +40,8 @@ interface FeastUIConfigs {
   projectListPromise?: Promise<any>;
 }
 
-const defaultProjectListPromise = () => {
-  return fetch("/projects-list.json", {
+const defaultProjectListPromise = (basename: string) => {
+  return fetch(`${basename}/projects-list.json`, {
     headers: {
       "Content-Type": "application/json",
     },
@@ -51,8 +51,10 @@ const defaultProjectListPromise = () => {
 };
 
 const FeastUISansProviders = ({
+  basename = "",
   feastUIConfigs,
 }: {
+  basename?: string;
   feastUIConfigs?: FeastUIConfigs;
 }) => {
   const projectListContext: ProjectsListContextInterface =
@@ -61,7 +63,7 @@ const FeastUISansProviders = ({
           projectsListPromise: feastUIConfigs?.projectListPromise,
           isCustom: true,
         }
-      : { projectsListPromise: defaultProjectListPromise(), isCustom: false };
+      : { projectsListPromise: defaultProjectListPromise(basename), isCustom: false };
 
   return (
     <EuiProvider colorMode="light">
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -96,16 +96,7 @@ root.render(
   <React.StrictMode>
     <FeastUI
       reactQueryClient={queryClient}
-      feastUIConfigs={{
-        tabsRegistry: tabsRegistry,
-        projectListPromise: fetch((process.env.PUBLIC_URL || "") + "/projects-list.json", {
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }).then((res) => {
-            return res.json();
-          })
-      }}
+      feastUIConfigs={{ tabsRegistry }}
     />
   </React.StrictMode>
 );

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const FeastUI = ({ reactQueryClient, feastUIConfigs }: FeastUIProps) => {`
`25`	`25`	`>`
`26`	`26`	`<QueryClientProvider client={queryClient}>`
`27`	`27`	`<QueryParamProvider adapter={ReactRouter6Adapter}>`
`28`		`- <FeastUISansProviders feastUIConfigs={feastUIConfigs} />`
	`28`	`+ <FeastUISansProviders basename={basename} feastUIConfigs={feastUIConfigs} />`
`29`	`29`	`</QueryParamProvider>`
`30`	`30`	`</QueryClientProvider>`
`31`	`31`	`</BrowserRouter>`