Page: Update profile page components to use new navId (#51664)

.betterer.results

@@ -10436,4 +10436,4 @@ exports[`no undocumented stories`] = {
       [0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
     ]
   }`
-};
+};

pkg/api/index.go

@@ -36,17 +36,17 @@ func (hs *HTTPServer) getProfileNode(c *models.ReqContext) *dtos.NavLink {
 
 	children := []*dtos.NavLink{
 		{
-			Text: "Preferences", Id: "profile-settings", Url: hs.Cfg.AppSubURL + "/profile", Icon: "sliders-v-alt",
+			Text: "Preferences", Id: "profile/settings", Url: hs.Cfg.AppSubURL + "/profile", Icon: "sliders-v-alt",
 		},
 	}
 
 	children = append(children, &dtos.NavLink{
-		Text: "Notification history", Id: "notifications", Url: hs.Cfg.AppSubURL + "/notifications", Icon: "bell",
+		Text: "Notification history", Id: "profile/notifications", Url: hs.Cfg.AppSubURL + "profile/notifications", Icon: "bell",
 	})
 
 	if setting.AddChangePasswordLink() {
 		children = append(children, &dtos.NavLink{
-			Text: "Change password", Id: "change-password", Url: hs.Cfg.AppSubURL + "/profile/password",
+			Text: "Change password", Id: "profile/password", Url: hs.Cfg.AppSubURL + "/profile/password",
 			Icon: "lock",
 		})
 	}

public/app/core/components/NavBar/navBarItem-translations.ts

@@ -54,8 +54,8 @@ const TRANSLATED_MENU_ITEMS: Record<string, MessageDescriptor> = {
 
   help: defineMessage({ id: 'nav.help', message: 'Help' }),
 
-  'profile-settings': defineMessage({ id: 'nav.profile-settings', message: 'Preferences' }),
+  'profile-settings': defineMessage({ id: 'nav.profile/settings', message: 'Preferences' }),
-  'change-password': defineMessage({ id: 'nav.change-password', message: 'Change password' }),
+  'change-password': defineMessage({ id: 'nav.profile/password', message: 'Change password' }),
   'sign-out': defineMessage({ id: 'nav.sign-out', message: 'Sign out' }),
 };
 

public/app/core/components/PageNew/SectionNav.tsx

@@ -19,7 +19,7 @@ export function SectionNav(props: Props) {
     <nav className={styles.nav}>
       <h2 className={styles.sectionName}>
         {main.icon && <Icon name={main.icon as IconName} size="lg" />}
-        {main.img && <img className="page-header__img" src={main.img} alt={`logo of ${main.text}`} />}
+        {main.img && <img className={styles.sectionImg} src={main.img} alt={`logo of ${main.text}`} />}
         {props.model.main.text}
       </h2>
       <div className={styles.items}>
@@ -75,6 +75,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     sectionName: css({
       display: 'flex',
+      alignItems: 'center',
       gap: theme.spacing(1),
       padding: theme.spacing(0.5, 0, 3, 0.25),
       fontSize: theme.typography.h4.fontSize,
@@ -83,6 +84,9 @@ const getStyles = (theme: GrafanaTheme2) => {
     items: css({
       // paddingLeft: '9px',
     }),
+    sectionImg: css({
+      height: 48,
+    }),
     subSection: css({
       padding: theme.spacing(3, 0, 1, 1),
       fontWeight: 500,

public/app/features/notifications/NotificationsPage.tsx

@@ -1,27 +1,12 @@
 import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
 
 import { Page } from 'app/core/components/Page/Page';
 
-import { GrafanaRouteComponentProps } from '../../core/navigation/types';
-import { getNavModel } from '../../core/selectors/navModel';
-import { StoreState } from '../../types';
-
 import { StoredNotifications } from './StoredNotifications';
 
-const mapStateToProps = (state: StoreState) => ({
+export const NotificationsPage = () => {
-  navModel: getNavModel(state.navIndex, 'notifications'),
-});
-
-const connector = connect(mapStateToProps, undefined);
-
-interface OwnProps extends GrafanaRouteComponentProps {}
-
-type Props = OwnProps & ConnectedProps<typeof connector>;
-
-export const NotificationsPage = ({ navModel }: Props) => {
   return (
-    <Page navModel={navModel}>
+    <Page navId="profile/notifications">
       <Page.Contents>
         <StoredNotifications />
       </Page.Contents>
@@ -29,4 +14,4 @@ export const NotificationsPage = ({ navModel }: Props) => {
   );
 };
 
-export default connect(mapStateToProps)(NotificationsPage);
+export default NotificationsPage;

public/app/features/profile/ChangePasswordPage.test.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 
 import config from 'app/core/config';
 
-import { getNavModel } from '../../core/selectors/navModel';
 import { backendSrv } from '../../core/services/backend_srv';
 
 import { Props, ChangePasswordPage } from './ChangePasswordPage';
@@ -22,23 +21,6 @@ const defaultProps: Props = {
     orgId: 0,
     authLabels: ['github'],
   },
-  navModel: getNavModel(
-    {
-      'profile-settings': {
-        icon: 'sliders-v-alt',
-        id: 'profile-settings',
-        parentItem: {
-          id: 'profile',
-          text: 'Test User',
-          img: '/avatar/46d229b033af06a191ff2267bca9ae56',
-          url: '/profile',
-        },
-        text: 'Preferences',
-        url: '/profile',
-      },
-    },
-    'profile-settings'
-  ),
   loadUser: jest.fn(),
   changePassword: jest.fn(),
 };

public/app/features/profile/ChangePasswordPage.tsx

@@ -2,23 +2,18 @@ import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { useMount } from 'react-use';
 
-import { NavModel } from '@grafana/data';
 import { Page } from 'app/core/components/Page/Page';
-import { getNavModel } from 'app/core/selectors/navModel';
 import { StoreState } from 'app/types';
 
 import { ChangePasswordForm } from './ChangePasswordForm';
 import { changePassword, loadUser } from './state/actions';
 
-export interface OwnProps {
+export interface OwnProps {}
-  navModel: NavModel;
-}
 
 function mapStateToProps(state: StoreState) {
   const userState = state.user;
   const { isUpdating, user } = userState;
   return {
-    navModel: getNavModel(state.navIndex, `change-password`),
     isUpdating,
     user,
   };
@@ -33,11 +28,11 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
 
 export type Props = OwnProps & ConnectedProps<typeof connector>;
 
-export function ChangePasswordPage({ navModel, loadUser, isUpdating, user, changePassword }: Props) {
+export function ChangePasswordPage({ loadUser, isUpdating, user, changePassword }: Props) {
   useMount(() => loadUser());
 
   return (
-    <Page navModel={navModel}>
+    <Page navId="profile/password">
       <Page.Contents isLoading={!Boolean(user)}>
         {user ? (
           <>

public/app/features/profile/UserProfileEditPage.test.tsx

@@ -7,7 +7,6 @@ import { OrgRole } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import TestProvider from '../../../test/helpers/TestProvider';
-import { getNavModel } from '../../core/selectors/navModel';
 import { backendSrv } from '../../core/services/backend_srv';
 import { TeamPermissionLevel } from '../../types';
 
@@ -66,23 +65,6 @@ const defaultProps: Props = {
       seenAt: new Date().toUTCString(),
     },
   ],
-  navModel: getNavModel(
-    {
-      'profile-settings': {
-        icon: 'sliders-v-alt',
-        id: 'profile-settings',
-        parentItem: {
-          id: 'profile',
-          text: 'Test User',
-          img: '/avatar/46d229b033af06a191ff2267bca9ae56',
-          url: '/profile',
-        },
-        text: 'Preferences',
-        url: '/profile',
-      },
-    },
-    'profile-settings'
-  ),
   initUserProfilePage: jest.fn().mockResolvedValue(undefined),
   revokeUserSession: jest.fn().mockResolvedValue(undefined),
   changeUserOrg: jest.fn().mockResolvedValue(undefined),

public/app/features/profile/UserProfileEditPage.tsx

@@ -2,11 +2,9 @@ import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { useMount } from 'react-use';
 
-import { NavModel } from '@grafana/data';
 import { VerticalGroup } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import SharedPreferences from 'app/core/components/SharedPreferences/SharedPreferences';
-import { getNavModel } from 'app/core/selectors/navModel';
 import { StoreState } from 'app/types';
 
 import UserOrganizations from './UserOrganizations';
@@ -15,15 +13,12 @@ import UserSessions from './UserSessions';
 import { UserTeams } from './UserTeams';
 import { changeUserOrg, initUserProfilePage, revokeUserSession, updateUserProfile } from './state/actions';
 
-export interface OwnProps {
+export interface OwnProps {}
-  navModel: NavModel;
-}
 
 function mapStateToProps(state: StoreState) {
   const userState = state.user;
   const { user, teams, orgs, sessions, teamsAreLoading, orgsAreLoading, sessionsAreLoading, isUpdating } = userState;
   return {
-    navModel: getNavModel(state.navIndex, 'profile-settings'),
     orgsAreLoading,
     sessionsAreLoading,
     teamsAreLoading,
@@ -47,7 +42,6 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
 export type Props = OwnProps & ConnectedProps<typeof connector>;
 
 export function UserProfileEditPage({
-  navModel,
   orgsAreLoading,
   sessionsAreLoading,
   teamsAreLoading,
@@ -64,7 +58,7 @@ export function UserProfileEditPage({
   useMount(() => initUserProfilePage());
 
   return (
-    <Page navModel={navModel}>
+    <Page navId="profile/settings">
       <Page.Contents isLoading={!user}>
         <VerticalGroup spacing="md">
           <UserProfileEditForm updateProfile={updateUserProfile} isSavingUser={isUpdating} user={user} />

public/app/features/profile/routes.tsx

@@ -23,6 +23,12 @@ const profileRoutes: RouteDescriptor[] = [
       () => import(/* webpackChunkName: "SelectOrgPage" */ 'app/features/org/SelectOrgPage')
     ),
   },
+  {
+    path: '/profile/notifications',
+    component: SafeDynamicImport(
+      () => import(/* webpackChunkName: "NotificationsPage"*/ 'app/features/notifications/NotificationsPage')
+    ),
+  },
 ];
 
 export function getProfileRoutes(cfg = config): RouteDescriptor[] {