PMM-15180 Replace local custom SVG icons with peak-ui and MUI components

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",

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';

ui/apps/pmm/src/components/app-bar/AppBar.tsx

@@ -10,6 +10,7 @@ import { Breadcrumbs } from 'components/breadcrumbs';
 import { PMM_SUPPORT_URL } from 'lib/constants';
 import { Messages } from './AppBar.messages';
 import { HomeLink } from 'components/home-link';
+import Help from '@mui/icons-material/Help';
 import { Icon } from 'components/icon';
 
 export const AppBar = () => (
@@ -39,7 +40,7 @@ export const AppBar = () => (
           data-testid="appbar-support-link"
         >
           <Stack gap={1} direction="row" alignItems="center">
-            <Icon name="help-fill" />
+            <Help />
             <Typography>{Messages.support}</Typography>
           </Stack>
         </Link>

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';

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';

ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import { Icon } from 'components/icon';
+import { CirclesExtIcon } from '@percona/peak-ui';
 import { FC } from 'react';
 import { getStyles } from './HighAvailabilityIcon.styles';
 import { HighAvailabilityIconProps } from './HighAvailabilityIcon.types';
@@ -13,7 +14,7 @@ const HighAvailabilityIcon: FC<HighAvailabilityIconProps> = ({ health }) => {
 
   return (
     <Box sx={{ position: 'relative' }}>
-      <Icon data-testid="ha-icon" name="cluster" />
+      <CirclesExtIcon data-testid="ha-icon" />
       {haIcon && (
         <Box
           data-testid="ha-health-icon"

ui/apps/pmm/src/components/icon/Icon.constants.ts

@@ -1,76 +1,20 @@
 export const DYNAMIC_ICON_IMPORT_MAP = {
-  account: () => import('icons/account.svg?react'),
-  alerts: () => import('icons/alerts.svg?react'),
-  backups: () => import('icons/backups.svg?react'),
-  'browse-dashboards': () => import('icons/browse-dashboards.svg?react'),
-  configuration: () => import('icons/configuration.svg?react'),
-  dashboards: () => import('icons/dashboards.svg?react'),
-  encrypted: () => import('icons/users-and-access.svg?react'),
-  explore: () => import('icons/explore.svg?react'),
-  haproxy: () => import('icons/haproxy.svg?react'),
-  help: () => import('icons/help.svg?react'),
-  'help-fill': () => import('icons/help-fill.svg?react'),
-  'high-availability': () => import('icons/high-availability.svg?react'),
-  home: () => import('icons/home.svg?react'),
-  intelligence: () => import('icons/percona-intelligence.svg?react'),
-  inventory: () => import('icons/inventory.svg?react'),
-  'percona-mo': () => import('icons/percona-mo.svg?react'),
-  'percona-my': () => import('icons/percona-my.svg?react'),
-  node: () => import('icons/home.svg?react'),
-  overview: () => import('icons/overview.svg?react'),
-  'percona-po': () => import('icons/percona-po.svg?react'),
   'pmm-titled': () => import('icons/pmm-titled.svg?react'),
   'pmm-titled-outlined': () => import('icons/pmm-titled-outlined.svg?react'),
   'pmm-rounded': () => import('icons/pmm-rounded.svg?react'),
-  proxysql: () => import('icons/proxysql.svg?react'),
-  qan: () => import('icons/qan.svg?react'),
-  'operating-system': () => import('icons/operating-system.svg?react'),
-  'sign-out': () => import('icons/sign-out.svg?react'),
-  summary: () => import('icons/summary.svg?react'),
-  'theme-dark': () => import('icons/theme-dark.svg?react'),
-  'theme-light': () => import('icons/theme-light.svg?react'),
-  'graph-6': () => import('icons/graph-6.svg?react'),
-  percona: () => import('icons/percona.svg?react'),
-  check: () => import('icons/check.svg?react'),
-  'knowledge-base': () => import('icons/knowledge-base.svg?react'),
-  search: () => import('icons/search.svg?react'),
-  'percona-va': () => import('icons/percona-va.svg?react'),
-  'my-organization': () => import('icons/my-organization.svg?react'),
-  memory: () => import('icons/memory.svg?react'),
-  network: () => import('icons/network.svg?react'),
-  'real-time-database-off': () =>
-    import('icons/real-time-database-off.svg?react'),
-  cluster: () => import('icons/cluster.svg?react'),
   'status-at-risk': () => import('icons/status-at-risk.svg?react'),
   'status-down': () => import('icons/status-down.svg?react'),
   'status-updating': () => import('icons/status-updating.svg?react'),
-  'arrow-link': () => import('icons/arrow-link.svg?react'),
-  'bottom-panel-close': () => import('icons/bottom-panel-close.svg?react'),
-  'collapse-content': () => import('icons/collapse-content.svg?react'),
-  'expand-content': () => import('icons/expand-content.svg?react'),
-  'dynamic-feed': () => import('icons/dynamic-feed.svg?react'),
-  'bottom-panel-open': () => import('icons/bottom-panel-open.svg?react'),
-  'electric-bolt': () => import('icons/electric-bolt.svg?react'),
-  'electric-bolt-off': () => import('icons/electric-bolt-off.svg?react'),
-  'play-arrow': () => import('icons/play-arrow.svg?react'),
-  pause: () => import('icons/pause.svg?react'),
-  refresh: () => import('icons/refresh.svg?react'),
-  'file-download': () => import('icons/file-download.svg?react'),
-  // todo: move to percona-ui
+  // todo: move to peak-ui
   'emergency-home': () => import('icons/emergency-home.svg?react'),
-  // todo: move to percona-ui
+  // todo: move to peak-ui
   'chat-info-outlined': () => import('icons/chat-info-outlined.svg?react'),
 };
 
 export const VIEWBOX_MAP: Partial<
   Record<keyof typeof DYNAMIC_ICON_IMPORT_MAP, string>
 > = {
-  percona: '0 0 180 155',
-  'knowledge-base': '0 0 28 28',
   'pmm-rounded': '0 0 160 160',
   'pmm-titled': '0 0 141 48',
   'pmm-titled-outlined': '0 0 252 113',
-  'real-time-database-off': '0 0 192 192',
-  'electric-bolt': '0 0 20 20',
-  'electric-bolt-off': '0 0 20 20',
 };

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',
@@ -150,7 +150,7 @@ describe('SidebarNavItem', () => {
   it('shows dot on root if children has a badge and is hidden', async () => {
     const item: NavTreeItem = {
       id: 'with-badge',
-      icon: 'home',
+      icon: 'pmm-rounded',
       url: '/root',
       children: [
         {

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';

ui/apps/pmm/src/components/sidebar/nav-item/nav-item-icon/NavItemIcon.test.tsx

@@ -7,7 +7,7 @@ const TestMemoizedIcon = memo(TestIcon);
 
 describe('NavItemIcon', () => {
   it('should render an icon (string)', () => {
-    render(<NavItemIcon icon="search" />);
+    render(<NavItemIcon icon="pmm-rounded" />);
     expect(screen).not.toBeNull();
   });