diff --git a/public/app/features/connections/hooks/useDataSourceSettingsNav.ts b/public/app/features/connections/hooks/useDataSourceSettingsNav.ts
index 01d7f1cbcff..9b9383c0205 100644
--- a/public/app/features/connections/hooks/useDataSourceSettingsNav.ts
+++ b/public/app/features/connections/hooks/useDataSourceSettingsNav.ts
@@ -29,5 +29,6 @@ export function useDataSourceSettingsNav(pageId?: string) {
   return {
     navId: 'connections-datasources',
     pageNav,
+    dataSourceHeader: nav.dataSourceHeader,
   };
 }
diff --git a/public/app/features/connections/pages/EditDataSourcePage.tsx b/public/app/features/connections/pages/EditDataSourcePage.tsx
index e4faf9f3fd9..28221e47e8a 100644
--- a/public/app/features/connections/pages/EditDataSourcePage.tsx
+++ b/public/app/features/connections/pages/EditDataSourcePage.tsx
@@ -18,7 +18,7 @@ export function EditDataSourcePage() {
   const { navId, pageNav } = useDataSourceSettingsNav();
 
   if (dataSourcePageHeader) {
-    return <DataSourceTabPage uid={uid} pageId={pageId} navId="connections-datasources" />;
+    return <DataSourceTabPage uid={uid} pageId={pageId} />;
   }
 
   return (
diff --git a/public/app/features/datasources/components/DataSourceTabPage.tsx b/public/app/features/datasources/components/DataSourceTabPage.tsx
index 82558bc9cec..b322de27bf9 100644
--- a/public/app/features/datasources/components/DataSourceTabPage.tsx
+++ b/public/app/features/datasources/components/DataSourceTabPage.tsx
@@ -1,32 +1,31 @@
 import React from 'react';
 
 import { Page } from 'app/core/components/Page/Page';
+import { useDataSourceSettingsNav } from 'app/features/connections/hooks/useDataSourceSettingsNav';
 
 import { EditDataSource } from '../components/EditDataSource';
 import { EditDataSourceActions } from '../components/EditDataSourceActions';
 import { useDataSourceInfo } from '../components/useDataSourceInfo';
-import { useDataSourceSettingsNav } from '../state';
 
 import { DataSourceTitle } from './DataSourceTitle';
 
 export interface Props {
   uid: string;
   pageId: string | null;
-  navId: string;
 }
 
-export function DataSourceTabPage({ uid, pageId, navId }: Props) {
-  const nav = useDataSourceSettingsNav(uid, pageId);
+export function DataSourceTabPage({ uid, pageId }: Props) {
+  const { navId, pageNav, dataSourceHeader } = useDataSourceSettingsNav();
 
   const info = useDataSourceInfo({
-    dataSourcePluginName: nav.main.dataSourcePluginName,
-    alertingSupported: nav.dataSourceHeader.alertingSupported,
+    dataSourcePluginName: pageNav.dataSourcePluginName,
+    alertingSupported: dataSourceHeader.alertingSupported,
   });
 
   return (
     <Page
       navId={navId}
-      pageNav={nav.main}
+      pageNav={pageNav}
       renderTitle={(title) => <DataSourceTitle title={title} />}
       info={info}
       actions={<EditDataSourceActions uid={uid} />}
diff --git a/public/app/features/datasources/pages/EditDataSourcePage.tsx b/public/app/features/datasources/pages/EditDataSourcePage.tsx
index 40cdaa25f92..cd8d52ba85d 100644
--- a/public/app/features/datasources/pages/EditDataSourcePage.tsx
+++ b/public/app/features/datasources/pages/EditDataSourcePage.tsx
@@ -19,7 +19,7 @@ export function EditDataSourcePage(props: Props) {
   const nav = useDataSourceSettingsNav(uid, pageId);
 
   if (dataSourcePageHeader) {
-    return <DataSourceTabPage uid={uid} pageId={pageId} navId="datasources" />;
+    return <DataSourceTabPage uid={uid} pageId={pageId} />;
   }
 
   return (