From aca84a922e1978d9b1433d7ae684142bd80321bd Mon Sep 17 00:00:00 2001
From: Harri Lehtola <peruukki@hotmail.com>
Date: Thu, 6 Mar 2025 08:28:10 +0200
Subject: [PATCH] feat!: Include PUBLIC_URL in defaultProjectListPromise URL in
 /ui

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(
   <React.StrictMode>
-    <FeastUI />
+    <FeastUI
+      feastUIConfigs={{
+        projectListPromise: fetch("/projects-list.json", {
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }).then((res) => res.json())
+      }}
+    />
   </React.StrictMode>
 );
```

Signed-off-by: Harri Lehtola <peruukki@hotmail.com>
---
 docs/reference/alpha-web-ui.md  |  2 +-
 ui/README.md                    |  2 +-
 ui/src/FeastUI.tsx              |  2 +-
 ui/src/FeastUISansProviders.tsx |  8 +++++---
 ui/src/index.tsx                | 11 +----------
 5 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/docs/reference/alpha-web-ui.md b/docs/reference/alpha-web-ui.md
index 83abbe0229e..80c5b824c5a 100644
--- 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
index fef74b60104..bf9ccd367d9 100644
--- 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
index 12025e6d6e7..067296316ec 100644
--- 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
index 8a0e0b94db0..52676c5d0b5 100644
--- 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
index 04eda8a1ba4..9cca508fcae 100644
--- 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>
 );