feat(settings): categorize user settings

jest.config.js

@@ -25,7 +25,8 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-    "@app/(.*)": '<rootDir>/src/app/$1'
+    "@app/(.*)": '<rootDir>/src/app/$1',
+    "@i18n/(.*)": '<rootDir>/src/i18n/$1',
   },
 
   // A preset that is used as a base for Jest's configuration

src/app/AppLayout/AppLayout.tsx

@@ -41,40 +41,40 @@ import build from '@app/build.json';
 import { NotificationCenter } from '@app/Notifications/NotificationCenter';
 import { Notification, NotificationsContext } from '@app/Notifications/Notifications';
 import { IAppRoute, navGroups, routes } from '@app/routes';
+import { selectTab } from '@app/Settings/Settings';
 import { DynamicFeatureFlag, FeatureFlag } from '@app/Shared/FeatureFlag/FeatureFlag';
 import { SessionState } from '@app/Shared/Services/Login.service';
 import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { FeatureLevel } from '@app/Shared/Services/Settings.service';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { openTabForUrl } from '@app/utils/utils';
-import { localeReadable } from '@i18n/i18nextUtil';
 import {
   Alert,
+  AlertActionCloseButton,
   AlertGroup,
   AlertVariant,
-  AlertActionCloseButton,
   Brand,
   Button,
   Dropdown,
   DropdownGroup,
   DropdownItem,
   DropdownToggle,
+  Label,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
   Nav,
   NavGroup,
   NavItem,
   NavList,
   NotificationBadge,
   Page,
   PageSidebar,
-  SkipToContent,
-  Label,
-  Masthead,
-  MastheadBrand,
-  MastheadContent,
-  MastheadMain,
-  MastheadToggle,
   PageToggleButton,
+  SkipToContent,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -92,7 +92,6 @@ import {
 } from '@patternfly/react-icons';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Link, matchPath, NavLink, useHistory, useLocation } from 'react-router-dom';
 import { map } from 'rxjs/operators';
 import { AuthModal } from './AuthModal';
@@ -116,7 +115,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const [isNotificationDrawerExpanded, setNotificationDrawerExpanded] = React.useState(false);
   const [showUserIcon, setShowUserIcon] = React.useState(false);
   const [showUserInfoDropdown, setShowUserInfoDropdown] = React.useState(false);
-  const [showLanguageDropdown, setShowLanguageDropdown] = React.useState(false);
   const [showHelpDropdown, setShowHelpDropdown] = React.useState(false);
   const [username, setUsername] = React.useState('');
   const [notifications, setNotifications] = React.useState([] as Notification[]);
@@ -125,8 +123,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const [errorNotificationsCount, setErrorNotificationsCount] = React.useState(0);
   const location = useLocation();
 
-  const [_t, i18n] = useTranslation();
-
   React.useEffect(() => {
     addSubscription(
       serviceContext.target.authFailure().subscribe(() => {
@@ -270,6 +266,14 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     addSubscription(serviceContext.login.setLoggedOut().subscribe());
   }, [serviceContext.login, addSubscription]);
 
+  const handleLanguagePref = React.useCallback(() => {
+    if (routerHistory.location.pathname === '/settings') {
+      selectTab('Language & Region');
+    } else {
+      routerHistory.push('/settings', { preSelectedTab: 'Language & Region' });
+    }
+  }, [routerHistory]);
+
   const handleUserInfoToggle = React.useCallback(() => setShowUserInfoDropdown((v) => !v), [setShowUserInfoDropdown]);
 
   React.useEffect(() => {
@@ -278,11 +282,16 @@ 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>
+      </FeatureFlag>,
       <DropdownGroup key={'log-out'}>
         <DropdownItem onClick={handleLogout}>Log out</DropdownItem>
       </DropdownGroup>,
     ],
-    [handleLogout]
+    [handleLogout, handleLanguagePref]
   );
 
   const UserInfoToggle = React.useMemo(
@@ -337,28 +346,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     ),
     [handleHelpToggle]
   );
-  const handleLanguageToggle = React.useCallback(() => setShowLanguageDropdown((v) => !v), [setShowLanguageDropdown]);
-
-  const languageItems = React.useMemo(
-    () => [
-      <DropdownGroup key={'dropdown-en'}>
-        <DropdownItem onClick={() => i18n.changeLanguage('en')}>English</DropdownItem>
-      </DropdownGroup>,
-      <DropdownGroup key={'dropdown-zh'}>
-        <DropdownItem onClick={() => i18n.changeLanguage('zh')}>中文</DropdownItem>
-      </DropdownGroup>,
-    ],
-    [i18n]
-  );
-
-  const LanguageToggle = React.useMemo(
-    () => (
-      <DropdownToggle onToggle={handleLanguageToggle} toggleIndicator={CaretDownIcon}>
-        {localeReadable(i18n.language)}
-      </DropdownToggle>
-    ),
-    [i18n.language, handleLanguageToggle]
-  );
 
   const levelBadge = React.useCallback((level: FeatureLevel) => {
     return (
@@ -378,17 +365,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
         <Toolbar isFullHeight isStatic>
           <ToolbarContent>
             <ToolbarGroup variant="icon-button-group" alignment={{ default: 'alignRight' }}>
-              <FeatureFlag level={FeatureLevel.BETA}>
-                <ToolbarItem>
-                  <Dropdown
-                    isPlain
-                    onSelect={() => setShowLanguageDropdown(false)}
-                    isOpen={showLanguageDropdown}
-                    toggle={LanguageToggle}
-                    dropdownItems={languageItems}
-                  />
-                </ToolbarItem>
-              </FeatureFlag>
               <FeatureFlag strict level={FeatureLevel.DEVELOPMENT}>
                 <ToolbarItem>
                   <Button
@@ -435,6 +411,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                   onSelect={() => setShowUserInfoDropdown(false)}
                   isOpen={showUserInfoDropdown}
                   toggle={UserInfoToggle}
+                  position="right"
                   dropdownItems={userInfoItems}
                 />
               </ToolbarItem>
@@ -451,17 +428,13 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
       handleSettingsButtonClick,
       setShowHelpDropdown,
       setShowUserInfoDropdown,
-      setShowLanguageDropdown,
       showUserIcon,
       showUserInfoDropdown,
       showHelpDropdown,
-      showLanguageDropdown,
       UserInfoToggle,
       userInfoItems,
       HelpToggle,
       helpItems,
-      LanguageToggle,
-      languageItems,
     ]
   );
 
@@ -480,11 +453,12 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
             </PageToggleButton>
           </MastheadToggle>
           <MastheadMain>
-            <MastheadBrand>
+            <MastheadBrand component={'div'}>
               <Link to="/">
                 <Brand alt="Cryostat" src={cryostatLogo} className="cryostat-logo" />
               </Link>
             </MastheadBrand>
+
             <DynamicFeatureFlag levels={[FeatureLevel.DEVELOPMENT, FeatureLevel.BETA]} component={levelBadge} />
           </MastheadMain>
           <MastheadContent>{HeaderToolbar}</MastheadContent>

src/app/BreadcrumbPage/BreadcrumbPage.tsx

@@ -69,10 +69,16 @@ export const BreadcrumbPage: React.FC<BreadcrumbPageProps> = (props) => {
         </Breadcrumb>
         <Stack hasGutter={true}>
           {React.Children.map(props.children, (child) => (
-            <StackItem isFilled={child && child['isFilled']}>{child}</StackItem>
+            <StackItem isFilled={isItemFilled(child)}>{child}</StackItem>
           ))}
         </Stack>
       </PageSection>
     </>
   );
 };
+
+export const isItemFilled = (item: React.ReactNode): boolean => {
+  if (!item) return false;
+  const toCheck = item['props'] ? item['props'] : item;
+  return toCheck['isFilled'] || toCheck['isFullHeight'];
+};

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisConfigForm.tsx

@@ -277,18 +277,9 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
     return '';
   }, [templateName, templateType]);
 
-  if (errorMessage != '') {
-    return (
-      <ErrorView
-        title={'Error displaying recording configuration settings'}
-        message={errorMessage}
-        retry={isAuthFail(errorMessage) ? authRetry : undefined}
-      />
-    );
-  }
-  return (
-    <Form isHorizontal={props.isSettingsForm}>
-      <FormSection title={props.isSettingsForm ? undefined : 'Profiling Recording Configuration'}>
+  const formContent = React.useMemo(
+    () => (
+      <>
         <FormGroup
           label="Template"
           isRequired
@@ -407,7 +398,52 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
             </HelperText>
           )}
         </ActionGroup>
-      </FormSection>
-    </Form>
+      </>
+    ),
+    [
+      templateName,
+      templateType,
+      templates,
+      isLoading,
+      isSaveLoading,
+      selectedSpecifier,
+      maxSize,
+      maxSizeUnits,
+      maxAge,
+      maxAgeUnits,
+      isFormInvalid,
+      showHelperMessage,
+      createButtonLoadingProps,
+      handleMaxSizeChange,
+      handleMaxAgeChange,
+      handleMaxSizeUnitChange,
+      handleMaxAgeUnitChange,
+      handleSaveConfig,
+      handleSubmit,
+      handleTemplateChange,
+      props.isSettingsForm,
+      saveButtonLoadingProps,
+    ]
+  );
+
+  if (errorMessage != '') {
+    return (
+      <ErrorView
+        title={'Error displaying recording configuration settings'}
+        message={errorMessage}
+        retry={isAuthFail(errorMessage) ? authRetry : undefined}
+      />
+    );
+  }
+  return (
+    <>
+      {props.isSettingsForm ? (
+        formContent
+      ) : (
+        <Form>
+          <FormSection title={'Profiling Recording Configuration'}>{formContent}</FormSection>
+        </Form>
+      )}
+    </>
   );
 };

src/app/DurationPicker/DurationPicker.tsx

@@ -56,7 +56,7 @@ export const DurationPicker: React.FC<DurationPickerProps> = (props) => {
             isRequired
             type="number"
             id="duration-picker-period"
-            aria-describedby="recording-duration-helper"
+            aria-label="Duration Picker Period Input"
             onChange={(v) => props.onPeriodChange(Number(v))}
             isDisabled={!props.enabled}
             min="0"

src/app/Login/Login.tsx

@@ -35,10 +35,22 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import { Language } from '@app/Settings/Language';
+import { FeatureFlag } from '@app/Shared/FeatureFlag/FeatureFlag';
 import { AuthMethod } from '@app/Shared/Services/Login.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
+import { FeatureLevel } from '@app/Shared/Services/Settings.service';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { Card, CardBody, CardFooter, CardTitle, PageSection, Text } from '@patternfly/react-core';
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  PageSection,
+  Text,
+} from '@patternfly/react-core';
 import * as React from 'react';
 import { NotificationsContext } from '../Notifications/Notifications';
 import { BasicAuthDescriptionText, BasicAuthForm } from './BasicAuthForm';
@@ -100,7 +112,12 @@ export const Login: React.FC<LoginProps> = (_) => {
   return (
     <PageSection>
       <Card>
-        <CardTitle>Login</CardTitle>
+        <CardHeader>
+          <CardTitle>Login</CardTitle>
+          <CardActions>
+            <FeatureFlag level={FeatureLevel.BETA}>{React.createElement(Language.content, null)}</FeatureFlag>
+          </CardActions>
+        </CardHeader>
         <CardBody>{loginForm}</CardBody>
         <CardFooter>{descriptionText}</CardFooter>
       </Card>

src/app/Settings/AutoRefresh.tsx

@@ -108,4 +108,5 @@ export const AutoRefresh: UserSetting = {
   description:
     'Set the refresh period for content views. Views normally update dynamically via WebSocket notifications, so this should not be needed unless WebSockets are not working.',
   content: Component,
+  category: 'Connectivity',
 };

src/app/Settings/AutomatedAnalysisConfig.tsx

@@ -72,7 +72,7 @@ const Component = () => {
         <TargetSelect simple />
       </StackItem>
       <StackItem>
-        <Title headingLevel="h2" size="lg">
+        <Title headingLevel="h3" size="md">
           Current configuration
         </Title>
       </StackItem>
@@ -108,4 +108,5 @@ export const AutomatedAnalysisConfig: UserSetting = {
   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.',
   content: Component,
+  category: 'Dashboard',
 };