Skip to content

Commit

Permalink
[ui] Bump React to 18.3.1 (#24794)
Browse files Browse the repository at this point in the history
## Summary & Motivation

Ran into some Jest warnings in Plus that point at React version
mismatches. It's already on 18.3.1, so let's bump these too.

## How I Tested These Changes

`yarn jest` in Plus app, no more warnings.

## Changelog

NOCHANGELOG
  • Loading branch information
hellendag authored Sep 27, 2024
1 parent 716151a commit c1dae95
Show file tree
Hide file tree
Showing 9 changed files with 188 additions and 258 deletions.
10 changes: 5 additions & 5 deletions js_modules/dagster-ui/packages/app-oss/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
"eslint-config-next": "^13.5.3",
"graphql": "^16.8.1",
"next": "^14.2.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-is": "^18.3.1",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-router-dom-v5-compat": "^6.3.0",
Expand All @@ -32,8 +32,8 @@
"@dagster-io/eslint-config": "workspace:*",
"@types/jest": "^29.5.11",
"@types/node": "^16.11.20",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@types/react": "^18.3.9",
"@types/react-dom": "^18.3.0",
"@types/uuid": "^8.3.4",
"@types/validator": "^13",
"@types/webpack-bundle-analyzer": "^4",
Expand Down
18 changes: 10 additions & 8 deletions js_modules/dagster-ui/packages/ui-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,17 @@
"@blueprintjs/popover2": "^2",
"@blueprintjs/select": "^5",
"@tanstack/react-virtual": "^3.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-is": "^18.3.1",
"styled-components": "^5.3.3"
},
"dependencies": {
"@react-hook/resize-observer": "^1.2.6",
"amator": "^1.1.0",
"codemirror": "^5.65.2",
"deepmerge": "^4.2.2",
"react-dates": "^21.8.0",
"yaml": "2.4.0"
},
"devDependencies": {
Expand Down Expand Up @@ -74,9 +75,10 @@
"@types/jest": "^29.5.11",
"@types/lru-cache": "^7",
"@types/mdx-js__react": "^1",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@types/react-is": "^18",
"@types/react": "^18.3.9",
"@types/react-dates": "^21.8.0",
"@types/react-dom": "^18.3.0",
"@types/react-is": "^18.3.0",
"@types/rollup-plugin-node-globals": "^1",
"@types/styled-components": "^5.1.26",
"@types/testing-library__jest-dom": "^5.14.2",
Expand All @@ -89,9 +91,9 @@
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.5.0",
"prettier": "3.0.3",
"react": "^18.2.0",
"react": "^18.3.1",
"react-docgen-typescript-plugin": "^1.0.8",
"react-dom": "^18.2.0",
"react-dom": "^18.3.1",
"regenerator-runtime": "^0.13.9",
"rollup": "^2.70.1",
"rollup-plugin-node-globals": "^1.4.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import {DateRangePicker} from 'react-dates';
import {DateRangePicker, DateRangePickerShape} from 'react-dates';
import styled from 'styled-components';

import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import {Colors} from './Color';

export const DateRangePickerWrapper = (props: React.ComponentProps<typeof DateRangePicker>) => {
export const DateRangePickerWrapper = (props: DateRangePickerShape) => {
return (
<DatePickerContainer>
<DateRangePicker {...props} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export interface CommonMenuItemProps {

interface ItemProps
extends CommonMenuItemProps,
Omit<React.ComponentProps<typeof BlueprintMenuItem>, 'href' | 'icon'> {}
Omit<React.ComponentProps<typeof BlueprintMenuItem>, 'ref' | 'href' | 'icon'> {}

export const MenuItem = (props: ItemProps) => {
const {icon, intent, ...rest} = props;
Expand All @@ -81,7 +81,7 @@ export const MenuItem = (props: ItemProps) => {

interface MenuExternalLinkProps
extends CommonMenuItemProps,
Omit<React.ComponentProps<typeof BlueprintMenuItem>, 'href' | 'icon'> {
Omit<React.ComponentProps<typeof BlueprintMenuItem>, 'ref' | 'href' | 'icon'> {
href: string;
}

Expand Down
18 changes: 8 additions & 10 deletions js_modules/dagster-ui/packages/ui-core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
"@blueprintjs/popover2": "^2",
"@blueprintjs/select": "^5",
"@dagster-io/ui-components": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-router-dom-v5-compat": "^6.3.0",
Expand Down Expand Up @@ -59,8 +59,7 @@
"moment-timezone": "^0.5.42",
"qs": "^6.10.3",
"react-chartjs-2": "^3.0.3",
"react-dates": "^21.8.0",
"react-is": "^18.2.0",
"react-is": "^18.3.1",
"react-markdown": "^8.0.6",
"recoil": "^0.7.7",
"rehype-highlight": "^6.0.0",
Expand Down Expand Up @@ -119,11 +118,10 @@
"@types/lru-cache": "^5.1.0",
"@types/mdx-js__react": "^1",
"@types/qs": "^6.9.6",
"@types/react": "^18.2.0",
"@types/react-dates": "^21",
"@types/react-dom": "^18.2.0",
"@types/react": "^18.3.9",
"@types/react-dom": "^18.3.0",
"@types/react-router": "^5.1.17",
"@types/react-router-dom": "^5.3.2",
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.26",
"@types/testing-library__jest-dom": "^5.14.2",
"@types/ws": "^6.0.3",
Expand All @@ -144,9 +142,9 @@
"jest-canvas-mock": "^2.4.0",
"jest-environment-jsdom": "^29.4",
"prettier": "^3.0.3",
"react": "^18.2.0",
"react": "^18.3.1",
"react-docgen-typescript-plugin": "^1.0.8",
"react-dom": "^18.2.0",
"react-dom": "^18.3.1",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-router-dom-v5-compat": "^6.3.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,9 @@ const AssetGraphExplorerWithData = ({

const svgViewport = layout ? (
<SVGViewport
ref={(r) => (viewportEl.current = r || undefined)}
ref={(r) => {
viewportEl.current = r || undefined;
}}
defaultZoom="zoom-to-fit-width"
interactor={SVGViewport.Interactors.PanAndZoom}
graphWidth={layout.width}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,9 @@ export const AssetNodeLineageGraph = ({
return (
<AssetGraphBackgroundContextMenu direction={direction} setDirection={setDirection}>
<SVGViewport
ref={(r) => (viewportEl.current = r || undefined)}
ref={(r) => {
viewportEl.current = r || undefined;
}}
interactor={SVGViewport.Interactors.PanAndZoom}
defaultZoom="zoom-to-fit"
graphWidth={layout.width}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,121 +1,4 @@
import {Colors} from '@dagster-io/ui-components';
import * as React from 'react';
import {DateRangePicker} from 'react-dates';
import styled from 'styled-components';

import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

export const DateRangePickerWrapper = (props: React.ComponentProps<typeof DateRangePicker>) => {
return (
<DatePickerContainer>
<DateRangePicker {...props} />
</DatePickerContainer>
);
};

const DatePickerContainer = styled.div`
.DateRangePickerInput {
background-color: ${Colors.backgroundDefault()};
}
.DateRangePickerInput__withBorder {
border-color: ${Colors.borderDefault()};
}
.DateInput {
background-color: ${Colors.backgroundDefault()};
}
.DateRangePickerInput_arrow_svg {
fill: ${Colors.textLighter()};
}
.DateInput_input {
background-color: ${Colors.backgroundDefault()};
color: ${Colors.textDefault()};
}
.DateInput_input::placeholder {
color: ${Colors.textLight()};
}
.DateInput_input__focused {
border-color: ${Colors.accentBlue()};
outline: none;
}
.DateInput_fangShape {
fill: ${Colors.backgroundLight()};
}
.DateInput_fangStroke {
stroke: ${Colors.keylineDefault()};
}
.DateRangePicker_picker {
background-color: ${Colors.backgroundLight()};
color: ${Colors.textDefault()};
}
.DayPicker {
background-color: ${Colors.backgroundLight()};
color: ${Colors.textDefault()};
}
.DayPickerNavigation_button__default {
background-color: ${Colors.backgroundLight()};
border-color: ${Colors.borderDefault()};
:hover {
border-color: ${Colors.borderHover()};
}
}
.DayPickerNavigation_svg__horizontal {
fill: ${Colors.textLight()};
}
.DayPicker_weekHeader {
color: ${Colors.textLighter()};
}
.CalendarMonthGrid,
.CalendarMonth {
background-color: ${Colors.backgroundLight()};
color: ${Colors.textDefault()};
}
.CalendarMonth_caption {
color: ${Colors.textLight()};
}
.CalendarDay__default {
background-color: ${Colors.backgroundLight()};
border-color: ${Colors.keylineDefault()};
color: ${Colors.textLight()};
:hover {
background-color: ${Colors.backgroundBlue()};
border-color: ${Colors.keylineDefault()};
}
}
.CalendarDay__selected {
background-color: ${Colors.backgroundBlueHover()};
:active,
:hover {
border-color: ${Colors.keylineDefault()};
}
}
.CalendarDay__hovered_span,
.CalendarDay__hovered_span_3 {
background-color: ${Colors.backgroundBlue()};
border-color: ${Colors.keylineDefault()};
}
`;
import {DateRangePickerWrapper} from '@dagster-io/ui-components';

// eslint-disable-next-line import/no-default-export
export default DateRangePickerWrapper;
Loading

2 comments on commit c1dae95

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for dagit-core-storybook ready!

✅ Preview
https://dagit-core-storybook-4eum0eoe3-elementl.vercel.app

Built with commit c1dae95.
This pull request is being automatically deployed with vercel-action

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for dagit-storybook ready!

✅ Preview
https://dagit-storybook-e0srdevn6-elementl.vercel.app

Built with commit c1dae95.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.