chore: Set router basename to simplify paths in /ui

Related documentation: https://reactrouter.com/6.28.2/router-components/browser-router#basename. Also remove redundant EuiCustomLink `href` prop passing, it's never used. This moves all `process.env.PUBLIC_URL` references outside the FeastUI component, which has the added benefit that apps using it as a library no longer need to define the `process.env` global (which doesn't exist in the browser natively, only in Node.js). Signed-off-by: Harri Lehtola <[email protected]>
feast-dev · Feb 4, 2025 · 34d2bb0 · 34d2bb0
1 parent c9aca2d
commit 34d2bb0
Show file tree

Hide file tree

Showing 22 changed files with 42 additions and 62 deletions.
diff --git a/ui/src/FeastUI.tsx b/ui/src/FeastUI.tsx
@@ -9,16 +9,23 @@ import FeastUISansProviders, { FeastUIConfigs } from "./FeastUISansProviders";
 interface FeastUIProps {
   reactQueryClient?: QueryClient;
   feastUIConfigs?: FeastUIConfigs;
+  /**
+   * Set to run underneath a specific basename in the URL; passed to React Router.
+   */
+  basename?: string;
 }
 
 const defaultQueryClient = new QueryClient();
 
-const FeastUI = ({ reactQueryClient, feastUIConfigs }: FeastUIProps) => {
+const FeastUI = ({ reactQueryClient, feastUIConfigs, basename }: FeastUIProps) => {
   const queryClient = reactQueryClient || defaultQueryClient;
 
   return (
     // Disable v7_relativeSplatPath: custom tab routes don't currently work with it
-    <BrowserRouter future={{ v7_relativeSplatPath: false, v7_startTransition: true }}>
+    <BrowserRouter
+      basename={basename}
+      future={{ v7_relativeSplatPath: false, v7_startTransition: true }}
+    >
       <QueryClientProvider client={queryClient}>
         <QueryParamProvider adapter={ReactRouter6Adapter}>
           <FeastUISansProviders feastUIConfigs={feastUIConfigs} />

diff --git a/ui/src/FeastUISansProviders.tsx b/ui/src/FeastUISansProviders.tsx
@@ -62,8 +62,6 @@ const FeastUISansProviders = ({
           isCustom: true,
         }
       : { projectsListPromise: defaultProjectListPromise(), isCustom: false };
-
-  const BASE_URL = process.env.PUBLIC_URL || ""
 
   return (
     <EuiProvider colorMode="light">
@@ -76,9 +74,9 @@ const FeastUISansProviders = ({
           >
             <ProjectListContext.Provider value={projectListContext}>
               <Routes>
-                <Route path={BASE_URL + "/"} element={<Layout />}>
+                <Route path="/" element={<Layout />}>
                   <Route index element={<RootProjectSelectionPage />} />
-                  <Route path={BASE_URL + "/p/:projectName/*"} element={<NoProjectGuard />}>
+                  <Route path="/p/:projectName/*" element={<NoProjectGuard />}>
                     <Route index element={<ProjectOverviewPage />} />
                     <Route path="data-source/" element={<DatasourceIndex />} />
                     <Route

diff --git a/ui/src/components/FeaturesInServiceDisplay.tsx b/ui/src/components/FeaturesInServiceDisplay.tsx
@@ -28,10 +28,7 @@ const FeaturesInServiceList = ({ featureViews }: FeatureViewsListInterace) => {
       field: "featureViewName",
       render: (name: string) => {
         return (
-          <EuiCustomLink
-            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
-            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
-          >
+          <EuiCustomLink to={`/p/${projectName}/feature-view/${name}`}>
             {name}
           </EuiCustomLink>
         );

diff --git a/ui/src/components/FeaturesListDisplay.tsx b/ui/src/components/FeaturesListDisplay.tsx
@@ -21,8 +21,7 @@ const FeaturesList = ({
       field: "name",
       render: (item: string) => (
         <EuiCustomLink
-          href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
-          to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
+          to={`/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
         >
           {item}
         </EuiCustomLink>

diff --git a/ui/src/components/ObjectsCountStats.tsx b/ui/src/components/ObjectsCountStats.tsx
@@ -55,7 +55,7 @@ const ObjectsCountStats = () => {
             <EuiFlexItem>
               <EuiStat
                 style={statStyle}
-                onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service`)}
+                onClick={() => navigate(`/p/${projectName}/feature-service`)}
                 description="Feature Services→"
                 title={data.featureServices}
                 reverse
@@ -65,7 +65,7 @@ const ObjectsCountStats = () => {
               <EuiStat
                 style={statStyle}
                 description="Feature Views→"
-                onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view`)}
+                onClick={() => navigate(`/p/${projectName}/feature-view`)}
                 title={data.featureViews}
                 reverse
               />
@@ -74,7 +74,7 @@ const ObjectsCountStats = () => {
               <EuiStat
                 style={statStyle}
                 description="Entities→"
-                onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity`)}
+                onClick={() => navigate(`/p/${projectName}/entity`)}
                 title={data.entities}
                 reverse
               />
@@ -83,7 +83,7 @@ const ObjectsCountStats = () => {
               <EuiStat
                 style={statStyle}
                 description="Data Sources→"
-                onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source`)}
+                onClick={() => navigate(`/p/${projectName}/data-source`)}
                 title={data.dataSources}
                 reverse
               />

diff --git a/ui/src/components/ProjectSelector.tsx b/ui/src/components/ProjectSelector.tsx
@@ -22,7 +22,7 @@ const ProjectSelector = () => {
 
   const basicSelectId = useGeneratedHtmlId({ prefix: "basicSelect" });
   const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    navigate(`${process.env.PUBLIC_URL || ""}/p/${e.target.value}`);
+    navigate(`/p/${e.target.value}`);
   };
 
   return (

diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -91,14 +91,17 @@ const tabsRegistry = {
   ],
 };
 
+const basename = process.env.PUBLIC_URL ?? '';
+
 const root = createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
     <FeastUI
+      basename={basename}
       reactQueryClient={queryClient}
       feastUIConfigs={{
         tabsRegistry: tabsRegistry,
-        projectListPromise: fetch((process.env.PUBLIC_URL || "") + "/projects-list.json", {
+        projectListPromise: fetch(`${basename}/projects-list.json`, {
             headers: {
               "Content-Type": "application/json",
             },

diff --git a/ui/src/pages/RootProjectSelectionPage.tsx b/ui/src/pages/RootProjectSelectionPage.tsx
@@ -21,12 +21,12 @@ const RootProjectSelectionPage = () => {
   useEffect(() => {
     if (data && data.default) {
       // If a default is set, redirect there.
-      navigate(`${process.env.PUBLIC_URL || ""}/p/${data.default}`);
+      navigate(`/p/${data.default}`);
     }
 
     if (data && data.projects.length === 1) {
       // If there is only one project, redirect there.
-      navigate(`${process.env.PUBLIC_URL || ""}/p/${data.projects[0].id}`);
+      navigate(`/p/${data.projects[0].id}`);
     }
   }, [data, navigate]);
 
@@ -38,7 +38,7 @@ const RootProjectSelectionPage = () => {
           title={`${item.name}`}
           description={item?.description || ""}
           onClick={() => {
-            navigate(`${process.env.PUBLIC_URL || ""}/p/${item.id}`);
+            navigate(`/p/${item.id}`);
           }}
         />
       </EuiFlexItem>

diff --git a/ui/src/pages/Sidebar.tsx b/ui/src/pages/Sidebar.tsx
@@ -53,7 +53,7 @@ const SideNav = () => {
       : ""
   }`;
 
-  const baseUrl = `${process.env.PUBLIC_URL || ""}/p/${projectName}`;
+  const baseUrl = `/p/${projectName}`;
 
   const sideNav: React.ComponentProps<typeof EuiSideNav>['items'] = [
     {

diff --git a/ui/src/pages/data-sources/DataSourcesListingTable.tsx b/ui/src/pages/data-sources/DataSourcesListingTable.tsx
@@ -20,10 +20,7 @@ const DatasourcesListingTable = ({
       sortable: true,
       render: (name: string) => {
         return (
-          <EuiCustomLink
-            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${name}`}
-            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${name}`}
-          >
+          <EuiCustomLink to={`/p/${projectName}/data-source/${name}`}>
             {name}
           </EuiCustomLink>
         );

diff --git a/ui/src/pages/entities/EntitiesListingTable.tsx b/ui/src/pages/entities/EntitiesListingTable.tsx
@@ -20,10 +20,7 @@ const EntitiesListingTable = ({ entities }: EntitiesListingTableProps) => {
       sortable: true,
       render: (name: string) => {
         return (
-          <EuiCustomLink
-            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity/${name}`}
-            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity/${name}`}
-          >
+          <EuiCustomLink to={`/p/${projectName}/entity/${name}`}>
             {name}
           </EuiCustomLink>
         );

diff --git a/ui/src/pages/entities/FeatureViewEdgesList.tsx b/ui/src/pages/entities/FeatureViewEdgesList.tsx
@@ -53,10 +53,7 @@ const FeatureViewEdgesList = ({ fvNames }: FeatureViewEdgesListInterace) => {
       field: "",
       render: ({ name }: { name: string }) => {
         return (
-          <EuiCustomLink
-            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
-            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
-          >
+          <EuiCustomLink to={`/p/${projectName}/feature-view/${name}`}>
             {name}
           </EuiCustomLink>
         );

diff --git a/ui/src/pages/feature-services/FeatureServiceListingTable.tsx b/ui/src/pages/feature-services/FeatureServiceListingTable.tsx
@@ -30,10 +30,7 @@ const FeatureServiceListingTable = ({
       field: "spec.name",
       render: (name: string) => {
         return (
-          <EuiCustomLink
-            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service/${name}`}
-            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service/${name}`}
-          >
+          <EuiCustomLink to={`/p/${projectName}/feature-service/${name}`}>
             {name}
           </EuiCustomLink>
         );

diff --git a/ui/src/pages/feature-services/FeatureServiceOverviewTab.tsx b/ui/src/pages/feature-services/FeatureServiceOverviewTab.tsx
@@ -109,7 +109,7 @@ const FeatureServiceOverviewTab = () => {
                     tags={data.spec.tags}
                     createLink={(key, value) => {
                       return (
-                        `${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service?` +
+                        `/p/${projectName}/feature-service?` +
                         encodeSearchQueryString(`${key}:${value}`)
                       );
                     }}
@@ -133,7 +133,7 @@ const FeatureServiceOverviewTab = () => {
                             color="primary"
                             onClick={() => {
                               navigate(
-                                `${process.env.PUBLIC_URL || ""}/p/${projectName}/entity/${entity.name}`
+                                `/p/${projectName}/entity/${entity.name}`
                               );
                             }}
                             onClickAriaLabel={entity.name}

diff --git a/ui/src/pages/feature-views/ConsumingFeatureServicesList.tsx b/ui/src/pages/feature-views/ConsumingFeatureServicesList.tsx
@@ -18,10 +18,7 @@ const ConsumingFeatureServicesList = ({
       field: "",
       render: ({ name }: { name: string }) => {
         return (
-          <EuiCustomLink
-            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service/${name}`}
-            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service/${name}`}
-          >
+          <EuiCustomLink to={`/p/${projectName}/feature-service/${name}`}>
             {name}
           </EuiCustomLink>
         );

diff --git a/ui/src/pages/feature-views/FeatureViewListingTable.tsx b/ui/src/pages/feature-views/FeatureViewListingTable.tsx
@@ -31,10 +31,7 @@ const FeatureViewListingTable = ({
       sortable: true,
       render: (name: string, item: genericFVType) => {
         return (
-          <EuiCustomLink
-            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
-            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
-          >
+          <EuiCustomLink to={`/p/${projectName}/feature-view/${name}`}>
             {name} {(item.type === "ondemand" && <EuiBadge>ondemand</EuiBadge>) || (item.type === "stream" && <EuiBadge>stream</EuiBadge>)}
           </EuiCustomLink>
         );

diff --git a/ui/src/pages/feature-views/RegularFeatureViewOverviewTab.tsx b/ui/src/pages/feature-views/RegularFeatureViewOverviewTab.tsx
@@ -96,7 +96,7 @@ const RegularFeatureViewOverviewTab = ({
                       <EuiBadge
                         color="primary"
                         onClick={() => {
-                          navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity/${entity}`);
+                          navigate(`/p/${projectName}/entity/${entity}`);
                         }}
                         onClickAriaLabel={entity}
                         data-test-sub="testExample1"
@@ -134,7 +134,7 @@ const RegularFeatureViewOverviewTab = ({
                 tags={data.spec.tags}
                 createLink={(key, value) => {
                   return (
-                    `${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view?` +
+                    `/p/${projectName}/feature-view?` +
                     encodeSearchQueryString(`${key}:${value}`)
                   );
                 }}

diff --git a/ui/src/pages/feature-views/StreamFeatureViewOverviewTab.tsx b/ui/src/pages/feature-views/StreamFeatureViewOverviewTab.tsx
@@ -96,8 +96,7 @@ const StreamFeatureViewOverviewTab = ({
                     </EuiText>
                     <EuiTitle size="s">
                       <EuiCustomLink
-                        href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${inputGroup?.name}`}
-                        to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${inputGroup?.name}`}
+                        to={`/p/${projectName}/data-source/${inputGroup?.name}`}
                       >
                         {inputGroup?.name}
                       </EuiCustomLink>

diff --git a/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx b/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx
@@ -31,8 +31,7 @@ const FeatureViewProjectionDisplayPanel = (featureViewProjection: RequestDataDis
       <EuiSpacer size="xs" />
       <EuiTitle size="s">
         <EuiCustomLink
-          href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewProjection.featureViewName}`}
-          to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewProjection.featureViewName}`}
+          to={`/p/${projectName}/feature-view/${featureViewProjection.featureViewName}`}
         >
           {featureViewProjection?.featureViewName}
         </EuiCustomLink>

diff --git a/ui/src/pages/feature-views/components/RequestDataDisplayPanel.tsx b/ui/src/pages/feature-views/components/RequestDataDisplayPanel.tsx
@@ -39,8 +39,7 @@ const RequestDataDisplayPanel = ({
       <EuiSpacer size="xs" />
       <EuiTitle size="s">
         <EuiCustomLink
-          href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${requestDataSource?.name}`}
-          to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${requestDataSource?.name}`}
+          to={`/p/${projectName}/data-source/${requestDataSource?.name}`}
         >
           {requestDataSource?.name}
         </EuiCustomLink>

diff --git a/ui/src/pages/features/FeatureOverviewTab.tsx b/ui/src/pages/features/FeatureOverviewTab.tsx
@@ -63,8 +63,8 @@ const FeatureOverviewTab = () => {
                   <EuiDescriptionListTitle>FeatureView</EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>
                     <EuiCustomLink
-                      href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${FeatureViewName}`}
-                      to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${FeatureViewName}`}>
+                      to={`/p/${projectName}/feature-view/${FeatureViewName}`}
+                    >
                       {FeatureViewName}
                     </EuiCustomLink>
                   </EuiDescriptionListDescription>

diff --git a/ui/src/pages/saved-data-sets/DatasetsListingTable.tsx b/ui/src/pages/saved-data-sets/DatasetsListingTable.tsx
@@ -19,10 +19,7 @@ const DatasetsListingTable = ({ datasets }: DatasetsListingTableProps) => {
       sortable: true,
       render: (name: string) => {
         return (
-          <EuiCustomLink
-            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-set/${name}`}
-            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-set/${name}`}
-          >
+          <EuiCustomLink to={`/p/${projectName}/data-set/${name}`}>
             {name}
           </EuiCustomLink>
         );
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,7 +53,7 @@ const SideNav = () => { @@
           : ""
       }`;
-      const baseUrl = `${process.env.PUBLIC_URL || ""}/p/${projectName}`;
+      const baseUrl = `/p/${projectName}`;
       const sideNav: React.ComponentProps<typeof EuiSideNav>['items'] = [
         {
@@ Expand Down @@