Connections: Show the Dashboards tab under DataSource settings (#61841)

* fix: use the correct URL for editing datasource dashboards

* feat: show the Datasource/Dashboards page under Connections as well

* refactor: remove unnecessary `useNavModel()` utility

* feat: add a utility for creating the nav-model for DS settings tabs

* refactor: use nav-model crating utility in Edit Datasource

public/app/features/connections/Connections.tsx

@@ -8,6 +8,7 @@ import { StoreState, useSelector } from 'app/types';
 import { ROUTES } from './constants';
 import {
   ConnectDataPage,
+  DataSourceDashboardsPage,
   DataSourceDetailsPage,
   DataSourcesListPage,
   EditDataSourcePage,
@@ -38,6 +39,7 @@ export default function Connections() {
         <Route exact path={ROUTES.DataSourcesDetails} component={DataSourceDetailsPage} />
         <Route exact path={ROUTES.DataSourcesNew} component={NewDataSourcePage} />
         <Route exact path={ROUTES.DataSourcesEdit} component={EditDataSourcePage} />
+        <Route exact path={ROUTES.DataSourcesDashboards} component={DataSourceDashboardsPage} />
         {!isConnectDataPageOverriden && <Route path={ROUTES.ConnectData} component={ConnectDataPage} />}
 
         {/* Default page */}

public/app/features/connections/constants.ts

@@ -11,7 +11,7 @@ export const ROUTES = {
   DataSources: `/${ROUTE_BASE_ID}/your-connections/datasources`,
   DataSourcesNew: `/${ROUTE_BASE_ID}/your-connections/datasources/new`,
   DataSourcesEdit: `/${ROUTE_BASE_ID}/your-connections/datasources/edit/:uid`,
-  DataSourcesDashboards: `/${ROUTE_BASE_ID}/datasources/edit/:uid/dashboards`,
+  DataSourcesDashboards: `/${ROUTE_BASE_ID}/your-connections/datasources/edit/:uid/dashboards`,
 
   // Connect Data
   ConnectData: `/${ROUTE_BASE_ID}/connect-data`,

public/app/features/connections/hooks/useDataSourceSettingsNav.ts

@@ -0,0 +1,34 @@
+import { useLocation, useParams } from 'react-router-dom';
+
+import {
+  useDataSource,
+  useDataSourceSettingsNav as useDataSourceSettingsNavOriginal,
+} from 'app/features/datasources/state/hooks';
+import { useGetSingle } from 'app/features/plugins/admin/state/hooks';
+
+// We are extending the original useDataSourceSettingsNav in the following ways:
+// - changing the URL of the nav items to point to Connections
+// - setting the parent nav item
+export function useDataSourceSettingsNav(pageId?: string) {
+  const { uid } = useParams<{ uid: string }>();
+  const location = useLocation();
+  const datasource = useDataSource(uid);
+  const datasourcePlugin = useGetSingle(datasource.type);
+  const params = new URLSearchParams(location.search);
+  const nav = useDataSourceSettingsNavOriginal(uid, pageId || params.get('page'));
+  const pageNav = {
+    ...nav.main,
+    text: datasource.name,
+    subTitle: `Type: ${datasourcePlugin?.name}`,
+    active: true,
+    children: (nav.main.children || []).map((navModelItem) => ({
+      ...navModelItem,
+      url: navModelItem.url?.replace('datasources/edit/', '/connections/your-connections/datasources/edit/'),
+    })),
+  };
+
+  return {
+    navId: 'connections-your-connections-datasources',
+    pageNav,
+  };
+}

public/app/features/connections/hooks/useNavModel.ts

@@ -1,29 +0,0 @@
-import { useLocation } from 'react-router-dom';
-
-import { NavModelItem } from '@grafana/data';
-import { useSelector } from 'app/types';
-
-import { ROUTE_BASE_ID } from '../constants';
-
-// We need this utility logic to make sure that the tab with the current URL is marked as active.
-// (In case we were using `getNavModel()` from app/core/selectors/navModel, then we would need to set
-// the child nav-model-item's ID on the call-site.)
-export const useNavModel = () => {
-  const { pathname: currentPath } = useLocation();
-  const navIndex = useSelector((state) => state.navIndex);
-  const node = navIndex[ROUTE_BASE_ID];
-  const main = node;
-  const isDefaultRoute = (item: NavModelItem) =>
-    currentPath === `/${ROUTE_BASE_ID}` && item.id === 'connections-datasources';
-  const isItemActive = (item: NavModelItem) => currentPath.startsWith(item.url || '');
-
-  main.children = main.children?.map((item) => ({
-    ...item,
-    active: isItemActive(item) || isDefaultRoute(item),
-  }));
-
-  return {
-    node,
-    main,
-  };
-};

public/app/features/connections/pages/DataSourceDashboardsPage.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { Page } from 'app/core/components/Page/Page';
+import { DataSourceDashboards } from 'app/features/datasources/components/DataSourceDashboards';
+
+import { useDataSourceSettingsNav } from '../hooks/useDataSourceSettingsNav';
+
+export function DataSourceDashboardsPage() {
+  const { uid } = useParams<{ uid: string }>();
+  const { navId, pageNav } = useDataSourceSettingsNav('dashboards');
+
+  return (
+    <Page navId={navId} pageNav={pageNav}>
+      <Page.Contents>
+        <DataSourceDashboards uid={uid} />
+      </Page.Contents>
+    </Page>
+  );
+}

public/app/features/connections/pages/EditDataSourcePage.tsx

@@ -3,22 +3,18 @@ import { useLocation, useParams } from 'react-router-dom';
 
 import { Page } from 'app/core/components/Page/Page';
 import { EditDataSource } from 'app/features/datasources/components/EditDataSource';
-import { useDataSource } from 'app/features/datasources/state/hooks';
-import { useGetSingle } from 'app/features/plugins/admin/state/hooks';
+
+import { useDataSourceSettingsNav } from '../hooks/useDataSourceSettingsNav';
 
 export function EditDataSourcePage() {
   const { uid } = useParams<{ uid: string }>();
   const location = useLocation();
-  const datasource = useDataSource(uid);
-  const datasourcePlugin = useGetSingle(datasource.type);
   const params = new URLSearchParams(location.search);
   const pageId = params.get('page');
+  const { navId, pageNav } = useDataSourceSettingsNav();
 
   return (
-    <Page
-      navId={'connections-your-connections-datasources'}
-      pageNav={{ text: datasource.name, subTitle: `Type: ${datasourcePlugin?.name}`, active: true }}
-    >
+    <Page navId={navId} pageNav={pageNav}>
       <Page.Contents>
         <EditDataSource uid={uid} pageId={pageId} />
       </Page.Contents>

public/app/features/connections/pages/index.tsx

@@ -1,5 +1,6 @@
 export { ConnectDataPage } from './ConnectDataPage';
 export { DataSourceDetailsPage } from './DataSourceDetailsPage';
 export { DataSourcesListPage } from './DataSourcesListPage';
+export { DataSourceDashboardsPage } from './DataSourceDashboardsPage';
 export { EditDataSourcePage } from './EditDataSourcePage';
 export { NewDataSourcePage } from './NewDataSourcePage';