From bc76f23d7cf8871e4d6e1b7d77c422de36fa90b4 Mon Sep 17 00:00:00 2001 From: Jake Laderman Date: Tue, 27 Aug 2024 11:18:10 -0400 Subject: [PATCH] update design system (#1349) --- www/package.json | 36 +- .../components/account/AccountAttributes.tsx | 1 - www/src/components/account/CreateRole.tsx | 1 - .../account/CreateServiceAccount.tsx | 1 - www/src/components/account/Domains.tsx | 2 - www/src/components/account/EditGroup.tsx | 2 - www/src/components/account/EditRole.tsx | 1 - www/src/components/account/Groups.tsx | 1 - www/src/components/account/InviteUser.tsx | 2 +- .../account/billing/BillingBankCards.tsx | 4 +- .../billing/BillingFeatureBlockModal.tsx | 1 - .../billing/BillingStartTrialModal.tsx | 1 - .../account/billing/DelinquencyNotices.tsx | 2 +- .../account/billing/PaymentForm.tsx | 2 +- .../account/billing/StripeElements.tsx | 2 +- .../components/account/invite/InviteUser.tsx | 2 +- .../account/invite/InviteUserModal.tsx | 1 - www/src/components/account/utils.ts | 4 +- .../components/cluster/ClusterAdminsModal.tsx | 1 - .../components/cluster/ClusterAppHealth.tsx | 2 +- .../cluster/ClusterDependencyModal.tsx | 3 +- .../cluster/ClusterPromoteModal.tsx | 3 +- .../components/cluster/UpgradeNeededModal.tsx | 1 - www/src/components/layout/Overlay.tsx | 1 + www/src/components/layout/Sidebar.tsx | 34 +- www/src/components/login/LegacyExpiration.tsx | 1 - .../marketplace/MarketplaceSidebar.tsx | 2 + .../components/marketplace/RepoCardList.tsx | 14 +- .../overview/CreateClusterModal.tsx | 1 - .../overview/clusters/ClusterHealth.tsx | 2 +- www/src/components/profile/AccessTokens.tsx | 9 +- www/src/components/profile/KeyBackups.tsx | 2 - .../repository/RepositoryPackages.tsx | 4 +- www/src/components/shell/OAuthCallback.tsx | 2 +- .../shell/onboarding/checklist/Checklist.tsx | 2 +- .../onboarding/sections/shell/ShellStatus.tsx | 2 +- .../actionbar/options/DeleteShellModal.tsx | 10 +- .../options/EditCloudCredentialsModal.tsx | 1 - .../sidebar/installed/LaunchAppModal.tsx | 1 - www/src/components/users/DeviceLoginNotif.tsx | 4 +- .../users/settings/UserSettingsModal.tsx | 1 - www/src/components/users/stripe.css | 6 +- www/src/components/utils/Confirm.tsx | 4 +- www/src/components/utils/InstallAppButton.tsx | 14 +- .../components/utils/user/DeleteUserModal.tsx | 1 - www/src/contexts/AppContext.tsx | 2 +- www/src/hooks/usePaginatedQuery.ts | 4 +- www/src/types/styled.d.ts | 8 +- www/src/utils/object.ts | 2 +- www/src/utils/removeTypename.tsx | 2 +- www/tsconfig.json | 4 +- www/tsconfig.node.json | 9 - www/yarn.lock | 9076 +++++++++-------- 53 files changed, 5050 insertions(+), 4251 deletions(-) delete mode 100644 www/tsconfig.node.json diff --git a/www/package.json b/www/package.json index e13d2a768..4783ef430 100644 --- a/www/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/www/src/components/account/AccountAttributes.tsx b/www/src/components/account/AccountAttributes.tsx index c052485e6..53965e549 100644 --- a/www/src/components/account/AccountAttributes.tsx +++ b/www/src/components/account/AccountAttributes.tsx @@ -77,7 +77,6 @@ function DomainMappingFunc({ onClick={() => { setConfirm(true) }} - // @ts-expect-error hue="lighter" /> diff --git a/www/src/components/account/CreateRole.tsx b/www/src/components/account/CreateRole.tsx index 2b9d1ae7c..d2e5b17d2 100644 --- a/www/src/components/account/CreateRole.tsx +++ b/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={ { setEdit(false) diff --git a/www/src/components/account/Domains.tsx b/www/src/components/account/Domains.tsx index dc07208ba..cb6ed254e 100644 --- a/www/src/components/account/Domains.tsx +++ b/www/src/components/account/Domains.tsx @@ -143,10 +143,8 @@ function AccessPolicy({ domain: { id, accessPolicy }, edit, setEdit }: any) { return ( setEdit(false)} - width="100%" actions={ setEdit(false)} diff --git a/www/src/components/account/EditGroup.tsx b/www/src/components/account/EditGroup.tsx index ed630f791..149ed4ac8 100644 --- a/www/src/components/account/EditGroup.tsx +++ b/www/src/components/account/EditGroup.tsx @@ -74,7 +74,6 @@ export function EditGroupMembers({ group, open, onClose }: any) { return ( setOpen(false)} diff --git a/www/src/components/account/Groups.tsx b/www/src/components/account/Groups.tsx index bbb45062b..5bd6b5179 100644 --- a/www/src/components/account/Groups.tsx +++ b/www/src/components/account/Groups.tsx @@ -123,7 +123,6 @@ export function Group({ group, q }: { group: GroupT; q: any }) { dialogKey === 'viewGroup' && setDialogKey('')} diff --git a/www/src/components/account/InviteUser.tsx b/www/src/components/account/InviteUser.tsx index 9e71c50c6..119c90db4 100644 --- a/www/src/components/account/InviteUser.tsx +++ b/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 ? ( diff --git a/www/src/components/account/billing/BillingBankCards.tsx b/www/src/components/account/billing/BillingBankCards.tsx index 86796dc41..66738a17f 100644 --- a/www/src/components/account/billing/BillingBankCards.tsx +++ b/www/src/components/account/billing/BillingBankCards.tsx @@ -160,9 +160,7 @@ function AddPaymentMethodModal({ > { - onClose() - }} + onClose={onClose} /> ) diff --git a/www/src/components/account/billing/BillingFeatureBlockModal.tsx b/www/src/components/account/billing/BillingFeatureBlockModal.tsx index 98d5a9285..8e52982e0 100644 --- a/www/src/components/account/billing/BillingFeatureBlockModal.tsx +++ b/www/src/components/account/billing/BillingFeatureBlockModal.tsx @@ -26,7 +26,6 @@ export default function BillingFeatureBlockModal({ }: BillingFeatureBlockModalProps) { return ( void + onClose?: Nullable<() => void> }>) { const initialFormState = formVariant === PaymentFormVariant.Upgrade diff --git a/www/src/components/account/billing/StripeElements.tsx b/www/src/components/account/billing/StripeElements.tsx index 0daa55c0f..1b5add379 100644 --- a/www/src/components/account/billing/StripeElements.tsx +++ b/www/src/components/account/billing/StripeElements.tsx @@ -24,7 +24,7 @@ export function StripeElements({ appearance, mode: 'setup', currency: 'usd', - } satisfies StripeElementsOptions), + }) satisfies StripeElementsOptions, [appearance] ) diff --git a/www/src/components/account/invite/InviteUser.tsx b/www/src/components/account/invite/InviteUser.tsx index 4688c0c40..0ef55713d 100644 --- a/www/src/components/account/invite/InviteUser.tsx +++ b/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, diff --git a/www/src/components/account/invite/InviteUserModal.tsx b/www/src/components/account/invite/InviteUserModal.tsx index 010a003fa..e8dc53f77 100644 --- a/www/src/components/account/invite/InviteUserModal.tsx +++ b/www/src/components/account/invite/InviteUserModal.tsx @@ -40,7 +40,6 @@ function InviteUserModalUnstyled({ diff --git a/www/src/components/account/utils.ts b/www/src/components/account/utils.ts index 31fc6818c..2cc667e23 100644 --- a/www/src/components/account/utils.ts +++ b/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) ) } diff --git a/www/src/components/cluster/ClusterAdminsModal.tsx b/www/src/components/cluster/ClusterAdminsModal.tsx index 248763b18..8dbd0f5fc 100644 --- a/www/src/components/cluster/ClusterAdminsModal.tsx +++ b/www/src/components/cluster/ClusterAdminsModal.tsx @@ -175,7 +175,6 @@ export function ClusterAdminsModal({ onClose, serviceAccount }) { return ( {healthy ? 'Healthy' : 'Unhealthy'} diff --git a/www/src/components/cluster/ClusterDependencyModal.tsx b/www/src/components/cluster/ClusterDependencyModal.tsx index 899bb96c6..9de952f85 100644 --- a/www/src/components/cluster/ClusterDependencyModal.tsx +++ b/www/src/components/cluster/ClusterDependencyModal.tsx @@ -64,7 +64,6 @@ export function ClusterDependencyModal({ return ( } size="large" - overflow="hidden" >
Set up promotions
{error && ( diff --git a/www/src/components/cluster/ClusterPromoteModal.tsx b/www/src/components/cluster/ClusterPromoteModal.tsx index 735967e85..e9c897bed 100644 --- a/www/src/components/cluster/ClusterPromoteModal.tsx +++ b/www/src/components/cluster/ClusterPromoteModal.tsx @@ -93,7 +93,6 @@ function ClusterPromoteModalInternal({ return ( <> } size="large" - overflow="hidden" >
{finished ? 'Cluster promotion complete' : 'Cluster promotion'} diff --git a/www/src/components/cluster/UpgradeNeededModal.tsx b/www/src/components/cluster/UpgradeNeededModal.tsx index 69869adb8..fa6136c9d 100644 --- a/www/src/components/cluster/UpgradeNeededModal.tsx +++ b/www/src/components/cluster/UpgradeNeededModal.tsx @@ -32,7 +32,6 @@ function UpgradeNeededModal({ return ( ({ }, }) +// @ts-ignore, see https://github.com/pmndrs/react-spring/issues/1515 const OverlayBG = styled(AnimatedDiv)(({ theme }) => ({ position: 'absolute', top: 0, diff --git a/www/src/components/layout/Sidebar.tsx b/www/src/components/layout/Sidebar.tsx index 3a2356750..3142b3dfb 100644 --- a/www/src/components/layout/Sidebar.tsx +++ b/www/src/components/layout/Sidebar.tsx @@ -7,9 +7,8 @@ import { useState, } from 'react' import { Link, useLocation } from 'react-router-dom' -import { Menu, MenuItem } from 'honorable' +import { Avatar, Menu, MenuItem } from 'honorable' import { - AppIcon, ArrowTopRightIcon, BellIcon, BrowseAppsIcon, @@ -234,6 +233,11 @@ function Sidebar(props: Omit, 'variant'>) { clickable tooltip={item.text} className={`sidebar-${item.text}`} + style={{ + outline: isActive + ? `1px solid ${theme.colors['border-fill-two']}` + : undefined, + }} as={Link} to={item.path} active={isActive} @@ -293,22 +297,18 @@ function Sidebar(props: Omit, 'variant'>) { active={isMenuOpen} clickable collapsed - onClick={() => setIsMenuOpened((x) => !x)} - userSelect="none" + onClick={(e) => { + e.stopPropagation() + setIsMenuOpened((x) => !x) + }} + css={{ + paddingLeft: theme.spacing.xxsmall, + }} > - diff --git a/www/src/components/login/LegacyExpiration.tsx b/www/src/components/login/LegacyExpiration.tsx index 0e30e2a64..ecbaf181b 100644 --- a/www/src/components/login/LegacyExpiration.tsx +++ b/www/src/components/login/LegacyExpiration.tsx @@ -47,7 +47,6 @@ function ExpiredModal() { return ( setExpanded(!expanded)} + background="transparent" + boxShadow="none" {...props} > {children(expanded)} diff --git a/www/src/components/marketplace/RepoCardList.tsx b/www/src/components/marketplace/RepoCardList.tsx index b34c2255c..877ec8468 100644 --- a/www/src/components/marketplace/RepoCardList.tsx +++ b/www/src/components/marketplace/RepoCardList.tsx @@ -1,6 +1,6 @@ import { RepositoryCard } from '@pluralsh/design-system' import { Link } from 'react-router-dom' -import { useTheme } from 'styled-components' +import styled, { useTheme } from 'styled-components' import { CardGrid } from '../utils/layout/CardGrid' import { getRepoIcon } from '../repository/misc' @@ -17,9 +17,9 @@ export function RepoCardList({ return ( {repositories?.map((repository) => ( - ) } + +const FixedRepositoryCard = styled(RepositoryCard)(({ theme }) => ({ + flexDirection: 'column', + padding: theme.spacing.large, + width: '100%', + position: 'relative', + textDecoration: 'none', +})) diff --git a/www/src/components/overview/CreateClusterModal.tsx b/www/src/components/overview/CreateClusterModal.tsx index 840ad80ab..97585da54 100644 --- a/www/src/components/overview/CreateClusterModal.tsx +++ b/www/src/components/overview/CreateClusterModal.tsx @@ -366,7 +366,6 @@ function CreateClusterModal({ open, onClose }): ReactElement { return ( Create cluster} open={open} onClose={() => { diff --git a/www/src/components/overview/clusters/ClusterHealth.tsx b/www/src/components/overview/clusters/ClusterHealth.tsx index 28ad9023e..7e2fc6c4f 100644 --- a/www/src/components/overview/clusters/ClusterHealth.tsx +++ b/www/src/components/overview/clusters/ClusterHealth.tsx @@ -32,7 +32,7 @@ export default function ClusterHealth({ return ( diff --git a/www/src/components/profile/AccessTokens.tsx b/www/src/components/profile/AccessTokens.tsx index db4f19396..6566cdead 100644 --- a/www/src/components/profile/AccessTokens.tsx +++ b/www/src/components/profile/AccessTokens.tsx @@ -129,6 +129,7 @@ function TokenMetrics({ token }: any) { setGraph(false)} > @@ -236,7 +234,6 @@ function AccessToken({ token, first, last }: any) { setAudits(false)} > diff --git a/www/src/components/profile/KeyBackups.tsx b/www/src/components/profile/KeyBackups.tsx index d56fbc01b..5f191316c 100644 --- a/www/src/components/profile/KeyBackups.tsx +++ b/www/src/components/profile/KeyBackups.tsx @@ -210,7 +210,6 @@ function LocalSyncButton() { onClose={openState.setOff} header="Sync encryption keys locally" size="large" - portal > (null) const pathPrefix = `/repository/${repository.name}/packages` - const currentTab = DIRECTORY.find((tab) => - pathname?.startsWith(`${pathPrefix}${tab.path}`) + const currentTab = DIRECTORY.find( + (tab) => pathname?.startsWith(`${pathPrefix}${tab.path}`) ) return ( diff --git a/www/src/components/shell/OAuthCallback.tsx b/www/src/components/shell/OAuthCallback.tsx index 19450e555..47c4ff27d 100644 --- a/www/src/components/shell/OAuthCallback.tsx +++ b/www/src/components/shell/OAuthCallback.tsx @@ -31,7 +31,7 @@ const toOnboardingContext = ( authUrls: authUrlData?.scmAuthorization as Array, token, }, - } as ContextProps) + }) as ContextProps function OAuthCallback({ provider }: any) { const navigate = useNavigate() diff --git a/www/src/components/shell/onboarding/checklist/Checklist.tsx b/www/src/components/shell/onboarding/checklist/Checklist.tsx index af60bc6cc..f8ba7cabc 100644 --- a/www/src/components/shell/onboarding/checklist/Checklist.tsx +++ b/www/src/components/shell/onboarding/checklist/Checklist.tsx @@ -167,7 +167,7 @@ export function OnboardingChecklist() { > {error && ( diff --git a/www/src/components/shell/onboarding/sections/shell/ShellStatus.tsx b/www/src/components/shell/onboarding/sections/shell/ShellStatus.tsx index a1bb39d31..5f6839ad1 100644 --- a/www/src/components/shell/onboarding/sections/shell/ShellStatus.tsx +++ b/www/src/components/shell/onboarding/sections/shell/ShellStatus.tsx @@ -25,7 +25,7 @@ function StatusChip({ loading, error }: StatusChipProps) { loading={loading && !error} backgroundColor="fill-two" borderColor="border-fill-two" - severity={error ? 'error' : loading ? 'info' : 'success'} + severity={error ? 'danger' : loading ? 'info' : 'success'} > {error ? 'Error' : loading ? 'Running' : 'Success'} diff --git a/www/src/components/shell/terminal/actionbar/options/DeleteShellModal.tsx b/www/src/components/shell/terminal/actionbar/options/DeleteShellModal.tsx index 2d581c45c..a14887998 100644 --- a/www/src/components/shell/terminal/actionbar/options/DeleteShellModal.tsx +++ b/www/src/components/shell/terminal/actionbar/options/DeleteShellModal.tsx @@ -9,6 +9,8 @@ import { import { A, Button, Flex, Span } from 'honorable' import { useCallback, useContext, useState } from 'react' +import { useTheme } from 'styled-components' + import { ImpersonationContext } from '../../../context/impersonation' import { @@ -17,6 +19,7 @@ import { } from '../../../queries' function DeleteDemoModal({ onClose }) { + const theme = useTheme() const [open, setOpen] = useState(true) const close = useCallback(() => { setOpen(false) @@ -32,8 +35,7 @@ function DeleteDemoModal({ onClose }) { size="large" open={open} onClose={close} - style={{ padding: 0 }} - borderTop="4px solid border-warning" + css={{ borderTop: `4px solid ${theme.colors['border-warning']}` }} > )} setOpen(false)} - width="512px" - portal + size="custom" + css={{ width: '512px' }} > The device you requested on should now have access. diff --git a/www/src/components/users/settings/UserSettingsModal.tsx b/www/src/components/users/settings/UserSettingsModal.tsx index 0b4a5371c..331750938 100644 --- a/www/src/components/users/settings/UserSettingsModal.tsx +++ b/www/src/components/users/settings/UserSettingsModal.tsx @@ -38,7 +38,6 @@ function UserSettingsModal({