chore(pf5): upgrade Settings view to Patternfly 5

locales/en/common.json

@@ -7,7 +7,7 @@
     "MAXIMUM_SIZE_UNITS_INPUT": "Maximum size units input"
   },
   "AUTOMATED_RULES": "Automated Rules",
-  "BETA": "BETA",
+  "BETA": "Beta",
   "CANCEL": "Cancel",
   "CARD_TYPE": "Card type",
   "CLEAN": "Clean",
@@ -22,7 +22,7 @@
   "DATE": "Date",
   "DELETE": "Delete",
   "DESCRIPTION": "Description",
-  "DEVELOPMENT": "DEVELOPMENT",
+  "DEVELOPMENT": "Development",
   "DISABLE": "Disable",
   "DONOT_ASK_AGAIN": "Don't ask me again",
   "DOWNLOAD": "Download",
@@ -43,6 +43,7 @@
   "MAXIMUM_SIZE_HELPER_TEXT": "The maximum size of Recording data saved to disk.",
   "MERIDIEM_AM": "AM",
   "MERIDIEM_PM": "PM",
+  "MILLISECOND_other": "Milliseconds",
   "MINUTE": "Minute",
   "MINUTE_one": "Minute",
   "MINUTE_other": "Minutes",
@@ -51,12 +52,13 @@
   "NO_DESCRIPTION": "No description",
   "OK": "OK",
   "PRESERVED_ARCHIVES": "Preserved Archives",
-  "PRODUCTION": "PRODUCTION",
+  "PRODUCTION": "Production",
   "REFRESH": "Refresh",
   "REMOVE": "Remove",
   "RENAME": "Rename",
   "RESET": "Reset",
   "RETRY": "Retry",
+  "SAVE": "Save",
   "SCORE": "Score",
   "SECOND": "Second",
   "SECOND_one": "Second",

locales/en/public.json

@@ -19,6 +19,22 @@
       "GUIDED_TOUR": "Guided tour",
       "HELP": "Help",
       "QUICKSTARTS": "Quick starts"
+    },
+    "NOTIFICATIONS": {
+      "OVERFLOW_MESSAGE_one": "View one more",
+      "OVERFLOW_MESSAGE_other": "View {{count}} more"
+    },
+    "TOOLBAR": {
+      "ARIA_LABELS": {
+        "GLOBAL_NAVIGATION": "Global navigation",
+        "NAVIGATION": "Navigation",
+        "NOTIFICATIONS": "Notifications",
+        "SETTINGS": "Settings"
+      }
+    },
+    "USER_MENU": {
+      "LANGUAGE_PREFERENCE": "<Icon/> Language preference",
+      "LOGOUT": "Log out"
     }
   },
   "AutomatedAnalysisCard": {
@@ -75,9 +91,8 @@
     "CURRENT_CONFIG": "Current configuration",
     "FORM_TITLE": "Profiling Recording configuration",
     "FORMATTED_TEMPLATE": "Name: {{template.name}}, Type: {{template.type}}",
-    "MAXIMUM_AGE": "Maximum age ({{unit}})",
-    "MAXIMUM_SIZE": "Maximum size ({{unit}})",
-    "SAVE_CHANGES": "Save changes",
+    "MAXIMUM_AGE": "Maximum age",
+    "MAXIMUM_SIZE": "Maximum size",
     "TEMPLATE_HELPER_TEXT": "The Event Template to be applied to automated analysis Recordings.",
     "TEMPLATE_INVALID_WARNING": "WARNING: Setting a target template as a default template type configuration may not apply to all target JVMs if the JVMs do not support them."
   },
@@ -339,7 +354,7 @@
     },
     "AUTOMATED_ANALYSIS_CONFIG": {
       "DESCRIPTION": "Set the Recording configuration for automated analysis Recordings. You may want smaller or larger values for max-age and max-size depending on how recent you want events to be recorded from the analysis.",
-      "TITLE": "Automated analysis Recording configuration"
+      "TITLE": "Recording configuration for Automated analysis"
     },
     "CATEGORIES": {
       "ADVANCED": "Advanced",
@@ -371,6 +386,7 @@
       },
       "DESCRIPTION": "",
       "LOCALE_SELECT_DESCRIPTION": "Select current date locale.",
+      "SEARCH_PLACEHOLDER": "Filter by locale...",
       "TIMEZONE_SELECT_DESCRIPTION": "Select current timezone.",
       "TITLE": "Date & Time"
     },
@@ -381,7 +397,10 @@
       "TITLE": "Show deletion dialogs"
     },
     "FEATURE_LEVEL": {
+      "BETA_DESCRIPTION": "Experimental features",
       "DESCRIPTION": "Control which graphical features appear in the application.",
+      "DEVELOPMENT_DESCRIPTION": "Under development features",
+      "PRODUCTION_DESCRIPTION": "Stable production-ready features",
       "TITLE": "Feature level"
     },
     "LANGUAGE": {
@@ -413,6 +432,27 @@
       "TITLE": "WebSocket retry interval"
     }
   },
+  "ShortCuts": {
+    "ARIA_LABELS": {
+      "TABLE": "Shortcuts table"
+    }
+  },
+  "TargetContextSelector": {
+    "CLEAR_SELECTION": "Clear selection",
+    "CREATE_TARGET": "Create Target",
+    "NO_SEARCH_MATCHES": "No Target found",
+    "SEARCH_PLACEHOLDER": "Filter by URL, alias, or discovery group...",
+    "TOGGLE_LABEL": "Select Target",
+    "TOGGLE_PLACEHOLDER": "Select a Target"
+  },
+  "TargetSelect": {
+    "ARIA_LABELS": {
+      "CARD_DETAILS": "Details"
+    },
+    "CARD": {
+      "TITLE": "Target JVM"
+    }
+  },
   "TimePicker": {
     "24HOUR": "24-hour",
     "USE_24HR_TIME": "Use 24-hour time"
@@ -435,7 +475,8 @@
     "ARIA_LABELS": {
       "SELECT": "Select a timezone",
       "TYPE_AHEAD": "Search a timezone"
-    }
+    },
+    "SEARCH_PLACEHOLDER": "Filter by timezone..."
   },
   "Topology": {
     "GRAPH_VIEW": "Graph view",

src/app/AppLayout/AppLayout.tsx

@@ -24,7 +24,7 @@ import { useJoyride } from '@app/Joyride/JoyrideProvider';
 import { GlobalQuickStartDrawer } from '@app/QuickStarts/QuickStartDrawer';
 import { IAppRoute, navGroups, routes } from '@app/routes';
 import { ThemeSetting, SettingTab } from '@app/Settings/types';
-import { selectTab, tabAsParam } from '@app/Settings/utils';
+import { DARK_THEME_CLASS, selectTab, tabAsParam } from '@app/Settings/utils';
 import { DynamicFeatureFlag, FeatureFlag } from '@app/Shared/Components/FeatureFlag';
 import { NotificationCategory, Notification } from '@app/Shared/Services/api.types';
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
@@ -64,25 +64,25 @@ import {
   MenuToggleElement,
   MenuToggle,
   DropdownList,
-  DropdownGroup,
   DropdownItem,
   Dropdown,
 } from '@patternfly/react-core';
 import {
   BarsIcon,
   BellIcon,
-  CaretDownIcon,
   CogIcon,
   ExternalLinkAltIcon,
+  LanguageIcon,
   PlusCircleIcon,
   QuestionCircleIcon,
   UserIcon,
 } from '@patternfly/react-icons';
 import _ from 'lodash';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { Link, matchPath, NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { map } from 'rxjs/operators';
+import { ThemeToggle } from './ThemeToggle';
 
 export interface AppLayoutProps {
   children?: React.ReactNode;
@@ -120,9 +120,9 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 
   React.useEffect(() => {
     if (theme === ThemeSetting.DARK) {
-      document.documentElement.classList.add('pf-theme-dark');
+      document.documentElement.classList.add(DARK_THEME_CLASS);
     } else {
-      document.documentElement.classList.remove('pf-theme-dark');
+      document.documentElement.classList.remove(DARK_THEME_CLASS);
     }
   }, [theme]);
 
@@ -167,10 +167,10 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     }
     const overflow = notificationsToDisplay.length - visibleNotificationsCount;
     if (overflow > 0) {
-      return `View ${overflow} more`;
+      return t('AppLayout.NOTIFICATIONS.OVERFLOW_MESSAGE', { count: overflow });
     }
     return '';
-  }, [isNotificationDrawerExpanded, notificationsToDisplay, visibleNotificationsCount]);
+  }, [isNotificationDrawerExpanded, notificationsToDisplay, visibleNotificationsCount, t]);
 
   React.useEffect(() => {
     addSubscription(notificationsContext.unreadNotifications().subscribe((s) => setUnreadNotificationsCount(s.length)));
@@ -283,20 +283,20 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const userInfoItems = React.useMemo(
     () => [
       <FeatureFlag level={FeatureLevel.BETA} key={'language-preferences-feature-flag'}>
-        <DropdownGroup key={'language-preferences'}>
-          <DropdownItem onClick={handleLanguagePref}>Language preference</DropdownItem>
-        </DropdownGroup>
+        <DropdownItem key={'language-preferences'} onClick={handleLanguagePref}>
+          <Trans t={t} components={{ Icon: <LanguageIcon /> }} i18nKey="AppLayout.USER_MENU.LANGUAGE_PREFERENCE" />
+        </DropdownItem>
       </FeatureFlag>,
-      <DropdownGroup key={'log-out'}>
-        <DropdownItem onClick={handleLogout}>Log out</DropdownItem>
-      </DropdownGroup>,
+      <DropdownItem key={'log-out'} onClick={handleLogout}>
+        {t('AppLayout.USER_MENU.LOGOUT')}
+      </DropdownItem>,
     ],
-    [handleLogout, handleLanguagePref],
+    [t, handleLogout, handleLanguagePref],
   );
 
-  const UserInfoToggle = React.useCallback(
+  const userInfoToggle = React.useCallback(
     (toggleRef: React.Ref<MenuToggleElement>) => (
-      <MenuToggle variant="plainText" ref={toggleRef} onClick={handleUserInfoToggle} icon={CaretDownIcon}>
+      <MenuToggle variant="plainText" ref={toggleRef} onClick={handleUserInfoToggle}>
         {username || (
           <Icon size="sm">
             <UserIcon color="white" />
@@ -355,17 +355,20 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     ];
   }, [t, handleOpenDocumentation, handleOpenGuidedTour, handleOpenDiscussion, handleOpenAboutModal]);
 
-  const levelBadge = React.useCallback((level: FeatureLevel) => {
-    return (
-      <Label
-        isCompact
-        style={{ marginLeft: '2ch', textTransform: 'capitalize', paddingTop: '0.125ch', paddingBottom: '0.125ch' }}
-        color={level === FeatureLevel.BETA ? 'green' : 'red'}
-      >
-        {FeatureLevel[level].toLowerCase()}
-      </Label>
-    );
-  }, []);
+  const levelBadge = React.useCallback(
+    (level: FeatureLevel) => {
+      return (
+        <Label
+          isCompact
+          style={{ marginLeft: '2ch', paddingTop: '0.125ch', paddingBottom: '0.125ch' }}
+          color={level === FeatureLevel.BETA ? 'cyan' : 'red'}
+        >
+          {t(FeatureLevel[level])}
+        </Label>
+      );
+    },
+    [t],
+  );
 
   const headerToolbar = React.useMemo(
     () => (
@@ -386,6 +389,11 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                   />
                 </ToolbarItem>
               </FeatureFlag>
+              <ToolbarGroup variant="icon-button-group" spacer={{ default: 'spacerSm' }}>
+                <ToolbarItem>
+                  <ThemeToggle />
+                </ToolbarItem>
+              </ToolbarGroup>
               <ToolbarGroup variant="icon-button-group">
                 <ToolbarItem>
                   <NotificationBadge
@@ -394,7 +402,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                       errorNotificationsCount > 0 ? 'attention' : unreadNotificationsCount === 0 ? 'read' : 'unread'
                     }
                     onClick={handleNotificationCenterToggle}
-                    aria-label="Notifications"
+                    aria-label={t('AppLayout.TOOLBAR.ARIA_LABELS.NOTIFICATIONS')}
                   >
                     <Icon>
                       <BellIcon />
@@ -404,7 +412,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                 <ToolbarItem>
                   <Button
                     variant="plain"
-                    aria-label="Settings"
+                    aria-label={t('AppLayout.TOOLBAR.ARIA_LABELS.SETTINGS')}
                     data-tour-id="settings-link"
                     data-quickstart-id="settings-link"
                     component={(props) => <Link {...props} to="/settings" />}
@@ -431,7 +439,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                       </MenuToggle>
                     )}
                     isOpen={showHelpDropdown}
-                    onOpenChange={(v) => setShowHelpDropdown(v)}
+                    onOpenChange={setShowHelpDropdown}
                     onOpenChangeKeys={['Escape']}
                     popperProps={{
                       position: 'right',
@@ -444,9 +452,9 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
               <ToolbarItem visibility={{ default: 'visible' }}>
                 <Dropdown
                   onSelect={() => setShowUserInfoDropdown(false)}
-                  toggle={UserInfoToggle}
+                  toggle={userInfoToggle}
                   isOpen={showUserInfoDropdown}
-                  onOpenChange={(v) => setShowUserInfoDropdown(v)}
+                  onOpenChange={setShowUserInfoDropdown}
                   onOpenChangeKeys={['Escape']}
                   popperProps={{
                     position: 'right',
@@ -469,9 +477,10 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
       setShowUserInfoDropdown,
       showUserInfoDropdown,
       showHelpDropdown,
-      UserInfoToggle,
+      userInfoToggle,
       userInfoItems,
       helpItems,
+      t,
     ],
   );
 
@@ -482,7 +491,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           <MastheadToggle>
             <PageToggleButton
               variant="plain"
-              aria-label="Navigation"
+              aria-label={t('AppLayout.TOOLBAR.ARIA_LABELS.NAVIGATION')}
               isSidebarOpen={isNavOpen}
               onSidebarToggle={onNavToggle}
               data-quickstart-id="nav-toggle-btn"
@@ -506,7 +515,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
         <AboutCryostatModal isOpen={aboutModalOpen} onClose={handleCloseAboutModal} />
       </>
     ),
-    [isNavOpen, aboutModalOpen, headerToolbar, handleCloseAboutModal, onNavToggle, levelBadge],
+    [isNavOpen, aboutModalOpen, headerToolbar, handleCloseAboutModal, onNavToggle, levelBadge, t],
   );
 
   const isActiveRoute = React.useCallback(
@@ -528,7 +537,13 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
 
   const Navigation = React.useMemo(
     () => (
-      <Nav id="nav-primary-simple" theme="dark" variant="default" onSelect={mobileOnSelect} aria-label="Global nav">
+      <Nav
+        id="nav-primary-simple"
+        theme="dark"
+        variant="default"
+        onSelect={mobileOnSelect}
+        aria-label={t('AppLayout.TOOLBAR.ARIA_LABELS.GLOBAL_NAVIGATION')}
+      >
         {navGroups.map((title) => {
           return (
             <NavGroup title={title} key={title}>
@@ -562,7 +577,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
         })}
       </Nav>
     ),
-    [mobileOnSelect, isActiveRoute, levelBadge, activeLevel],
+    [mobileOnSelect, isActiveRoute, levelBadge, activeLevel, t],
   );
 
   const Sidebar = React.useMemo(

src/app/AppLayout/NotificationCenter.tsx

@@ -148,7 +148,6 @@ export const NotificationCenter: React.FC<NotificationCenterProps> = ({ onClose
       <NotificationDrawer>
         <NotificationDrawerHeader count={totalUnreadNotificationsCount} onClose={onClose}>
           <Dropdown
-            isPlain
             onSelect={handleToggleDropdown}
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
@@ -164,6 +163,8 @@ export const NotificationCenter: React.FC<NotificationCenterProps> = ({ onClose
             popperProps={{
               position: 'right',
             }}
+            onOpenChange={setHeaderDropdownOpen}
+            onOpenChangeKeys={['Escape']}
           >
             <DropdownList>{drawerDropdownItems}</DropdownList>
           </Dropdown>