Navigation: remove description from the backend navmodel and use subTitle instead (#56155)

* remove description from the backend navmodel and use subTitle instead

* only add admin subtitle in topnav

public/app/core/components/AppChrome/NavLandingPage.test.tsx

@@ -14,26 +14,26 @@ describe('NavLandingPage', () => {
   const mockSectionSubtitle = 'Section subtitle';
   const mockChild1 = {
     text: 'Child 1',
-    description: 'Child 1 description',
+    subTitle: 'Child 1 subTitle',
     id: 'child1',
     url: 'mock-section-url/child1',
   };
   const mockChild2 = {
     text: 'Child 2',
-    description: 'Child 2 description',
+    subTitle: 'Child 2 subTitle',
     id: 'child2',
     url: 'mock-section-url/child2',
   };
   const mockChild3 = {
     text: 'Child 3',
     id: 'child3',
-    description: 'Child 3 subtitle',
+    subTitle: 'Child 3 subtitle',
     url: 'mock-section-url/child3',
     hideFromTabs: true,
     children: [
       {
         text: 'Child 3.1',
-        description: 'Child 3.1 description',
+        subTitle: 'Child 3.1 subTitle',
         id: 'child3.1',
         url: 'mock-section-url/child3/child3.1',
       },
@@ -75,10 +75,10 @@ describe('NavLandingPage', () => {
     expect(screen.getByRole('link', { name: mockChild2.text })).toBeInTheDocument();
   });
 
-  it('renders the description for each direct child', () => {
+  it('renders the subTitle for each direct child', () => {
     setup();
-    expect(screen.getByText(mockChild1.description)).toBeInTheDocument();
-    expect(screen.getByText(mockChild2.description)).toBeInTheDocument();
+    expect(screen.getByText(mockChild1.subTitle)).toBeInTheDocument();
+    expect(screen.getByText(mockChild2.subTitle)).toBeInTheDocument();
   });
 
   it('renders the heading for nested sections', () => {
@@ -86,9 +86,9 @@ describe('NavLandingPage', () => {
     expect(screen.getByRole('heading', { name: mockChild3.text })).toBeInTheDocument();
   });
 
-  it('renders the description for a nested section', () => {
+  it('renders the subTitle for a nested section', () => {
     setup();
-    expect(screen.getByText(mockChild3.description)).toBeInTheDocument();
+    expect(screen.getByText(mockChild3.subTitle)).toBeInTheDocument();
   });
 
   it('renders a link for a nested child', () => {
@@ -96,8 +96,8 @@ describe('NavLandingPage', () => {
     expect(screen.getByRole('link', { name: mockChild3.children[0].text })).toBeInTheDocument();
   });
 
-  it('renders the description for a nested child', () => {
+  it('renders the subTitle for a nested child', () => {
     setup();
-    expect(screen.getByText(mockChild3.children[0].description)).toBeInTheDocument();
+    expect(screen.getByText(mockChild3.children[0].subTitle)).toBeInTheDocument();
   });
 });

public/app/core/components/AppChrome/NavLandingPage.tsx

@@ -27,7 +27,7 @@ export function NavLandingPage({ navId }: Props) {
               {directChildren?.map((child) => (
                 <NavLandingPageCard
                   key={child.id}
-                  description={child.description}
+                  description={child.subTitle}
                   text={child.text}
                   url={child.url ?? ''}
                 />
@@ -36,15 +36,13 @@ export function NavLandingPage({ navId }: Props) {
           )}
           {nestedChildren?.map((child) => (
             <section key={child.id}>
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <h2 className={styles.nestedTitle}>{child.text}</h2>
-              </div>
-              <div className={styles.nestedDescription}>{child.description}</div>
+              <h2 className={styles.nestedTitle}>{child.text}</h2>
+              <div className={styles.nestedDescription}>{child.subTitle}</div>
               <div className={styles.grid}>
                 {child.children?.map((child) => (
                   <NavLandingPageCard
                     key={child.id}
-                    description={child.description}
+                    description={child.subTitle}
                     text={child.text}
                     url={child.url ?? ''}
                   />

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

@@ -11,7 +11,7 @@ export interface Props {
 
 export function PageHeader({ navItem, subTitle }: Props) {
   const styles = useStyles2(getStyles);
-  const sub = subTitle ?? navItem.description;
+  const sub = subTitle ?? navItem.subTitle;
 
   return (
     <>