react 19 upgrade (#1720)

pluralsh · Jan 6, 2025 · b65ee8b · b65ee8b
1 parent 3d0ca8e
commit b65ee8b
Show file tree

Hide file tree

Showing 122 changed files with 1,818 additions and 1,623 deletions.
diff --git a/assets/package.json b/assets/package.json
@@ -49,7 +49,7 @@
     "@nivo/radial-bar": "0.88.0",
     "@nivo/tooltip": "0.88.0",
     "@nivo/treemap": "0.88.0",
-    "@pluralsh/design-system": "4.5.0",
+    "@pluralsh/design-system": "5.0.0",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-table": "8.20.5",
@@ -85,11 +85,11 @@
     "pluralize": "8.0.0",
     "pluralsh-absinthe-socket-apollo-link": "0.2.0",
     "query-string": "8.1.0",
-    "react": "18.3.1",
+    "react": "19.0.0",
     "react-animations": "1.0.0",
     "react-copy-to-clipboard": "5.1.0",
     "react-diff-viewer": "3.1.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0",
     "react-dropzone": "14.2.3",
     "react-embed": "3.7.0",
     "react-file-icon": "1.3.0",
@@ -143,8 +143,8 @@
     "@types/jsdom": "21.1.5",
     "@types/mocha": "10.0.8",
     "@types/node": "22.7.4",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "@types/react-window": "1.8.8",
     "@types/uuid": "9.0.7",
     "@typescript-eslint/eslint-plugin": "8.8.0",

diff --git a/assets/src/App.tsx b/assets/src/App.tsx
@@ -7,10 +7,14 @@ import {
   styledThemeLight,
   useThemeColorMode,
 } from '@pluralsh/design-system'
-import { ReactNode } from 'react'
+import { FC, ReactNode } from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
-import { CssBaseline, ThemeProvider as HonorableThemeProvider } from 'honorable'
+import {
+  CssBaseline,
+  ThemeProvider as HonorableThemeProvider,
+  ThemeProviderProps,
+} from 'honorable'
 import {
   ThemeProvider as StyledThemeProvider,
   StyleSheetManager,
@@ -25,6 +29,11 @@ import { rootRoutes } from './routes/rootRoutes'
 import { shouldForwardProp } from 'utils/shouldForwardProp'
 import { PluralErrorBoundary } from './components/cd/PluralErrorBoundary'
 
+// workarounds for broken type from honorable
+const TypedHonorableThemeProvider =
+  HonorableThemeProvider as FC<ThemeProviderProps>
+const TypedCssBaseline = CssBaseline as any
+
 const router = createBrowserRouter(rootRoutes)
 
 export default function App() {
@@ -45,17 +54,17 @@ function ThemeProviders({ children }: { children: ReactNode }) {
   const styledTheme = colorMode === 'light' ? styledThemeLight : styledThemeDark
 
   return (
-    <HonorableThemeProvider theme={honorableTheme}>
+    <TypedHonorableThemeProvider theme={honorableTheme}>
       <StyleSheetManager shouldForwardProp={shouldForwardProp}>
         <StyledThemeProvider theme={styledTheme}>
           <OverlayContextProvider>
-            <CssBaseline />
+            <TypedCssBaseline />
             <GlobalStyle />
             <DocSearchStyles />
             <PluralErrorBoundary>{children}</PluralErrorBoundary>
           </OverlayContextProvider>
         </StyledThemeProvider>
       </StyleSheetManager>
-    </HonorableThemeProvider>
+    </TypedHonorableThemeProvider>
   )
 }
diff --git a/assets/src/components/ai/AIPanel.tsx b/assets/src/components/ai/AIPanel.tsx
@@ -5,127 +5,121 @@ import {
   CloseIcon,
   IconFrame,
 } from '@pluralsh/design-system'
+import { ReactNode } from 'react'
 import { useTheme } from 'styled-components'
-import { forwardRef, Ref, ReactNode } from 'react'
 import { AIPanelOverlay } from './AIPanelOverlay.tsx'
 
-const AIPanel = forwardRef(
-  (
-    {
-      open,
-      onClose,
-      showCloseIcon = false,
-      showClosePanel = false,
-      header,
-      subheader,
-      footer,
-      children,
-      secondaryButton,
-      ...props
-    }: {
-      open: boolean
-      onClose: () => void
-      CloseIcon?: boolean
-      showClosePanel?: boolean
-      showCloseIcon?: boolean
-      header: string
-      subheader: string
-      footer?: ReactNode
-      children: ReactNode
-      secondaryButton?: ReactNode
-    } & CardProps,
-    ref: Ref<HTMLDivElement>
-  ) => {
-    const theme = useTheme()
+export function AIPanel({
+  ref,
+  open,
+  onClose,
+  showCloseIcon = false,
+  showClosePanel = false,
+  header,
+  subheader,
+  footer,
+  children,
+  secondaryButton,
+  ...props
+}: {
+  open: boolean
+  onClose: () => void
+  CloseIcon?: boolean
+  showClosePanel?: boolean
+  showCloseIcon?: boolean
+  header: string
+  subheader: string
+  footer?: ReactNode
+  children: ReactNode
+  secondaryButton?: ReactNode
+} & CardProps) {
+  const theme = useTheme()
 
-    return (
-      <AIPanelOverlay
-        open={open}
-        onClose={onClose}
+  return (
+    <AIPanelOverlay
+      open={open}
+      onClose={onClose}
+    >
+      <Card
+        fillLevel={1}
+        css={{
+          border: theme.borders.input,
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 1,
+          maxHeight: 720,
+          minHeight: 0,
+          overflow: 'hidden',
+        }}
+        {...props}
       >
-        <Card
-          fillLevel={1}
+        <div
           css={{
-            border: theme.borders.input,
+            alignItems: 'center',
+            backgroundColor: theme.colors['fill-two'],
+            borderBottom: theme.borders.input,
             display: 'flex',
-            flexDirection: 'column',
+            gap: theme.spacing.small,
+            padding: theme.spacing.large,
+          }}
+        >
+          <div css={{ flexGrow: 1 }}>
+            <div css={{ ...theme.partials.text.subtitle2 }}>{header}</div>
+            <div
+              css={{
+                ...theme.partials.text.body2,
+                color: theme.colors['text-light'],
+              }}
+            >
+              {subheader}
+            </div>
+          </div>
+          {showCloseIcon && (
+            <IconFrame
+              clickable
+              icon={<CloseIcon />}
+              onClick={onClose}
+              tooltip="Close"
+            />
+          )}
+        </div>
+        <div
+          css={{
             flexGrow: 1,
-            maxHeight: 720,
-            minHeight: 0,
-            overflow: 'hidden',
+            overflow: 'auto',
+            padding: theme.spacing.medium,
           }}
-          {...props}
+          ref={ref}
         >
+          {children}
+        </div>
+        {showClosePanel && (
           <div
             css={{
               alignItems: 'center',
               backgroundColor: theme.colors['fill-two'],
-              borderBottom: theme.borders.input,
+              borderTop: theme.borders.input,
               display: 'flex',
               gap: theme.spacing.small,
               padding: theme.spacing.large,
+              '> *': {
+                flexGrow: 1,
+              },
             }}
           >
-            <div css={{ flexGrow: 1 }}>
-              <div css={{ ...theme.partials.text.subtitle2 }}>{header}</div>
-              <div
-                css={{
-                  ...theme.partials.text.body2,
-                  color: theme.colors['text-light'],
-                }}
-              >
-                {subheader}
-              </div>
-            </div>
-            {showCloseIcon && (
-              <IconFrame
-                clickable
-                icon={<CloseIcon />}
+            {secondaryButton || (
+              <Button
                 onClick={onClose}
-                tooltip="Close"
-              />
+                secondary={!!footer}
+                floating={!!footer}
+              >
+                Got it, thanks!
+              </Button>
             )}
+            {footer && footer}
           </div>
-          <div
-            css={{
-              flexGrow: 1,
-              overflow: 'auto',
-              padding: theme.spacing.medium,
-            }}
-            ref={ref}
-          >
-            {children}
-          </div>
-          {showClosePanel && (
-            <div
-              css={{
-                alignItems: 'center',
-                backgroundColor: theme.colors['fill-two'],
-                borderTop: theme.borders.input,
-                display: 'flex',
-                gap: theme.spacing.small,
-                padding: theme.spacing.large,
-                '> *': {
-                  flexGrow: 1,
-                },
-              }}
-            >
-              {secondaryButton || (
-                <Button
-                  onClick={onClose}
-                  secondary={!!footer}
-                  floating={!!footer}
-                >
-                  Got it, thanks!
-                </Button>
-              )}
-              {footer && footer}
-            </div>
-          )}
-        </Card>
-      </AIPanelOverlay>
-    )
-  }
-)
-
-export default AIPanel
+        )}
+      </Card>
+    </AIPanelOverlay>
+  )
+}
diff --git a/assets/src/components/ai/AIPanelOverlay.tsx b/assets/src/components/ai/AIPanelOverlay.tsx
@@ -26,7 +26,7 @@ export function AIPanelOverlay({
   children: ReactNode
 }) {
   const theme = useTheme()
-  const ref = useRef<any>()
+  const ref = useRef<any>(undefined)
   const transitionProps = useMemo(() => getTransitionProps(open), [open])
   const transitions = useTransition(open ? [true] : [], transitionProps)
   const maxHeight = useOverlayMaxHeight(ref, 32)
@@ -60,7 +60,7 @@ export function AIPanelOverlay({
 }
 
 function useOverlayMaxHeight(
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<HTMLElement | null>,
   padding: number,
   defaultValue: string = '300px'
 ) {

diff --git a/assets/src/components/ai/AITableEntry.tsx b/assets/src/components/ai/AITableEntry.tsx
@@ -21,7 +21,12 @@ import {
   AiPinFragment,
   ChatThreadTinyFragment,
 } from 'generated/graphql'
-import { ComponentProps, ReactNode, useCallback } from 'react'
+import {
+  ComponentProps,
+  ComponentPropsWithRef,
+  ReactNode,
+  useCallback,
+} from 'react'
 import styled, { useTheme } from 'styled-components'
 import { dayjsExtended as dayjs } from 'utils/datetime.ts'
 import { useChatbot } from './AIContext.tsx'
@@ -69,7 +74,7 @@ export function AITableEntry({
   pinLoading?: boolean
   modal?: boolean | null
   hidePins?: boolean | null
-} & ComponentProps<'div'>) {
+} & ComponentPropsWithRef<typeof AIThreadsTableEntrySC>) {
   const theme = useTheme()
   const { pathname } = useLocation()
   const { goToThread, goToInsight } = useChatbot()

diff --git a/assets/src/components/ai/chatbot/AISuggestFix.tsx b/assets/src/components/ai/chatbot/AISuggestFix.tsx
@@ -25,7 +25,7 @@ import {
 } from '../../../generated/graphql.ts'
 import { GqlError } from '../../utils/Alert.tsx'
 import LoadingIndicator from '../../utils/LoadingIndicator.tsx'
-import AIPanel from '../AIPanel.tsx'
+import { AIPanel } from '../AIPanel.tsx'
 import { AISuggestFixButton } from './AISuggestFixButton.tsx'
 import { ChatWithAIButton, insightMessage } from './ChatbotButton.tsx'