From a2964731ebdb3afc275d33d446b55fc4c3c2dce0 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 28 Sep 2023 16:15:00 +0100
Subject: [PATCH] Navigation: Change dashboard settings to use tabs when
 `dockedMegaMenu` is enabled (#75463)

* kinda working

* return to selected parents

* feature toggle everything

* fix toggling of annotations

* use Trans instead of Text

* kick drone
---
 .../AccessControlDashboardPermissions.tsx       |  4 +++-
 .../DashboardPermissions.tsx                    |  6 ++++--
 .../DashboardSettings/AnnotationsSettings.tsx   | 17 +++++++++++++----
 .../DashboardSettings/DashboardSettings.tsx     |  5 +++++
 .../DashboardSettings/GeneralSettings.tsx       |  3 ++-
 .../DashboardSettings/JsonEditorSettings.tsx    | 14 ++++++++------
 .../DashboardSettings/LinksSettings.tsx         | 15 ++++++++++++++-
 .../DashboardSettings/VersionsSettings.tsx      |  6 ++++--
 .../editor/VariableEditorContainer.tsx          | 14 +++++++++++---
 9 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/public/app/features/dashboard/components/DashboardPermissions/AccessControlDashboardPermissions.tsx b/public/app/features/dashboard/components/DashboardPermissions/AccessControlDashboardPermissions.tsx
index a06413a1338..0506a77f665 100644
--- a/public/app/features/dashboard/components/DashboardPermissions/AccessControlDashboardPermissions.tsx
+++ b/public/app/features/dashboard/components/DashboardPermissions/AccessControlDashboardPermissions.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { config } from '@grafana/runtime';
 import { Permissions } from 'app/core/components/AccessControl';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
@@ -9,9 +10,10 @@ import { SettingsPageProps } from '../DashboardSettings/types';
 
 export const AccessControlDashboardPermissions = ({ dashboard, sectionNav }: SettingsPageProps) => {
   const canSetPermissions = contextSrv.hasPermission(AccessControlAction.DashboardsPermissionsWrite);
+  const pageNav = config.featureToggles.dockedMegaMenu ? sectionNav.node.parentItem : undefined;
 
   return (
-    <Page navModel={sectionNav}>
+    <Page navModel={sectionNav} pageNav={pageNav}>
       <Permissions resource={'dashboards'} resourceId={dashboard.uid} canSetPermissions={canSetPermissions} />
     </Page>
   );
diff --git a/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx
index 89ba108750c..a75821bc6d6 100644
--- a/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx
+++ b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
+import { config } from '@grafana/runtime';
 import { Tooltip, Icon, Button } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
 import { Page } from 'app/core/components/Page/Page';
@@ -90,17 +91,18 @@ export class DashboardPermissionsUnconnected extends PureComponent<Props, State>
   render() {
     const { permissions, dashboard, sectionNav } = this.props;
     const { isAdding } = this.state;
+    const pageNav = config.featureToggles.dockedMegaMenu ? sectionNav.node.parentItem : undefined;
 
     if (dashboard.meta.hasUnsavedFolderChange) {
       return (
-        <Page navModel={sectionNav}>
+        <Page navModel={sectionNav} pageNav={pageNav}>
           <h5>You have changed a folder, please save to view permissions.</h5>
         </Page>
       );
     }
 
     return (
-      <Page navModel={sectionNav}>
+      <Page navModel={sectionNav} pageNav={pageNav}>
         <div className="page-action-bar">
           <Tooltip placement="auto" content={<PermissionsInfo />}>
             <Icon className="icon--has-hover page-sub-heading-icon" name="question-circle" />
diff --git a/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx
index a4db2c16c52..b4e0487291d 100644
--- a/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { AnnotationQuery, getDataSourceRef, NavModelItem } from '@grafana/data';
-import { getDataSourceSrv, locationService } from '@grafana/runtime';
+import { config, getDataSourceSrv, locationService } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
 
 import { DashboardModel } from '../../state';
@@ -29,22 +29,31 @@ export function AnnotationsSettings({ dashboard, editIndex, sectionNav }: Settin
   const isEditing = editIndex != null && editIndex < dashboard.annotations.list.length;
 
   return (
-    <Page navModel={sectionNav} pageNav={getSubPageNav(dashboard, editIndex)}>
+    <Page navModel={sectionNav} pageNav={getSubPageNav(dashboard, editIndex, sectionNav.node)}>
       {!isEditing && <AnnotationSettingsList dashboard={dashboard} onNew={onNew} onEdit={onEdit} />}
       {isEditing && <AnnotationSettingsEdit dashboard={dashboard} editIdx={editIndex!} />}
     </Page>
   );
 }
 
-function getSubPageNav(dashboard: DashboardModel, editIndex: number | undefined): NavModelItem | undefined {
+function getSubPageNav(
+  dashboard: DashboardModel,
+  editIndex: number | undefined,
+  node: NavModelItem
+): NavModelItem | undefined {
+  const parentItem = config.featureToggles.dockedMegaMenu ? node.parentItem : undefined;
   if (editIndex == null) {
-    return undefined;
+    return parentItem;
   }
 
   const editItem = dashboard.annotations.list[editIndex];
   if (editItem) {
     return {
       text: editItem.name,
+      parentItem: parentItem && {
+        ...parentItem,
+        url: node.url,
+      },
     };
   }
 
diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 8f8c3860de7..1dec8cc54eb 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -191,6 +191,11 @@ function getSectionNav(
     hideFromBreadcrumbs: true,
   };
 
+  if (config.featureToggles.dockedMegaMenu) {
+    main.hideFromBreadcrumbs = false;
+    main.url = locationUtil.getUrlForPartial(location, { editview: 'settings', editIndex: null });
+  }
+
   main.children = pages.map((page) => ({
     text: page.title,
     icon: page.icon,
diff --git a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
index 5ef795de84f..429b86bab77 100644
--- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
@@ -41,6 +41,7 @@ export function GeneralSettingsUnconnected({
   const [renderCounter, setRenderCounter] = useState(0);
   const [dashboardTitle, setDashboardTitle] = useState(dashboard.title);
   const [dashboardDescription, setDashboardDescription] = useState(dashboard.description);
+  const pageNav = config.featureToggles.dockedMegaMenu ? sectionNav.node.parentItem : undefined;
 
   const onFolderChange = (newUID: string, newTitle: string) => {
     dashboard.meta.folderUid = newUID;
@@ -116,7 +117,7 @@ export function GeneralSettingsUnconnected({
   ];
 
   return (
-    <Page navModel={sectionNav}>
+    <Page navModel={sectionNav} pageNav={pageNav}>
       <div style={{ maxWidth: '600px' }}>
         <div className="gf-form-group">
           <Field
diff --git a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
index c429a83b11b..44ebe1484c7 100644
--- a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
@@ -2,9 +2,10 @@ import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { Button, CodeEditor, useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
-import { t, Trans } from 'app/core/internationalization';
+import { Trans } from 'app/core/internationalization';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 
 import { getDashboardSrv } from '../../services/DashboardSrv';
@@ -13,6 +14,7 @@ import { SettingsPageProps } from './types';
 
 export function JsonEditorSettings({ dashboard, sectionNav }: SettingsPageProps) {
   const [dashboardJson, setDashboardJson] = useState<string>(JSON.stringify(dashboard.getSaveModelClone(), null, 2));
+  const pageNav = config.featureToggles.dockedMegaMenu ? sectionNav.node.parentItem : undefined;
 
   const onClick = async () => {
     await getDashboardSrv().saveJSONDashboard(dashboardJson);
@@ -20,14 +22,14 @@ export function JsonEditorSettings({ dashboard, sectionNav }: SettingsPageProps)
   };
 
   const styles = useStyles2(getStyles);
-  const subTitle = t(
-    'dashboard-settings.json-editor.subtitle',
-    'The JSON model below is the data structure that defines the dashboard. This includes dashboard settings, panel settings, layout, queries, and so on.'
-  );
 
   return (
-    <Page navModel={sectionNav} subTitle={subTitle}>
+    <Page navModel={sectionNav} pageNav={pageNav}>
       <div className={styles.wrapper}>
+        <Trans i18nKey="dashboard-settings.json-editor.subtitle">
+          The JSON model below is the data structure that defines the dashboard. This includes dashboard settings, panel
+          settings, layout, queries, and so on.
+        </Trans>
         <CodeEditor
           value={dashboardJson}
           language="json"
diff --git a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx
index 10cd657c92f..f58ec7db473 100644
--- a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { NavModelItem } from '@grafana/data';
-import { locationService } from '@grafana/runtime';
+import { config, locationService } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
 
 import { LinkSettingsEdit, LinkSettingsList } from '../LinksSettings';
@@ -33,6 +33,11 @@ export function LinksSettings({ dashboard, sectionNav, editIndex }: SettingsPage
   const isEditing = editIndex !== undefined;
 
   let pageNav: NavModelItem | undefined;
+
+  if (config.featureToggles.dockedMegaMenu) {
+    pageNav = sectionNav.node.parentItem;
+  }
+
   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';
@@ -40,6 +45,14 @@ export function LinksSettings({ dashboard, sectionNav, editIndex }: SettingsPage
       text: title,
       subTitle: description,
     };
+
+    if (config.featureToggles.dockedMegaMenu) {
+      const parentUrl = sectionNav.node.url;
+      pageNav.parentItem = sectionNav.node.parentItem && {
+        ...sectionNav.node.parentItem,
+        url: parentUrl,
+      };
+    }
   }
 
   return (
diff --git a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx
index 8af74edb60f..d2b13040688 100644
--- a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 
+import { config } from '@grafana/runtime';
 import { Spinner, HorizontalGroup } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
@@ -138,10 +139,11 @@ export class VersionsSettings extends PureComponent<Props, State> {
     const canCompare = versions.filter((version) => version.checked).length === 2;
     const showButtons = versions.length > 1;
     const hasMore = versions.length >= this.limit;
+    const pageNav = config.featureToggles.dockedMegaMenu ? this.props.sectionNav.node.parentItem : undefined;
 
     if (viewMode === 'compare') {
       return (
-        <Page navModel={this.props.sectionNav}>
+        <Page navModel={this.props.sectionNav} pageNav={pageNav}>
           <VersionHistoryHeader
             onClick={this.reset}
             baseVersion={baseInfo?.version}
@@ -163,7 +165,7 @@ export class VersionsSettings extends PureComponent<Props, State> {
     }
 
     return (
-      <Page navModel={this.props.sectionNav}>
+      <Page navModel={this.props.sectionNav} pageNav={pageNav}>
         {isLoading ? (
           <VersionsHistorySpinner msg="Fetching history list&hellip;" />
         ) : (
diff --git a/public/app/features/variables/editor/VariableEditorContainer.tsx b/public/app/features/variables/editor/VariableEditorContainer.tsx
index 6e2e6a0d802..166e4082767 100644
--- a/public/app/features/variables/editor/VariableEditorContainer.tsx
+++ b/public/app/features/variables/editor/VariableEditorContainer.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import { locationService } from '@grafana/runtime';
+import { config, locationService } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
 import { SettingsPageProps } from 'app/features/dashboard/components/DashboardSettings/types';
 
@@ -105,9 +105,17 @@ class VariableEditorContainerUnconnected extends PureComponent<Props, State> {
   };
 
   render() {
-    const { editIndex, variables } = this.props;
+    const { editIndex, variables, sectionNav } = this.props;
     const variableToEdit = editIndex != null ? variables[editIndex] : undefined;
-    const subPageNav = variableToEdit ? { text: variableToEdit.name } : undefined;
+    const node = sectionNav.node;
+    const parentItem =
+      config.featureToggles.dockedMegaMenu && node.parentItem
+        ? {
+            ...node.parentItem,
+            url: node.url,
+          }
+        : undefined;
+    const subPageNav = variableToEdit ? { text: variableToEdit.name, parentItem } : parentItem;
 
     return (
       <Page navModel={this.props.sectionNav} pageNav={subPageNav}>