Connections: Fix minor issues around Your connections/Data sources page (#63801)

* Connections: redirects to data sources

If Data sources page is the only child of Your connections, then the
NavLandingPage doesn't really make sense.

* DataSourcesList: do not show add button twice

If there are no data sources configured, then the DataSourcesList page
shows a large CTA to add a data source. Therefore, the add new data
source button in the header is redundant, let's remove it from there
in this case.

* DataSources: redirect to Connections after delete

The primary place of the DataSourceList page is under Connections,
provided that the `dataConnectionsConsole` feature is turned on.
Therefore, let's redirect there after deleting a data source.

public/app/features/connections/Connections.test.tsx

@@ -106,4 +106,34 @@ describe('Connections', () => {
     expect(screen.queryByText('Data sources')).not.toBeInTheDocument();
     expect(screen.queryByText('No results matching your query were found.')).not.toBeInTheDocument();
   });
+
+  test('Your connections redirects to Data sources if it has one child', async () => {
+    const navIndexCopy = {
+      ...navIndex,
+      'connections-your-connections': {
+        id: 'connections-your-connections',
+        text: 'Your connections',
+        subTitle: 'Manage your existing connections',
+        url: '/connections/your-connections',
+        children: [
+          {
+            id: 'connections-your-connections-datasources',
+            text: 'Datasources',
+            subTitle: 'Manage your existing datasource connections',
+            url: '/connections/your-connections/datasources',
+          },
+        ],
+      },
+    };
+
+    const store = configureStore({
+      navIndex: navIndexCopy,
+      plugins: getPluginsStateMock([]),
+    });
+
+    renderPage(ROUTES.YourConnections, store);
+
+    expect(await screen.findByPlaceholderText('Search by name or type')).toBeInTheDocument();
+    expect(await screen.queryByRole('link', { name: 'Datasources' })).toBeNull();
+  });
 });

public/app/features/connections/Connections.tsx

@@ -19,6 +19,11 @@ export default function Connections() {
   const navIndex = useSelector((state: StoreState) => state.navIndex);
   const isConnectDataPageOverriden = Boolean(navIndex['standalone-plugin-page-/connections/connect-data']);
 
+  const YourConnectionsPage =
+    navIndex['connections-your-connections'].children && navIndex['connections-your-connections'].children?.length > 1
+      ? () => <NavLandingPage navId="connections-your-connections" />
+      : () => <Redirect to={ROUTES.DataSources} />;
+
   return (
     <DataSourcesRoutesContext.Provider
       value={{
@@ -31,12 +36,7 @@ export default function Connections() {
       <Switch>
         {/* Redirect to "Connect data" by default */}
         <Route exact sensitive path={ROUTES.Base} component={() => <Redirect to={ROUTES.ConnectData} />} />
-        <Route
-          exact
-          sensitive
-          path={ROUTES.YourConnections}
-          component={() => <NavLandingPage navId="connections-your-connections" />}
-        />
+        <Route exact sensitive path={ROUTES.YourConnections} component={YourConnectionsPage} />
         <Route exact sensitive path={ROUTES.DataSources} component={DataSourcesListPage} />
         <Route exact sensitive path={ROUTES.DataSourcesDetails} component={DataSourceDetailsPage} />
         <Route exact sensitive path={ROUTES.DataSourcesNew} component={NewDataSourcePage} />

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

@@ -4,9 +4,13 @@ import { config } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
 import { DataSourceAddButton } from 'app/features/datasources/components/DataSourceAddButton';
 import { DataSourcesList } from 'app/features/datasources/components/DataSourcesList';
+import { getDataSourcesCount } from 'app/features/datasources/state';
+import { StoreState, useSelector } from 'app/types';
 
 export function DataSourcesListPage() {
-  const actions = config.featureToggles.topnav ? <DataSourceAddButton /> : undefined;
+  const dataSourcesCount = useSelector(({ dataSources }: StoreState) => getDataSourcesCount(dataSources));
+
+  const actions = config.featureToggles.topnav && dataSourcesCount > 0 ? <DataSourceAddButton /> : undefined;
   return (
     <Page navId={'connections-your-connections-datasources'} actions={actions}>
       <Page.Contents>

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

@@ -49,6 +49,9 @@ describe('Render', () => {
     expect(await screen.findByRole('link', { name: 'Support' })).toBeInTheDocument();
     expect(await screen.findByRole('link', { name: 'Community' })).toBeInTheDocument();
     expect(await screen.findByRole('link', { name: 'Add data source' })).toBeInTheDocument();
+
+    // Should not show button in page header when the list is empty
+    expect(await screen.queryByRole('link', { name: 'Add new data source' })).toBeNull();
   });
 
   describe('when user has no permissions', () => {
@@ -112,6 +115,9 @@ describe('Render', () => {
     expect(await screen.findByRole('heading', { name: 'dataSource-3' })).toBeInTheDocument();
     expect(await screen.findByRole('heading', { name: 'dataSource-4' })).toBeInTheDocument();
     expect(await screen.findAllByRole('img')).toHaveLength(5);
+
+    // Should show button in page header when the list is not empty
+    expect(await screen.findByRole('link', { name: 'Add new data source' })).toBeInTheDocument();
   });
 
   describe('should render elements in sort order', () => {

public/app/features/datasources/pages/DataSourcesListPage.tsx

@@ -6,12 +6,16 @@ import {
   ConnectionsRedirectNotice,
   DestinationPage,
 } from 'app/features/connections/components/ConnectionsRedirectNotice';
+import { StoreState, useSelector } from 'app/types';
 
 import { DataSourceAddButton } from '../components/DataSourceAddButton';
 import { DataSourcesList } from '../components/DataSourcesList';
+import { getDataSourcesCount } from '../state';
 
 export function DataSourcesListPage() {
-  const actions = config.featureToggles.topnav ? <DataSourceAddButton /> : undefined;
+  const dataSourcesCount = useSelector(({ dataSources }: StoreState) => getDataSourcesCount(dataSources));
+
+  const actions = config.featureToggles.topnav && dataSourcesCount > 0 ? <DataSourceAddButton /> : undefined;
   return (
     <Page navId="datasources" actions={actions}>
       <Page.Contents>

public/app/features/datasources/state/actions.ts

@@ -11,6 +11,7 @@ import {
 import { updateNavIndex } from 'app/core/actions';
 import { contextSrv } from 'app/core/core';
 import { getBackendSrv } from 'app/core/services/backend_srv';
+import { ROUTES as CONNECTIONS_ROUTES } from 'app/features/connections/constants';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { getPluginSettings } from 'app/features/plugins/pluginSettings';
 import { importDataSourcePlugin } from 'app/features/plugins/plugin_loader';
@@ -261,6 +262,10 @@ export function deleteLoadedDataSource(): ThunkResult<void> {
     await api.deleteDataSource(uid);
     await getDatasourceSrv().reload();
 
-    locationService.push('/datasources');
+    const datasourcesUrl = config.featureToggles.dataConnectionsConsole
+      ? CONNECTIONS_ROUTES.DataSources
+      : '/datasources';
+
+    locationService.push(datasourcesUrl);
   };
 }