From d5f0ef91b3b1a316f14abed982fa234895c2ac4c Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Wed, 12 Aug 2026 08:39:23 -0400 Subject: [PATCH 1/7] Initial updates to PF v6.6, add felt theme and contrast prefs --- apps/app-frontend/index.html | 21 +++ apps/app-frontend/package.json | 10 +- apps/app-frontend/src/shell/AppShell.tsx | 11 +- apps/app-frontend/src/shell/ShellMasthead.tsx | 40 ++--- apps/app-frontend/src/shell/ShellSidebar.tsx | 2 +- libs/i18n/locales/en/translation.json | 21 +++ .../ErrorBoundary/ErrorBoundary.tsx | 2 +- .../Project/ProjectListPage.test.tsx | 6 + .../UserPreferences/UserPreferencesModal.tsx | 99 ++++++++-- libs/ui-components/src/hooks/use-session.tsx | 11 +- libs/ui-components/src/hooks/use-theme.ts | 124 ++++++++++--- pnpm-lock.yaml | 170 +++++++++++++++--- 12 files changed, 422 insertions(+), 95 deletions(-) diff --git a/apps/app-frontend/index.html b/apps/app-frontend/index.html index 5239fe4c..222eb0dc 100644 --- a/apps/app-frontend/index.html +++ b/apps/app-frontend/index.html @@ -5,6 +5,27 @@ OSAC +
diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json index e74e48da..d6202768 100644 --- a/apps/app-frontend/package.json +++ b/apps/app-frontend/package.json @@ -15,11 +15,11 @@ "@connectrpc/connect-web": "^2.1.2", "@osac/types": "workspace:*", "@osac/ui-components": "workspace:*", - "@patternfly/patternfly": "^6.4.0", - "@patternfly/react-charts": "^8.0.0", - "@patternfly/react-core": "^6.4.1", - "@patternfly/react-icons": "^6.4.0", - "@patternfly/react-table": "^6.4.0", + "@patternfly/patternfly": "^6.6.1", + "@patternfly/react-charts": "^8.6.1", + "@patternfly/react-core": "^6.6.1", + "@patternfly/react-icons": "^6.6.1", + "@patternfly/react-table": "^6.6.1", "@tanstack/react-query": "^5.0.0", "i18next": "^23.0.0", "i18next-browser-languagedetector": "^8.0.0", diff --git a/apps/app-frontend/src/shell/AppShell.tsx b/apps/app-frontend/src/shell/AppShell.tsx index 541029b5..c10c54d5 100644 --- a/apps/app-frontend/src/shell/AppShell.tsx +++ b/apps/app-frontend/src/shell/AppShell.tsx @@ -1,6 +1,6 @@ import { type ReactNode } from 'react'; import { Navigate, Route, Routes, useLocation } from 'react-router-dom'; -import { Page } from '@patternfly/react-core'; +import { Page, SkipToContent } from '@patternfly/react-core'; import ErrorBoundary from '@osac/ui-components/components/ErrorBoundary/ErrorBoundary'; import IdentityProviderRoutes from '@osac/ui-components/components/IdentityProvider/IdentityProviderRoutes'; @@ -8,6 +8,7 @@ import ProjectRoutes from '@osac/ui-components/components/Project/ProjectRoutes' import RoleBindingRoutes from '@osac/ui-components/components/RoleBinding/RoleBindingRoutes'; import { VmDetailsPage } from '@osac/ui-components/components/vm/VmDetailsPage'; import { useSession } from '@osac/ui-components/hooks/use-session'; +import { useTranslation } from '@osac/ui-components/hooks/useTranslation'; import { SecurityGroupDetailPage } from '@osac/ui-components/pages/networking/SecurityGroupDetailPage'; import { SecurityGroupsListPage } from '@osac/ui-components/pages/networking/SecurityGroupsListPage'; import { VirtualNetworkDetailPage } from '@osac/ui-components/pages/networking/VirtualNetworkDetailPage'; @@ -25,6 +26,8 @@ import { ShellSidebar } from './ShellSidebar'; import { StorageRoutes } from './StorageRoutes'; import { TenantRoutes } from './TenantRoutes'; +const MAIN_CONTENT_ID = 'osac-main-content'; + const ShellRoute = ({ children }: { children: ReactNode }) => { const { pathname } = useLocation(); @@ -33,6 +36,7 @@ const ShellRoute = ({ children }: { children: ReactNode }) => { export const AppShell = ({ logout }: { logout: () => Promise }) => { const { role } = useSession(); + const { t } = useTranslation(); const defaultRoute = defaultRouteForRole(role); @@ -41,6 +45,11 @@ export const AppShell = ({ logout }: { logout: () => Promise }) => { masthead={} sidebar={} isManagedSidebar + mainContainerId={MAIN_CONTENT_ID} + skipToContent={ + {t('Skip to content')} + } + isContentFilled > { const [logoutError, setLogoutError] = React.useState(); const navigate = useNavigate(); const { role, username, tenantId } = useSession(); - const displayName = username || 'User'; + const displayName = username || t('User'); return ( <> {logoutError && ( setLogoutError(undefined)}> - + @@ -68,22 +66,18 @@ export const ShellMasthead = ({ onLogout }: ShellMastheadProps) => { - - - + - - - - - Red Hat OSAC - - {tenantId && ( - {t('Tenant: {{ tenantId }}', { tenantId })} - )} - - - + + + + {t('Red Hat OSAC')} + + {tenantId && ( + {t('Tenant: {{ tenantId }}', { tenantId })} + )} + + @@ -106,7 +100,7 @@ export const ShellMasthead = ({ onLogout }: ShellMastheadProps) => { isExpanded={isUserMenuOpen} onClick={() => setIsUserMenuOpen(!isUserMenuOpen)} icon={} - aria-label="Account menu" + aria-label={t('Account menu')} > {displayName}{' '}