update DS (#1374)

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.69.2",
+    "@pluralsh/design-system": "3.74.2",
     "@react-spring/web": "9.7.3",
     "@stripe/react-stripe-js": "2.1.0",
     "@stripe/stripe-js": "1.54.0",
@@ -112,7 +112,7 @@
     "slate-history": "0.93.0",
     "slate-react": "0.95.0",
     "stream-browserify": "3.0.0",
-    "styled-components": "5.3.11",
+    "styled-components": "6.1.13",
     "util": "0.12.5",
     "uuid": "9.0.1",
     "workbox-core": "7.0.0",
@@ -169,7 +169,7 @@
     "source-map-explorer": "2.5.3",
     "stylelint": "15.11.0",
     "stylelint-config-prettier": "9.0.5",
-    "typescript": "5.4.5",
+    "typescript": "5.6.2",
     "vite": "4.5.0",
     "vite-plugin-pwa": "0.17.4",
     "vite-plugin-rewrite-all": "1.0.1",

www/src/_deprecated/components/incidents/Severity.tsx

@@ -43,7 +43,7 @@ function dot(color, theme) {
     alignItems: 'center',
     display: 'flex',
 
-    ':before': {
+    '&:before': {
       backgroundColor: clr,
       borderRadius: 10,
       content: '" "',

www/src/components/account/Account.tsx

@@ -5,10 +5,8 @@ import { Outlet, useParams } from 'react-router-dom'
 import { Flex } from 'honorable'
 
 import { ResponsiveLayoutContentContainer } from '../utils/layout/ResponsiveLayoutContentContainer'
-import { ResponsiveLayoutSidecarContainer } from '../utils/layout/ResponsiveLayoutSidecarContainer'
-import { ResponsiveLayoutSpacer } from '../utils/layout/ResponsiveLayoutSpacer'
-import { ResponsiveLayoutSidenavContainer } from '../utils/layout/ResponsiveLayoutSidenavContainer'
 import { ResponsiveLayoutPage } from '../utils/layout/ResponsiveLayoutPage'
+import { ResponsiveLayoutSidenavContainer } from '../utils/layout/ResponsiveLayoutSidenavContainer'
 
 import AccountSideNav from './AccountSidenav'
 
@@ -67,15 +65,12 @@ export function Account() {
         overflowY="auto"
         padding="large"
       >
-        <ResponsiveLayoutSpacer />
         <TabPanel
           as={<ResponsiveLayoutContentContainer overflow="visible" />}
           stateRef={tabStateRef}
         >
           <Outlet />
         </TabPanel>
-        <ResponsiveLayoutSpacer />
-        <ResponsiveLayoutSidecarContainer />
       </Flex>
     </ResponsiveLayoutPage>
   )

www/src/components/account/AccountSidenav.tsx

@@ -31,6 +31,7 @@ function AccountTabList({ tabStateRef }: any) {
     >
       {DIRECTORY.map(({ label, path }) => (
         <LinkTabWrap
+          vertical
           key={path}
           textValue={label}
           to={path}

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

@@ -4,7 +4,7 @@ import { Div } from 'honorable'
 const columnStyles = {
   position: 'relative',
   boxShadow: '-12px 0 12px 0px rgb(14 16 21 / 20%)',
-  ':first-child': {
+  '&:first-child': {
     boxShadow: 'none',
     '> div': {
       display: 'flex',

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

@@ -7,7 +7,13 @@ import {
   MailIcon,
   Switch,
 } from '@pluralsh/design-system'
-import { ReactElement, useEffect, useMemo, useState } from 'react'
+import {
+  ComponentProps,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import styled from 'styled-components'
 
 import {
@@ -77,7 +83,14 @@ function InviteUserActionsUnstyled({
   onCreate,
   invited,
   ...props
-}): ReactElement {
+}: {
+  disabled?: boolean
+  loading?: boolean
+  onCancel?: () => void
+  onBack?: () => void
+  onCreate?: () => void
+  invited?: boolean
+} & ComponentProps<'div'>) {
   return (
     <div {...props}>
       {onBack && (
@@ -182,6 +195,15 @@ function InviteUserUnstyled({
   serviceAccountId,
   oidcProviderId,
   ...props
+}: {
+  onGroupCreate?: () => void
+  onInvite?: (invite: Invite) => void
+  onCancel?: () => void
+  onBack?: () => void
+  bindings?: Array<GroupBase>
+  refetch?: any
+  serviceAccountId?: string
+  oidcProviderId?: string
 }): ReactElement {
   const [valid, setValid] = useState(false)
   const [query, setQuery] = useState('')

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

@@ -1,8 +1,8 @@
 import { Modal } from '@pluralsh/design-system'
-import { DispatchWithoutAction, ReactElement, useMemo, useState } from 'react'
+import { ComponentProps, DispatchWithoutAction, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
-import { Group } from '../../../generated/graphql'
+import { Group, Invite } from '../../../generated/graphql'
 import { GroupBase } from '../../utils/combobox/types'
 import CreateGroup from '../../utils/group/CreateGroup'
 
@@ -21,7 +21,12 @@ function InviteUserModalUnstyled({
   serviceAccountId,
   oidcProviderId,
   ...props
-}): ReactElement {
+}: {
+  onInvite?: (invite: Invite) => void
+  onClose?: () => void
+  serviceAccountId?: string
+  oidcProviderId?: string
+} & ComponentProps<'div'>) {
   const [view, setView] = useState(View.InviteUser)
   const [refetch, setRefetch] = useState<DispatchWithoutAction>()
   const [bindings, setBindings] = useState<Array<GroupBase>>([])
@@ -58,8 +63,10 @@ function InviteUserModalUnstyled({
         {view === View.CreateGroup && (
           <CreateGroup
             onBack={() => setView(View.InviteUser)}
-            onCreate={(group: Group) => {
-              setBindings((bindings) => [...bindings, group])
+            onCreate={(group: Nullable<Group>) => {
+              setBindings((bindings) =>
+                group ? [...bindings, group] : [...bindings]
+              )
               refetch?.()
             }}
           />

www/src/components/audits/AuditDirectory.tsx

@@ -57,6 +57,7 @@ export function AuditDirectory() {
           >
             {DIRECTORY.map(({ label, path }) => (
               <LinkTabWrap
+                vertical
                 key={path}
                 textValue={label}
                 to={path}

www/src/components/cluster/ClusterAdminsModal.tsx

@@ -238,15 +238,16 @@ export function ClusterAdminsModal({
         {view === View.CreateGroup && (
           <CreateGroup
             onBack={() => setView(lastView)}
-            onCreate={(group: Group) => {
+            onCreate={(group: Nullable<Group>) => {
               switch (lastView) {
                 case View.Managers:
                   setBindings((bindings) => [...bindings, { group }])
                   break
                 case View.InviteUser:
-                  setGroups((groups) => [...groups, group])
+                  setGroups((groups) =>
+                    group ? [...groups, group] : [...groups]
+                  )
               }
-
               setView(lastView)
               onCreateGroup?.()
             }}

www/src/components/create-cluster/CreateCluster.tsx

@@ -187,7 +187,9 @@ const MainWrapperSC = styled.div(({ theme }) => ({
   justifyContent: 'space-between',
   gap: theme.spacing.xlarge,
   padding: theme.spacing.large,
-  '::after': {
+  height: '100%',
+  overflow: 'auto',
+  '&::after': {
     // makes the spacing look a little nicer
     content: '""',
     flex: 0.35,
@@ -197,6 +199,7 @@ const MainWrapperSC = styled.div(({ theme }) => ({
 const SidebarWrapperSC = styled.div(({ theme }) => ({
   display: 'flex',
   width: 300,
+  height: 'min-content',
   flexDirection: 'column',
   gap: theme.spacing.xlarge,
 }))

www/src/components/layout/Sidebar.tsx

@@ -104,7 +104,12 @@ function isActiveMenuItem(
 function SidebarWrapper() {
   const isCurrentlyOnboarding = useIsCurrentlyOnboarding()
 
-  return <Sidebar style={isCurrentlyOnboarding ? { display: 'none' } : null} />
+  return (
+    <Sidebar
+      variant="app"
+      style={isCurrentlyOnboarding ? { display: 'none' } : undefined}
+    />
+  )
 }
 
 const FlexGrow1 = styled.div((_) => ({
@@ -141,7 +146,7 @@ function SidebarMenuItem({
   )
 }
 
-const SidebarSC = styled(DSSidebar).attrs(() => ({ variant: 'app' }))((_) => ({
+const SidebarSC = styled(DSSidebar)((_) => ({
   flexGrow: 1,
   minHeight: 0,
   height: 'auto',
@@ -164,7 +169,7 @@ const NotificationsCountSC = styled.div(({ theme }) => ({
   userSelect: 'none',
 }))
 
-function Sidebar(props: Omit<ComponentProps<typeof DSSidebar>, 'variant'>) {
+function Sidebar(props: Omit<ComponentProps<typeof DSSidebar>, '$variant'>) {
   const menuItemRef = useRef<HTMLDivElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
   const [isMenuOpen, setIsMenuOpened] = useState(false)

www/src/components/marketplace/MarketplaceRepositories.tsx

@@ -207,13 +207,9 @@ function MarketplaceRepositories({ publisher }: { publisher?: any }) {
       padding={0}
       overflow="auto"
     >
-      {!publisher && <ResponsiveLayoutSpacer />}
       <Flex
         direction="column"
         overflow="hidden"
-        maxWidth-desktopLarge-up={publisher ? null : 1640}
-        width-desktopLarge-up={publisher ? null : 1640}
-        width-desktopLarge-down="100%"
         flexGrow={publisher ? 1 : 0}
       >
         <Flex

www/src/components/profile/ListItem.tsx

@@ -30,7 +30,7 @@ export function ListItem({
 }: {
   first: boolean
   last: boolean
-} & ComponentProps<typeof ListItemSC>) {
+} & ComponentProps<'div'>) {
   return (
     <ListItemSC
       $first={first}

www/src/components/repository/Repository.tsx

@@ -33,7 +33,7 @@ function Repository() {
     () => [
       MARKETPLACE_CRUMB,
       {
-        label: `${name}-${subPath || 'readme'}` ?? '',
+        label: `${name}-${subPath || 'readme'}`,
         url: `/repository/${name}`,
       },
     ],

www/src/components/repository/RepositoryEdit.tsx

@@ -492,10 +492,7 @@ function RepositoryEdit() {
             >
               {tagSearchResults.map((result) =>
                 result.new ? (
-                  <ListBoxFooterPlus
-                    key={result.tag}
-                    textValue={result.tag}
-                  >
+                  <ListBoxFooterPlus key={result.tag}>
                     New tag: {result.tag}
                   </ListBoxFooterPlus>
                 ) : (