From e4d4eacd36ada7bc0f6419882005a1b0beb583fd Mon Sep 17 00:00:00 2001
From: mikkancso <miklos.tolnai@grafana.com>
Date: Fri, 16 Dec 2022 11:00:35 +0100
Subject: [PATCH] Connections: Render a landing page for pages without actual
 content (#60369)

* render a landing page for pages without actual content

To be consistent with other pages in Grafana

* update tests
---
 .../features/connections/Connections.test.tsx   | 17 ++++++++++++-----
 public/app/features/connections/Connections.tsx |  9 +++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/public/app/features/connections/Connections.test.tsx b/public/app/features/connections/Connections.test.tsx
index 043e09321d1..a6298686483 100644
--- a/public/app/features/connections/Connections.test.tsx
+++ b/public/app/features/connections/Connections.test.tsx
@@ -41,14 +41,21 @@ describe('Connections', () => {
     (contextSrv.hasPermission as jest.Mock) = jest.fn().mockReturnValue(true);
   });
 
-  test('shows the "Data sources" page by default', async () => {
+  test('shows a landing page by default', async () => {
     renderPage();
 
-    expect(await screen.findByText('Datasources')).toBeVisible();
+    expect(await screen.findByRole('link', { name: 'Your connections' })).toBeVisible();
+    expect(await screen.findByText('Manage your existing connections')).toBeVisible();
+
+    expect(await screen.findByRole('link', { name: 'Connect data' })).toBeVisible();
+    expect(await screen.findByText('Browse and create new connections')).toBeVisible();
+  });
+
+  test('shows a landing page for Your connections', async () => {
+    renderPage(ROUTES.YourConnections);
+
+    expect(await screen.findByRole('link', { name: 'Datasources' })).toBeVisible();
     expect(await screen.findByText('Manage your existing datasource connections')).toBeVisible();
-    expect(await screen.findByText('Sort by A–Z')).toBeVisible();
-    expect(await screen.findByRole('link', { name: /add new data source/i })).toBeVisible();
-    expect(await screen.findByText(mockDatasources[0].name)).toBeVisible();
   });
 
   test('renders the correct tab even if accessing it with a "sub-url"', async () => {
diff --git a/public/app/features/connections/Connections.tsx b/public/app/features/connections/Connections.tsx
index 4da675c5dac..184d0fa799f 100644
--- a/public/app/features/connections/Connections.tsx
+++ b/public/app/features/connections/Connections.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
+import { NavLandingPage } from 'app/core/components/AppChrome/NavLandingPage';
 import { DataSourcesRoutesContext } from 'app/features/datasources/state';
 import { StoreState, useSelector } from 'app/types';
 
@@ -27,8 +28,12 @@ export default function Connections() {
       }}
     >
       <Switch>
-        <Route exact path={ROUTES.Base} component={DataSourcesListPage} />
-        <Route exact path={ROUTES.YourConnections} component={DataSourcesListPage} />
+        <Route exact path={ROUTES.Base} component={() => <NavLandingPage navId="connections" />} />
+        <Route
+          exact
+          path={ROUTES.YourConnections}
+          component={() => <NavLandingPage navId="connections-your-connections" />}
+        />
         <Route exact path={ROUTES.DataSources} component={DataSourcesListPage} />
         <Route exact path={ROUTES.DataSourcesDetails} component={DataSourceDetailsPage} />
         <Route exact path={ROUTES.DataSourcesNew} component={NewDataSourcePage} />