fix: Resolve UI build warnings

fix: Resolve UI build warnings (#6529)


(cherry picked from commit abe92af)

Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>

Author: franciscojavierarceo

ui/src/components/PermissionsDisplay.tsx

@@ -3,13 +3,9 @@ import {
   EuiBadge,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPanel,
   EuiText,
-  EuiTitle,
-  EuiHorizontalRule,
   EuiToolTip,
 } from "@elastic/eui";
-import { formatPermissions } from "../utils/permissionUtils";
 
 interface PermissionsDisplayProps {
   permissions: any[] | undefined;

ui/src/components/RegistrySearch.tsx

@@ -3,6 +3,7 @@ import React, {
   useRef,
   forwardRef,
   useImperativeHandle,
+  useCallback,
 } from "react";
 import {
   EuiText,
@@ -17,8 +18,6 @@ import {
 } from "@elastic/eui";
 import EuiCustomLink from "./EuiCustomLink";
 
-import { css } from "@emotion/react";
-
 const searchResultsStyles = {
   searchResults: {
     marginTop: "8px",
@@ -68,11 +67,11 @@ const RegistrySearch = forwardRef<RegistrySearchRef, RegistrySearchProps>(
     const [searchText, setSearchText] = useState("");
     const inputRef = useRef<HTMLInputElement | null>(null);
 
-    const focusSearchInput = () => {
+    const focusSearchInput = useCallback(() => {
       if (inputRef.current) {
         inputRef.current.focus();
       }
-    };
+    }, []);
 
     useImperativeHandle(
       ref,

ui/src/custom-tabs/TabsRegistryContext.tsx

@@ -16,7 +16,6 @@ import FeatureCustomTabLoadingWrapper from "../utils/custom-tabs/FeatureCustomTa
 import DataSourceCustomTabLoadingWrapper from "../utils/custom-tabs/DataSourceCustomTabLoadingWrapper";
 import EntityCustomTabLoadingWrapper from "../utils/custom-tabs/EntityCustomTabLoadingWrapper";
 import DatasetCustomTabLoadingWrapper from "../utils/custom-tabs/DatasetCustomTabLoadingWrapper";
-import CurlGeneratorTab from "../pages/feature-views/CurlGeneratorTab";
 
 import {
   RegularFeatureViewCustomTabRegistrationInterface,

ui/src/pages/Layout.tsx

@@ -54,55 +54,6 @@ const Layout = () => {
   // Load unfiltered data for global search (across all projects)
   const { data: globalData } = useLoadRegistry(globalRegistryPath);
 
-  // Categories for page-level search (filtered to current project)
-  const categories = data
-    ? [
-        {
-          name: "Data Sources",
-          data: data.objects.dataSources || [],
-          getLink: (item: any) => `/p/${projectName}/data-source/${item.name}`,
-        },
-        {
-          name: "Entities",
-          data: data.objects.entities || [],
-          getLink: (item: any) => `/p/${projectName}/entity/${item.name}`,
-        },
-        {
-          name: "Features",
-          data: data.allFeatures || [],
-          getLink: (item: any) => {
-            const featureView = item?.featureView;
-            return featureView
-              ? `/p/${projectName}/feature-view/${featureView}/feature/${item.name}`
-              : "#";
-          },
-        },
-        {
-          name: "Feature Views",
-          data: data.mergedFVList || [],
-          getLink: (item: any) => `/p/${projectName}/feature-view/${item.name}`,
-        },
-        {
-          name: "Label Views",
-          data: data.objects.labelViews || [],
-          getLink: (item: any) => {
-            const lvName = item?.name || item?.spec?.name;
-            return `/p/${projectName}/label-view/${lvName}`;
-          },
-        },
-        {
-          name: "Feature Services",
-          data: data.objects.featureServices || [],
-          getLink: (item: any) => {
-            const serviceName = item?.name || item?.spec?.name;
-            return serviceName
-              ? `/p/${projectName}/feature-service/${serviceName}`
-              : "#";
-          },
-        },
-      ]
-    : [];
-
   // Helper function to extract project ID from an item
   const getProjectId = (item: any): string => {
     // Try different possible locations for the project field

ui/src/pages/feature-views/FeatureViewVersionsTab.tsx

@@ -6,7 +6,6 @@ import {
   EuiTitle,
   EuiHorizontalRule,
   EuiCodeBlock,
-  EuiSpacer,
   EuiFlexGroup,
   EuiFlexItem,
   EuiBadge,
@@ -161,11 +160,17 @@ const FeatureViewVersionsTab = ({
   const registryQuery = useLoadRegistry(registryUrl, projectName);
   const [expandedRows, setExpandedRows] = useState<Record<number, boolean>>({});
 
-  const records =
-    registryQuery.data?.objects?.featureViewVersionHistory?.records?.filter(
-      (r: feast.core.IFeatureViewVersionRecord) =>
-        r.featureViewName === featureViewName,
-    ) || [];
+  const records = useMemo(
+    () =>
+      registryQuery.data?.objects?.featureViewVersionHistory?.records?.filter(
+        (r: feast.core.IFeatureViewVersionRecord) =>
+          r.featureViewName === featureViewName,
+      ) || [],
+    [
+      registryQuery.data?.objects?.featureViewVersionHistory?.records,
+      featureViewName,
+    ],
+  );
 
   const decodedVersions: DecodedVersion[] = useMemo(
     () => records.map(decodeVersionProto),

ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx

@@ -4,7 +4,6 @@ import {
   EuiBasicTable,
   EuiPanel,
   EuiSpacer,
-  EuiText,
   EuiTitle,
 } from "@elastic/eui";
 import { useParams } from "react-router-dom";

ui/src/pages/label-views/BatchUploadTab.tsx

@@ -3,7 +3,6 @@ import { useParams } from "react-router-dom";
 import {
   EuiPanel,
   EuiTitle,
-  EuiHorizontalRule,
   EuiForm,
   EuiFormRow,
   EuiButton,
@@ -18,7 +17,6 @@ import {
   EuiFilePicker,
   EuiBasicTable,
   EuiBasicTableColumn,
-  EuiIcon,
   EuiCodeBlock,
 } from "@elastic/eui";
 import RegistryPathContext from "../../contexts/RegistryPathContext";
@@ -28,7 +26,7 @@ const BatchUploadTab = () => {
   const { labelViewName } = useParams();
   const registryUrl = useContext(RegistryPathContext);
   const name = labelViewName || "";
-  const { isLoading, isSuccess, data } = useLoadLabelView(name);
+  const { isLoading, data } = useLoadLabelView(name);
 
   const [fileData, setFileData] = useState<any[] | null>(null);
   const [fileName, setFileName] = useState<string>("");

ui/src/pages/label-views/ClassificationMethod.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, {
+  useState,
+  useContext,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
 import { useParams } from "react-router-dom";
 import {
   EuiCallOut,
@@ -7,7 +13,6 @@ import {
   EuiFlexItem,
   EuiButton,
   EuiPanel,
-  EuiTitle,
   EuiText,
   EuiLoadingSpinner,
   EuiBasicTable,
@@ -45,17 +50,23 @@ const ClassificationMethod = () => {
   const [pageSize, setPageSize] = useState(25);
 
   const spec = data?.object?.spec || data?.spec || {};
-  const labelFields: { name: string; valueType?: string }[] =
-    spec.features || [];
-  const entities: string[] = spec.entityColumns?.length
-    ? spec.entityColumns.map((ec: { name: string }) => ec.name)
-    : spec.entities || [];
+  const labelFields: { name: string; valueType?: string }[] = useMemo(
+    () => spec.features || [],
+    [spec.features],
+  );
+  const entities: string[] = useMemo(
+    () =>
+      spec.entityColumns?.length
+        ? spec.entityColumns.map((ec: { name: string }) => ec.name)
+        : spec.entities || [],
+    [spec.entityColumns, spec.entities],
+  );
 
   const configuredValues = annotationConfig?.label_values || {};
   const fieldRoles = annotationConfig?.field_roles || {};
   const labelWidgets = annotationConfig?.label_widgets || {};
 
-  const fetchLabels = async () => {
+  const fetchLabels = useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -84,13 +95,13 @@ const ClassificationMethod = () => {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [labelViewName, registryUrl]);
 
   useEffect(() => {
     if (labelViewName) {
       fetchLabels();
     }
-  }, [labelViewName]);
+  }, [labelViewName, fetchLabels]);
 
   const handleFieldChange = (rowId: string, field: string, value: string) => {
     setRows((prev) =>
@@ -186,7 +197,7 @@ const ClassificationMethod = () => {
     URL.revokeObjectURL(url);
   };
 
-  const filteredRows = React.useMemo(() => {
+  const filteredRows = useMemo(() => {
     if (!searchQuery.trim()) return rows;
     const q = searchQuery.toLowerCase();
     return rows.filter((row) =>
@@ -198,12 +209,12 @@ const ClassificationMethod = () => {
     );
   }, [rows, searchQuery]);
 
-  const paginatedRows = React.useMemo(() => {
+  const paginatedRows = useMemo(() => {
     const start = pageIndex * pageSize;
     return filteredRows.slice(start, start + pageSize);
   }, [filteredRows, pageIndex, pageSize]);
 
-  const uniqueValuesForField = React.useMemo(() => {
+  const uniqueValuesForField = useMemo(() => {
     const result: Record<string, string[]> = {};
     labelFields.forEach((field) => {
       const values = new Set<string>();

ui/src/pages/label-views/EntityFormMethod.tsx

@@ -9,7 +9,6 @@ import {
   EuiPanel,
   EuiTitle,
   EuiText,
-  EuiLoadingSpinner,
   EuiFormRow,
   EuiFieldText,
   EuiFieldNumber,
@@ -35,11 +34,17 @@ const EntityFormMethod = ({ annotationConfig }: EntityFormMethodProps) => {
   const { data } = useLoadLabelView(labelViewName || "");
 
   const spec = data?.object?.spec || data?.spec || {};
-  const entities: string[] = spec.entityColumns?.length
-    ? spec.entityColumns.map((ec: { name: string }) => ec.name)
-    : spec.entities || [];
-  const labelFields: { name: string; valueType?: string }[] =
-    spec.features || [];
+  const entities: string[] = useMemo(
+    () =>
+      spec.entityColumns?.length
+        ? spec.entityColumns.map((ec: { name: string }) => ec.name)
+        : spec.entities || [],
+    [spec.entityColumns, spec.entities],
+  );
+  const labelFields: { name: string; valueType?: string }[] = useMemo(
+    () => spec.features || [],
+    [spec.features],
+  );
 
   const fieldRoles = annotationConfig.field_roles;
   const labelValues = annotationConfig.label_values;

ui/src/pages/label-views/IntegrationsTab.tsx

@@ -3,7 +3,6 @@ import { useParams } from "react-router-dom";
 import {
   EuiPanel,
   EuiTitle,
-  EuiHorizontalRule,
   EuiText,
   EuiLoadingSpinner,
   EuiCallOut,
@@ -12,8 +11,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiBadge,
-  EuiCopy,
-  EuiButton,
   EuiIcon,
 } from "@elastic/eui";
 import RegistryPathContext from "../../contexts/RegistryPathContext";