diff --git a/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.test.tsx b/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.test.tsx
new file mode 100644
index 00000000000..d88c6e7ab21
--- /dev/null
+++ b/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.test.tsx
@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { TestProvider } from 'test/helpers/TestProvider';
+
+import { PluginSignatureStatus } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { ContextSrv, setContextSrv } from 'app/core/services/context_srv';
+import { AccessControlAction } from 'app/types';
+
+import { CatalogPlugin } from '../../types';
+
+import { GetStartedWithDataSource } from './GetStartedWithDataSource';
+
+const plugin: CatalogPlugin = {
+ description: 'The test plugin',
+ downloads: 5,
+ id: 'test-plugin',
+ info: {
+ logos: { small: '', large: '' },
+ },
+ name: 'Testing Plugin',
+ orgName: 'Test',
+ popularity: 0,
+ signature: PluginSignatureStatus.valid,
+ publishedAt: '2020-09-01',
+ updatedAt: '2021-06-28',
+ hasUpdate: false,
+ isInstalled: false,
+ isCore: false,
+ isDev: false,
+ isEnterprise: false,
+ isDisabled: false,
+ isDeprecated: false,
+ isPublished: true,
+};
+
+describe('GetStartedWithDataSource', () => {
+ const oldFeatureTogglesManagedPluginsInstall = config.featureToggles.managedPluginsInstall;
+ const oldPluginAdminExternalManageEnabled = config.pluginAdminExternalManageEnabled;
+
+ config.featureToggles.managedPluginsInstall = true;
+ config.pluginAdminExternalManageEnabled = true;
+
+ const contextSrv = new ContextSrv();
+ contextSrv.user.permissions = {
+ [AccessControlAction.DataSourcesCreate]: true,
+ [AccessControlAction.DataSourcesWrite]: true,
+ };
+ setContextSrv(contextSrv);
+
+ afterAll(() => {
+ config.featureToggles.managedPluginsInstall = oldFeatureTogglesManagedPluginsInstall;
+ config.pluginAdminExternalManageEnabled = oldPluginAdminExternalManageEnabled;
+ });
+
+ it('should disable button when managedPluginsInstall and pluginAdminExternalManaged are enabled, but plugin.isFullyInstalled is false', () => {
+ render(
+
+
+
+ );
+
+ const el = screen.getByRole('button', { hidden: true });
+ expect(el).toHaveTextContent(/Add new data source/i);
+ expect(el).toBeDisabled();
+ });
+
+ it('should disable button when managedPluginsInstall and pluginAdminExternalManaged are enabled, but plugin.isFullyInstalled is true', () => {
+ render(
+
+
+
+ );
+
+ const el = screen.getByRole('button', { hidden: true });
+ expect(el).toHaveTextContent(/Add new data source/i);
+ expect(el).toBeEnabled();
+ });
+});
diff --git a/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.tsx b/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.tsx
index 4650a2c885d..aad3e99d218 100644
--- a/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.tsx
+++ b/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.tsx
@@ -3,7 +3,6 @@ import React, { useCallback } from 'react';
import { DataSourcePluginMeta } from '@grafana/data';
import { config } from '@grafana/runtime';
import { Button } from '@grafana/ui';
-import configCore from 'app/core/config';
import { useDataSourcesRoutes, addDataSource } from 'app/features/datasources/state';
import { useDispatch } from 'app/types';
@@ -31,9 +30,7 @@ export function GetStartedWithDataSource({ plugin }: Props): React.ReactElement
}
const disabledButton =
- configCore.featureToggles.managedPluginsInstall &&
- config.pluginAdminExternalManageEnabled &&
- !plugin.isFullyInstalled;
+ config.featureToggles.managedPluginsInstall && config.pluginAdminExternalManageEnabled && !plugin.isFullyInstalled;
return (