Visitar URL original
chore!: Update @elastic/eui and @emotion/react in Feast UI by peruukki 路 Pull Request #4597 路 feast-dev/feast 路 GitHub
Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
chore!: Update @elastic/eui and @emotion/react to latest versions
This version of @elastic/eui supports React 18. Good to update
@emotion/react to the latest version at the same time.

Other dependency changes:

- @emotion/css is now a peer dependency of @elastic/eui, so we need to
  add it to our dependencies.

- prop-types is no longer a peer dependency of @elastic/eui, so we can
  remove it from our dependencies.

- typescript needed an upgrade for TypeScript compilation to work in
  the `build:lib` script; it failed due to a syntax error in
  @types/lodash (dependency of @elastic/eui). Unfortunately this
  typescript version isn't within the version range of @elastic/eui's
  peer dependencies, but that one seems overly strict, especially since
  this version seems to work. Unfortunately this also introduces a
  warning in the `yarn start` about the typescript version being newer
  than what ESLint support, but again, everything seems fine. And to be
  honest, I don't know what else to do, this has been quite a challenge
  to get somehow working. :D

Code changes:

- EuiLoadingContent has been replaced with EuiSkeletonText.

- EuiPageContent and EuiPageContentBody have been replaced with
  EuiPageTemplate, EuiPageTemplate.Header and EuiPageTemplate.Section.

- EuiSideNav no longer takes a style prop, so it is dropped; the width
  seems fine without it.

- EuiBasicTable now requires the field prop in its columns, and only
  takes objects in its items.

- The `panelled` prop has been moved from Layout's EuiPageBody to each
  page's EuiPageTemplate, so that the page template's header gets the
  wanted background color.

- The `sticky` prop passed to Layout's EuiPageSidebar needs to be an
  object with an offset, otherwise the offset is read from
  --euiFixedHeadersOffset that is unset if there is no fixed EuiHeader
  on the page.

- Icons: Static class names no longer work for proper styling, we need
  to pass at least the className prop to the svg element. Passing all
  props allows possible other props to work too. Also, we no longer need
  separate components for differently sized icons (16, 32).

- Some overview tab contents are wrapped in an additional EuiFlexGroup
  to add gaps between sections; they previously appeared through some
  component margins but not anymore.

- Jest failed to parse chroma-js sources, probably something to do with
  it being an ES module (its support in Jest is limited:
  https://jest-archive-august-2023.netlify.app/docs/27.x/ecmascript-modules),
  so we use the build version of chroma-js with Jest, similarly to d3.

BREAKING CHANGE: Consuming apps that use @elastic/eui should update it
to a compatible version. If you use @elastic/eui components that have
been renamed or replaced with others, you'll need to update your code
accordingly.

Signed-off-by: Harri Lehtola <peruukki@hotmail.com>
  • Loading branch information
peruukki committed Oct 3, 2024
commit 76c77e1cc25088d2fc27e02dccc99998afffea1f
13 changes: 7 additions & 6 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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",
Expand Down Expand Up @@ -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"
}
},
Expand Down Expand Up @@ -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": {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/ExplorePanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
EuiPanel,
EuiTitle,
EuiBadge,
EuiLoadingContent,
EuiSkeletonText,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
Expand All @@ -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) => {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/NoProjectGuard.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -14,7 +14,7 @@ const NoProjectGuard = () => {
const projectListContext = useContext(ProjectListContext);

if (isLoading && !data) {
return <EuiLoadingContent lines={3} />;
return <EuiSkeletonText lines={3} />;
}

if (isError) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/custom-tabs/data-source-demo-tab/DemoCustomTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "../types";

import {
EuiLoadingContent,
EuiSkeletonText,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/custom-tabs/dataset-demo-tab/DemoCustomTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "../types";

import {
EuiLoadingContent,
EuiSkeletonText,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/custom-tabs/entity-demo-tab/DemoCustomTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "../types";

import {
EuiLoadingContent,
EuiSkeletonText,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/custom-tabs/feature-demo-tab/DemoCustomTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "../types";

import {
EuiLoadingContent,
EuiSkeletonText,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "../types";

import {
EuiLoadingContent,
EuiSkeletonText,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/custom-tabs/ondemand-fv-demo-tab/DemoCustomTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "../types";

import {
EuiLoadingContent,
EuiSkeletonText,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "../types";

import {
EuiLoadingContent,
EuiSkeletonText,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/custom-tabs/stream-fv-demo-tab/DemoCustomTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from "../types";

import {
EuiLoadingContent,
EuiSkeletonText,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -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) {
Expand Down
27 changes: 3 additions & 24 deletions ui/src/graphics/DataSourceIcon.tsx
Original file line number Diff line number Diff line change
@@ -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"
>
Expand All @@ -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 };
27 changes: 3 additions & 24 deletions ui/src/graphics/DatasetIcon.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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 };
27 changes: 3 additions & 24 deletions ui/src/graphics/EntityIcon.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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 };
27 changes: 3 additions & 24 deletions ui/src/graphics/FeatureIcon.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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 };
Loading