Skip to content

Commit b9ddbf9

Browse files
peruukkiperuukki
authored
chore!: Update @elastic/eui and @emotion/react in Feast UI (#4597)
* 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> * chore: Update Node version from 17 to 20 in UI unit tests Node 17 is not an LTS (long-term support) version and apparently rejected by the latest versions of Elastic UI: > error @elastic/eui@95.12.0: The engine "node" is incompatible with > this module. Expected version "16.x || 18.x || >=20.x". Got "17.9.1" Let's try with the latest LTS version. Signed-off-by: Harri Lehtola <peruukki@hotmail.com> --------- Signed-off-by: Harri Lehtola <peruukki@hotmail.com>
1 parent c0fa9aa commit b9ddbf9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+699
-973
lines changed

‎.github/workflows/unit_tests.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ jobs:
4949
- uses: actions/checkout@v4
5050
- uses: actions/setup-node@v3
5151
with:
52-
node-version: '17.x'
52+
node-version: '20.x'
5353
registry-url: 'https://registry.npmjs.org'
5454
- name: Install yarn dependencies
5555
working-directory: ./ui

‎ui/package.json

+7-6
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
"types": "./dist/FeastUI.d.ts",
1010
"module": "./dist/feast-ui.module.js",
1111
"peerDependencies": {
12-
"@elastic/eui": "^55.0.1",
13-
"@emotion/react": "^11.7.1",
12+
"@elastic/eui": "^95.12.0",
13+
"@emotion/react": "^11.13.3",
1414
"react": "^17.0.2",
1515
"react-dom": "^17.0.2"
1616
},
@@ -24,12 +24,12 @@
2424
},
2525
"dependencies": {
2626
"@elastic/datemath": "^5.0.3",
27-
"@elastic/eui": "^55.0.1",
28-
"@emotion/react": "^11.7.1",
27+
"@elastic/eui": "^95.12.0",
28+
"@emotion/css": "^11.13.0",
29+
"@emotion/react": "^11.13.3",
2930
"d3": "^7.3.0",
3031
"inter-ui": "^3.19.3",
3132
"moment": "^2.29.1",
32-
"prop-types": "^15.8.1",
3333
"protobufjs": "^7.1.1",
3434
"query-string": "^7.1.1",
3535
"react-code-blocks": "^0.0.9-0",
@@ -57,6 +57,7 @@
5757
},
5858
"jest": {
5959
"moduleNameMapper": {
60+
"chroma-js": "<rootDir>/node_modules/chroma-js/dist/chroma.min.cjs",
6061
"d3": "<rootDir>/node_modules/d3/dist/d3.min.js"
6162
}
6263
},
@@ -100,7 +101,7 @@
100101
"rollup-plugin-svg": "^2.0.0",
101102
"rollup-plugin-svgo": "^1.1.0",
102103
"rollup-plugin-terser": "^7.0.2",
103-
"typescript": "^4.4.2"
104+
"typescript": "^4.9.5"
104105
},
105106
"description": "Web UI for the [Feast Feature Store](https://feast.dev/)",
106107
"repository": {

‎ui/src/components/ExplorePanel.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
EuiPanel,
66
EuiTitle,
77
EuiBadge,
8-
EuiLoadingContent,
8+
EuiSkeletonText,
99
EuiFlexGroup,
1010
EuiFlexItem,
1111
EuiSpacer,
@@ -25,7 +25,7 @@ const ExplorePanel = () => {
2525
<h3>Explore this Project</h3>
2626
</EuiTitle>
2727
<EuiHorizontalRule margin="xs" />
28-
{isLoading && <EuiLoadingContent lines={3} />}
28+
{isLoading && <EuiSkeletonText lines={3} />}
2929
{isSuccess &&
3030
data &&
3131
data.map((suggestionGroup, i) => {

‎ui/src/components/NoProjectGuard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { EuiEmptyPrompt, EuiLoadingContent } from "@elastic/eui";
1+
import { EuiEmptyPrompt, EuiSkeletonText } from "@elastic/eui";
22
import React, { useContext } from "react";
33
import { Outlet, useParams } from "react-router-dom";
44
import {
@@ -14,7 +14,7 @@ const NoProjectGuard = () => {
1414
const projectListContext = useContext(ProjectListContext);
1515

1616
if (isLoading && !data) {
17-
return <EuiLoadingContent lines={3} />;
17+
return <EuiSkeletonText lines={3} />;
1818
}
1919

2020
if (isError) {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "../types";
77

88
import {
9-
EuiLoadingContent,
9+
EuiSkeletonText,
1010
EuiEmptyPrompt,
1111
EuiFlexGroup,
1212
EuiFlexItem,
@@ -29,7 +29,7 @@ const DemoCustomTab = ({ id, feastObjectQuery }: DataSourceCustomTabProps) => {
2929
if (isLoading) {
3030
// Handle Loading State
3131
// https://elastic.github.io/eui/#/display/loading
32-
return <EuiLoadingContent lines={3} />;
32+
return <EuiSkeletonText lines={3} />;
3333
}
3434

3535
if (isError) {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "../types";
77

88
import {
9-
EuiLoadingContent,
9+
EuiSkeletonText,
1010
EuiEmptyPrompt,
1111
EuiFlexGroup,
1212
EuiFlexItem,
@@ -29,7 +29,7 @@ const DemoCustomTab = ({ id, feastObjectQuery }: DatasetCustomTabProps) => {
2929
if (isLoading) {
3030
// Handle Loading State
3131
// https://elastic.github.io/eui/#/display/loading
32-
return <EuiLoadingContent lines={3} />;
32+
return <EuiSkeletonText lines={3} />;
3333
}
3434

3535
if (isError) {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "../types";
77

88
import {
9-
EuiLoadingContent,
9+
EuiSkeletonText,
1010
EuiEmptyPrompt,
1111
EuiFlexGroup,
1212
EuiFlexItem,
@@ -29,7 +29,7 @@ const DemoCustomTab = ({ id, feastObjectQuery }: EntityCustomTabProps) => {
2929
if (isLoading) {
3030
// Handle Loading State
3131
// https://elastic.github.io/eui/#/display/loading
32-
return <EuiLoadingContent lines={3} />;
32+
return <EuiSkeletonText lines={3} />;
3333
}
3434

3535
if (isError) {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "../types";
77

88
import {
9-
EuiLoadingContent,
9+
EuiSkeletonText,
1010
EuiEmptyPrompt,
1111
EuiFlexGroup,
1212
EuiFlexItem,
@@ -30,7 +30,7 @@ const DemoCustomTab = ({ id, feastObjectQuery }: FeatureCustomTabProps) => {
3030
if (isLoading) {
3131
// Handle Loading State
3232
// https://elastic.github.io/eui/#/display/loading
33-
return <EuiLoadingContent lines={3} />;
33+
return <EuiSkeletonText lines={3} />;
3434
}
3535

3636
if (isError) {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "../types";
77

88
import {
9-
EuiLoadingContent,
9+
EuiSkeletonText,
1010
EuiEmptyPrompt,
1111
EuiFlexGroup,
1212
EuiFlexItem,
@@ -32,7 +32,7 @@ const DemoCustomTab = ({
3232
if (isLoading) {
3333
// Handle Loading State
3434
// https://elastic.github.io/eui/#/display/loading
35-
return <EuiLoadingContent lines={3} />;
35+
return <EuiSkeletonText lines={3} />;
3636
}
3737

3838
if (isError) {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "../types";
77

88
import {
9-
EuiLoadingContent,
9+
EuiSkeletonText,
1010
EuiEmptyPrompt,
1111
EuiFlexGroup,
1212
EuiFlexItem,
@@ -32,7 +32,7 @@ const DemoCustomTab = ({
3232
if (isLoading) {
3333
// Handle Loading State
3434
// https://elastic.github.io/eui/#/display/loading
35-
return <EuiLoadingContent lines={3} />;
35+
return <EuiSkeletonText lines={3} />;
3636
}
3737

3838
if (isError) {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "../types";
77

88
import {
9-
EuiLoadingContent,
9+
EuiSkeletonText,
1010
EuiEmptyPrompt,
1111
EuiFlexGroup,
1212
EuiFlexItem,
@@ -32,7 +32,7 @@ const DemoCustomTab = ({
3232
if (isLoading) {
3333
// Handle Loading State
3434
// https://elastic.github.io/eui/#/display/loading
35-
return <EuiLoadingContent lines={3} />;
35+
return <EuiSkeletonText lines={3} />;
3636
}
3737

3838
if (isError) {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "../types";
77

88
import {
9-
EuiLoadingContent,
9+
EuiSkeletonText,
1010
EuiEmptyPrompt,
1111
EuiFlexGroup,
1212
EuiFlexItem,
@@ -32,7 +32,7 @@ const DemoCustomTab = ({
3232
if (isLoading) {
3333
// Handle Loading State
3434
// https://elastic.github.io/eui/#/display/loading
35-
return <EuiLoadingContent lines={3} />;
35+
return <EuiSkeletonText lines={3} />;
3636
}
3737

3838
if (isError) {

‎ui/src/graphics/DataSourceIcon.tsx

+3-24
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import React from "react";
22

3-
const DataSourceIcon = ({
4-
size,
5-
className,
6-
}: {
7-
size: number;
8-
className?: string;
9-
}) => {
3+
const DataSourceIcon = (props: React.SVGProps<SVGSVGElement>) => {
104
return (
115
<svg
12-
className={className}
13-
width={size}
14-
height={size}
6+
{...props}
157
viewBox="0 0 32 32"
168
fill="none"
179
>
@@ -27,17 +19,4 @@ const DataSourceIcon = ({
2719
);
2820
};
2921

30-
const DataSourceIcon16 = () => {
31-
return <DataSourceIcon size={16} className="euiSideNavItemButton__icon" />;
32-
};
33-
34-
const DataSourceIcon32 = () => {
35-
return (
36-
<DataSourceIcon
37-
size={32}
38-
className="euiIcon euiIcon--xLarge euiPageHeaderContent__titleIcon"
39-
/>
40-
);
41-
};
42-
43-
export { DataSourceIcon, DataSourceIcon16, DataSourceIcon32 };
22+
export { DataSourceIcon };

‎ui/src/graphics/DatasetIcon.tsx

+3-24
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import React from "react";
22

3-
const DatasetIcon = ({
4-
size,
5-
className,
6-
}: {
7-
size: number;
8-
className?: string;
9-
}) => {
3+
const DatasetIcon = (props: React.SVGProps<SVGSVGElement>) => {
104
return (
115
<svg
12-
className={className}
13-
width={size}
14-
height={size}
6+
{...props}
157
viewBox="0 0 32 32"
168
fill="none"
179
xmlns="http://www.w3.org/2000/svg"
@@ -36,17 +28,4 @@ const DatasetIcon = ({
3628
);
3729
};
3830

39-
const DatasetIcon16 = () => {
40-
return <DatasetIcon size={16} className="euiSideNavItemButton__icon" />;
41-
};
42-
43-
const DatasetIcon32 = () => {
44-
return (
45-
<DatasetIcon
46-
size={32}
47-
className="euiIcon euiIcon--xLarge euiPageHeaderContent__titleIcon"
48-
/>
49-
);
50-
};
51-
52-
export { DatasetIcon, DatasetIcon16, DatasetIcon32 };
31+
export { DatasetIcon };

‎ui/src/graphics/EntityIcon.tsx

+3-24
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import React from "react";
22

3-
const EntityIcon = ({
4-
size,
5-
className,
6-
}: {
7-
size: number;
8-
className?: string;
9-
}) => {
3+
const EntityIcon = (props: React.SVGProps<SVGSVGElement>) => {
104
return (
115
<svg
12-
className={className}
13-
width={size}
14-
height={size}
6+
{...props}
157
viewBox="0 0 32 32"
168
fill="none"
179
xmlns="http://www.w3.org/2000/svg"
@@ -30,17 +22,4 @@ const EntityIcon = ({
3022
);
3123
};
3224

33-
const EntityIcon16 = () => {
34-
return <EntityIcon size={16} className="euiSideNavItemButton__icon" />;
35-
};
36-
37-
const EntityIcon32 = () => {
38-
return (
39-
<EntityIcon
40-
size={32}
41-
className="euiIcon euiIcon--xLarge euiPageHeaderContent__titleIcon"
42-
/>
43-
);
44-
};
45-
46-
export { EntityIcon, EntityIcon16, EntityIcon32 };
25+
export { EntityIcon };

‎ui/src/graphics/FeatureIcon.tsx

+3-24
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import React from "react";
22

3-
const FeatureIcon = ({
4-
size,
5-
className,
6-
}: {
7-
size: number;
8-
className?: string;
9-
}) => {
3+
const FeatureIcon = (props: React.SVGProps<SVGSVGElement>) => {
104
return (
115
<svg
12-
className={className}
13-
width={size}
14-
height={size}
6+
{...props}
157
viewBox="0 0 32 32"
168
fill="none"
179
xmlns="http://www.w3.org/2000/svg"
@@ -36,17 +28,4 @@ const FeatureIcon = ({
3628
);
3729
};
3830

39-
const FeatureIcon16 = () => {
40-
return <FeatureIcon size={16} className="euiSideNavItemButton__icon" />;
41-
};
42-
43-
const FeatureIcon32 = () => {
44-
return (
45-
<FeatureIcon
46-
size={32}
47-
className="euiIcon euiIcon--xLarge euiPageHeaderContent__titleIcon"
48-
/>
49-
);
50-
};
51-
52-
export { FeatureIcon, FeatureIcon16, FeatureIcon32 };
31+
export { FeatureIcon };

0 commit comments

Comments
 (0)