Skip to content

Commit 34d2bb0

Browse files
peruukkiperuukki
committed
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 <peruukki@hotmail.com>
1 parent c9aca2d commit 34d2bb0

22 files changed

Lines changed: 42 additions & 62 deletions

‎ui/src/FeastUI.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,23 @@ import FeastUISansProviders, { FeastUIConfigs } from "./FeastUISansProviders";
99
interface FeastUIProps {
1010
reactQueryClient?: QueryClient;
1111
feastUIConfigs?: FeastUIConfigs;
12+
/**
13+
* Set to run underneath a specific basename in the URL; passed to React Router.
14+
*/
15+
basename?: string;
1216
}
1317

1418
const defaultQueryClient = new QueryClient();
1519

16-
const FeastUI = ({ reactQueryClient, feastUIConfigs }: FeastUIProps) => {
20+
const FeastUI = ({ reactQueryClient, feastUIConfigs, basename }: FeastUIProps) => {
1721
const queryClient = reactQueryClient || defaultQueryClient;
1822

1923
return (
2024
// Disable v7_relativeSplatPath: custom tab routes don't currently work with it
21-
<BrowserRouter future={{ v7_relativeSplatPath: false, v7_startTransition: true }}>
25+
<BrowserRouter
26+
basename={basename}
27+
future={{ v7_relativeSplatPath: false, v7_startTransition: true }}
28+
>
2229
<QueryClientProvider client={queryClient}>
2330
<QueryParamProvider adapter={ReactRouter6Adapter}>
2431
<FeastUISansProviders feastUIConfigs={feastUIConfigs} />

‎ui/src/FeastUISansProviders.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,6 @@ const FeastUISansProviders = ({
6262
isCustom: true,
6363
}
6464
: { projectsListPromise: defaultProjectListPromise(), isCustom: false };
65-
66-
const BASE_URL = process.env.PUBLIC_URL || ""
6765

6866
return (
6967
<EuiProvider colorMode="light">
@@ -76,9 +74,9 @@ const FeastUISansProviders = ({
7674
>
7775
<ProjectListContext.Provider value={projectListContext}>
7876
<Routes>
79-
<Route path={BASE_URL + "/"} element={<Layout />}>
77+
<Route path="/" element={<Layout />}>
8078
<Route index element={<RootProjectSelectionPage />} />
81-
<Route path={BASE_URL + "/p/:projectName/*"} element={<NoProjectGuard />}>
79+
<Route path="/p/:projectName/*" element={<NoProjectGuard />}>
8280
<Route index element={<ProjectOverviewPage />} />
8381
<Route path="data-source/" element={<DatasourceIndex />} />
8482
<Route

‎ui/src/components/FeaturesInServiceDisplay.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,7 @@ const FeaturesInServiceList = ({ featureViews }: FeatureViewsListInterace) => {
2828
field: "featureViewName",
2929
render: (name: string) => {
3030
return (
31-
<EuiCustomLink
32-
href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
33-
to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
34-
>
31+
<EuiCustomLink to={`/p/${projectName}/feature-view/${name}`}>
3532
{name}
3633
</EuiCustomLink>
3734
);

‎ui/src/components/FeaturesListDisplay.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@ const FeaturesList = ({
2121
field: "name",
2222
render: (item: string) => (
2323
<EuiCustomLink
24-
href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
25-
to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
24+
to={`/p/${projectName}/feature-view/${featureViewName}/feature/${item}`}
2625
>
2726
{item}
2827
</EuiCustomLink>

‎ui/src/components/ObjectsCountStats.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const ObjectsCountStats = () => {
5555
<EuiFlexItem>
5656
<EuiStat
5757
style={statStyle}
58-
onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-service`)}
58+
onClick={() => navigate(`/p/${projectName}/feature-service`)}
5959
description="Feature Services→"
6060
title={data.featureServices}
6161
reverse
@@ -65,7 +65,7 @@ const ObjectsCountStats = () => {
6565
<EuiStat
6666
style={statStyle}
6767
description="Feature Views→"
68-
onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view`)}
68+
onClick={() => navigate(`/p/${projectName}/feature-view`)}
6969
title={data.featureViews}
7070
reverse
7171
/>
@@ -74,7 +74,7 @@ const ObjectsCountStats = () => {
7474
<EuiStat
7575
style={statStyle}
7676
description="Entities→"
77-
onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/entity`)}
77+
onClick={() => navigate(`/p/${projectName}/entity`)}
7878
title={data.entities}
7979
reverse
8080
/>
@@ -83,7 +83,7 @@ const ObjectsCountStats = () => {
8383
<EuiStat
8484
style={statStyle}
8585
description="Data Sources→"
86-
onClick={() => navigate(`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source`)}
86+
onClick={() => navigate(`/p/${projectName}/data-source`)}
8787
title={data.dataSources}
8888
reverse
8989
/>

‎ui/src/components/ProjectSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const ProjectSelector = () => {
2222

2323
const basicSelectId = useGeneratedHtmlId({ prefix: "basicSelect" });
2424
const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
25-
navigate(`${process.env.PUBLIC_URL || ""}/p/${e.target.value}`);
25+
navigate(`/p/${e.target.value}`);
2626
};
2727

2828
return (

‎ui/src/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,14 +91,17 @@ const tabsRegistry = {
9191
],
9292
};
9393

94+
const basename = process.env.PUBLIC_URL ?? '';
95+
9496
const root = createRoot(document.getElementById("root")!);
9597
root.render(
9698
<React.StrictMode>
9799
<FeastUI
100+
basename={basename}
98101
reactQueryClient={queryClient}
99102
feastUIConfigs={{
100103
tabsRegistry: tabsRegistry,
101-
projectListPromise: fetch((process.env.PUBLIC_URL || "") + "/projects-list.json", {
104+
projectListPromise: fetch(`${basename}/projects-list.json`, {
102105
headers: {
103106
"Content-Type": "application/json",
104107
},

‎ui/src/pages/RootProjectSelectionPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ const RootProjectSelectionPage = () => {
2121
useEffect(() => {
2222
if (data && data.default) {
2323
// If a default is set, redirect there.
24-
navigate(`${process.env.PUBLIC_URL || ""}/p/${data.default}`);
24+
navigate(`/p/${data.default}`);
2525
}
2626

2727
if (data && data.projects.length === 1) {
2828
// If there is only one project, redirect there.
29-
navigate(`${process.env.PUBLIC_URL || ""}/p/${data.projects[0].id}`);
29+
navigate(`/p/${data.projects[0].id}`);
3030
}
3131
}, [data, navigate]);
3232

@@ -38,7 +38,7 @@ const RootProjectSelectionPage = () => {
3838
title={`${item.name}`}
3939
description={item?.description || ""}
4040
onClick={() => {
41-
navigate(`${process.env.PUBLIC_URL || ""}/p/${item.id}`);
41+
navigate(`/p/${item.id}`);
4242
}}
4343
/>
4444
</EuiFlexItem>

‎ui/src/pages/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const SideNav = () => {
5353
: ""
5454
}`;
5555

56-
const baseUrl = `${process.env.PUBLIC_URL || ""}/p/${projectName}`;
56+
const baseUrl = `/p/${projectName}`;
5757

5858
const sideNav: React.ComponentProps<typeof EuiSideNav>['items'] = [
5959
{

‎ui/src/pages/data-sources/DataSourcesListingTable.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,7 @@ const DatasourcesListingTable = ({
2020
sortable: true,
2121
render: (name: string) => {
2222
return (
23-
<EuiCustomLink
24-
href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${name}`}
25-
to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/data-source/${name}`}
26-
>
23+
<EuiCustomLink to={`/p/${projectName}/data-source/${name}`}>
2724
{name}
2825
</EuiCustomLink>
2926
);

0 commit comments

Comments
 (0)