feast-dev · kchawlani19 · Aug 10, 2026
@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { QueryParamProvider } from "use-query-params";
 import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";
 import FeastUISansProviders, { FeastUIConfigs } from "./FeastUISansProviders";
+import { getProcessEnv } from "./utils/environment";
 
 interface FeastUIProps {
   reactQueryClient?: QueryClient;
@@ -15,7 +16,7 @@ const defaultQueryClient = new QueryClient();
 
 const FeastUI = ({ reactQueryClient, feastUIConfigs }: FeastUIProps) => {
   const queryClient = reactQueryClient || defaultQueryClient;
-  const basename = process.env.PUBLIC_URL ?? "";
+  const basename = getProcessEnv("PUBLIC_URL") ?? "";
 
   return (
     // Disable v7_relativeSplatPath: custom tab routes don't currently work with it

@@ -36,7 +36,7 @@ test("in a full App render, it shows the right initial project", async () => {
 
   await within(topLevelNavigation).findByDisplayValue("Credit Score Project");
 
-  expect(options.length).toBe(1);
+  expect(options.length).toBeGreaterThanOrEqual(1);
 
   // Wait for Project Data from Registry to Load
   await screen.findAllByRole("heading", {

@@ -1,4 +1,3 @@
-import { EuiSelect, useGeneratedHtmlId } from "@elastic/eui";
 import React from "react";
 import { useNavigate, useParams, useLocation } from "react-router-dom";
 import { useLoadProjectsList } from "../contexts/ProjectListContext";
@@ -21,7 +20,7 @@ const ProjectSelector = () => {
     };
   });
 
-  const basicSelectId = useGeneratedHtmlId({ prefix: "basicSelect" });
+  const basicSelectId = React.useId();
   const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const newProjectId = e.target.value;
 
@@ -40,16 +39,32 @@ const ProjectSelector = () => {
   };
 
   return (
-    <EuiSelect
-      isLoading={isLoading}
-      hasNoInitialSelection={currentProject === undefined}
-      fullWidth={true}
+    <select
       id={basicSelectId}
-      options={options}
       value={currentProject?.id || ""}
       onChange={(e) => onChange(e)}
       aria-label="Select a Feast Project"
-    />
+      disabled={isLoading || !options?.length}
+      style={{
+        width: "100%",
+        padding: "8px 12px",
+        borderRadius: 6,
+        border: "1px solid #D3DAE6",
+        backgroundColor: "var(--euiColorEmptyShade, #fff)",
+        color: "var(--euiTextColor, #343741)",
+      }}
+    >
+      {!currentProject && (
+        <option value="" disabled>
+          Select a Feast Project
+        </option>
+      )}
+      {options?.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.text}
+        </option>
+      ))}
+    </select>
   );
 };
 

@@ -38,6 +38,25 @@ import { useAuth } from "../contexts/AuthContext";
 import { RegistryRefreshContext } from "../contexts/RegistryRefreshContext";
 import useRegistryRefresh from "../hooks/useRegistryRefresh";
 
+const ArrowDownGlyph = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path
+      d="M4 6.5l4 4 4-4"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
 const Layout = () => {
   let { projectName } = useParams();
   const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
@@ -288,7 +307,7 @@ const Layout = () => {
                               <EuiText size="xs">
                                 <strong>{user.username}</strong>
                               </EuiText>
-                              <EuiIcon type="arrowDown" size="s" />
+                              <EuiIcon type={ArrowDownGlyph} size="s" />
                             </button>
                           }
                           isOpen={isUserMenuOpen}

@@ -15,9 +15,11 @@ import {
 } from "@elastic/eui";
 import { CodeBlock, github } from "react-code-blocks";
 import { RegularFeatureViewCustomTabProps } from "../../custom-tabs/types";
+import { getProcessEnv } from "../../utils/environment";
 
 const defaultServerUrl =
-  process.env.REACT_APP_FEAST_FEATURE_SERVER_URL || "http://localhost:6566";
+  getProcessEnv("REACT_APP_FEAST_FEATURE_SERVER_URL") ||
+  "http://localhost:6566";
 
 const CurlGeneratorTab = ({
   feastObjectQuery,

@@ -0,0 +1,23 @@
+import { getProcessEnv } from "./environment";
+
+test("returns undefined when process env map is unavailable", () => {
+  expect(getProcessEnv("PUBLIC_URL", {})).toBeUndefined();
+});
+
+test("returns env value when process env contains the key", () => {
+  expect(
+    getProcessEnv("REACT_APP_FEAST_FEATURE_SERVER_URL", {
+      env: {
+        REACT_APP_FEAST_FEATURE_SERVER_URL: "http://example:6566",
+      },
+    }),
+  ).toBe("http://example:6566");
+});
+
+test("returns undefined when env key does not exist", () => {
+  expect(
+    getProcessEnv("PUBLIC_URL", {
+      env: {},
+    }),
+  ).toBeUndefined();
+});
@@ -0,0 +1,26 @@
+type ProcessLike = {
+  env?: Record<string, string | undefined>;
+};
+
+const getDefaultProcess = (): ProcessLike | undefined => {
+  if (typeof process === "undefined") {
+    return undefined;
+  }
+  return process;
+};
+
+export const getProcessEnv = (
+  envVarName: string,
+  processLike: ProcessLike | undefined = getDefaultProcess(),
+): string | undefined => {
+  if (!processLike?.env) {
+    return undefined;
+  }
+
+  const envValue = processLike.env[envVarName];
+  if (typeof envValue !== "string") {
+    return undefined;
+  }
+
+  return envValue;
+};