update design system

www/package.json

@@ -44,7 +44,7 @@
     "@nivo/geo": "0.83.0",
     "@nivo/line": "0.83.0",
     "@octokit/core": "4.2.1",
-    "@pluralsh/design-system": "3.16.0",
+    "@pluralsh/design-system": "3.67.1",
     "@react-spring/web": "9.7.3",
     "@stripe/react-stripe-js": "2.1.0",
     "@stripe/stripe-js": "1.54.0",
@@ -57,7 +57,7 @@
     "d3-hierarchy": "3.1.2",
     "d3-selection": "3.0.0",
     "events": "3.3.0",
-    "filesize": "10.0.7",
+    "filesize": "10.0.12",
     "forge-core": "1.4.6",
     "fuse.js": "6.6.2",
     "git-url-parse": "13.1.0",
@@ -75,7 +75,7 @@
     "process": "0.11.10",
     "prop-types": "15.8.1",
     "query-string": "8.1.0",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-animations": "1.0.0",
     "react-calendly": "4.1.1",
     "react-collapsible": "2.10.0",
@@ -85,7 +85,7 @@
     "react-diff-viewer": "3.1.1",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "react-file-icon": "1.3.0",
     "react-file-picker": "0.0.6",
     "react-icons": "4.9.0",
@@ -95,7 +95,7 @@
     "react-player": "2.12.0",
     "react-portal": "4.2.2",
     "react-resize-detector": "9.1.0",
-    "react-router-dom": "6.12.0",
+    "react-router-dom": "6.18.0",
     "react-sage": "0.3.16",
     "react-script-hook": "1.7.2",
     "react-spinners": "0.13.8",
@@ -113,7 +113,7 @@
     "stream-browserify": "3.0.0",
     "styled-components": "5.3.11",
     "util": "0.12.5",
-    "uuid": "9.0.0",
+    "uuid": "9.0.1",
     "workbox-core": "7.0.0",
     "workbox-expiration": "7.0.0",
     "workbox-precaching": "7.0.0",
@@ -127,27 +127,27 @@
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "0.2.2",
     "@graphql-codegen/add": "5.0.0",
-    "@graphql-codegen/cli": "4.0.1",
+    "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/introspection": "4.0.0",
     "@graphql-codegen/named-operations-object": "^2.3.1",
     "@graphql-codegen/typescript": "4.0.1",
     "@graphql-codegen/typescript-operations": "4.0.1",
     "@graphql-codegen/typescript-react-apollo": "4.1.0",
-    "@pluralsh/eslint-config-typescript": "2.5.154",
+    "@pluralsh/eslint-config-typescript": "2.5.150",
     "@pluralsh/stylelint-config": "2.0.10",
     "@types/events": "3.0.0",
     "@types/jsdom": "21.1.5",
-    "@types/react": "18.2.8",
+    "@types/react": "18.3.3",
     "@types/react-credit-cards": "0.8.1",
-    "@types/react-dom": "18.2.4",
+    "@types/react-dom": "18.3.0",
     "@types/react-stripe-elements": "6.0.6",
     "@types/styled-components": "5.1.30",
-    "@types/uuid": "9.0.1",
-    "@typescript-eslint/eslint-plugin": "6.17.0",
-    "@typescript-eslint/parser": "6.17.0",
+    "@types/uuid": "9.0.7",
+    "@typescript-eslint/eslint-plugin": "6.15.0",
+    "@typescript-eslint/parser": "6.15.0",
     "@vitejs/plugin-basic-ssl": "1.0.2",
     "@vitejs/plugin-react": "4.2.1",
-    "@vitest/ui": "1.0.4",
+    "@vitest/ui": "1.1.0",
     "concurrently": "8.1.0",
     "eslint": "8.56.0",
     "eslint-config-pluralsh": "3.1.0",
@@ -161,21 +161,21 @@
     "jsdom": "23.0.1",
     "lint-staged": "15.2.0",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
     "rollup-plugin-polyfill-node": "0.12.0",
     "serve": "14.2.0",
     "source-map-explorer": "2.5.3",
     "stylelint": "15.11.0",
     "stylelint-config-prettier": "9.0.5",
-    "typescript": "5.3.3",
+    "typescript": "5.4.5",
     "vite": "4.5.0",
     "vite-plugin-pwa": "0.17.4",
     "vite-plugin-rewrite-all": "1.0.1",
     "vite-tsconfig-paths": "4.2.2",
-    "vitest": "1.1.0",
+    "vitest": "1.2.0",
     "wait-on": "7.0.1"
   },
   "lint-staged": {
     "./src/**/*.{js,jsx,ts,tsx,graphql,md}": "prettier --write"
   }
-}
+}

www/src/components/account/AccountAttributes.tsx

@@ -77,7 +77,6 @@ function DomainMappingFunc({
               onClick={() => {
                 setConfirm(true)
               }}
-              // @ts-expect-error
               hue="lighter"
             />
           </Flex>

www/src/components/account/CreateRole.tsx

@@ -71,7 +71,6 @@ export function CreateRole({ q }: any) {
         header="Create role"
         open={createModalVisible}
         onClose={() => resetAndClose()}
-        marginVertical={16}
         size="large"
         actions={
           <Actions

www/src/components/account/CreateServiceAccount.tsx

@@ -218,7 +218,6 @@ export function EditServiceAccount({ user, update }: any) {
       />
       <Modal
         header="Edit service account"
-        portal
         open={edit}
         onClose={() => {
           setEdit(false)

www/src/components/account/Domains.tsx

@@ -143,10 +143,8 @@ function AccessPolicy({ domain: { id, accessPolicy }, edit, setEdit }: any) {
   return (
     <Modal
       header="Edit access policy"
-      portal
       open={edit}
       onClose={() => setEdit(false)}
-      width="100%"
       actions={
         <Actions
           cancel={() => setEdit(false)}

www/src/components/account/EditGroup.tsx

@@ -74,7 +74,6 @@ export function EditGroupMembers({ group, open, onClose }: any) {
   return (
     <Modal
       header="Edit group members"
-      portal
       open={open}
       size="large"
       onClose={onClose}
@@ -174,7 +173,6 @@ export function EditGroupAttributes({ group, open, onClose }: any) {
   return (
     <Modal
       header="Edit group attributes"
-      portal
       open={open}
       size="large"
       onClose={onClose}

www/src/components/account/EditRole.tsx

@@ -44,7 +44,6 @@ export function EditRole({ role }: any) {
       </Button>
       <Modal
         header="Edit role"
-        portal
         open={open}
         size="large"
         onClose={() => setOpen(false)}

www/src/components/account/Groups.tsx

@@ -123,7 +123,6 @@ export function Group({ group, q }: { group: GroupT; q: any }) {
           </Flex>
         </Flex>
         <Modal
-          portal
           header="View group"
           open={dialogKey === 'viewGroup'}
           onClose={() => dialogKey === 'viewGroup' && setDialogKey('')}

www/src/components/account/InviteUser.tsx

@@ -86,7 +86,7 @@ export function InviteUser({ refetch }: { refetch?: (() => void) | null }) {
         header="Invite users"
         open={showInviteModal}
         onClose={() => resetAndClose()}
-        width="100%"
+        size="auto"
         actions={
           invite ? (
             <Button onClick={() => resetAndClose()}>Done</Button>

www/src/components/account/billing/BillingBankCards.tsx

@@ -160,9 +160,7 @@ function AddPaymentMethodModal({
     >
       <PaymentForm
         formVariant={PaymentFormVariant.AddCard}
-        onClose={() => {
-          onClose()
-        }}
+        onClose={onClose}
       />
     </Modal>
   )

www/src/components/account/billing/BillingFeatureBlockModal.tsx

@@ -26,7 +26,6 @@ export default function BillingFeatureBlockModal({
 }: BillingFeatureBlockModalProps) {
   return (
     <Modal
-      BackdropProps={{ zIndex: 20 }}
       header={
         <Header>
           <WarningIcon

www/src/components/account/billing/BillingStartTrialModal.tsx

@@ -48,7 +48,6 @@ function BillingStartTrialModal({
 
   return (
     <Modal
-      BackdropProps={{ zIndex: 20 }}
       open={open}
       onClose={onClose}
       style={{ padding: 0 }}

www/src/components/account/billing/DelinquencyNotices.tsx

@@ -80,7 +80,7 @@ export function DelinquencyToast() {
 
   return (
     <Toast
-      severity="error"
+      severity="danger"
       marginBottom="medium"
       marginRight="xxxxlarge"
       closeTimeout="none"

www/src/components/account/billing/PaymentForm.tsx

@@ -128,7 +128,7 @@ function PaymentFormProvider({
   children,
 }: PropsWithChildren<{
   formVariant: PaymentFormVariant
-  onClose?: () => void
+  onClose?: Nullable<() => void>
 }>) {
   const initialFormState =
     formVariant === PaymentFormVariant.Upgrade

www/src/components/account/billing/StripeElements.tsx

@@ -24,7 +24,7 @@ export function StripeElements({
         appearance,
         mode: 'setup',
         currency: 'usd',
-      } satisfies StripeElementsOptions),
+      }) satisfies StripeElementsOptions,
     [appearance]
   )
 

www/src/components/account/invite/InviteUser.tsx

@@ -205,7 +205,7 @@ function InviteUserUnstyled({
       attributes: {
         email,
         inviteGroups: groupBindings.map(
-          (g) => ({ groupId: g.id } as BindingAttributes)
+          (g) => ({ groupId: g.id }) as BindingAttributes
         ),
         admin: isAdmin,
         serviceAccountId,

www/src/components/account/invite/InviteUserModal.tsx

@@ -40,7 +40,6 @@ function InviteUserModalUnstyled({
     <Modal
       open
       onClose={onClose}
-      style={{ padding: 0 }}
       size="large"
       header={header}
     >

www/src/components/account/utils.ts

@@ -16,8 +16,8 @@ export function hasRbac(user: CurrentUser, permission: Permission) {
   if (user.boundRoles != null) {
     const boundRoles = user.boundRoles.filter(notNil)
 
-    return boundRoles.some(({ permissions }) =>
-      permissions?.includes(permission)
+    return boundRoles.some(
+      ({ permissions }) => permissions?.includes(permission)
     )
   }
 

www/src/components/cluster/ClusterAdminsModal.tsx

@@ -175,7 +175,6 @@ export function ClusterAdminsModal({ onClose, serviceAccount }) {
   return (
     <Modal
       header={header}
-      portal
       open
       onClose={onClose}
       style={{ padding: 0 }}

www/src/components/cluster/ClusterAppHealth.tsx

@@ -23,7 +23,7 @@ export default function ClusterAppHealth({
 
   return (
     <Chip
-      severity={healthy ? 'success' : 'error'}
+      severity={healthy ? 'success' : 'danger'}
       {...props}
     >
       {healthy ? 'Healthy' : 'Unhealthy'}

www/src/components/cluster/ClusterDependencyModal.tsx

@@ -64,7 +64,6 @@ export function ClusterDependencyModal({
 
   return (
     <Modal
-      portal
       open={open}
       onClose={close}
       actions={
@@ -86,11 +85,11 @@ export function ClusterDependencyModal({
         </>
       }
       size="large"
-      overflow="hidden"
     >
       <Flex
         direction="column"
         gap="xlarge"
+        overflow="hidden"
       >
         <Div subtitle2>Set up promotions</Div>
         {error && (

www/src/components/cluster/ClusterPromoteModal.tsx

@@ -93,7 +93,6 @@ function ClusterPromoteModalInternal({
   return (
     <>
       <Modal
-        portal
         open={open}
         onClose={close}
         actions={
@@ -129,11 +128,11 @@ function ClusterPromoteModalInternal({
           </>
         }
         size="large"
-        overflow="hidden"
       >
         <Flex
           direction="column"
           gap="xlarge"
+          overflow="hidden"
         >
           <Div subtitle2>
             {finished ? 'Cluster promotion complete' : 'Cluster promotion'}

www/src/components/cluster/UpgradeNeededModal.tsx

@@ -32,7 +32,6 @@ function UpgradeNeededModal({
 
   return (
     <Modal
-      BackdropProps={{ zIndex: 20 }}
       header={
         <Header>
           <WarningIcon

www/src/components/layout/Overlay.tsx

@@ -31,6 +31,7 @@ const getTransitionProps = (isOpen: boolean) => ({
       },
 })
 
+// @ts-ignore, see https://github.com/pmndrs/react-spring/issues/1515
 const OverlayBG = styled(AnimatedDiv)(({ theme }) => ({
   position: 'absolute',
   top: 0,