Data sources: Dashboards page now loads correctly from direct url (#72264)

* ensure DataSourceDashboardsPage initialises data source settings

* fix unit test

* apply suggestions from review

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

@@ -20,7 +20,6 @@ export function useDataSourceSettingsNav(pageId?: string) {
     ...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/datasources/edit/'),

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

@@ -8,7 +8,7 @@ import { useDataSourceSettingsNav } from '../hooks/useDataSourceSettingsNav';
 
 export function DataSourceDashboardsPage() {
   const { uid } = useParams<{ uid: string }>();
-  const { navId, pageNav } = useDataSourceSettingsNav();
+  const { navId, pageNav } = useDataSourceSettingsNav('dashboards');
 
   return (
     <Page navId={navId} pageNav={pageNav}>

public/app/features/datasources/components/DataSourceDashboards.tsx

@@ -6,7 +6,7 @@ import { loadPluginDashboards } from 'app/features/plugins/admin/state/actions';
 import { PluginDashboard, StoreState, useDispatch, useSelector } from 'app/types';
 
 import DashboardTable from '../components/DashboardsTable';
-import { useLoadDataSource } from '../state';
+import { useInitDataSourceSettings } from '../state';
 
 export type Props = {
   // The UID of the data source
@@ -14,7 +14,7 @@ export type Props = {
 };
 
 export function DataSourceDashboards({ uid }: Props) {
-  useLoadDataSource(uid);
+  useInitDataSourceSettings(uid);
 
   const dispatch = useDispatch();
   const dataSource = useSelector((s: StoreState) => s.dataSources.dataSource);
@@ -26,7 +26,7 @@ export function DataSourceDashboards({ uid }: Props) {
     if (dataSource.id > 0) {
       dispatch(loadPluginDashboards());
     }
-  }, [dispatch, dataSource]);
+  }, [dispatch, dataSource.id]);
 
   const onImportDashboard = (dashboard: PluginDashboard, overwrite: boolean) => {
     dispatch(

public/app/features/datasources/pages/DataSourceDashboardsPage.test.tsx

@@ -74,9 +74,9 @@ describe('<DataSourceDashboardsPage>', () => {
     });
   });
 
-  it('should render the dashboards page without an issue', () => {
+  it('should render the dashboards page without an issue', async () => {
     setup(uid, store);
 
-    expect(screen.queryByText(dataSourceName)).toBeVisible();
+    expect(await screen.findByText(dataSourceName)).toBeVisible();
   });
 });