chore: Convert EuiCustomLink to TypeScript in /ui

This was the last JavaScript component, convert it to TypeScript too. The `href` prop was never used, so we omit it from the props type definition, and no longer pass it to the component. We could also have chosen to drop the `to` prop and use `href` instead, but `to` is used by React Router's Link (https://reactrouter.com/6.29.0/components/link), and it makes sense to use the same name in EuiCustomLink since we pass it to React Router's `navigate` function; the naming hints that it's tied to React Router and not just a regular URL path. Signed-off-by: Harri Lehtola <peruukki@hotmail.com>
feast-dev · Feb 15, 2025 · f8d41d1 · f8d41d1
1 parent a13fa9b
commit f8d41d1
Show file tree

Hide file tree

Showing 14 changed files with 15 additions and 25 deletions.
diff --git a/ui/src/components/EuiCustomLink.jsx → ui/src/components/EuiCustomLink.tsx b/ui/src/components/EuiCustomLink.jsx → ui/src/components/EuiCustomLink.tsx
@@ -1,23 +1,26 @@
-// File name: "EuiCustomLink.js".
 import React from "react";
-import { EuiLink } from "@elastic/eui";
-import { useNavigate, useHref } from "react-router-dom";
+import { EuiLink, type EuiLinkAnchorProps } from "@elastic/eui";
+import { useNavigate, useHref, type To } from "react-router-dom";
 
-const isModifiedEvent = (event) =>
+interface EuiCustomLinkProps extends Omit<EuiLinkAnchorProps, 'href'> {
+  to: To;
+}
+
+const isModifiedEvent = (event: React.MouseEvent) =>
   !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 
-const isLeftClickEvent = (event) => event.button === 0;
+const isLeftClickEvent = (event: React.MouseEvent) => event.button === 0;
 
-const isTargetBlank = (event) => {
-  const target = event.target.getAttribute("target");
+const isTargetBlank = (event: React.MouseEvent) => {
+  const target = (event.target as Element).getAttribute("target");
   return target && target !== "_self";
 };
 
-export default function EuiCustomLink({ to, ...rest }) {
+export default function EuiCustomLink({ to, ...rest }: EuiCustomLinkProps) {
   // This is the key!
   const navigate = useNavigate();
 
-  function onClick(event) {
+  const onClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
     if (event.defaultPrevented) {
       return;
     }
@@ -41,6 +44,5 @@ export default function EuiCustomLink({ to, ...rest }) {
   // Generate the correct link href (with basename accounted for)
   const href = useHref(to);
 
-  const props = { ...rest, href, onClick };
-  return <EuiLink {...props} />;
+  return <EuiLink {...rest} href={href} onClick={onClick} />;
 }
diff --git a/ui/src/components/FeaturesInServiceDisplay.tsx b/ui/src/components/FeaturesInServiceDisplay.tsx
@@ -29,7 +29,6 @@ const FeaturesInServiceList = ({ featureViews }: FeatureViewsListInterace) => {
       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}`}
           >
             {name}

diff --git a/ui/src/components/FeaturesListDisplay.tsx b/ui/src/components/FeaturesListDisplay.tsx
@@ -21,7 +21,6 @@ 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}`}
         >
           {item}

diff --git a/ui/src/pages/data-sources/DataSourcesListingTable.tsx b/ui/src/pages/data-sources/DataSourcesListingTable.tsx
@@ -21,7 +21,6 @@ const DatasourcesListingTable = ({
       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}`}
           >
             {name}

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

diff --git a/ui/src/pages/entities/FeatureViewEdgesList.tsx b/ui/src/pages/entities/FeatureViewEdgesList.tsx
@@ -54,7 +54,6 @@ const FeatureViewEdgesList = ({ fvNames }: FeatureViewEdgesListInterace) => {
       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}`}
           >
             {name}

diff --git a/ui/src/pages/feature-services/FeatureServiceListingTable.tsx b/ui/src/pages/feature-services/FeatureServiceListingTable.tsx
@@ -31,7 +31,6 @@ const FeatureServiceListingTable = ({
       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}`}
           >
             {name}

diff --git a/ui/src/pages/feature-views/ConsumingFeatureServicesList.tsx b/ui/src/pages/feature-views/ConsumingFeatureServicesList.tsx
@@ -19,7 +19,6 @@ const ConsumingFeatureServicesList = ({
       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}`}
           >
             {name}

diff --git a/ui/src/pages/feature-views/FeatureViewListingTable.tsx b/ui/src/pages/feature-views/FeatureViewListingTable.tsx
@@ -32,7 +32,6 @@ const FeatureViewListingTable = ({
       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}`}
           >
             {name} {(item.type === "ondemand" && <EuiBadge>ondemand</EuiBadge>) || (item.type === "stream" && <EuiBadge>stream</EuiBadge>)}

diff --git a/ui/src/pages/feature-views/StreamFeatureViewOverviewTab.tsx b/ui/src/pages/feature-views/StreamFeatureViewOverviewTab.tsx
@@ -96,7 +96,6 @@ 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}`}
                       >
                         {inputGroup?.name}

diff --git a/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx b/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx
@@ -31,7 +31,6 @@ 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}`}
         >
           {featureViewProjection?.featureViewName}

diff --git a/ui/src/pages/feature-views/components/RequestDataDisplayPanel.tsx b/ui/src/pages/feature-views/components/RequestDataDisplayPanel.tsx
@@ -39,7 +39,6 @@ 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}`}
         >
           {requestDataSource?.name}

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={`${process.env.PUBLIC_URL || ""}/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
@@ -20,7 +20,6 @@ const DatasetsListingTable = ({ datasets }: DatasetsListingTableProps) => {
       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}`}
           >
             {name}