From 6b0c8b0bfa40e335b1d940761efc3a4d9cfb4bd8 Mon Sep 17 00:00:00 2001 From: Klink <85062+dogmar@users.noreply.github.com> Date: Wed, 20 Dec 2023 12:11:52 -0800 Subject: [PATCH] feat: Update design system (#561) --- assets/package.json | 40 +- .../components/account/webhooks/Webhook.tsx | 1 - assets/src/components/apps/Apps.tsx | 6 +- .../components/apps/app/components/misc.tsx | 4 +- .../apps/app/dashboards/Dashboards.tsx | 6 +- .../apps/app/logs/LogsDownloader.tsx | 4 +- .../apps/app/logs/LogsFullScreen.tsx | 54 +- assets/src/components/apps/app/misc.tsx | 1 - .../components/apps/app/runbooks/Runbooks.tsx | 6 +- .../app/runbooks/runbook/RunbookAlerts.tsx | 4 +- .../src/components/builds/UpgradePolicies.tsx | 9 +- assets/src/components/cd/addOns/AddOns.tsx | 2 +- .../components/cd/cluster/ClusterMetadata.tsx | 2 +- .../cd/clusters/ClusterConditions.tsx | 2 +- .../cd/clusters/ClusterHealthChip.tsx | 2 +- .../cd/services/CreateGlobalService.tsx | 2 +- .../DeployServiceSettingsHelmValues.tsx | 2 + .../DeployServiceSettingsSecrets.tsx | 3 + .../db-management/DatabasesList.tsx | 6 +- .../src/components/help/ChatbotMarkdown.tsx | 26 +- .../layout/NotificationSeverity.tsx | 7 +- assets/src/components/utils/BindingInput.tsx | 2 +- assets/src/types/styled.d.ts | 2 +- assets/src/utils/color.ts | 5 - assets/tsconfig.eslint.json | 2 +- assets/tsconfig.json | 1 - assets/tsconfig.node.json | 9 - assets/vite.config.ts | 5 +- assets/vitest.config.ts | 11 +- assets/yarn.lock | 3660 ++++++++--------- 30 files changed, 1720 insertions(+), 2166 deletions(-) delete mode 100644 assets/tsconfig.node.json diff --git a/assets/package.json b/assets/package.json index 8dd8c61af2..b2bbdef881 100644 --- a/assets/package.json +++ b/assets/package.json @@ -38,16 +38,16 @@ "@emotion/styled": "11.11.0", "@graphql-codegen/named-operations-object": "3.0.0", "@jumpn/utils-graphql": "0.6.0", - "@markdoc/markdoc": "0.3.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.13.1", + "@pluralsh/design-system": "3.14.1", "@react-hooks-library/core": "0.5.1", - "@tanstack/react-virtual": "3.0.0-beta.68", + "@tanstack/react-virtual": "3.0.1", "@testing-library/jest-dom": "5.16.5", "@testing-library/react": "14.0.0", "@testing-library/user-event": "14.4.3", @@ -64,7 +64,7 @@ "filesize": "10.0.12", "forge-core": "1.4.6", "fuse.js": "6.6.2", - "grommet": "2.32.2", + "grommet": "2.34.2", "grommet-icons": "4.10.0", "highlight.js": "11.9.0", "honorable": "1.0.0-beta.17", @@ -117,7 +117,7 @@ "slate-react": "0.95.0", "styled-components": "5.3.11", "tinyqueue": "2.0.3", - "type-fest": "4.6.0", + "type-fest": "4.8.3", "use-immer": "0.9.0", "uuid": "9.0.1", "workbox-core": "7.0.0", @@ -137,26 +137,26 @@ "@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.116", - "@pluralsh/stylelint-config": "2.0.9", + "@pluralsh/eslint-config-typescript": "2.5.150", + "@pluralsh/stylelint-config": "2.0.10", "@types/jsdom": "21.1.5", "@types/styled-components": "5.1.30", "@types/uuid": "9.0.7", - "@typescript-eslint/eslint-plugin": "6.10.0", - "@typescript-eslint/parser": "6.10.0", - "@vitejs/plugin-basic-ssl": "1.0.1", - "@vitejs/plugin-react": "4.1.1", - "@vitest/ui": "0.34.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.1.0", "babel-plugin-styled-components": "2.1.4", "concurrently": "8.1.0", "customize-cra": "1.0.0", "cypress": "12.14.0", - "eslint": "8.42.0", + "eslint": "8.56.0", "eslint-config-pluralsh": "3.1.0", - "eslint-config-prettier": "9.0.0", - "eslint-plugin-import": "2.28.1", + "eslint-config-prettier": "9.1.0", + "eslint-plugin-import": "2.29.1", "eslint-plugin-import-newlines": "1.3.4", - "eslint-plugin-jsx-a11y": "6.7.1", + "eslint-plugin-jsx-a11y": "6.8.0", "eslint-plugin-react": "7.33.2", "eslint-plugin-react-hooks": "4.6.0", "husky": "8.0.3", @@ -167,13 +167,13 @@ "prettier": "3.0.3", "react-error-boundary": "4.0.11", "stylelint": "15.11.0", - "typescript": "5.2.2", + "typescript": "5.3.3", "usehooks-ts": "2.9.1", "vite": "4.5.0", - "vite-plugin-pwa": "0.16.7", + "vite-plugin-pwa": "0.17.4", "vite-plugin-rewrite-all": "1.0.1", - "vite-tsconfig-paths": "4.2.1", - "vitest": "0.34.6", + "vite-tsconfig-paths": "4.2.2", + "vitest": "1.1.0", "wait-on": "7.0.1" }, "lint-staged": { diff --git a/assets/src/components/account/webhooks/Webhook.tsx b/assets/src/components/account/webhooks/Webhook.tsx index 21f3f6d945..0a87169511 100644 --- a/assets/src/components/account/webhooks/Webhook.tsx +++ b/assets/src/components/account/webhooks/Webhook.tsx @@ -43,7 +43,6 @@ export default function Webhook({ hook: { id, url, health, insertedAt } }) { size="medium" textValue="Slack" type="floating" - minWidth={32} />
} message="No apps found." description={`"${query}" did not match any of your installed applications.`} - width={600} + css={{ width: 600 }} >
+ )} ) diff --git a/assets/src/components/apps/app/misc.tsx b/assets/src/components/apps/app/misc.tsx index 45fd97a7bb..37d12cf5f6 100644 --- a/assets/src/components/apps/app/misc.tsx +++ b/assets/src/components/apps/app/misc.tsx @@ -71,7 +71,6 @@ export function ListItem({ {icon && ( } message="No runbooks available" description={ diff --git a/assets/src/components/apps/app/runbooks/runbook/RunbookAlerts.tsx b/assets/src/components/apps/app/runbooks/runbook/RunbookAlerts.tsx index 64c219cf78..b2b3eededa 100644 --- a/assets/src/components/apps/app/runbooks/runbook/RunbookAlerts.tsx +++ b/assets/src/components/apps/app/runbooks/runbook/RunbookAlerts.tsx @@ -66,9 +66,9 @@ function ExpandedItem({ const ChipList = styled.div(({ theme }) => ({ display: 'flex', - flexDiretion: 'row', + flexDirection: 'row', flexWrap: 'wrap', - justifyContent: 'start', + justifyContent: 'flex-start', gap: theme.spacing.xsmall, })) diff --git a/assets/src/components/builds/UpgradePolicies.tsx b/assets/src/components/builds/UpgradePolicies.tsx index 1d0cc2baa4..d08d54dc71 100644 --- a/assets/src/components/builds/UpgradePolicies.tsx +++ b/assets/src/components/builds/UpgradePolicies.tsx @@ -1,4 +1,4 @@ -import { createContext, useCallback, useState } from 'react' +import { createContext, useCallback, useMemo, useState } from 'react' import { GearTrainIcon, IconFrame, Modal } from '@pluralsh/design-system' import UpgradePoliciesList from './UpgradePoliciesList' @@ -8,10 +8,10 @@ export const PolicyContext = createContext({}) export function UpgradePolicies() { const [modal, setModal] = useState(null) const close = useCallback(() => setModal(null), [setModal]) + const contextVal = useMemo(() => ({ modal, setModal, close }), [close, modal]) return ( - // eslint-disable-next-line react/jsx-no-constructed-context-values - + <> } @@ -19,8 +19,6 @@ export function UpgradePolicies() { tooltip type="secondary" size="medium" - height={40} - width={40} clickable onClick={() => setModal({ @@ -28,6 +26,7 @@ export function UpgradePolicies() { content: , }) } + css={{ width: 40, height: 40 }} /> {query && (