Connections: Simplify connections nav (#66813)

* Connections: Simplify connections nav

* rename Connections pages everywhere

---------

Co-authored-by: Miklós Tolnai <miklos.tolnai@grafana.com>
This commit is contained in:
Torkel Ödegaard 2023-05-02 10:51:59 +02:00 committed by GitHub
parent 2316178565
commit 9614dc2446
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 112 additions and 192 deletions

View File

@ -126,11 +126,11 @@ func (hs *HTTPServer) registerRoutes() {
r.Get("/plugins/:id/edit", middleware.CanAdminPlugins(hs.Cfg), hs.Index) // deprecated
r.Get("/plugins/:id/page/:page", middleware.CanAdminPlugins(hs.Cfg), hs.Index)
r.Get("/connections/your-connections/datasources", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
r.Get("/connections/your-connections/datasources/new", authorize(reqOrgAdmin, datasources.NewPageAccess), hs.Index)
r.Get("/connections/your-connections/datasources/edit/*", authorize(reqOrgAdmin, datasources.EditPageAccess), hs.Index)
r.Get("/connections/your-datasources", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
r.Get("/connections/your-datasources/new", authorize(reqOrgAdmin, datasources.NewPageAccess), hs.Index)
r.Get("/connections/your-datasources/edit/*", authorize(reqOrgAdmin, datasources.EditPageAccess), hs.Index)
r.Get("/connections", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
r.Get("/connections/connect-data", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
r.Get("/connections/add-new-connection", authorize(reqOrgAdmin, datasources.ConfigurationPageAccess), hs.Index)
r.Get("/connections/datasources/:id", middleware.CanAdminPlugins(hs.Cfg), hs.Index)
r.Get("/connections/datasources/:id/page/:page", middleware.CanAdminPlugins(hs.Cfg), hs.Index)

View File

@ -93,8 +93,8 @@ func TestAddAppLinks(t *testing.T) {
AddToNav: true,
},
{
Name: "Connect data",
Path: "/connections/connect-data",
Name: "Add new connection",
Path: "/connections/add-new-connection",
Type: "page",
AddToNav: false,
},
@ -296,7 +296,7 @@ func TestAddAppLinks(t *testing.T) {
service.features = featuremgmt.WithFeatures(featuremgmt.FlagDataConnectionsConsole)
service.navigationAppConfig = map[string]NavigationAppConfig{}
service.navigationAppPathConfig = map[string]NavigationAppConfig{
"/connections/connect-data": {SectionID: "connections"},
"/connections/add-new-connection": {SectionID: "connections"},
}
// Build nav-tree and check if the "Connections" page is there
@ -306,10 +306,10 @@ func TestAddAppLinks(t *testing.T) {
require.NotNil(t, connectionsNode)
require.Equal(t, "Connections", connectionsNode.Text)
// Check if the original "Connect data" page (served by core) is there until we add the standalone plugin page
// Check if the original "Add new connection" page (served by core) is there until we add the standalone plugin page
connectDataNode := connectionsNode.Children[0]
require.Equal(t, "Connect data", connectDataNode.Text)
require.Equal(t, "connections-connect-data", connectDataNode.Id)
require.Equal(t, "Add new connection", connectDataNode.Text)
require.Equal(t, "connections-add-new-connection", connectDataNode.Id)
require.Equal(t, "", connectDataNode.PluginID)
// Check if the standalone plugin page appears under the section where we registered it and if it overrides the original page
@ -317,8 +317,8 @@ func TestAddAppLinks(t *testing.T) {
require.NoError(t, err)
require.Equal(t, "Connections", connectionsNode.Text)
require.Equal(t, "Connect data", connectDataNode.Text)
require.Equal(t, "standalone-plugin-page-/connections/connect-data", connectDataNode.Id) // Overridden "Connect data" page
require.Equal(t, "Add new connection", connectDataNode.Text)
require.Equal(t, "standalone-plugin-page-/connections/add-new-connection", connectDataNode.Id) // Overridden "Add new connection" page
require.Equal(t, "test-app3", connectDataNode.PluginID)
// Check if the standalone plugin page does not appear under the app section anymore
@ -342,12 +342,12 @@ func TestAddAppLinks(t *testing.T) {
require.NoError(t, err)
// The original core page should exist under the section
connectDataNode := treeRoot.FindById("connections-connect-data")
require.Equal(t, "connections-connect-data", connectDataNode.Id)
connectDataNode := treeRoot.FindById("connections-add-new-connection")
require.Equal(t, "connections-add-new-connection", connectDataNode.Id)
require.Equal(t, "", connectDataNode.PluginID)
// The standalone plugin page should not be found in the navtree at all (as we didn't configure it)
standaloneConnectDataNode := treeRoot.FindById("standalone-plugin-page-/connections/connect-data")
standaloneConnectDataNode := treeRoot.FindById("standalone-plugin-page-/connections/add-new-connection")
require.Nil(t, standaloneConnectDataNode)
// Only the pages that have `AddToNav=true` appear under the plugin navigation

View File

@ -481,29 +481,22 @@ func (s *ServiceImpl) buildDataConnectionsNavLink(c *contextmodel.ReqContext) *n
baseUrl := s.cfg.AppSubURL + "/connections"
if hasAccess(ac.ReqOrgAdmin, datasources.ConfigurationPageAccess) {
// Connect data
// Add new connection
children = append(children, &navtree.NavLink{
Id: "connections-connect-data",
Text: "Connect data",
SubTitle: "Browse and create new connections",
IsSection: true,
Url: s.cfg.AppSubURL + "/connections/connect-data",
Children: []*navtree.NavLink{},
Id: "connections-add-new-connection",
Text: "Add new connection",
SubTitle: "Browse and create new connections",
Url: baseUrl + "/add-new-connection",
Children: []*navtree.NavLink{},
})
// Your connections
// Your data sources
children = append(children, &navtree.NavLink{
Id: "connections-your-connections",
Text: "Your connections",
SubTitle: "Manage your existing connections",
Url: baseUrl + "/your-connections",
// Datasources
Children: []*navtree.NavLink{{
Id: "connections-your-connections-datasources",
Text: "Data sources",
SubTitle: "View and manage your connected data source connections",
Url: baseUrl + "/your-connections/datasources",
}},
Id: "connections-your-datasources",
Text: "Your data sources",
SubTitle: "View and manage your connected data source connections",
Url: baseUrl + "/your-datasources",
Children: []*navtree.NavLink{},
})
}

View File

@ -38,56 +38,49 @@ describe('Connections', () => {
(contextSrv.hasPermission as jest.Mock) = jest.fn().mockReturnValue(true);
});
test('shows the "Connect data" page by default', async () => {
test('shows the "Add new connection" page by default', async () => {
renderPage();
// Data sources group
expect(await screen.findByText('Data sources')).toBeVisible();
// Heading
expect(await screen.findByText('Connect data')).toBeVisible();
expect(await screen.findByText('Add new connection')).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();
});
test('renders the correct tab even if accessing it with a "sub-url"', async () => {
renderPage(ROUTES.ConnectData);
renderPage(ROUTES.AddNewConnection);
expect(await screen.findByText('Connect data')).toBeVisible();
expect(await screen.findByText('Add new connection')).toBeVisible();
expect(await screen.findByText('Browse and create new connections')).toBeVisible();
// Should not render the "Your datasources" page
expect(screen.queryByText('Manage your existing datasource connections')).not.toBeInTheDocument();
});
test('renders the core "Connect data" page in case there is no standalone plugin page override for it', async () => {
renderPage(ROUTES.ConnectData);
test('renders the core "Add new connection" page in case there is no standalone plugin page override for it', async () => {
renderPage(ROUTES.AddNewConnection);
// We expect to see no results and "Data sources" as a header (we only have data sources in OSS Grafana at this point)
expect(await screen.findByText('Data sources')).toBeVisible();
expect(await screen.findByText('No results matching your query were found.')).toBeVisible();
});
test('does not render anything for the "Connect data" page in case it is displayed by a standalone plugin page', async () => {
// We are overriding the navIndex to have the "Connect data" page registered by a plugin
test('does not render anything for the "Add new connection" page in case it is displayed by a standalone plugin page', async () => {
// We are overriding the navIndex to have the "Add new connection" page registered by a plugin
const standalonePluginPage = {
id: 'standalone-plugin-page-/connections/connect-data',
text: 'Connect data',
id: 'standalone-plugin-page-/connections/add-new-connection',
text: 'Add new connection',
subTitle: 'Browse and create new connections',
url: '/connections/connect-data',
url: '/connections/add-new-connection',
pluginId: 'grafana-easystart-app',
};
const connections = {
...navIndex.connections,
children: navIndex.connections.children?.map((child) => {
if (child.id === 'connections-connect-data') {
if (child.id === 'connections-add-new-connection') {
return standalonePluginPage;
}
@ -100,40 +93,10 @@ describe('Connections', () => {
plugins: getPluginsStateMock([]),
});
renderPage(ROUTES.ConnectData, store);
renderPage(ROUTES.AddNewConnection, store);
// We expect not to see the text that would be rendered by the core "Connect data" page
// We expect not to see the text that would be rendered by the core "Add new connection" page
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();
});
});

View File

@ -1,13 +1,12 @@
import * as React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { NavLandingPage } from 'app/core/components/NavLandingPage/NavLandingPage';
import { DataSourcesRoutesContext } from 'app/features/datasources/state';
import { StoreState, useSelector } from 'app/types';
import { ROUTES } from './constants';
import {
ConnectDataPage,
AddNewConnectionPage,
DataSourceDashboardsPage,
DataSourceDetailsPage,
DataSourcesListPage,
@ -17,12 +16,7 @@ import {
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} />;
const isAddNewConnectionPageOverridden = Boolean(navIndex['standalone-plugin-page-/connections/add-new-connection']);
return (
<DataSourcesRoutesContext.Provider
@ -34,17 +28,18 @@ 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={YourConnectionsPage} />
{/* Redirect to "Add new connection" by default */}
<Route exact sensitive path={ROUTES.Base} component={() => <Redirect to={ROUTES.AddNewConnection} />} />
<Route exact sensitive path={ROUTES.DataSources} component={DataSourcesListPage} />
<Route exact sensitive path={ROUTES.DataSourcesDetails} component={DataSourceDetailsPage} />
<Route exact sensitive path={ROUTES.DataSourcesNew} component={NewDataSourcePage} />
<Route exact sensitive path={ROUTES.DataSourcesEdit} component={EditDataSourcePage} />
<Route exact sensitive path={ROUTES.DataSourcesDashboards} component={DataSourceDashboardsPage} />
{/* "Connect data" page - we don't register a route in case a plugin already registers a standalone page for it */}
{!isConnectDataPageOverriden && <Route exact sensitive path={ROUTES.ConnectData} component={ConnectDataPage} />}
{/* "Add new connection" page - we don't register a route in case a plugin already registers a standalone page for it */}
{!isAddNewConnectionPageOverridden && (
<Route exact sensitive path={ROUTES.AddNewConnection} component={AddNewConnectionPage} />
)}
{/* Not found */}
<Route component={() => <Redirect to="/notfound" />} />

View File

@ -229,30 +229,22 @@ export const navIndex: NavIndex = {
sortWeight: -1300,
children: [
{
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',
},
{
id: 'standalone-plugin-page-/connections/your-connections/infrastructure',
text: 'Infrastructure',
url: '/connections/your-connections/infrastructure',
pluginId: 'grafana-easystart-app',
},
],
id: 'connections-add-new-connection',
text: 'Add new connection',
subTitle: 'Browse and create new connections',
url: '/connections/add-new-connection',
},
{
id: 'connections-connect-data',
text: 'Connect data',
subTitle: 'Browse and create new connections',
url: '/connections/connect-data',
id: 'connections-your-datasources',
text: 'Your data sources',
subTitle: 'Manage your existing datasource connections',
url: '/connections/your-datasources',
},
{
id: 'standalone-plugin-page-/connections/your-infrastructure',
text: 'Your infrastructure',
url: '/connections/your-infrastructure',
pluginId: 'grafana-easystart-app',
},
],
parentItem: {
@ -263,43 +255,23 @@ export const navIndex: NavIndex = {
sortWeight: -2000,
},
},
'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',
},
{
id: 'standalone-plugin-page-/connections/your-connections/infrastructure',
text: 'Infrastructure',
url: '/connections/your-connections/infrastructure',
pluginId: 'grafana-easystart-app',
},
],
},
'connections-your-connections-datasources': {
id: 'connections-your-connections-datasources',
text: 'Datasources',
'connections-your-datasources': {
id: 'connections-your-datasources',
text: 'Your data sources',
subTitle: 'Manage your existing datasource connections',
url: '/connections/your-connections/datasources',
url: '/connections/your-datasources',
},
'standalone-plugin-page-/connections/your-connections/infrastructure': {
id: 'standalone-plugin-page-/connections/your-connections/infrastructure',
text: 'Infrastructure',
url: '/connections/your-connections/infrastructure',
'standalone-plugin-page-/connections/your-infrastructure': {
id: 'standalone-plugin-page-/connections/your-infrastructure',
text: 'Your infrastructure',
url: '/connections/your-infrastructure',
pluginId: 'grafana-easystart-app',
},
'connections-connect-data': {
id: 'connections-connect-data',
text: 'Connect data',
'connections-add-new-connection': {
id: 'connections-add-new-connection',
text: 'Add new connection',
subTitle: 'Browse and create new connections',
url: '/connections/connect-data',
url: '/connections/add-new-connection',
},
cfg: {
id: 'cfg',

View File

@ -4,16 +4,13 @@ export const ROUTE_BASE_ID = 'connections';
export const ROUTES = {
Base: `/${ROUTE_BASE_ID}`,
// Your Connections
YourConnections: `/${ROUTE_BASE_ID}/your-connections`,
// Your Datasources
DataSources: `/${ROUTE_BASE_ID}/your-datasources`,
DataSourcesNew: `/${ROUTE_BASE_ID}/your-datasources/new`,
DataSourcesEdit: `/${ROUTE_BASE_ID}/your-datasources/edit/:uid`,
DataSourcesDashboards: `/${ROUTE_BASE_ID}/your-datasources/edit/:uid/dashboards`,
// Your Connections / Datasources
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}/your-connections/datasources/edit/:uid/dashboards`,
// Connect Data
ConnectData: `/${ROUTE_BASE_ID}/connect-data`,
// Add new connection
AddNewConnection: `/${ROUTE_BASE_ID}/add-new-connection`,
DataSourcesDetails: `/${ROUTE_BASE_ID}/datasources/:id`,
} as const;

View File

@ -23,12 +23,12 @@ export function useDataSourceSettingsNav(pageId?: string) {
active: true,
children: (nav.main.children || []).map((navModelItem) => ({
...navModelItem,
url: navModelItem.url?.replace('datasources/edit/', '/connections/your-connections/datasources/edit/'),
url: navModelItem.url?.replace('datasources/edit/', '/connections/your-datasources/edit/'),
})),
};
return {
navId: 'connections-your-connections-datasources',
navId: 'connections-your-datasources',
pageNav,
};
}

View File

@ -0,0 +1,15 @@
import * as React from 'react';
import { Page } from 'app/core/components/Page/Page';
import { AddNewConnection } from '../tabs/ConnectData';
export function AddNewConnectionPage() {
return (
<Page navId={'connections-add-new-connection'}>
<Page.Contents>
<AddNewConnection />
</Page.Contents>
</Page>
);
}

View File

@ -1,15 +0,0 @@
import * as React from 'react';
import { Page } from 'app/core/components/Page/Page';
import { ConnectData } from '../tabs/ConnectData';
export function ConnectDataPage() {
return (
<Page navId={'connections-connect-data'}>
<Page.Contents>
<ConnectData />
</Page.Contents>
</Page>
);
}

View File

@ -8,11 +8,11 @@ import { StoreState, useSelector, AppNotificationSeverity } from 'app/types';
import { ROUTES } from '../constants';
export function DataSourceDetailsPage() {
const overrideNavId = 'standalone-plugin-page-/connections/connect-data';
const overrideNavId = 'standalone-plugin-page-/connections/add-new-connection';
const { id } = useParams<{ id: string }>();
const navIndex = useSelector((state: StoreState) => state.navIndex);
const isConnectDataPageOverriden = Boolean(navIndex[overrideNavId]);
const navId = isConnectDataPageOverriden ? overrideNavId : 'connections-connect-data'; // The nav id changes (gets a prefix) if it is overriden by a plugin
const navId = isConnectDataPageOverriden ? overrideNavId : 'connections-add-new-connection'; // The nav id changes (gets a prefix) if it is overriden by a plugin
return (
<PluginDetailsPage
@ -35,7 +35,7 @@ function NotFoundDatasource() {
<Alert severity={AppNotificationSeverity.Warning} title="">
Maybe you mistyped the URL or the plugin with the id <Badge text={id} color="orange" /> is unavailable.
<br />
To see a list of available datasources please <a href={ROUTES.ConnectData}>click here</a>.
To see a list of available datasources please <a href={ROUTES.AddNewConnection}>click here</a>.
</Alert>
);
}

View File

@ -11,7 +11,7 @@ export function DataSourcesListPage() {
const actions = dataSourcesCount > 0 ? <DataSourceAddButton /> : undefined;
return (
<Page navId={'connections-your-connections-datasources'} actions={actions}>
<Page navId={'connections-your-datasources'} actions={actions}>
<Page.Contents>
<DataSourcesList />
</Page.Contents>

View File

@ -6,7 +6,7 @@ import { NewDataSource } from 'app/features/datasources/components/NewDataSource
export function NewDataSourcePage() {
return (
<Page
navId={'connections-your-connections-datasources'}
navId={'connections-your-datasources'}
pageNav={{ text: 'Add data source', subTitle: 'Choose a data source type', active: true }}
>
<Page.Contents>

View File

@ -1,4 +1,4 @@
export { ConnectDataPage } from './ConnectDataPage';
export { AddNewConnectionPage } from './AddNewConnectionPage';
export { DataSourceDetailsPage } from './DataSourceDetailsPage';
export { DataSourcesListPage } from './DataSourcesListPage';
export { DataSourceDashboardsPage } from './DataSourceDashboardsPage';

View File

@ -9,7 +9,7 @@ import { CatalogPlugin } from 'app/features/plugins/admin/types';
import { configureStore } from 'app/store/configureStore';
import { AccessControlAction } from 'app/types';
import { ConnectData } from './ConnectData';
import { AddNewConnection } from './ConnectData';
jest.mock('app/features/datasources/api');
@ -19,7 +19,7 @@ const renderPage = (plugins: CatalogPlugin[] = []): RenderResult => {
return render(
<Provider store={store}>
<ConnectData />
<AddNewConnection />
</Provider>
);
};
@ -32,7 +32,7 @@ const mockCatalogDataSourcePlugin = getCatalogPluginMock({
const originalHasPermission = contextSrv.hasPermission;
describe('Connect Data', () => {
describe('Add new connection', () => {
beforeEach(() => {
contextSrv.hasPermission = originalHasPermission;
});

View File

@ -27,7 +27,7 @@ const getStyles = () => ({
`,
});
export function ConnectData() {
export function AddNewConnection() {
const [searchTerm, setSearchTerm] = useState('');
const [isNoAccessModalOpen, setIsNoAccessModalOpen] = useState(false);
const [focusedItem, setFocusedItem] = useState<CardGridItem | null>(null);

View File

@ -91,7 +91,7 @@ export function NoAccessModal({ item, isOpen, onDismiss }: NoAccessModalProps) {
<div>
<p>
Editors cannot add new connections. You may check to see if it is already configured in{' '}
<a href="/connections/your-connections">Your Connections</a>.
<a href="/connections/your-datasources">Your data sources</a>.
</p>
<p>To add a new connection, contact your Grafana admin.</p>
</div>

View File

@ -19,7 +19,7 @@ export type Props = {
export function DataSourceCategories({ categories, onClickDataSourceType }: Props) {
const moreDataSourcesLink = config.featureToggles.dataConnectionsConsole
? `${ROUTES.ConnectData}?cat=data-source`
? `${ROUTES.AddNewConnection}?cat=data-source`
: '/plugins?filterBy=all&filterByType=datasource&utm_source=grafana_add_ds';
return (

View File

@ -67,7 +67,7 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
const subTitle = config.featureToggles.dataConnectionsConsole ? (
<div>
Extend the Grafana experience with panel plugins and apps. To find more data sources go to{' '}
<a className="external-link" href={`${CONNECTIONS_ROUTES.ConnectData}?cat=data-source`}>
<a className="external-link" href={`${CONNECTIONS_ROUTES.AddNewConnection}?cat=data-source`}>
Connections
</a>
.