Revert "[ui] Upgrade styled-components to v6 (#26280)" (#26639)

## Summary & Motivation We've seen reports of styles failing to be applied in the app in certain (very difficult to reproduce) conditions, and the recent styled-components upgrade seems like a possible culprit. Revert to try to resolve the issue. ## How I Tested These Changes TS/lint/jest. Load the app, verify that everything renders as expected. ## Changelog [ui] FIx an issue where the app sometimes loads with styles missing.
dagster-io · Dec 20, 2024 · e598225 · e598225
1 parent 1a8fff9
commit e598225
Show file tree

Hide file tree

Showing 67 changed files with 478 additions and 431 deletions.
diff --git a/js_modules/dagster-ui/packages/app-oss/package.json b/js_modules/dagster-ui/packages/app-oss/package.json
@@ -12,6 +12,7 @@
     "@dagster-io/ui-components": "workspace:*",
     "@dagster-io/ui-core": "workspace:*",
     "@rive-app/react-canvas": "^3.0.34",
+    "@types/styled-components": "^5.1.26",
     "eslint-config-next": "^13.5.3",
     "graphql": "^16.8.1",
     "next": "^14.2.10",
@@ -22,8 +23,7 @@
     "react-router-dom": "^5.3.0",
     "react-router-dom-v5-compat": "^6.3.0",
     "recoil": "^0.7.7",
-    "styled-components": "^6",
-    "stylis": "^4",
+    "styled-components": "^5.3.3",
     "uuid": "^9.0.0",
     "validator": "^13.7.0",
     "web-vitals": "^2.1.3"
@@ -33,7 +33,7 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^16.11.20",
     "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/uuid": "^8.3.4",
     "@types/validator": "^13",
     "@types/webpack-bundle-analyzer": "^4",

diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json
@@ -30,8 +30,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "styled-components": "^6",
-    "stylis": "^4"
+    "styled-components": "^5.3.3"
   },
   "dependencies": {
     "@react-hook/resize-observer": "^1.2.6",
@@ -78,8 +77,9 @@
     "@types/mdx-js__react": "^1",
     "@types/react": "^18.3.9",
     "@types/react-dates": "^21.8.0",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
+    "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.2",
     "babel-jest": "^27.4.6",
     "babel-loader": "^9.1.2",

diff --git a/js_modules/dagster-ui/packages/ui-components/rollup.config.js b/js_modules/dagster-ui/packages/ui-components/rollup.config.js
@@ -32,6 +32,7 @@ const sharedExternals = [
   '@blueprintjs/core',
   '@blueprintjs/popover2',
   '@blueprintjs/select',
+  '@tanstack/react-virtual',
   'react',
   'react-dom',
   'react-is',

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import {Colors} from './Color';
 import {IconWrapper} from './Icon';
 import {SpinnerWrapper} from './Spinner';
+
 interface Props {
   fillColor?: string;
   textColor?: string;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx
@@ -13,13 +13,6 @@ type Colors =
 
 type Underline = 'never' | 'always' | 'hover';
 
-type Props = Omit<React.HTMLProps<HTMLButtonElement>, 'color'> & {
-  color?: Colors;
-  disabled?: boolean;
-  underline?: Underline;
-  children?: React.ReactNode;
-};
-
 const fontColor = (color: Colors) => {
   if (typeof color === 'string') {
     return css`
@@ -56,9 +49,14 @@ const textDecoration = (underline: Underline) => {
   }
 };
 
-export const ButtonLink = styled(
-  ({color: _color, underline: _underline, type: _type, ...rest}: Props) => <button {...rest} />,
-)<Props>`
+interface Props extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+  color?: Colors;
+  underline?: Underline;
+}
+
+export const ButtonLink = styled(({color: _color, underline: _underline, ...rest}: Props) => (
+  <button {...rest} />
+))`
   background: transparent;
   border: 0;
   cursor: pointer;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx
@@ -28,9 +28,9 @@ export const CollapsibleSection = ({
           grow: 1,
           ...(headerWrapperProps?.flex || {}),
         }}
-        onClick={(e) => {
+        onClick={() => {
           setIsCollapsed(!isCollapsed);
-          headerWrapperProps?.onClick?.(e);
+          headerWrapperProps?.onClick?.();
         }}
       >
         {arrowSide === 'left' ? (

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx
@@ -302,7 +302,10 @@ const HoveredDictEntryContextProvider = React.memo(({children}: {children: React
 });
 
 const DictEntry = React.forwardRef(
-  (props: React.ComponentProps<typeof DictEntryDiv>, ref: React.ForwardedRef<HTMLDivElement>) => {
+  (
+    props: React.ComponentProps<typeof DictEntryDiv>,
+    ref: React.ForwardedRef<HTMLButtonElement>,
+  ) => {
     const {hovered, onMouseEnter, onMouseLeave} =
       React.useContext(HoveredDictEntryContext).useDictEntryHover();
 
@@ -321,7 +324,7 @@ const DictEntry = React.forwardRef(
 );
 
 const DictEntryDiv2 = styled.div``;
-const DictEntryDiv = styled.div<{$hovered?: boolean}>`
+const DictEntryDiv = styled.div<{$hovered: boolean}>`
   border: 1px solid transparent;
 
   ${({$hovered}) =>

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx
@@ -1,5 +1,4 @@
-import {CSSProperties} from 'react';
-import styled from 'styled-components';
+import styled, {CSSProperties} from 'styled-components';
 
 import {Button} from './Button';
 import {Icon} from './Icon';

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx
@@ -67,7 +67,7 @@ const DatePickerContainer = styled.div`
     background-color: ${Colors.backgroundLight()};
     border-color: ${Colors.borderDefault()};
 
-    &:hover {
+    :hover {
       border-color: ${Colors.borderHover()};
     }
   }
@@ -95,7 +95,7 @@ const DatePickerContainer = styled.div`
     border-color: ${Colors.keylineDefault()};
     color: ${Colors.textLight()};
 
-    &:hover {
+    :hover {
       background-color: ${Colors.backgroundBlue()};
       border-color: ${Colors.keylineDefault()};
     }
@@ -104,8 +104,8 @@ const DatePickerContainer = styled.div`
   .CalendarDay__selected {
     background-color: ${Colors.backgroundBlueHover()};
 
-    &:active,
-    &:hover {
+    :active,
+    :hover {
       border-color: ${Colors.keylineDefault()};
     }
   }

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {ReactNode} from 'react';
 import styled, {css} from 'styled-components';
 
 import {Box} from './Box';
@@ -53,22 +52,17 @@ export const Group = (props: Props) => {
   );
 };
 
-type GroupChildProps = React.ComponentProps<typeof Box> & {
+type GroupChildProps = {
   empty: boolean;
-  children: ReactNode;
 };
 
-const GroupChild = styled(({empty: _empty, ...rest}: GroupChildProps) => (
-  <Box {...rest} />
-))<GroupChildProps>`
+const GroupChild = styled(({empty: _empty, ...rest}) => <Box {...rest} />)<GroupChildProps>`
   ${({empty}) => (empty ? 'display: none;' : '')}
   pointer-events: auto;
 `;
 
-type InnerProps = React.ComponentProps<typeof Box> & {
-  direction: Direction;
+type InnerProps = {
   spacing: Spacing;
-  children: ReactNode;
 };
 
 const marginAdjustment = (props: InnerProps) => {
@@ -83,7 +77,7 @@ const Outer = styled(Box)`
   pointer-events: none;
 `;
 
-const Inner = styled(({direction: _direction, spacing: _spacing, ...rest}: InnerProps) => (
+const Inner = styled(({direction: _direction, spacing: _spacing, ...rest}) => (
   <Box {...rest} />
 ))<InnerProps>`
   ${marginAdjustment}

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
@@ -828,14 +828,14 @@ export const Icon = React.memo((props: Props) => {
     />
   );
 });
-export interface IconWrapperProps {
+interface WrapperProps {
   $color: string | null;
   $size: number;
   $img: string;
   $rotation: string | null;
 }
 
-export const IconWrapper = styled.div<IconWrapperProps>`
+export const IconWrapper = styled.div<WrapperProps>`
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
   flex-shrink: 0;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
@@ -105,7 +105,7 @@ export const MenuDivider = styled(BlueprintMenuDivider)`
   border-top: 1px solid ${Colors.keylineDefault()};
   margin: 2px 0;
 
-  &:focus {
+  :focus {
     outline: none;
   }
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx
@@ -1,6 +1,5 @@
 // eslint-disable-next-line no-restricted-imports
 import {Spinner as BlueprintSpinner} from '@blueprintjs/core';
-import {ReactNode} from 'react';
 import styled from 'styled-components';
 
 import {Colors} from './Color';
@@ -54,13 +53,7 @@ export const Spinner = ({
   );
 };
 
-interface WrapperProps {
-  $padding: number;
-  children: ReactNode;
-  title?: string;
-}
-
-export const SpinnerWrapper = styled.div<WrapperProps>`
+export const SpinnerWrapper = styled.div<{$padding: number}>`
   padding: ${({$padding}) => $padding}px;
 `;
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx
@@ -37,7 +37,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
 
   box-shadow: ${({$strokeColor}) => `${$strokeColor} inset 0px 0px 0px 1px`};
 
-  &:hover:not(:disabled) {
+  :hover:not(:disabled) {
     background-color: ${({$fillColor, $fillColorHover}) =>
       $fillColorHover || $fillColor || 'transparent'};
     box-shadow: ${({$strokeColor, $strokeColorHover}) =>
@@ -48,28 +48,28 @@ export const StyledButton = styled.button<StyledButtonProps>`
     text-decoration: none;
   }
 
-  &:focus,
-  &:focus-visible,
-  &:focus:hover:not(:disabled) {
+  :focus,
+  :focus-visible,
+  :focus:hover:not(:disabled) {
     box-shadow: ${Colors.focusRing()} 0 0 0 2px;
     outline: none;
   }
 
-  &:focus:not(:focus-visible) {
+  :focus:not(:focus-visible) {
     box-shadow: ${({$strokeColor}) =>
       `${$strokeColor} inset 0px 0px 0px 1px, ${Colors.shadowDefault()} 0px 2px 12px 0px;`};
   }
 
-  &:active:not(:disabled) {
+  :active:not(:disabled) {
     filter: brightness(0.95);
   }
 
-  &:disabled {
+  :disabled {
     cursor: default;
     opacity: 0.5;
   }
 
-  &:disabled:hover {
+  :disabled:hover {
     box-shadow: ${({$strokeColor}) => `${$strokeColor} inset 0px 0px 0px 1px`};
   }
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx
@@ -93,8 +93,8 @@ const Blob = styled.div<BlobProps>`
   user-select: none;
   width: ${({$blobSize}) => `${$blobSize}px`};
 
-  &:focus,
-  &:active {
+  :focus,
+  :active {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx
@@ -117,34 +117,32 @@ export const Tab = styled((props: TabProps) => {
   ${tabCSS}
 `;
 
-type TabsProps = Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'onChange'> & {
-  children: Array<React.ReactElement<TabProps> | null>;
+interface TabsProps {
+  children: Array<React.ReactElement<TabProps>>;
   selectedTabId?: string;
   onChange?: (selectedTabId: string) => void;
   size?: 'small' | 'large';
-};
+}
 
-export const Tabs = styled(
-  ({selectedTabId, children, onChange, size = 'large', ...rest}: TabsProps) => {
-    return (
-      <div {...rest} role="tablist">
-        {React.Children.map(children, (child) =>
-          child
-            ? React.cloneElement(child, {
-                selected: child.props.selected || child.props.id === selectedTabId,
-                $size: size,
-                ...(onChange
-                  ? {
-                      onClick: () => child.props.id && onChange(child.props.id),
-                    }
-                  : {}),
-              })
-            : null,
-        )}
-      </div>
-    );
-  },
-)<TabsProps>`
+export const Tabs = styled(({selectedTabId, children, onChange, size = 'large', ...rest}) => {
+  return (
+    <div {...rest} role="tablist">
+      {React.Children.map(children, (child) =>
+        child
+          ? React.cloneElement(child, {
+              selected: child.props.selected || child.props.id === selectedTabId,
+              $size: size,
+              ...(onChange
+                ? {
+                    onClick: () => onChange(child.props.id),
+                  }
+                : {}),
+            })
+          : null,
+      )}
+    </div>
+  );
+})<TabsProps>`
   display: flex;
   gap: 16px;
   font-size: ${({size}) => (size === 'small' ? '12px' : '14px')};