Skip to content

Commit 9614dc2

Browse files
torkelomikkancso
torkelo
and
mikkancso
authored
Connections: Simplify connections nav (grafana#66813)
* Connections: Simplify connections nav * rename Connections pages everywhere --------- Co-authored-by: Miklós Tolnai <miklos.tolnai@grafana.com>
1 parent 2316178 commit 9614dc2

File tree

19 files changed

+112
-192
lines changed

19 files changed

+112
-192
lines changed

‎pkg/api/api.go

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,11 +126,11 @@ func (hs *HTTPServer) registerRoutes() {
126126
r.Get("/plugins/:id/edit", middleware.CanAdminPlugins(hs.Cfg), hs.Index) // deprecated
127127
r.Get("/plugins/:id/page/:page", middleware.CanAdminPlugins(hs.Cfg), hs.Index)
128128

129-
r.Get("/connections/your-connections/datasources", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
130-
r.Get("/connections/your-connections/datasources/new", authorize(reqOrgAdmin, datasources.NewPageAccess), hs.Index)
131-
r.Get("/connections/your-connections/datasources/edit/*", authorize(reqOrgAdmin, datasources.EditPageAccess), hs.Index)
129+
r.Get("/connections/your-datasources", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
130+
r.Get("/connections/your-datasources/new", authorize(reqOrgAdmin, datasources.NewPageAccess), hs.Index)
131+
r.Get("/connections/your-datasources/edit/*", authorize(reqOrgAdmin, datasources.EditPageAccess), hs.Index)
132132
r.Get("/connections", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
133-
r.Get("/connections/connect-data", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
133+
r.Get("/connections/add-new-connection", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
134134
r.Get("/connections/datasources/:id", middleware.CanAdminPlugins(hs.Cfg), hs.Index)
135135
r.Get("/connections/datasources/:id/page/:page", middleware.CanAdminPlugins(hs.Cfg), hs.Index)
136136

‎pkg/services/navtree/navtreeimpl/applinks_test.go

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ func TestAddAppLinks(t *testing.T) {
9393
AddToNav: true,
9494
},
9595
{
96-
Name: "Connect data",
97-
Path: "/connections/connect-data",
96+
Name: "Add new connection",
97+
Path: "/connections/add-new-connection",
9898
Type: "page",
9999
AddToNav: false,
100100
},
@@ -296,7 +296,7 @@ func TestAddAppLinks(t *testing.T) {
296296
service.features = featuremgmt.WithFeatures(featuremgmt.FlagDataConnectionsConsole)
297297
service.navigationAppConfig = map[string]NavigationAppConfig{}
298298
service.navigationAppPathConfig = map[string]NavigationAppConfig{
299-
"/connections/connect-data": {SectionID: "connections"},
299+
"/connections/add-new-connection": {SectionID: "connections"},
300300
}
301301

302302
// Build nav-tree and check if the "Connections" page is there
@@ -306,19 +306,19 @@ func TestAddAppLinks(t *testing.T) {
306306
require.NotNil(t, connectionsNode)
307307
require.Equal(t, "Connections", connectionsNode.Text)
308308

309-
// Check if the original "Connect data" page (served by core) is there until we add the standalone plugin page
309+
// Check if the original "Add new connection" page (served by core) is there until we add the standalone plugin page
310310
connectDataNode := connectionsNode.Children[0]
311-
require.Equal(t, "Connect data", connectDataNode.Text)
312-
require.Equal(t, "connections-connect-data", connectDataNode.Id)
311+
require.Equal(t, "Add new connection", connectDataNode.Text)
312+
require.Equal(t, "connections-add-new-connection", connectDataNode.Id)
313313
require.Equal(t, "", connectDataNode.PluginID)
314314

315315
// Check if the standalone plugin page appears under the section where we registered it and if it overrides the original page
316316
err := service.addAppLinks(&treeRoot, reqCtx)
317317

318318
require.NoError(t, err)
319319
require.Equal(t, "Connections", connectionsNode.Text)
320-
require.Equal(t, "Connect data", connectDataNode.Text)
321-
require.Equal(t, "standalone-plugin-page-/connections/connect-data", connectDataNode.Id) // Overridden "Connect data" page
320+
require.Equal(t, "Add new connection", connectDataNode.Text)
321+
require.Equal(t, "standalone-plugin-page-/connections/add-new-connection", connectDataNode.Id) // Overridden "Add new connection" page
322322
require.Equal(t, "test-app3", connectDataNode.PluginID)
323323

324324
// Check if the standalone plugin page does not appear under the app section anymore
@@ -342,12 +342,12 @@ func TestAddAppLinks(t *testing.T) {
342342
require.NoError(t, err)
343343

344344
// The original core page should exist under the section
345-
connectDataNode := treeRoot.FindById("connections-connect-data")
346-
require.Equal(t, "connections-connect-data", connectDataNode.Id)
345+
connectDataNode := treeRoot.FindById("connections-add-new-connection")
346+
require.Equal(t, "connections-add-new-connection", connectDataNode.Id)
347347
require.Equal(t, "", connectDataNode.PluginID)
348348

349349
// The standalone plugin page should not be found in the navtree at all (as we didn't configure it)
350-
standaloneConnectDataNode := treeRoot.FindById("standalone-plugin-page-/connections/connect-data")
350+
standaloneConnectDataNode := treeRoot.FindById("standalone-plugin-page-/connections/add-new-connection")
351351
require.Nil(t, standaloneConnectDataNode)
352352

353353
// Only the pages that have `AddToNav=true` appear under the plugin navigation

‎pkg/services/navtree/navtreeimpl/navtree.go

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -481,29 +481,22 @@ func (s *ServiceImpl) buildDataConnectionsNavLink(c *contextmodel.ReqContext) *n
481481
baseUrl := s.cfg.AppSubURL + "/connections"
482482

483483
if hasAccess(ac.ReqOrgAdmin, datasources.ConfigurationPageAccess) {
484-
// Connect data
484+
// Add new connection
485485
children = append(children, &navtree.NavLink{
486-
Id: "connections-connect-data",
487-
Text: "Connect data",
488-
SubTitle: "Browse and create new connections",
489-
IsSection: true,
490-
Url: s.cfg.AppSubURL + "/connections/connect-data",
491-
Children: []*navtree.NavLink{},
486+
Id: "connections-add-new-connection",
487+
Text: "Add new connection",
488+
SubTitle: "Browse and create new connections",
489+
Url: baseUrl + "/add-new-connection",
490+
Children: []*navtree.NavLink{},
492491
})
493492

494-
// Your connections
493+
// Your data sources
495494
children = append(children, &navtree.NavLink{
496-
Id: "connections-your-connections",
497-
Text: "Your connections",
498-
SubTitle: "Manage your existing connections",
499-
Url: baseUrl + "/your-connections",
500-
// Datasources
501-
Children: []*navtree.NavLink{{
502-
Id: "connections-your-connections-datasources",
503-
Text: "Data sources",
504-
SubTitle: "View and manage your connected data source connections",
505-
Url: baseUrl + "/your-connections/datasources",
506-
}},
495+
Id: "connections-your-datasources",
496+
Text: "Your data sources",
497+
SubTitle: "View and manage your connected data source connections",
498+
Url: baseUrl + "/your-datasources",
499+
Children: []*navtree.NavLink{},
507500
})
508501
}
509502

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

Lines changed: 14 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -38,56 +38,49 @@ describe('Connections', () => {
3838
(contextSrv.hasPermission as jest.Mock) = jest.fn().mockReturnValue(true);
3939
});
4040

41-
test('shows the "Connect data" page by default', async () => {
41+
test('shows the "Add new connection" page by default', async () => {
4242
renderPage();
4343

4444
// Data sources group
4545
expect(await screen.findByText('Data sources')).toBeVisible();
4646

4747
// Heading
48-
expect(await screen.findByText('Connect data')).toBeVisible();
48+
expect(await screen.findByText('Add new connection')).toBeVisible();
4949
expect(await screen.findByText('Browse and create new connections')).toBeVisible();
5050
});
5151

52-
test('shows a landing page for Your connections', async () => {
53-
renderPage(ROUTES.YourConnections);
54-
55-
expect(await screen.findByRole('link', { name: 'Datasources' })).toBeVisible();
56-
expect(await screen.findByText('Manage your existing datasource connections')).toBeVisible();
57-
});
58-
5952
test('renders the correct tab even if accessing it with a "sub-url"', async () => {
60-
renderPage(ROUTES.ConnectData);
53+
renderPage(ROUTES.AddNewConnection);
6154

62-
expect(await screen.findByText('Connect data')).toBeVisible();
55+
expect(await screen.findByText('Add new connection')).toBeVisible();
6356
expect(await screen.findByText('Browse and create new connections')).toBeVisible();
6457

6558
// Should not render the "Your datasources" page
6659
expect(screen.queryByText('Manage your existing datasource connections')).not.toBeInTheDocument();
6760
});
6861

69-
test('renders the core "Connect data" page in case there is no standalone plugin page override for it', async () => {
70-
renderPage(ROUTES.ConnectData);
62+
test('renders the core "Add new connection" page in case there is no standalone plugin page override for it', async () => {
63+
renderPage(ROUTES.AddNewConnection);
7164

7265
// We expect to see no results and "Data sources" as a header (we only have data sources in OSS Grafana at this point)
7366
expect(await screen.findByText('Data sources')).toBeVisible();
7467
expect(await screen.findByText('No results matching your query were found.')).toBeVisible();
7568
});
7669

77-
test('does not render anything for the "Connect data" page in case it is displayed by a standalone plugin page', async () => {
78-
// We are overriding the navIndex to have the "Connect data" page registered by a plugin
70+
test('does not render anything for the "Add new connection" page in case it is displayed by a standalone plugin page', async () => {
71+
// We are overriding the navIndex to have the "Add new connection" page registered by a plugin
7972
const standalonePluginPage = {
80-
id: 'standalone-plugin-page-/connections/connect-data',
81-
text: 'Connect data',
73+
id: 'standalone-plugin-page-/connections/add-new-connection',
74+
text: 'Add new connection',
8275
subTitle: 'Browse and create new connections',
83-
url: '/connections/connect-data',
76+
url: '/connections/add-new-connection',
8477
pluginId: 'grafana-easystart-app',
8578
};
8679

8780
const connections = {
8881
...navIndex.connections,
8982
children: navIndex.connections.children?.map((child) => {
90-
if (child.id === 'connections-connect-data') {
83+
if (child.id === 'connections-add-new-connection') {
9184
return standalonePluginPage;
9285
}
9386

@@ -100,40 +93,10 @@ describe('Connections', () => {
10093
plugins: getPluginsStateMock([]),
10194
});
10295

103-
renderPage(ROUTES.ConnectData, store);
96+
renderPage(ROUTES.AddNewConnection, store);
10497

105-
// We expect not to see the text that would be rendered by the core "Connect data" page
98+
// We expect not to see the text that would be rendered by the core "Add new connection" page
10699
expect(screen.queryByText('Data sources')).not.toBeInTheDocument();
107100
expect(screen.queryByText('No results matching your query were found.')).not.toBeInTheDocument();
108101
});
109-
110-
test('Your connections redirects to Data sources if it has one child', async () => {
111-
const navIndexCopy = {
112-
...navIndex,
113-
'connections-your-connections': {
114-
id: 'connections-your-connections',
115-
text: 'Your connections',
116-
subTitle: 'Manage your existing connections',
117-
url: '/connections/your-connections',
118-
children: [
119-
{
120-
id: 'connections-your-connections-datasources',
121-
text: 'Datasources',
122-
subTitle: 'Manage your existing datasource connections',
123-
url: '/connections/your-connections/datasources',
124-
},
125-
],
126-
},
127-
};
128-
129-
const store = configureStore({
130-
navIndex: navIndexCopy,
131-
plugins: getPluginsStateMock([]),
132-
});
133-
134-
renderPage(ROUTES.YourConnections, store);
135-
136-
expect(await screen.findByPlaceholderText('Search by name or type')).toBeInTheDocument();
137-
expect(await screen.queryByRole('link', { name: 'Datasources' })).toBeNull();
138-
});
139102
});

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import * as React from 'react';
22
import { Redirect, Route, Switch } from 'react-router-dom';
33

4-
import { NavLandingPage } from 'app/core/components/NavLandingPage/NavLandingPage';
54
import { DataSourcesRoutesContext } from 'app/features/datasources/state';
65
import { StoreState, useSelector } from 'app/types';
76

87
import { ROUTES } from './constants';
98
import {
10-
ConnectDataPage,
9+
AddNewConnectionPage,
1110
DataSourceDashboardsPage,
1211
DataSourceDetailsPage,
1312
DataSourcesListPage,
@@ -17,12 +16,7 @@ import {
1716

1817
export default function Connections() {
1918
const navIndex = useSelector((state: StoreState) => state.navIndex);
20-
const isConnectDataPageOverriden = Boolean(navIndex['standalone-plugin-page-/connections/connect-data']);
21-
22-
const YourConnectionsPage =
23-
navIndex['connections-your-connections'].children && navIndex['connections-your-connections'].children?.length > 1
24-
? () => <NavLandingPage navId="connections-your-connections" />
25-
: () => <Redirect to={ROUTES.DataSources} />;
19+
const isAddNewConnectionPageOverridden = Boolean(navIndex['standalone-plugin-page-/connections/add-new-connection']);
2620

2721
return (
2822
<DataSourcesRoutesContext.Provider
@@ -34,17 +28,18 @@ export default function Connections() {
3428
}}
3529
>
3630
<Switch>
37-
{/* Redirect to "Connect data" by default */}
38-
<Route exact sensitive path={ROUTES.Base} component={() => <Redirect to={ROUTES.ConnectData} />} />
39-
<Route exact sensitive path={ROUTES.YourConnections} component={YourConnectionsPage} />
31+
{/* Redirect to "Add new connection" by default */}
32+
<Route exact sensitive path={ROUTES.Base} component={() => <Redirect to={ROUTES.AddNewConnection} />} />
4033
<Route exact sensitive path={ROUTES.DataSources} component={DataSourcesListPage} />
4134
<Route exact sensitive path={ROUTES.DataSourcesDetails} component={DataSourceDetailsPage} />
4235
<Route exact sensitive path={ROUTES.DataSourcesNew} component={NewDataSourcePage} />
4336
<Route exact sensitive path={ROUTES.DataSourcesEdit} component={EditDataSourcePage} />
4437
<Route exact sensitive path={ROUTES.DataSourcesDashboards} component={DataSourceDashboardsPage} />
4538

46-
{/* "Connect data" page - we don't register a route in case a plugin already registers a standalone page for it */}
47-
{!isConnectDataPageOverriden && <Route exact sensitive path={ROUTES.ConnectData} component={ConnectDataPage} />}
39+
{/* "Add new connection" page - we don't register a route in case a plugin already registers a standalone page for it */}
40+
{!isAddNewConnectionPageOverridden && (
41+
<Route exact sensitive path={ROUTES.AddNewConnection} component={AddNewConnectionPage} />
42+
)}
4843

4944
{/* Not found */}
5045
<Route component={() => <Redirect to="/notfound" />} />

‎public/app/features/connections/__mocks__/store.navIndex.mock.ts

Lines changed: 26 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -229,30 +229,22 @@ export const navIndex: NavIndex = {
229229
sortWeight: -1300,
230230
children: [
231231
{
232-
id: 'connections-your-connections',
233-
text: 'Your connections',
234-
subTitle: 'Manage your existing connections',
235-
url: '/connections/your-connections',
236-
children: [
237-
{
238-
id: 'connections-your-connections-datasources',
239-
text: 'Datasources',
240-
subTitle: 'Manage your existing datasource connections',
241-
url: '/connections/your-connections/datasources',
242-
},
243-
{
244-
id: 'standalone-plugin-page-/connections/your-connections/infrastructure',
245-
text: 'Infrastructure',
246-
url: '/connections/your-connections/infrastructure',
247-
pluginId: 'grafana-easystart-app',
248-
},
249-
],
232+
id: 'connections-add-new-connection',
233+
text: 'Add new connection',
234+
subTitle: 'Browse and create new connections',
235+
url: '/connections/add-new-connection',
250236
},
251237
{
252-
id: 'connections-connect-data',
253-
text: 'Connect data',
254-
subTitle: 'Browse and create new connections',
255-
url: '/connections/connect-data',
238+
id: 'connections-your-datasources',
239+
text: 'Your data sources',
240+
subTitle: 'Manage your existing datasource connections',
241+
url: '/connections/your-datasources',
242+
},
243+
{
244+
id: 'standalone-plugin-page-/connections/your-infrastructure',
245+
text: 'Your infrastructure',
246+
url: '/connections/your-infrastructure',
247+
pluginId: 'grafana-easystart-app',
256248
},
257249
],
258250
parentItem: {
@@ -263,43 +255,23 @@ export const navIndex: NavIndex = {
263255
sortWeight: -2000,
264256
},
265257
},
266-
'connections-your-connections': {
267-
id: 'connections-your-connections',
268-
text: 'Your connections',
269-
subTitle: 'Manage your existing connections',
270-
url: '/connections/your-connections',
271-
children: [
272-
{
273-
id: 'connections-your-connections-datasources',
274-
text: 'Datasources',
275-
subTitle: 'Manage your existing datasource connections',
276-
url: '/connections/your-connections/datasources',
277-
},
278-
{
279-
id: 'standalone-plugin-page-/connections/your-connections/infrastructure',
280-
text: 'Infrastructure',
281-
url: '/connections/your-connections/infrastructure',
282-
pluginId: 'grafana-easystart-app',
283-
},
284-
],
285-
},
286-
'connections-your-connections-datasources': {
287-
id: 'connections-your-connections-datasources',
288-
text: 'Datasources',
258+
'connections-your-datasources': {
259+
id: 'connections-your-datasources',
260+
text: 'Your data sources',
289261
subTitle: 'Manage your existing datasource connections',
290-
url: '/connections/your-connections/datasources',
262+
url: '/connections/your-datasources',
291263
},
292-
'standalone-plugin-page-/connections/your-connections/infrastructure': {
293-
id: 'standalone-plugin-page-/connections/your-connections/infrastructure',
294-
text: 'Infrastructure',
295-
url: '/connections/your-connections/infrastructure',
264+
'standalone-plugin-page-/connections/your-infrastructure': {
265+
id: 'standalone-plugin-page-/connections/your-infrastructure',
266+
text: 'Your infrastructure',
267+
url: '/connections/your-infrastructure',
296268
pluginId: 'grafana-easystart-app',
297269
},
298-
'connections-connect-data': {
299-
id: 'connections-connect-data',
300-
text: 'Connect data',
270+
'connections-add-new-connection': {
271+
id: 'connections-add-new-connection',
272+
text: 'Add new connection',
301273
subTitle: 'Browse and create new connections',
302-
url: '/connections/connect-data',
274+
url: '/connections/add-new-connection',
303275
},
304276
cfg: {
305277
id: 'cfg',

0 commit comments

Comments
 (0)