diff --git a/AGENTS.md b/AGENTS.md index dc1ddc79cc0..ae8f6043e8b 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -105,7 +105,7 @@ These differ from generic Go/React advice. Match **surrounding code** in the fil - **Mocks (Go):** small interfaces in `deps.go` + mockery — not hand-rolled fakes for every dependency - **UI server state:** TanStack Query hooks in `ui/apps/pmm/src/hooks/api/` — not `useEffect` + `fetch` in components ([`ui/AGENTS.md`](ui/AGENTS.md)) - **UI client state:** React Context for auth/settings — not Redux or another global store -- **UI components:** MUI + `@percona/percona-ui`, theme-aware `sx` — not ad-hoc CSS +- **UI components:** MUI + `@percona/peak-ui`, theme-aware `sx` — not ad-hoc CSS - **UI wire format:** camelCase in TypeScript; JSON on the wire is snake_case (`axios-case-converter` in `ui/apps/pmm/src/api/api.ts`) - **Generated code:** edit `.proto` / reform models / interfaces — run `make gen`; never hand-edit `*.pb.go`, `*_reform.go`, swagger clients diff --git a/ui/AGENTS.md b/ui/AGENTS.md index efbcd6f3718..9c47dd6b81f 100644 --- a/ui/AGENTS.md +++ b/ui/AGENTS.md @@ -25,7 +25,7 @@ The UI uses a **Yarn workspaces + Turborepo** monorepo with three packages: | **TypeScript** | Type-safe development | | **Vite** | Dev server and production build (main app) | | **MUI (Material UI)** | Component library | -| **@percona/percona-ui** | Percona's shared UI component library and theme | +| **@percona/peak-ui** | Percona's shared UI component library and theme | | **TanStack Query (React Query)** | Server state management (API caching, mutations) | | **React Context** | UI/auth state (AuthProvider, SettingsProvider, etc.) | | **Vitest** | Unit testing (main app) | @@ -75,7 +75,7 @@ Query keys follow the pattern: `['domain:action', params]` (e.g., `['services:li ### UI/Auth State (React Context) -Providers are composed in `Providers.tsx`, all wrapped by `ThemeContextProvider` (theme from `@percona/percona-ui`) in `App.tsx`: +Providers are composed in `Providers.tsx`, all wrapped by `ThemeContextProvider` (theme from `@percona/peak-ui`) in `App.tsx`: - `AuthProvider` — authentication state - `UserProvider` — current user info @@ -91,7 +91,7 @@ API calls are organized in `src/api/` using axios. Each API module provides type ## UI Component Library -`@percona/percona-ui` ("Peak Design") is PMM's shared component library — MUI v7-based themed components, design tokens, and `react-hook-form`-integrated inputs, exposing a `pmmThemeOptions` theme variant. **Browse the catalog before hand-rolling a component:** +`@percona/peak-ui` ("Peak Design") is PMM's shared component library — MUI v7-based themed components, design tokens, and `react-hook-form`-integrated inputs, exposing a `pmmThemeOptions` theme variant. **Browse the catalog before hand-rolling a component:** - **Storybook (component catalog):** https://percona.github.io/percona-ui - **Source & theme options:** https://github.com/percona/percona-ui @@ -104,7 +104,7 @@ The app is wrapped in `ThemeContextProvider` (see `App.tsx`); style with the the - Use TanStack Query (`useQuery`, `useMutation`) for all server state - Create custom hooks per API domain in `src/hooks/` -- Use MUI and `@percona/percona-ui` components for consistent styling — browse the [Storybook catalog](https://percona.github.io/percona-ui) before building a component from scratch +- Use MUI and `@percona/peak-ui` components for consistent styling — browse the [Storybook catalog](https://percona.github.io/percona-ui) before building a component from scratch - Use TypeScript strict mode — define types in `src/types/` - Co-locate test files next to components (`*.test.tsx`) - Use `CrossFrameMessenger` for communication with the Grafana iframe diff --git a/ui/apps/pmm/README.md b/ui/apps/pmm/README.md index 75575925ec7..f172f85ea64 100644 --- a/ui/apps/pmm/README.md +++ b/ui/apps/pmm/README.md @@ -11,20 +11,20 @@ See the [PMM Documentation](https://www.percona.com/doc/percona-monitoring-and-m See detailed information about prerequisites and setup [here](../../README.md) -# Locally testing @percona/percona-ui +# Locally testing @percona/peak-ui -`@percona/percona-ui` is a normal npm dependency (see `package.json`). To iterate on the library and PMM together, `yarn link` an in-progress checkout against this app. The recipe depends on whether you're running `make dev` on the host or `make run-ui` inside the PMM devcontainer. +`@percona/peak-ui` is a normal npm dependency (see `package.json`). To iterate on the library and PMM together, `yarn link` an in-progress checkout against this app. The recipe depends on whether you're running `make dev` on the host or `make run-ui` inside the PMM devcontainer. In both cases: - Check out the lib from https://github.com/percona/percona-ui. - After linking, **uncomment** the `exclude` block in `vite.config.ts` so Vite stops pre-bundling the linked package: ```ts - // exclude: ['@percona/percona-ui'], + // exclude: ['@percona/peak-ui'], ``` - When you're done, **comment the `exclude` block back**, then from `ui/apps/pmm`: ```bash - yarn unlink @percona/percona-ui + yarn unlink @percona/peak-ui yarn install --force ``` - Restarting the dev server between linking/unlinking is advised. @@ -32,7 +32,7 @@ In both cases: ## Host-local flow (`make dev`) - From the lib folder on the host: `pnpm build:watch` and `yarn link`. -- From `ui/apps/pmm` on the host: `yarn link @percona/percona-ui`. +- From `ui/apps/pmm` on the host: `yarn link @percona/peak-ui`. - Any change in the lib triggers a rebuild and HMR in PMM. ## Devcontainer flow (`make run-ui`) @@ -51,6 +51,6 @@ The host's `yarn link` global registry isn't visible inside the devcontainer, so yarn link pnpm build:watch & # leave the watcher running cd /root/go/src/github.com/percona/pmm/ui/apps/pmm - yarn link @percona/percona-ui + yarn link @percona/peak-ui ``` 5. Uncomment the `exclude` block in `vite.config.ts`, then back at the repo root: `make run-ui`. diff --git a/ui/apps/pmm/package.json b/ui/apps/pmm/package.json index b159a276dee..3875848d4fb 100644 --- a/ui/apps/pmm/package.json +++ b/ui/apps/pmm/package.json @@ -26,7 +26,7 @@ "@mui/icons-material": "^7.3.7", "@mui/material": "^7.3.7", "@mui/x-date-pickers": "^7.5.0", - "@percona/percona-ui": "1.0.23", + "@percona/peak-ui": "1.0.25", "@pmm/shared": "*", "@reactour/tour": "^3.8.0", "@tanstack/react-query": "^5.45.1", diff --git a/ui/apps/pmm/src/App.tsx b/ui/apps/pmm/src/App.tsx index 928c45f1ff5..04b8057e162 100644 --- a/ui/apps/pmm/src/App.tsx +++ b/ui/apps/pmm/src/App.tsx @@ -8,7 +8,7 @@ import { ThemeContextProvider, pmmThemeOptions, NotistackMuiSnackbar, -} from '@percona/percona-ui'; +} from '@percona/peak-ui'; import { ThemeClass } from 'components/theme-class'; import { useEffect } from 'react'; import type { ComponentType } from 'react'; diff --git a/ui/apps/pmm/src/components/details-pane/DataPoint.tsx b/ui/apps/pmm/src/components/details-pane/DataPoint.tsx index ada32d59cbc..66d9387b0e0 100644 --- a/ui/apps/pmm/src/components/details-pane/DataPoint.tsx +++ b/ui/apps/pmm/src/components/details-pane/DataPoint.tsx @@ -1,7 +1,7 @@ import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import { Tooltip } from '@percona/percona-ui'; +import { Tooltip } from '@percona/peak-ui'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import { FC, PropsWithChildren } from 'react'; import Box from '@mui/material/Box'; diff --git a/ui/apps/pmm/src/components/feature-check/FeatureCheck.tsx b/ui/apps/pmm/src/components/feature-check/FeatureCheck.tsx index d2f478eaa0d..407ec03a165 100644 --- a/ui/apps/pmm/src/components/feature-check/FeatureCheck.tsx +++ b/ui/apps/pmm/src/components/feature-check/FeatureCheck.tsx @@ -1,7 +1,7 @@ import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import { Card } from '@percona/percona-ui'; +import { Card } from '@percona/peak-ui'; import { Page } from 'components/page'; import { useUser } from 'contexts/user'; import { FC } from 'react'; diff --git a/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsx b/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsx index 875deb49373..199883ce7cf 100644 --- a/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsx +++ b/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.test.tsx @@ -5,7 +5,7 @@ import { NavItemProps } from './SidebarNavItem.types'; import { NavItem as NavTreeItem } from 'types/navigation.types'; import { collapseClasses } from '@mui/material/Collapse'; import { MemoryRouterProps } from 'react-router-dom'; -import { ThemeContextProvider, pmmThemeOptions } from '@percona/percona-ui'; +import { ThemeContextProvider, pmmThemeOptions } from '@percona/peak-ui'; const TEST_NAV_TREE: NavTreeItem = { id: 'level-0', diff --git a/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsx b/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsx index d6c0ded0e73..7454e1659c5 100644 --- a/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsx +++ b/ui/apps/pmm/src/components/sidebar/nav-item/SidebarNavItem.tsx @@ -9,7 +9,7 @@ import { } from './SidebarNavItem.utils'; import { getStyles } from './SidebarNavItem.styles'; import { useTheme } from '@mui/material/styles'; -import { NavItem } from '@percona/percona-ui'; +import { NavItem } from '@percona/peak-ui'; import ListItemText from '@mui/material/ListItemText'; import Stack from '@mui/material/Stack'; import ListItem from '@mui/material/ListItem'; diff --git a/ui/apps/pmm/src/hooks/theme.ts b/ui/apps/pmm/src/hooks/theme.ts index 3f0733facd8..7904a31e1e9 100644 --- a/ui/apps/pmm/src/hooks/theme.ts +++ b/ui/apps/pmm/src/hooks/theme.ts @@ -2,7 +2,7 @@ import { useContext, useRef } from 'react'; import { useUpdatePreferences } from './api/useUser'; import messenger from 'lib/messenger'; import { ColorMode, MessageType } from '@pmm/shared'; -import { ColorModeContext } from '@percona/percona-ui'; +import { ColorModeContext } from '@percona/peak-ui'; function normalizeMode(v: unknown): ColorMode { if (typeof v === 'string' && v.toLowerCase() === 'dark') return 'dark'; diff --git a/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx b/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx index 55ab535cb23..73f74c8cd0d 100644 --- a/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/AlertsPage.tsx @@ -11,7 +11,7 @@ import { useAlertmanagerAlerts } from 'hooks/api/useAlertmanagerAlerts'; import { useAlertmanagerSilences } from 'hooks/api/useAlertmanagerSilences'; import { buildSilenceMap, flattenAlertRules } from './AlertsPage.utils'; import { AlertStatusTable } from './table'; -import { useDetailsPaneNavigation } from '@percona/percona-ui'; +import { useDetailsPaneNavigation } from '@percona/peak-ui'; import { AlertRow, AlertsTableRow } from './AlertsPage.types'; import { AlertDetailsPane } from './details-pane'; import { Messages } from './AlertsPage.messages'; diff --git a/ui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsx b/ui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsx index 1110ecbcd3b..f986e58cb19 100644 --- a/ui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/details-pane/AlertDetailsPane.tsx @@ -14,7 +14,7 @@ import { useEscapeKey } from 'utils/keys.utils'; import { AlertsTableRow } from '../AlertsPage.types'; import AlertDetailsTab from './details/AlertDetailsTab'; import { Messages } from './AlertDetailsPane.messages'; -import { UseDetailsPaneNavigationResult } from '@percona/percona-ui'; +import { UseDetailsPaneNavigationResult } from '@percona/peak-ui'; import RawDataTab from './raw-data/RawDataTab'; import { useAlertDetailsPane } from './AlertDetailsPane.utils'; diff --git a/ui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsx b/ui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsx index fe2d22e77c7..841975aa672 100644 --- a/ui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/details-pane/details/AlertDetailsTab.tsx @@ -3,7 +3,7 @@ import { Grid, Stack, Typography } from '@mui/material'; import { Messages } from './AlertDetailsTab.messages'; import DataPoint from 'components/details-pane/DataPoint'; import ValueThreshold from './value-threshold/ValueThreshold'; -import { Chip, CodeBlock } from '@percona/percona-ui'; +import { Chip, CodeBlock } from '@percona/peak-ui'; import { STATUS_COLOR_MAP, STATUS_LABEL_MAP } from '../../AlertsPage.constants'; import { formatTriggeredAt } from '../../table/AlertStatusTable.utils'; import NotificationsOffOutlinedIcon from '@mui/icons-material/NotificationsOffOutlined'; diff --git a/ui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsx b/ui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsx index d48c38f6d26..89f128691be 100644 --- a/ui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/details-pane/raw-data/RawDataTab.tsx @@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography'; import { Messages } from './RawDataTab.messages'; import TableBody from '@mui/material/TableBody'; import { AlertDetailsPane } from '../AlertDetailsPane.types'; -import { CodeBlock } from '@percona/percona-ui'; +import { CodeBlock } from '@percona/peak-ui'; interface Props { details: AlertDetailsPane; diff --git a/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsx b/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsx index 696a70aaea7..1fb39eeb2e3 100644 --- a/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.constants.tsx @@ -1,4 +1,4 @@ -import { Chip, MRT_ColumnDef } from '@percona/percona-ui'; +import { Chip, MRT_ColumnDef } from '@percona/peak-ui'; import { AlertsTableRow } from '../AlertsPage.types'; import type { AlertSeverity as Severity } from 'types/alerting.types'; import { Stack, Typography } from '@mui/material'; diff --git a/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx b/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx index 5d04491338e..175ea22800c 100644 --- a/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx +++ b/ui/apps/pmm/src/pages/alerting/status/table/AlertStatusTable.tsx @@ -1,4 +1,4 @@ -import { Table, useNavigableRows } from '@percona/percona-ui'; +import { Table, useNavigableRows } from '@percona/peak-ui'; import { type MRT_Row } from 'material-react-table'; import { FC, useMemo, useState } from 'react'; import { ALERT_STATUS_COLUMNS } from './AlertStatusTable.constants'; diff --git a/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsx b/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsx index 7c4205000a9..333621f205f 100644 --- a/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsx +++ b/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.tsx @@ -7,7 +7,7 @@ import NorthEast from '@mui/icons-material/NorthEast'; import SaveAlt from '@mui/icons-material/SaveAlt'; import MapOutlined from '@mui/icons-material/MapOutlined'; import { FC, ReactNode, useCallback } from 'react'; -import { semanticTokensLight, semanticTokensDark } from '@percona/percona-ui'; +import { semanticTokensLight, semanticTokensDark } from '@percona/peak-ui'; import { CARD_IDS, START_ICON } from '../HelpCenter.constants'; import { HelpCenterCardProps } from './HelpCenterCard.types'; import { Link } from 'react-router-dom'; diff --git a/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.ts b/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.ts index 9ebdede8c91..5afdd0f769e 100644 --- a/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.ts +++ b/ui/apps/pmm/src/pages/help-center/help-center-card/HelpCenterCard.types.ts @@ -1,4 +1,4 @@ -import type { SemanticTokens } from '@percona/percona-ui'; +import type { SemanticTokens } from '@percona/peak-ui'; export type HelpCardChartKey = keyof SemanticTokens['charts']; diff --git a/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx b/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx index 5637ad7056e..983fe6332ce 100644 --- a/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx +++ b/ui/apps/pmm/src/pages/rta/overview/RealtimeOverview.tsx @@ -5,7 +5,7 @@ import { Link as RouterLink, useSearchParams, } from 'react-router-dom'; -import { useDetailsPaneNavigation } from '@percona/percona-ui'; +import { useDetailsPaneNavigation } from '@percona/peak-ui'; import { RealtimePage } from '../components/rta-page'; import { useRealtimeQueries, useRealtimeSessions } from 'hooks/api/useRealtime'; import OverviewTable from './table/OverviewTable'; diff --git a/ui/apps/pmm/src/pages/rta/overview/details-pane/DetailsPane.tsx b/ui/apps/pmm/src/pages/rta/overview/details-pane/DetailsPane.tsx index f72c8e7a28c..ff05c5887c1 100644 --- a/ui/apps/pmm/src/pages/rta/overview/details-pane/DetailsPane.tsx +++ b/ui/apps/pmm/src/pages/rta/overview/details-pane/DetailsPane.tsx @@ -15,7 +15,7 @@ import { QueryData } from 'types/rta.types'; import { useEscapeKey } from 'utils/keys.utils'; import { Messages } from './DetailsPane.messages'; import QueryAndDetails from './QueryAndDetails'; -import { CodeBlock } from '@percona/percona-ui'; +import { CodeBlock } from '@percona/peak-ui'; interface Props { query?: QueryData; diff --git a/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx b/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx index c126202be68..6fd4e16d6bd 100644 --- a/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx +++ b/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx @@ -2,7 +2,7 @@ import Grid from '@mui/material/Grid'; import { FC } from 'react'; import { format, formatDuration } from 'date-fns'; import { tz } from '@date-fns/tz'; -import { CodeBlock } from '@percona/percona-ui'; +import { CodeBlock } from '@percona/peak-ui'; import { QueryData } from 'types/rta.types'; import DetailsMetric from 'components/details-pane/DataPoint'; import BigNumberMetric from './BigNumberMetric'; diff --git a/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx b/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx index 9448a46c2b3..d4889ba2071 100644 --- a/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx +++ b/ui/apps/pmm/src/pages/rta/overview/table/OverviewTable.tsx @@ -2,7 +2,7 @@ import { type MRT_Row, type MaterialReactTableProps, } from 'material-react-table'; -import { Table, useNavigableRows } from '@percona/percona-ui'; +import { Table, useNavigableRows } from '@percona/peak-ui'; import type { FC } from 'react'; import type { QueryData } from 'types/rta.types'; import { OVERVIEW_TABLE_COLUMNS } from './OverviewTable.constants'; diff --git a/ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx b/ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx index 3a4bc6b1751..39265774561 100644 --- a/ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx +++ b/ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx @@ -1,5 +1,5 @@ import Box from '@mui/material/Box'; -import { CodeBlock } from '@percona/percona-ui'; +import { CodeBlock } from '@percona/peak-ui'; import { FC } from 'react'; export interface Props { diff --git a/ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx b/ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx index 32d42ce82d7..28e6732e0cd 100644 --- a/ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx +++ b/ui/apps/pmm/src/pages/rta/sessions/sessions-table/SessionsTable.tsx @@ -4,7 +4,7 @@ import { FC, useMemo, useState } from 'react'; import { Messages } from './SessionsTable.messages'; import StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined'; import AddOutlinedIcon from '@mui/icons-material/AddOutlined'; -import { Table } from '@percona/percona-ui'; +import { Table } from '@percona/peak-ui'; import { boxClasses, Skeleton, Typography } from '@mui/material'; import { SESSIONS_TABLE_COLUMNS } from './SessionsTable.constants'; import { useRealtimeSessions, useStopSessions } from 'hooks/api/useRealtime'; diff --git a/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-new-session/NewSessionModal.tsx b/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-new-session/NewSessionModal.tsx index bf3849b4c99..276be0e10d1 100644 --- a/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-new-session/NewSessionModal.tsx +++ b/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-new-session/NewSessionModal.tsx @@ -1,6 +1,6 @@ import DialogContent from '@mui/material/DialogContent'; import Typography from '@mui/material/Typography'; -import { Dialog, DialogTitle } from '@percona/percona-ui'; +import { Dialog, DialogTitle } from '@percona/peak-ui'; import { FC } from 'react'; import { Messages } from './NewSessionModal.messages'; import { Messages as RtaMessages } from '../../../messages'; diff --git a/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-multiple-sessions/StopMultipleSessionsModal.tsx b/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-multiple-sessions/StopMultipleSessionsModal.tsx index da58839d4e9..02b9fc4f39e 100644 --- a/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-multiple-sessions/StopMultipleSessionsModal.tsx +++ b/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-multiple-sessions/StopMultipleSessionsModal.tsx @@ -1,7 +1,7 @@ import Button from '@mui/material/Button'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; -import { Dialog, DialogTitle } from '@percona/percona-ui'; +import { Dialog, DialogTitle } from '@percona/peak-ui'; import { FC, useState } from 'react'; import { Messages } from './StopMultipleSessionsModal.messages'; diff --git a/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-session/StopSessionModal.tsx b/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-session/StopSessionModal.tsx index 8599adf5267..e2c52a6228d 100644 --- a/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-session/StopSessionModal.tsx +++ b/ui/apps/pmm/src/pages/rta/sessions/sessions-table/modal-stop-session/StopSessionModal.tsx @@ -1,7 +1,7 @@ import Button from '@mui/material/Button'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; -import { Dialog, DialogTitle } from '@percona/percona-ui'; +import { Dialog, DialogTitle } from '@percona/peak-ui'; import { Messages } from './StopSessionModal.messages'; import { FC, useState } from 'react'; diff --git a/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.tsx b/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.tsx index 0acd16591d4..94446e63d9a 100644 --- a/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.tsx +++ b/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.tsx @@ -12,7 +12,7 @@ import CloseIcon from '@mui/icons-material/Close'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import WarningIcon from '@mui/icons-material/Warning'; -import { TextInput, SwitchInput } from '@percona/percona-ui'; +import { TextInput, SwitchInput } from '@percona/peak-ui'; import { zodResolver } from '@hookform/resolvers/zod'; import { FC, useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; diff --git a/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.tsx b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.tsx index d38714d3922..e55b8e720d2 100644 --- a/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.tsx +++ b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.tsx @@ -1,6 +1,6 @@ import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; -import { TextInput, RadioGroup } from '@percona/percona-ui'; +import { TextInput, RadioGroup } from '@percona/peak-ui'; import { FC, useEffect, useMemo } from 'react'; import { zodResolver } from '@hookform/resolvers/zod'; import { FormProvider, useForm } from 'react-hook-form'; diff --git a/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.tsx b/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.tsx index a34152d2263..915fea7bae0 100644 --- a/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.tsx +++ b/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.tsx @@ -1,5 +1,5 @@ import Stack from '@mui/material/Stack'; -import { TextInput } from '@percona/percona-ui'; +import { TextInput } from '@percona/peak-ui'; import { zodResolver } from '@hookform/resolvers/zod'; import { FC, useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; diff --git a/ui/apps/pmm/src/pages/update-clients/UpdateClients.tsx b/ui/apps/pmm/src/pages/update-clients/UpdateClients.tsx index cd3e405f17c..36fc77907e8 100644 --- a/ui/apps/pmm/src/pages/update-clients/UpdateClients.tsx +++ b/ui/apps/pmm/src/pages/update-clients/UpdateClients.tsx @@ -24,7 +24,7 @@ import { PMM_DOCS_UPDATE_CLIENT_URL } from 'lib/constants'; import { Messages } from './UpdateClients.messages'; import { TextSelect } from 'components/text-select'; import { FILTER_OPTIONS } from './UpdateClients.constants'; -import { Table } from '@percona/percona-ui'; +import { Table } from '@percona/peak-ui'; import { type MRT_ColumnDef } from 'material-react-table'; import { HomeLink } from 'components/home-link'; diff --git a/ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx b/ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx index 5f3fbd5fcdd..f977a92e2c1 100644 --- a/ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx +++ b/ui/apps/pmm/src/pages/updates/change-log/code-block/CodeBlock.tsx @@ -1,4 +1,4 @@ -import { CodeBlock as PerconaCodeBlock } from '@percona/percona-ui'; +import { CodeBlock as PerconaCodeBlock } from '@percona/peak-ui'; import { FC, PropsWithChildren } from 'react'; type Props = PropsWithChildren<{ diff --git a/ui/apps/pmm/src/utils/testWrapper.tsx b/ui/apps/pmm/src/utils/testWrapper.tsx index 66a8a700fc7..0ee543ec639 100644 --- a/ui/apps/pmm/src/utils/testWrapper.tsx +++ b/ui/apps/pmm/src/utils/testWrapper.tsx @@ -2,7 +2,7 @@ import { AuthContext, AuthContextProps } from 'contexts/auth'; import { UserContext, UserContextProps } from 'contexts/user'; import { FC, PropsWithChildren } from 'react'; import { MemoryRouter, MemoryRouterProps } from 'react-router-dom'; -import { pmmThemeOptions, ThemeContextProvider } from '@percona/percona-ui'; +import { pmmThemeOptions, ThemeContextProvider } from '@percona/peak-ui'; import { TEST_USER_ADMIN } from './testStubs'; interface TestWrapperProps extends PropsWithChildren { diff --git a/ui/apps/pmm/vite.config.ts b/ui/apps/pmm/vite.config.ts index 916f28c09dc..7406a8b5534 100644 --- a/ui/apps/pmm/vite.config.ts +++ b/ui/apps/pmm/vite.config.ts @@ -33,8 +33,8 @@ export default defineConfig({ ], }, optimizeDeps: { - // Uncomment when using yarn link for @percona/percona-ui locally - // exclude: ['@percona/percona-ui'], + // Uncomment when using yarn link for @percona/peak-ui locally + // exclude: ['@percona/peak-ui'], force: true, }, server: { @@ -43,7 +43,7 @@ export default defineConfig({ : undefined, watch: { // Watch the linked package for changes (negated pattern means "don't ignore") - ignored: ['!**/node_modules/@percona/percona-ui/**'], + ignored: ['!**/node_modules/@percona/peak-ui/**'], }, proxy: { '/v1': { diff --git a/ui/apps/pmm/vitest.config.ts b/ui/apps/pmm/vitest.config.ts index 79b4d442374..fe37b6b1568 100644 --- a/ui/apps/pmm/vitest.config.ts +++ b/ui/apps/pmm/vitest.config.ts @@ -54,7 +54,7 @@ export default defineConfig({ server: { deps: { fallbackCJS: true, - inline: ['@percona/percona-ui'], + inline: ['@percona/peak-ui'], }, }, }, diff --git a/ui/yarn.lock b/ui/yarn.lock index 0861692a145..facb4f6e152 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -708,9 +708,9 @@ integrity sha512-tpLXlnNi2fwQjiipvuj4uNFHCdoLA8izRsKdoexZuEzjx0r/g1aKLf4ta6lFgF7L+/+AFdmaXFlUwwvmDzYH+g== "@fontsource/poppins@^5.2.7": - version "5.2.7" - resolved "https://registry.yarnpkg.com/@fontsource/poppins/-/poppins-5.2.7.tgz#bad145a8a625340873faff1f95b254f032e0d588" - integrity sha512-6uQyPmseo4FgI97WIhA4yWRlNaoLk4vSDK/PyRwdqqZb5zAEuc+Kunt8JTMcsHYUEGYBtN15SNkMajMdqUSUmg== + version "5.3.0" + resolved "https://registry.yarnpkg.com/@fontsource/poppins/-/poppins-5.3.0.tgz#2b0b95ad6d221ca81f884796429b209837954b89" + integrity sha512-cms1nM7U6SN8epIV1WMVOV8VsA645aSm3wHfzIQnkk188U341ThbJGSl2Sv54V29gnDbT2arMPfLzvVIIVCceQ== "@fontsource/roboto-mono@^5.0.18": version "5.1.0" @@ -718,9 +718,9 @@ integrity sha512-7lIxTeanF2XrwAIukUrOUvO9veGkQiG7L7vizMxVjl+lrTwS4GAYyOvziyGZ6/3kU80K3lGd/FnWrmoTud0V6A== "@fontsource/roboto-mono@^5.2.8": - version "5.2.8" - resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-5.2.8.tgz#b77a6e3f6c0329ed2d762f0aa9c9ea4740bc4ff5" - integrity sha512-M0XPRcvkOKiTPooXwX7yJSNpuad3CPcQwsADBfnopz3apBs+VKI47pc42mlvAxJjNTRauu5rndSxHc8F52bR7Q== + version "5.3.0" + resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-5.3.0.tgz#de1c58d490a42853389caeca05376ecdb295e7e3" + integrity sha512-yhwplHMHW9dCk+1pZuERfcJe+K3rosGVZEoK0XktkxRSqQ9qsipSwwiuW2/8Qmtp9lzu3Ixa/ie4BMH3i8CkZQ== "@fontsource/roboto@^5.0.14": version "5.1.0" @@ -728,9 +728,9 @@ integrity sha512-cFRRC1s6RqPygeZ8Uw/acwVHqih8Czjt6Q0MwoUoDe9U3m4dH1HmNDRBZyqlMSFwgNAUKgFImncKdmDHyKpwdg== "@fontsource/roboto@^5.2.9": - version "5.2.9" - resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-5.2.9.tgz#55092cf992ab8d5082be73b79b42f383a9c0903c" - integrity sha512-ZTkyHiPk74B/aj8BZWbsxD5Yu+Lq+nR64eV4wirlrac2qXR7jYk2h6JlLYuOuoruTkGQWNw2fMuKNavw7/rg0w== + version "5.3.0" + resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-5.3.0.tgz#fd0dcdaa0c6ef3a1621253ea702db933ca1b573a" + integrity sha512-BapRJOWYP+LZ21zp+wBQjfpPYKRoxc4LspJ/RLuI+HSMBD5u/X4O+ESDrSvEqDSy0rAl7GwBJ+09mdc16cVQ1Q== "@formatjs/ecma402-abstract@2.3.6": version "2.3.6" @@ -1620,10 +1620,10 @@ resolved "https://registry.yarnpkg.com/@percona/eslint-config-react/-/eslint-config-react-1.1.0.tgz#db69fcf5d6bb43e6c842f462e2c1c84d5f3eb281" integrity sha512-Tk9mNYslXrxW/gdS/rzxHbLuEXoNCw8r2t/pB8CXZjBl46VLMGspljbyI6525uNNfyO5H0iJQKCJu0Ckf+5erA== -"@percona/percona-ui@1.0.23": - version "1.0.23" - resolved "https://registry.yarnpkg.com/@percona/percona-ui/-/percona-ui-1.0.23.tgz#aa390867cfa1a002924982822462ba688bd18094" - integrity sha512-C2DGyxLJrPdSLDK7YtxFA6UfwPgxfmeQhx+UKyZnAPbOO/mYgKi3RLxFJhZdYCpnb6efrYKIAyqBXpfxCjFshg== +"@percona/peak-ui@1.0.25": + version "1.0.25" + resolved "https://registry.yarnpkg.com/@percona/peak-ui/-/peak-ui-1.0.25.tgz#4d99e3f67db9b357ba6d01fee74fe9f47d78b79f" + integrity sha512-C5CH16mx1Ob9lMrqDq9astS8TI1w25SA8dDjbprm0xOc5XXds3Qn5iJYXZVZTpX9+C70BOpsJIwpN1HZEAve0w== dependencies: "@fontsource/poppins" "^5.2.7" "@fontsource/roboto" "^5.2.9" @@ -3900,9 +3900,9 @@ boolbase@^1.0.0: integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww== brace-expansion@^1.1.7, brace-expansion@^2.0.1, brace-expansion@^2.0.2, brace-expansion@~1.1.12: - version "1.1.15" - resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.15.tgz#a6d90d54067236e5f42570a3b7378d594d9b7738" - integrity sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg== + version "1.1.18" + resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.18.tgz#3ce74d89885136be1535341f8c3d4425c29a5cab" + integrity sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw== dependencies: balanced-match "^1.0.0" concat-map "0.0.1" @@ -5005,9 +5005,9 @@ domhandler@^4.2.0, domhandler@^4.3.1: domelementtype "^2.2.0" dompurify@3.3.0, dompurify@^3.2.7: - version "3.4.11" - resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.11.tgz#29c8ba496475f279ef4015784068452fb14a0680" - integrity sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw== + version "3.4.13" + resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.13.tgz#fc28949d59f92d62e28a3a764bcbeee35897a1be" + integrity sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ== optionalDependencies: "@types/trusted-types" "^2.0.7" @@ -6427,9 +6427,9 @@ ignore@^5.2.0, ignore@^5.2.4, ignore@^5.3.1: integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g== immutable@5.1.4, immutable@^4.0.0, immutable@^5.1.5: - version "5.1.6" - resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.1.6.tgz#21639bc80f9a0713e141a5f5a154ef9fdabf36dd" - integrity sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ== + version "5.1.9" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.1.9.tgz#ac23c3a01992ab665e14ac9ffff298f28cd74a0c" + integrity sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg== import-cwd@^3.0.0: version "3.0.0" @@ -8354,9 +8354,9 @@ nano-css@^5.6.2: stylis "^4.3.0" nanoid@^3.3.11, nanoid@~3.3.8: - version "3.3.12" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.12.tgz#ab3d912e217a6d0a514f00a72a16543a28982c05" - integrity sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ== + version "3.3.17" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.17.tgz#f1c3aa253c52547956a52c50bff754316f61037a" + integrity sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g== natural-compare@^1.4.0: version "1.4.0" @@ -8718,9 +8718,9 @@ picocolors@1.1.1, picocolors@^1.0.0, picocolors@^1.1.1: integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1, picomatch@^4.0.2, picomatch@^4.0.3, picomatch@^4.0.4: - version "4.0.4" - resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.4.tgz#fd6f5e00a143086e074dffe4c924b8fb293b0589" - integrity sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A== + version "4.0.5" + resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.5.tgz#51ea57a17d86f605f81039595fbc40ed06a55fab" + integrity sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A== pify@^5.0.0: version "5.0.0" @@ -9933,9 +9933,9 @@ semver@^7.7.4: integrity sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA== serialize-javascript@^6.0.0, serialize-javascript@^6.0.1, serialize-javascript@^6.0.2, serialize-javascript@^7.0.3: - version "7.0.6" - resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-7.0.6.tgz#f2f20c8af0757e4d8fa329d0210636da0682ddef" - integrity sha512-ATTK5Q4gFVg0YDp1my2vqygyvhcklD/UV5GIlYHooGTn/NogJqIzpetkD6E5kmuVULqz/S9inUL25XcAgDRJQg== + version "7.0.7" + resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-7.0.7.tgz#06ec40576d4cea96d68010a534520bff1f948a72" + integrity sha512-YAy8Od6KV+uuwUuU50np8fGB/Aues6Y0nAhA9y/hId74PlKUcme4pXcBD46NWKr1Q4osN/iseZ17YqO1XfmI8g== set-function-length@^1.2.2: version "1.2.2"