From 99be6fb74778c30615b16663a062bc3a756c0624 Mon Sep 17 00:00:00 2001
From: Levente Balogh <balogh.levente.hu@gmail.com>
Date: Wed, 13 Sep 2023 13:29:11 +0200
Subject: [PATCH] Connections: Display the type of the datasource (#74808)

fix: display the name of the datasource plugin
---
 .../features/connections/hooks/useDataSourceSettingsNav.ts   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/app/features/connections/hooks/useDataSourceSettingsNav.ts b/public/app/features/connections/hooks/useDataSourceSettingsNav.ts
index 6d165be812d..1d94698a9a8 100644
--- a/public/app/features/connections/hooks/useDataSourceSettingsNav.ts
+++ b/public/app/features/connections/hooks/useDataSourceSettingsNav.ts
@@ -3,7 +3,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import { NavModel, NavModelItem } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { useDataSource, useDataSourceSettings } from 'app/features/datasources/state/hooks';
+import { useDataSource, useDataSourceMeta, useDataSourceSettings } from 'app/features/datasources/state/hooks';
 import { getDataSourceLoadingNav, buildNavModel, getDataSourceNav } from 'app/features/datasources/state/navModel';
 import { useGetSingle } from 'app/features/plugins/admin/state/hooks';
 import { useSelector } from 'app/types';
@@ -12,6 +12,7 @@ export function useDataSourceSettingsNav(pageIdParam?: string) {
   const { uid } = useParams<{ uid: string }>();
   const location = useLocation();
   const datasource = useDataSource(uid);
+  const dataSourceMeta = useDataSourceMeta(datasource.type);
   const datasourcePlugin = useGetSingle(datasource.type);
   const params = new URLSearchParams(location.search);
   const pageId = pageIdParam || params.get('page');
@@ -63,7 +64,7 @@ export function useDataSourceSettingsNav(pageIdParam?: string) {
     dataSourcePluginName: datasourcePlugin?.name || plugin?.meta.name || '',
     active: true,
     text: datasource.name,
-    subTitle: `Type: ${datasourcePlugin?.name}`,
+    subTitle: `Type: ${dataSourceMeta.name}`,
     children: (pageNav.main.children || []).map((navModelItem) => ({
       ...navModelItem,
       url: navModelItem.url?.replace('datasources/edit/', '/connections/datasources/edit/'),