fix various react errors

pluralsh · Sep 18, 2024 · 7d61b53 · 7d61b53
1 parent 65eab4f
commit 7d61b53
Show file tree

Hide file tree

Showing 12 changed files with 311 additions and 357 deletions.
diff --git a/assets/package.json b/assets/package.json
@@ -40,13 +40,13 @@
     "@graphql-codegen/named-operations-object": "3.0.0",
     "@jumpn/utils-graphql": "0.6.0",
     "@markdoc/markdoc": "0.4.0",
-    "@nivo/core": "0.83.0",
-    "@nivo/geo": "0.83.0",
-    "@nivo/line": "0.83.0",
-    "@nivo/pie": "0.83.0",
-    "@nivo/radial-bar": "0.83.0",
-    "@nivo/tooltip": "0.83.0",
-    "@pluralsh/design-system": "3.67.1",
+    "@nivo/core": "0.87.0",
+    "@nivo/geo": "0.87.0",
+    "@nivo/line": "0.87.0",
+    "@nivo/pie": "0.87.0",
+    "@nivo/radial-bar": "0.87.0",
+    "@nivo/tooltip": "0.87.0",
+    "@pluralsh/design-system": "3.67.2",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-virtual": "3.0.1",

diff --git a/assets/src/components/cd/cluster/node/Node.tsx b/assets/src/components/cd/cluster/node/Node.tsx
@@ -104,33 +104,28 @@ export default function Node() {
   })
 
   return (
-    <TabPanel
-      stateRef={tabStateRef}
-      as={
-        <ResponsivePageFullWidth
-          scrollable={
-            (currentTab?.label ?? 'Info') === 'Info' ||
-            currentTab?.label === 'Metadata'
-          }
-          heading={name}
-          headingContent={
-            <HeadingTabList
-              tabStateRef={tabStateRef}
-              currentTab={currentTab}
-            />
-          }
-          // eslint-disable-next-line react/no-children-prop
-          children={
-            <Outlet
-              context={{
-                node: data?.node,
-                nodeMetric: nodeMetricData?.nodeMetric,
-                refetch,
-              }}
-            />
-          }
+    <TabPanel stateRef={tabStateRef}>
+      <ResponsivePageFullWidth
+        scrollable={
+          (currentTab?.label ?? 'Info') === 'Info' ||
+          currentTab?.label === 'Metadata'
+        }
+        heading={name}
+        headingContent={
+          <HeadingTabList
+            tabStateRef={tabStateRef}
+            currentTab={currentTab}
+          />
+        }
+      >
+        <Outlet
+          context={{
+            node: data?.node,
+            nodeMetric: nodeMetricData?.nodeMetric,
+            refetch,
+          }}
         />
-      }
-    />
+      </ResponsivePageFullWidth>
+    </TabPanel>
   )
 }
diff --git a/assets/src/components/cd/utils/PermissionsModal.tsx b/assets/src/components/cd/utils/PermissionsModal.tsx
@@ -153,6 +153,9 @@ export function PermissionsModal({
       formProps={{ onSubmit }}
       size="custom"
       css={{ width: 1024, maxWidth: 1024 }}
+      onOpenAutoFocus={(e) => {
+        e.preventDefault()
+      }}
       actions={
         <div
           css={{

diff --git a/assets/src/components/cluster/nodes/Node.tsx b/assets/src/components/cluster/nodes/Node.tsx
@@ -59,25 +59,22 @@ export default function Node() {
   }, [name, setBreadcrumbs])
 
   return (
-    <TabPanel
-      stateRef={tabStateRef}
-      as={
-        <ResponsivePageFullWidth
-          scrollable={
-            (currentTab?.label ?? 'Info') === 'Info' ||
-            currentTab?.label === 'Metadata'
-          }
-          heading={name}
-          headingContent={
-            <HeadingTabList
-              tabStateRef={tabStateRef}
-              currentTab={currentTab}
-            />
-          }
-          // eslint-disable-next-line react/no-children-prop
-          children={<Outlet />}
-        />
-      }
-    />
+    <TabPanel stateRef={tabStateRef}>
+      <ResponsivePageFullWidth
+        scrollable={
+          (currentTab?.label ?? 'Info') === 'Info' ||
+          currentTab?.label === 'Metadata'
+        }
+        heading={name}
+        headingContent={
+          <HeadingTabList
+            tabStateRef={tabStateRef}
+            currentTab={currentTab}
+          />
+        }
+      >
+        <Outlet />
+      </ResponsivePageFullWidth>
+    </TabPanel>
   )
 }
diff --git a/assets/src/components/component/ComponentDetails.tsx b/assets/src/components/component/ComponentDetails.tsx
@@ -248,9 +248,11 @@ export function ComponentDetails({
         </div>
       )}
       <TabPanel
-        as={<Outlet context={outletContext} />}
+        css={{ display: 'contents' }}
         stateRef={tabStateRef}
-      />
+      >
+        <Outlet context={outletContext} />
+      </TabPanel>
     </ResponsivePageFullWidth>
   )
 }
diff --git a/assets/src/components/kubernetes/network/utils.tsx b/assets/src/components/kubernetes/network/utils.tsx
@@ -24,11 +24,11 @@ export function TableEndpoints({
 }) {
   return endpoints.map((endpoint) =>
     isEmpty(endpoint?.ports) ? (
-      <TableText>{endpoint?.host}</TableText>
+      <TableText key={endpoint?.host}>{endpoint?.host}</TableText>
     ) : (
-      <div>
+      <div key={endpoint?.host}>
         {endpoint?.ports.map((port) => (
-          <TableText>
+          <TableText key={`${endpoint?.host}-${port?.port}-${port?.protocol}`}>
             {endpoint?.host}:{port?.port ?? port?.nodePort} {port?.protocol}
           </TableText>
         ))}

diff --git a/assets/src/components/policies/PoliciesFilter.tsx b/assets/src/components/policies/PoliciesFilter.tsx
@@ -144,9 +144,8 @@ function PoliciesFilter({
             No kind
           </Checkbox>
           {kinds?.map((kind) => (
-            <CheckboxWrapperSC>
+            <CheckboxWrapperSC key={kind.id}>
               <Checkbox
-                key={kind.id}
                 name="kinds"
                 value={kind.id}
                 checked={selectedKinds.includes(kind.id)}
@@ -177,9 +176,8 @@ function PoliciesFilter({
             No namespace
           </Checkbox>
           {namespaces?.map((namespace) => (
-            <CheckboxWrapperSC>
+            <CheckboxWrapperSC key={namespace.id}>
               <Checkbox
-                key={namespace.id}
                 name={namespaceLabel}
                 value={namespace}
                 checked={selectedNamespaces.includes(namespace.id)}

diff --git a/assets/src/components/utils/Chloropleth.tsx b/assets/src/components/utils/Chloropleth.tsx
@@ -33,7 +33,7 @@ export function Chloropleth({ data }) {
   return (
     <ResponsiveChoropleth
       data={data}
-      theme={{ textColor: theme.colors.text }}
+      theme={{ text: { fill: theme.colors.text } }}
       features={countries.features}
       label="properties.name"
       valueFormat=".2s"

diff --git a/assets/src/components/utils/ModalMountTransition.tsx b/assets/src/components/utils/ModalMountTransition.tsx
@@ -9,7 +9,7 @@ time it opens/closes.
  */
 
 import { usePrevious } from '@pluralsh/design-system'
-import { ReactElement, useLayoutEffect, useState } from 'react'
+import { ReactElement, useLayoutEffect, useRef, useState } from 'react'
 import { Transition, TransitionGroup } from 'react-transition-group'
 
 export function ModalMountTransition({
@@ -21,6 +21,8 @@ export function ModalMountTransition({
 }) {
   const wasOpen = usePrevious(open)
   const [counter, setCounter] = useState(0)
+  // this doesn't actually do anything, just to prevent TransitionGroup from using deprecated findDOMNode
+  const nodeRef = useRef(null)
 
   useLayoutEffect(() => {
     if (open && !wasOpen) {
@@ -33,6 +35,7 @@ export function ModalMountTransition({
     <TransitionGroup css={{ display: 'none' }}>
       {open || wasOpen ? (
         <Transition
+          nodeRef={nodeRef}
           key={key}
           mountOnEnter
           unmountOnExit

diff --git a/assets/src/components/utils/layout/ResponsiveLayoutContentContainer.tsx b/assets/src/components/utils/layout/ResponsiveLayoutContentContainer.tsx
@@ -1,10 +1,15 @@
 import { Flex } from 'honorable'
+import { Ref, forwardRef } from 'react'
 
 export const RESPONSIVE_LAYOUT_CONTENT_WIDTH = 896
 
-export function ResponsiveLayoutContentContainer(props: any) {
+function ResponsiveLayoutContentContainerRef(
+  props: any,
+  ref: Ref<HTMLDivElement>
+) {
   return (
     <Flex
+      ref={ref}
       direction="column"
       flexGrow={1}
       flexShrink={1}
@@ -19,3 +24,7 @@ export function ResponsiveLayoutContentContainer(props: any) {
     />
   )
 }
+
+export const ResponsiveLayoutContentContainer = forwardRef(
+  ResponsiveLayoutContentContainerRef
+)
diff --git a/assets/src/components/utils/layout/ResponsivePageFullWidth.tsx b/assets/src/components/utils/layout/ResponsivePageFullWidth.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react'
+import { ComponentProps, Ref, forwardRef } from 'react'
 import styled from 'styled-components'
 
 import { ResponsiveLayoutPage } from 'components/utils/layout/ResponsiveLayoutPage'
@@ -17,13 +17,19 @@ const ResponsivePageFullWidthSC = styled(ResponsiveLayoutPage)<{
     : {}),
 }))
 
-export function ResponsivePageFullWidth({
-  scrollable = true,
-  children,
-  ...props
-}: ComponentProps<typeof ScrollablePage>) {
+function ResponsivePageFullWidthRef(
+  {
+    scrollable = true,
+    children,
+    ...props
+  }: ComponentProps<typeof ResponsivePageFullWidthSC>,
+  ref: Ref<HTMLDivElement>
+) {
   return (
-    <ResponsivePageFullWidthSC $scrollable={scrollable}>
+    <ResponsivePageFullWidthSC
+      $scrollable={scrollable}
+      ref={ref}
+    >
       <ScrollablePage
         scrollable={scrollable}
         fullWidth
@@ -34,3 +40,5 @@ export function ResponsivePageFullWidth({
     </ResponsivePageFullWidthSC>
   )
 }
+
+export const ResponsivePageFullWidth = forwardRef(ResponsivePageFullWidthRef)