chore!: Update @elastic/eui and @emotion/react in Feast UI

.github/workflows/unit_tests.yml

@@ -49,7 +49,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: '17.x'
+          node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Install yarn dependencies
         working-directory: ./ui

ui/package.json

@@ -9,8 +9,8 @@
   "types": "./dist/FeastUI.d.ts",
   "module": "./dist/feast-ui.module.js",
   "peerDependencies": {
-    "@elastic/eui": "^55.0.1",
-    "@emotion/react": "^11.7.1",
+    "@elastic/eui": "^95.12.0",
+    "@emotion/react": "^11.13.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -24,12 +24,12 @@
   },
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^55.0.1",
-    "@emotion/react": "^11.7.1",
+    "@elastic/eui": "^95.12.0",
+    "@emotion/css": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "d3": "^7.3.0",
     "inter-ui": "^3.19.3",
     "moment": "^2.29.1",
-    "prop-types": "^15.8.1",
     "protobufjs": "^7.1.1",
     "query-string": "^7.1.1",
     "react-code-blocks": "^0.0.9-0",
@@ -57,6 +57,7 @@
   },
   "jest": {
     "moduleNameMapper": {
+      "chroma-js": "<rootDir>/node_modules/chroma-js/dist/chroma.min.cjs",
       "d3": "<rootDir>/node_modules/d3/dist/d3.min.js"
     }
   },
@@ -100,7 +101,7 @@
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-svgo": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.4.2"
+    "typescript": "^4.9.5"
   },
   "description": "Web UI for the [Feast Feature Store](https://feast.dev/)",
   "repository": {

ui/src/components/ExplorePanel.tsx

@@ -5,7 +5,7 @@ import {
   EuiPanel,
   EuiTitle,
   EuiBadge,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
@@ -25,7 +25,7 @@ const ExplorePanel = () => {
         <h3>Explore this Project</h3>
       </EuiTitle>
       <EuiHorizontalRule margin="xs" />
-      {isLoading && <EuiLoadingContent lines={3} />}
+      {isLoading && <EuiSkeletonText lines={3} />}
       {isSuccess &&
         data &&
         data.map((suggestionGroup, i) => {

ui/src/components/NoProjectGuard.tsx

@@ -1,4 +1,4 @@
-import { EuiEmptyPrompt, EuiLoadingContent } from "@elastic/eui";
+import { EuiEmptyPrompt, EuiSkeletonText } from "@elastic/eui";
 import React, { useContext } from "react";
 import { Outlet, useParams } from "react-router-dom";
 import {
@@ -14,7 +14,7 @@ const NoProjectGuard = () => {
   const projectListContext = useContext(ProjectListContext);
 
   if (isLoading && !data) {
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (isError) {

ui/src/custom-tabs/data-source-demo-tab/DemoCustomTab.tsx

@@ -6,7 +6,7 @@ import {
 } from "../types";
 
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -29,7 +29,7 @@ const DemoCustomTab = ({ id, feastObjectQuery }: DataSourceCustomTabProps) => {
   if (isLoading) {
     // Handle Loading State
     // https://elastic.github.io/eui/#/display/loading
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (isError) {

ui/src/custom-tabs/dataset-demo-tab/DemoCustomTab.tsx

@@ -6,7 +6,7 @@ import {
 } from "../types";
 
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -29,7 +29,7 @@ const DemoCustomTab = ({ id, feastObjectQuery }: DatasetCustomTabProps) => {
   if (isLoading) {
     // Handle Loading State
     // https://elastic.github.io/eui/#/display/loading
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (isError) {

ui/src/custom-tabs/entity-demo-tab/DemoCustomTab.tsx

@@ -6,7 +6,7 @@ import {
 } from "../types";
 
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -29,7 +29,7 @@ const DemoCustomTab = ({ id, feastObjectQuery }: EntityCustomTabProps) => {
   if (isLoading) {
     // Handle Loading State
     // https://elastic.github.io/eui/#/display/loading
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (isError) {

ui/src/custom-tabs/feature-demo-tab/DemoCustomTab.tsx

@@ -6,7 +6,7 @@ import {
 } from "../types";
 
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -30,7 +30,7 @@ const DemoCustomTab = ({ id, feastObjectQuery }: FeatureCustomTabProps) => {
   if (isLoading) {
     // Handle Loading State
     // https://elastic.github.io/eui/#/display/loading
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (isError) {

ui/src/custom-tabs/feature-service-demo-tab/DemoCustomTab.tsx

@@ -6,7 +6,7 @@ import {
 } from "../types";
 
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -32,7 +32,7 @@ const DemoCustomTab = ({
   if (isLoading) {
     // Handle Loading State
     // https://elastic.github.io/eui/#/display/loading
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (isError) {

ui/src/custom-tabs/ondemand-fv-demo-tab/DemoCustomTab.tsx

@@ -6,7 +6,7 @@ import {
 } from "../types";
 
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -32,7 +32,7 @@ const DemoCustomTab = ({
   if (isLoading) {
     // Handle Loading State
     // https://elastic.github.io/eui/#/display/loading
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (isError) {

ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx

@@ -6,7 +6,7 @@ import {
 } from "../types";
 
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -32,7 +32,7 @@ const DemoCustomTab = ({
   if (isLoading) {
     // Handle Loading State
     // https://elastic.github.io/eui/#/display/loading
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (isError) {

ui/src/custom-tabs/stream-fv-demo-tab/DemoCustomTab.tsx

@@ -6,7 +6,7 @@ import {
 } from "../types";
 
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -32,7 +32,7 @@ const DemoCustomTab = ({
   if (isLoading) {
     // Handle Loading State
     // https://elastic.github.io/eui/#/display/loading
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (isError) {

ui/src/graphics/DataSourceIcon.tsx

@@ -1,17 +1,9 @@
 import React from "react";
 
-const DataSourceIcon = ({
-  size,
-  className,
-}: {
-  size: number;
-  className?: string;
-}) => {
+const DataSourceIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
-      className={className}
-      width={size}
-      height={size}
+      {...props}
       viewBox="0 0 32 32"
       fill="none"
     >
@@ -27,17 +19,4 @@ const DataSourceIcon = ({
   );
 };
 
-const DataSourceIcon16 = () => {
-  return <DataSourceIcon size={16} className="euiSideNavItemButton__icon" />;
-};
-
-const DataSourceIcon32 = () => {
-  return (
-    <DataSourceIcon
-      size={32}
-      className="euiIcon euiIcon--xLarge euiPageHeaderContent__titleIcon"
-    />
-  );
-};
-
-export { DataSourceIcon, DataSourceIcon16, DataSourceIcon32 };
+export { DataSourceIcon };

ui/src/graphics/DatasetIcon.tsx

@@ -1,17 +1,9 @@
 import React from "react";
 
-const DatasetIcon = ({
-  size,
-  className,
-}: {
-  size: number;
-  className?: string;
-}) => {
+const DatasetIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
-      className={className}
-      width={size}
-      height={size}
+      {...props}
       viewBox="0 0 32 32"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -36,17 +28,4 @@ const DatasetIcon = ({
   );
 };
 
-const DatasetIcon16 = () => {
-  return <DatasetIcon size={16} className="euiSideNavItemButton__icon" />;
-};
-
-const DatasetIcon32 = () => {
-  return (
-    <DatasetIcon
-      size={32}
-      className="euiIcon euiIcon--xLarge euiPageHeaderContent__titleIcon"
-    />
-  );
-};
-
-export { DatasetIcon, DatasetIcon16, DatasetIcon32 };
+export { DatasetIcon };

ui/src/graphics/EntityIcon.tsx

@@ -1,17 +1,9 @@
 import React from "react";
 
-const EntityIcon = ({
-  size,
-  className,
-}: {
-  size: number;
-  className?: string;
-}) => {
+const EntityIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
-      className={className}
-      width={size}
-      height={size}
+      {...props}
       viewBox="0 0 32 32"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -30,17 +22,4 @@ const EntityIcon = ({
   );
 };
 
-const EntityIcon16 = () => {
-  return <EntityIcon size={16} className="euiSideNavItemButton__icon" />;
-};
-
-const EntityIcon32 = () => {
-  return (
-    <EntityIcon
-      size={32}
-      className="euiIcon euiIcon--xLarge euiPageHeaderContent__titleIcon"
-    />
-  );
-};
-
-export { EntityIcon, EntityIcon16, EntityIcon32 };
+export { EntityIcon };

ui/src/graphics/FeatureIcon.tsx

@@ -1,17 +1,9 @@
 import React from "react";
 
-const FeatureIcon = ({
-  size,
-  className,
-}: {
-  size: number;
-  className?: string;
-}) => {
+const FeatureIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
-      className={className}
-      width={size}
-      height={size}
+      {...props}
       viewBox="0 0 32 32"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -36,17 +28,4 @@ const FeatureIcon = ({
   );
 };
 
-const FeatureIcon16 = () => {
-  return <FeatureIcon size={16} className="euiSideNavItemButton__icon" />;
-};
-
-const FeatureIcon32 = () => {
-  return (
-    <FeatureIcon
-      size={32}
-      className="euiIcon euiIcon--xLarge euiPageHeaderContent__titleIcon"
-    />
-  );
-};
-
-export { FeatureIcon, FeatureIcon16, FeatureIcon32 };
+export { FeatureIcon };