Navigation: use pageNav and subTitle in Dashboards > Settings > Links (#55510)

public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx

@@ -2,15 +2,16 @@ import { within } from '@testing-library/dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { Router } from 'react-router-dom';
 import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
 
 import { selectors } from '@grafana/e2e-selectors';
+import { locationService } from '@grafana/runtime';
 import { GrafanaContext } from 'app/core/context/GrafanaContext';
 
 import { DashboardModel } from '../../state';
 
-import { LinksSettings } from './LinksSettings';
+import { DashboardSettings } from './DashboardSettings';
 
 function setup(dashboard: DashboardModel) {
   const sectionNav = {
@@ -20,11 +21,12 @@ function setup(dashboard: DashboardModel) {
     },
   };
 
+  // Need to use DashboardSettings here as it's responsible for fetching the state back from location
   return render(
     <GrafanaContext.Provider value={getGrafanaContextMock()}>
-      <BrowserRouter>
+      <Router history={locationService.getHistory()}>
-        <LinksSettings dashboard={dashboard} sectionNav={sectionNav} />
+        <DashboardSettings editview="links" dashboard={dashboard} sectionNav={sectionNav} pageNav={sectionNav.node} />
-      </BrowserRouter>
+      </Router>
     </GrafanaContext.Provider>
   );
 }

public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import { NavModelItem } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
 import { Page } from 'app/core/components/PageNew/Page';
 
 import { LinkSettingsEdit, LinkSettingsList } from '../LinksSettings';
@@ -9,28 +11,41 @@ import { SettingsPageProps } from './types';
 
 export type LinkSettingsMode = 'list' | 'new' | 'edit';
 
-export function LinksSettings({ dashboard, sectionNav }: SettingsPageProps) {
+export function LinksSettings({ dashboard, sectionNav, editIndex }: SettingsPageProps) {
-  const [editIdx, setEditIdx] = useState<number | null>(null);
+  const [isNew, setIsNew] = useState<boolean>(false);
 
   const onGoBack = () => {
-    setEditIdx(null);
+    setIsNew(false);
+    locationService.partial({ editIndex: undefined });
   };
 
   const onNew = () => {
     dashboard.links = [...dashboard.links, { ...newLink }];
-    setEditIdx(dashboard.links.length - 1);
+    setIsNew(true);
+    locationService.partial({ editIndex: dashboard.links.length - 1 });
   };
 
   const onEdit = (idx: number) => {
-    setEditIdx(idx);
+    setIsNew(false);
+    locationService.partial({ editIndex: idx });
   };
 
-  const isEditing = editIdx !== null;
+  const isEditing = editIndex !== undefined;
+
+  let pageNav: NavModelItem | undefined;
+  if (isEditing) {
+    const title = isNew ? 'New link' : 'Edit link';
+    const description = isNew ? 'Create a new link on your dashboard' : 'Edit a specific link of your dashboard';
+    pageNav = {
+      text: title,
+      subTitle: description,
+    };
+  }
 
   return (
-    <Page navModel={sectionNav}>
+    <Page navModel={sectionNav} pageNav={pageNav}>
       {!isEditing && <LinkSettingsList dashboard={dashboard} onNew={onNew} onEdit={onEdit} />}
-      {isEditing && <LinkSettingsEdit dashboard={dashboard} editLinkIdx={editIdx!} onGoBack={onGoBack} />}
+      {isEditing && <LinkSettingsEdit dashboard={dashboard} editLinkIdx={editIndex} onGoBack={onGoBack} />}
     </Page>
   );
 }