From fe11a31175574be96acaa29e740df9e58bb9e859 Mon Sep 17 00:00:00 2001
From: Marcus Andersson <marcus.andersson@grafana.com>
Date: Tue, 26 Oct 2021 15:18:12 +0200
Subject: [PATCH] PluginsCatalog: disable post-installation steps if user does
 not have sufficient permissions (#40853)

* added missing permissions check

* moved the permission check to the datasource component.

* added test for checking permissions.

* added tests with different permissions.

* minor refactoring so the mockUserPermisson can be reused.
---
 public/app/features/live/pages/routes.ts      |   2 +-
 .../plugins/admin/__mocks__/mockHelpers.ts    |  17 +
 .../GetStartedWithDataSource.tsx              |   7 +-
 .../components/InstallControls/index.tsx      |   3 +-
 public/app/features/plugins/admin/helpers.ts  |   9 -
 .../admin/hooks/usePluginDetailsTabs.tsx      |   2 +-
 .../admin/pages/PluginDetails.test.tsx        | 688 ++++++++++--------
 .../app/features/plugins/admin/permissions.ts |  18 +
 public/app/features/plugins/routes.ts         |   2 +-
 9 files changed, 426 insertions(+), 322 deletions(-)
 create mode 100644 public/app/features/plugins/admin/permissions.ts

diff --git a/public/app/features/live/pages/routes.ts b/public/app/features/live/pages/routes.ts
index d95721107e4..7620f07c10e 100644
--- a/public/app/features/live/pages/routes.ts
+++ b/public/app/features/live/pages/routes.ts
@@ -1,7 +1,7 @@
 import { SafeDynamicImport } from 'app/core/components/DynamicImports/SafeDynamicImport';
 import { config } from 'app/core/config';
 import { RouteDescriptor } from 'app/core/navigation/types';
-import { isGrafanaAdmin } from 'app/features/plugins/admin/helpers';
+import { isGrafanaAdmin } from 'app/features/plugins/admin/permissions';
 
 const liveRoutes = [
   {
diff --git a/public/app/features/plugins/admin/__mocks__/mockHelpers.ts b/public/app/features/plugins/admin/__mocks__/mockHelpers.ts
index 23d586ba269..14e31fae777 100644
--- a/public/app/features/plugins/admin/__mocks__/mockHelpers.ts
+++ b/public/app/features/plugins/admin/__mocks__/mockHelpers.ts
@@ -1,3 +1,4 @@
+import { mocked } from 'ts-jest/utils';
 import { setBackendSrv } from '@grafana/runtime';
 import { API_ROOT, GRAFANA_API_ROOT } from '../constants';
 import {
@@ -9,6 +10,7 @@ import {
   RequestStatus,
   PluginListDisplayMode,
 } from '../types';
+import * as permissions from '../permissions';
 import remotePluginMock from './remotePlugin.mock';
 import localPluginMock from './localPlugin.mock';
 import catalogPluginMock from './catalogPlugin.mock';
@@ -98,3 +100,18 @@ export const mockPluginApis = ({
     },
   });
 };
+
+type UserAccessTestContext = {
+  isAdmin: boolean;
+  isOrgAdmin: boolean;
+  isDataSourceEditor: boolean;
+};
+
+jest.mock('../permissions');
+
+export function mockUserPermissions(options: UserAccessTestContext): void {
+  const mock = mocked(permissions);
+  mock.isDataSourceEditor.mockReturnValue(options.isDataSourceEditor);
+  mock.isOrgAdmin.mockReturnValue(options.isOrgAdmin);
+  mock.isGrafanaAdmin.mockReturnValue(options.isAdmin);
+}
diff --git a/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.tsx b/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.tsx
index 65bb88ed27f..55e7c3f29ae 100644
--- a/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.tsx
+++ b/public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithDataSource.tsx
@@ -3,13 +3,14 @@ import { Button } from '@grafana/ui';
 import { addDataSource } from 'app/features/datasources/state/actions';
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
+import { isDataSourceEditor } from '../../permissions';
 import { CatalogPlugin } from '../../types';
 
 type Props = {
   plugin: CatalogPlugin;
 };
 
-export function GetStartedWithDataSource({ plugin }: Props): React.ReactElement {
+export function GetStartedWithDataSource({ plugin }: Props): React.ReactElement | null {
   const dispatch = useDispatch();
   const onAddDataSource = useCallback(() => {
     const meta = {
@@ -20,6 +21,10 @@ export function GetStartedWithDataSource({ plugin }: Props): React.ReactElement
     dispatch(addDataSource(meta));
   }, [dispatch, plugin]);
 
+  if (!isDataSourceEditor()) {
+    return null;
+  }
+
   return (
     <Button variant="primary" onClick={onAddDataSource}>
       Create a {plugin.name} data source
diff --git a/public/app/features/plugins/admin/components/InstallControls/index.tsx b/public/app/features/plugins/admin/components/InstallControls/index.tsx
index 16110ddce1e..689a0b4a586 100644
--- a/public/app/features/plugins/admin/components/InstallControls/index.tsx
+++ b/public/app/features/plugins/admin/components/InstallControls/index.tsx
@@ -9,8 +9,9 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { ExternallyManagedButton } from './ExternallyManagedButton';
 import { InstallControlsButton } from './InstallControlsButton';
 import { CatalogPlugin, PluginStatus } from '../../types';
-import { isGrafanaAdmin, getExternalManageLink } from '../../helpers';
+import { getExternalManageLink } from '../../helpers';
 import { useIsRemotePluginsAvailable } from '../../state/hooks';
+import { isGrafanaAdmin } from '../../permissions';
 
 interface Props {
   plugin: CatalogPlugin;
diff --git a/public/app/features/plugins/admin/helpers.ts b/public/app/features/plugins/admin/helpers.ts
index e6c9b460916..09a13c33a09 100644
--- a/public/app/features/plugins/admin/helpers.ts
+++ b/public/app/features/plugins/admin/helpers.ts
@@ -1,19 +1,10 @@
 import { config } from '@grafana/runtime';
 import { gt } from 'semver';
 import { PluginSignatureStatus, dateTimeParse, PluginError } from '@grafana/data';
-import { contextSrv } from 'app/core/services/context_srv';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { Settings } from 'app/core/config';
 import { CatalogPlugin, LocalPlugin, RemotePlugin } from './types';
 
-export function isGrafanaAdmin(): boolean {
-  return config.bootData.user.isGrafanaAdmin;
-}
-
-export function isOrgAdmin() {
-  return contextSrv.hasRole('Admin');
-}
-
 export function mergeLocalsAndRemotes(
   local: LocalPlugin[] = [],
   remote: RemotePlugin[] = [],
diff --git a/public/app/features/plugins/admin/hooks/usePluginDetailsTabs.tsx b/public/app/features/plugins/admin/hooks/usePluginDetailsTabs.tsx
index 32610b91d9c..925ef3ae3af 100644
--- a/public/app/features/plugins/admin/hooks/usePluginDetailsTabs.tsx
+++ b/public/app/features/plugins/admin/hooks/usePluginDetailsTabs.tsx
@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { PluginIncludeType, PluginType } from '@grafana/data';
 import { CatalogPlugin, PluginDetailsTab, PluginTabIds } from '../types';
-import { isOrgAdmin } from '../helpers';
 import { usePluginConfig } from '../hooks/usePluginConfig';
+import { isOrgAdmin } from '../permissions';
 
 type ReturnType = {
   error: Error | undefined;
diff --git a/public/app/features/plugins/admin/pages/PluginDetails.test.tsx b/public/app/features/plugins/admin/pages/PluginDetails.test.tsx
index 0279251d631..5bd2424213b 100644
--- a/public/app/features/plugins/admin/pages/PluginDetails.test.tsx
+++ b/public/app/features/plugins/admin/pages/PluginDetails.test.tsx
@@ -4,23 +4,20 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, RenderResult, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { config } from '@grafana/runtime';
+import { mockPluginApis, getCatalogPluginMock, getPluginsStateMock, mockUserPermissions } from '../__mocks__';
 import { configureStore } from 'app/store/configureStore';
 import PluginDetailsPage from './PluginDetails';
 import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
 import { CatalogPlugin, PluginTabIds, RequestStatus, ReducerState } from '../types';
 import * as api from '../api';
 import { fetchRemotePlugins } from '../state/actions';
-import { mockPluginApis, getCatalogPluginMock, getPluginsStateMock } from '../__mocks__';
 import { PluginErrorCode, PluginSignatureStatus, PluginType } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 jest.mock('@grafana/runtime', () => {
   const original = jest.requireActual('@grafana/runtime');
   const mockedRuntime = { ...original };
-
-  mockedRuntime.config.bootData.user.isGrafanaAdmin = true;
   mockedRuntime.config.buildInfo.version = 'v8.1.0';
-
   return mockedRuntime;
 });
 
@@ -55,7 +52,6 @@ const renderPluginDetails = (
       <Provider store={store}>
         <PluginDetailsPage {...props} />
       </Provider>
-      ,
     </MemoryRouter>
   );
 };
@@ -78,354 +74,430 @@ describe('Plugin details page', () => {
     dateNow.mockRestore();
   });
 
-  // We are doing this very basic test to see if the API fetching and data-munging is working correctly from a high-level.
-  it('(SMOKE TEST) - should fetch and merge the remote and local plugin API responses correctly ', async () => {
-    const id = 'smoke-test-plugin';
-
-    mockPluginApis({
-      remote: { slug: id },
-      local: { id },
+  describe('viewed as user with grafana admin permissions', () => {
+    beforeAll(() => {
+      mockUserPermissions({
+        isAdmin: true,
+        isDataSourceEditor: true,
+        isOrgAdmin: true,
+      });
     });
 
-    const props = getRouteComponentProps({
-      match: { params: { pluginId: id }, isExact: true, url: '', path: '' },
-      queryParams: { page: PluginTabIds.OVERVIEW },
-      location: {
-        hash: '',
-        pathname: `/plugins/${id}`,
-        search: `?page=${PluginTabIds.OVERVIEW}`,
-        state: undefined,
-      },
+    // We are doing this very basic test to see if the API fetching and data-munging is working correctly from a high-level.
+    it('(SMOKE TEST) - should fetch and merge the remote and local plugin API responses correctly ', async () => {
+      const id = 'smoke-test-plugin';
+
+      mockPluginApis({
+        remote: { slug: id },
+        local: { id },
+      });
+
+      const props = getRouteComponentProps({
+        match: { params: { pluginId: id }, isExact: true, url: '', path: '' },
+        queryParams: { page: PluginTabIds.OVERVIEW },
+        location: {
+          hash: '',
+          pathname: `/plugins/${id}`,
+          search: `?page=${PluginTabIds.OVERVIEW}`,
+          state: undefined,
+        },
+      });
+      const store = configureStore();
+      const { queryByText } = render(
+        <MemoryRouter>
+          <Provider store={store}>
+            <PluginDetailsPage {...props} />
+          </Provider>
+          ,
+        </MemoryRouter>
+      );
+
+      await waitFor(() => expect(queryByText(/licensed under the apache 2.0 license/i)).toBeInTheDocument());
     });
-    const store = configureStore();
-    const { queryByText } = render(
-      <MemoryRouter>
-        <Provider store={store}>
-          <PluginDetailsPage {...props} />
-        </Provider>
-        ,
-      </MemoryRouter>
-    );
 
-    await waitFor(() => expect(queryByText(/licensed under the apache 2.0 license/i)).toBeInTheDocument());
-  });
+    it('should display an overview (plugin readme) by default', async () => {
+      const { queryByText } = renderPluginDetails({ id });
 
-  it('should display an overview (plugin readme) by default', async () => {
-    const { queryByText } = renderPluginDetails({ id });
+      await waitFor(() => expect(queryByText(/licensed under the apache 2.0 license/i)).toBeInTheDocument());
+    });
 
-    await waitFor(() => expect(queryByText(/licensed under the apache 2.0 license/i)).toBeInTheDocument());
-  });
+    it('should display the number of downloads in the header', async () => {
+      const downloads = 24324;
+      const { queryByText } = renderPluginDetails({ id, downloads });
+      await waitFor(() => expect(queryByText(new Intl.NumberFormat().format(downloads))).toBeInTheDocument());
+    });
 
-  it('should display the number of downloads in the header', async () => {
-    const downloads = 24324;
-    const { queryByText } = renderPluginDetails({ id, downloads });
-    await waitFor(() => expect(queryByText(new Intl.NumberFormat().format(downloads))).toBeInTheDocument());
-  });
+    it('should display the version in the header', async () => {
+      const version = '1.3.443';
+      const { queryByText } = renderPluginDetails({ id, version });
 
-  it('should display the version in the header', async () => {
-    const version = '1.3.443';
-    const { queryByText } = renderPluginDetails({ id, version });
+      await waitFor(() => expect(queryByText(version)).toBeInTheDocument());
+    });
 
-    await waitFor(() => expect(queryByText(version)).toBeInTheDocument());
-  });
+    it('should display description in the header', async () => {
+      const description = 'This is my description';
+      const { queryByText } = renderPluginDetails({ id, description });
 
-  it('should display description in the header', async () => {
-    const description = 'This is my description';
-    const { queryByText } = renderPluginDetails({ id, description });
+      await waitFor(() => expect(queryByText(description)).toBeInTheDocument());
+    });
 
-    await waitFor(() => expect(queryByText(description)).toBeInTheDocument());
-  });
+    it('should display a "Signed" badge if the plugin signature is verified', async () => {
+      const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.valid });
 
-  it('should display a "Signed" badge if the plugin signature is verified', async () => {
-    const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.valid });
+      await waitFor(() => expect(queryByText('Signed')).toBeInTheDocument());
+    });
 
-    await waitFor(() => expect(queryByText('Signed')).toBeInTheDocument());
-  });
+    it('should display a "Missing signature" badge if the plugin signature is missing', async () => {
+      const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.missing });
 
-  it('should display a "Missing signature" badge if the plugin signature is missing', async () => {
-    const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.missing });
+      await waitFor(() => expect(queryByText('Missing signature')).toBeInTheDocument());
+    });
 
-    await waitFor(() => expect(queryByText('Missing signature')).toBeInTheDocument());
-  });
+    it('should display a "Modified signature" badge if the plugin signature is modified', async () => {
+      const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.modified });
 
-  it('should display a "Modified signature" badge if the plugin signature is modified', async () => {
-    const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.modified });
+      await waitFor(() => expect(queryByText('Modified signature')).toBeInTheDocument());
+    });
 
-    await waitFor(() => expect(queryByText('Modified signature')).toBeInTheDocument());
-  });
+    it('should display a "Invalid signature" badge if the plugin signature is invalid', async () => {
+      const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.invalid });
 
-  it('should display a "Invalid signature" badge if the plugin signature is invalid', async () => {
-    const { queryByText } = renderPluginDetails({ id, signature: PluginSignatureStatus.invalid });
+      await waitFor(() => expect(queryByText('Invalid signature')).toBeInTheDocument());
+    });
 
-    await waitFor(() => expect(queryByText('Invalid signature')).toBeInTheDocument());
-  });
+    it('should display version history in case it is available', async () => {
+      const { queryByText, getByRole } = renderPluginDetails(
+        {
+          id,
+          details: {
+            links: [],
+            versions: [
+              {
+                version: '1.0.0',
+                createdAt: '2016-04-06T20:23:41.000Z',
+              },
+            ],
+          },
+        },
+        { pageId: PluginTabIds.VERSIONS }
+      );
 
-  it('should display version history in case it is available', async () => {
-    const { queryByText, getByRole } = renderPluginDetails(
-      {
+      // Check if version information is available
+      await waitFor(() => expect(queryByText(/version history/i)).toBeInTheDocument());
+
+      expect(
+        getByRole('columnheader', {
+          name: /version/i,
+        })
+      ).toBeInTheDocument();
+      expect(
+        getByRole('columnheader', {
+          name: /last updated/i,
+        })
+      ).toBeInTheDocument();
+      expect(
+        getByRole('cell', {
+          name: /1\.0\.0/i,
+        })
+      ).toBeInTheDocument();
+      expect(
+        getByRole('cell', {
+          name: /5 years ago/i,
+        })
+      ).toBeInTheDocument();
+    });
+
+    it("should display an install button for a plugin that isn't installed", async () => {
+      const { queryByRole } = renderPluginDetails({ id, isInstalled: false });
+
+      await waitFor(() => expect(queryByRole('button', { name: /install/i })).toBeInTheDocument());
+      expect(queryByRole('button', { name: /uninstall/i })).not.toBeInTheDocument();
+    });
+
+    it('should display an uninstall button for an already installed plugin', async () => {
+      const { queryByRole } = renderPluginDetails({ id, isInstalled: true });
+
+      await waitFor(() => expect(queryByRole('button', { name: /uninstall/i })).toBeInTheDocument());
+    });
+
+    it('should display update and uninstall buttons for a plugin with update', async () => {
+      const { queryByRole } = renderPluginDetails({ id, isInstalled: true, hasUpdate: true });
+
+      // Displays an "update" button
+      await waitFor(() => expect(queryByRole('button', { name: /update/i })).toBeInTheDocument());
+
+      // Does not display "install" and "uninstall" buttons
+      expect(queryByRole('button', { name: /install/i })).toBeInTheDocument();
+      expect(queryByRole('button', { name: /uninstall/i })).toBeInTheDocument();
+    });
+
+    it('should display an install button for enterprise plugins if license is valid', async () => {
+      config.licenseInfo.hasValidLicense = true;
+
+      const { queryByRole } = renderPluginDetails({ id, isInstalled: false, isEnterprise: true });
+
+      await waitFor(() => expect(queryByRole('button', { name: /install/i })).toBeInTheDocument());
+    });
+
+    it('should not display install button for enterprise plugins if license is invalid', async () => {
+      config.licenseInfo.hasValidLicense = false;
+
+      const { queryByRole, queryByText } = renderPluginDetails({ id, isInstalled: true, isEnterprise: true });
+
+      await waitFor(() => expect(queryByRole('button', { name: /install/i })).not.toBeInTheDocument());
+      expect(queryByText(/no valid Grafana Enterprise license detected/i)).toBeInTheDocument();
+      expect(queryByRole('link', { name: /learn more/i })).toBeInTheDocument();
+    });
+
+    it('should not display install / uninstall buttons for core plugins', async () => {
+      const { queryByRole } = renderPluginDetails({ id, isInstalled: true, isCore: true });
+
+      await waitFor(() => expect(queryByRole('button', { name: /update/i })).not.toBeInTheDocument());
+      await waitFor(() => expect(queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
+    });
+
+    it('should not display install / uninstall buttons for disabled plugins', async () => {
+      const { queryByRole } = renderPluginDetails({ id, isInstalled: true, isDisabled: true });
+
+      await waitFor(() => expect(queryByRole('button', { name: /update/i })).not.toBeInTheDocument());
+      await waitFor(() => expect(queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
+    });
+
+    it('should display install link with `config.pluginAdminExternalManageEnabled` set to true', async () => {
+      config.pluginAdminExternalManageEnabled = true;
+
+      const { queryByRole } = renderPluginDetails({ id, isInstalled: false });
+
+      await waitFor(() => expect(queryByRole('link', { name: /install via grafana.com/i })).toBeInTheDocument());
+    });
+
+    it('should display uninstall link for an installed plugin with `config.pluginAdminExternalManageEnabled` set to true', async () => {
+      config.pluginAdminExternalManageEnabled = true;
+
+      const { queryByRole } = renderPluginDetails({ id, isInstalled: true });
+
+      await waitFor(() => expect(queryByRole('link', { name: /uninstall via grafana.com/i })).toBeInTheDocument());
+    });
+
+    it('should display update and uninstall links for a plugin with an available update and `config.pluginAdminExternalManageEnabled` set to true', async () => {
+      config.pluginAdminExternalManageEnabled = true;
+
+      const { queryByRole } = renderPluginDetails({ id, isInstalled: true, hasUpdate: true });
+
+      await waitFor(() => expect(queryByRole('link', { name: /update via grafana.com/i })).toBeInTheDocument());
+      expect(queryByRole('link', { name: /uninstall via grafana.com/i })).toBeInTheDocument();
+    });
+
+    it('should display alert with information about why the plugin is disabled', async () => {
+      const { queryByLabelText } = renderPluginDetails({
+        id,
+        isInstalled: true,
+        isDisabled: true,
+        error: PluginErrorCode.modifiedSignature,
+      });
+
+      await waitFor(() => expect(queryByLabelText(selectors.pages.PluginPage.disabledInfo)).toBeInTheDocument());
+    });
+
+    it('should display grafana dependencies for a plugin if they are available', async () => {
+      const { queryByText } = renderPluginDetails({
         id,
         details: {
+          pluginDependencies: [],
+          grafanaDependency: '>=8.0.0',
           links: [],
-          versions: [
-            {
-              version: '1.0.0',
-              createdAt: '2016-04-06T20:23:41.000Z',
-            },
-          ],
         },
-      },
-      { pageId: PluginTabIds.VERSIONS }
-    );
+      });
 
-    // Check if version information is available
-    await waitFor(() => expect(queryByText(/version history/i)).toBeInTheDocument());
+      // Wait for the dependencies part to be loaded
+      await waitFor(() => expect(queryByText(/dependencies:/i)).toBeInTheDocument());
 
-    expect(
-      getByRole('columnheader', {
-        name: /version/i,
-      })
-    ).toBeInTheDocument();
-    expect(
-      getByRole('columnheader', {
-        name: /last updated/i,
-      })
-    ).toBeInTheDocument();
-    expect(
-      getByRole('cell', {
-        name: /1\.0\.0/i,
-      })
-    ).toBeInTheDocument();
-    expect(
-      getByRole('cell', {
-        name: /5 years ago/i,
-      })
-    ).toBeInTheDocument();
-  });
-
-  it("should display an install button for a plugin that isn't installed", async () => {
-    const { queryByRole } = renderPluginDetails({ id, isInstalled: false });
-
-    await waitFor(() => expect(queryByRole('button', { name: /install/i })).toBeInTheDocument());
-    expect(queryByRole('button', { name: /uninstall/i })).not.toBeInTheDocument();
-  });
-
-  it('should display an uninstall button for an already installed plugin', async () => {
-    const { queryByRole } = renderPluginDetails({ id, isInstalled: true });
-
-    await waitFor(() => expect(queryByRole('button', { name: /uninstall/i })).toBeInTheDocument());
-  });
-
-  it('should display update and uninstall buttons for a plugin with update', async () => {
-    const { queryByRole } = renderPluginDetails({ id, isInstalled: true, hasUpdate: true });
-
-    // Displays an "update" button
-    await waitFor(() => expect(queryByRole('button', { name: /update/i })).toBeInTheDocument());
-
-    // Does not display "install" and "uninstall" buttons
-    expect(queryByRole('button', { name: /install/i })).toBeInTheDocument();
-    expect(queryByRole('button', { name: /uninstall/i })).toBeInTheDocument();
-  });
-
-  it('should display an install button for enterprise plugins if license is valid', async () => {
-    config.licenseInfo.hasValidLicense = true;
-
-    const { queryByRole } = renderPluginDetails({ id, isInstalled: false, isEnterprise: true });
-
-    await waitFor(() => expect(queryByRole('button', { name: /install/i })).toBeInTheDocument());
-  });
-
-  it('should not display install button for enterprise plugins if license is invalid', async () => {
-    config.licenseInfo.hasValidLicense = false;
-
-    const { queryByRole, queryByText } = renderPluginDetails({ id, isInstalled: true, isEnterprise: true });
-
-    await waitFor(() => expect(queryByRole('button', { name: /install/i })).not.toBeInTheDocument());
-    expect(queryByText(/no valid Grafana Enterprise license detected/i)).toBeInTheDocument();
-    expect(queryByRole('link', { name: /learn more/i })).toBeInTheDocument();
-  });
-
-  it('should not display install / uninstall buttons for core plugins', async () => {
-    const { queryByRole } = renderPluginDetails({ id, isInstalled: true, isCore: true });
-
-    await waitFor(() => expect(queryByRole('button', { name: /update/i })).not.toBeInTheDocument());
-    await waitFor(() => expect(queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
-  });
-
-  it('should not display install / uninstall buttons for disabled plugins', async () => {
-    const { queryByRole } = renderPluginDetails({ id, isInstalled: true, isDisabled: true });
-
-    await waitFor(() => expect(queryByRole('button', { name: /update/i })).not.toBeInTheDocument());
-    await waitFor(() => expect(queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
-  });
-
-  it('should display install link with `config.pluginAdminExternalManageEnabled` set to true', async () => {
-    config.pluginAdminExternalManageEnabled = true;
-
-    const { queryByRole } = renderPluginDetails({ id, isInstalled: false });
-
-    await waitFor(() => expect(queryByRole('link', { name: /install via grafana.com/i })).toBeInTheDocument());
-  });
-
-  it('should display uninstall link for an installed plugin with `config.pluginAdminExternalManageEnabled` set to true', async () => {
-    config.pluginAdminExternalManageEnabled = true;
-
-    const { queryByRole } = renderPluginDetails({ id, isInstalled: true });
-
-    await waitFor(() => expect(queryByRole('link', { name: /uninstall via grafana.com/i })).toBeInTheDocument());
-  });
-
-  it('should display update and uninstall links for a plugin with an available update and `config.pluginAdminExternalManageEnabled` set to true', async () => {
-    config.pluginAdminExternalManageEnabled = true;
-
-    const { queryByRole } = renderPluginDetails({ id, isInstalled: true, hasUpdate: true });
-
-    await waitFor(() => expect(queryByRole('link', { name: /update via grafana.com/i })).toBeInTheDocument());
-    expect(queryByRole('link', { name: /uninstall via grafana.com/i })).toBeInTheDocument();
-  });
-
-  it('should display alert with information about why the plugin is disabled', async () => {
-    const { queryByLabelText } = renderPluginDetails({
-      id,
-      isInstalled: true,
-      isDisabled: true,
-      error: PluginErrorCode.modifiedSignature,
+      expect(queryByText('Grafana >=8.0.0')).toBeInTheDocument();
     });
 
-    await waitFor(() => expect(queryByLabelText(selectors.pages.PluginPage.disabledInfo)).toBeInTheDocument());
-  });
+    it('should show a confirm modal when trying to uninstall a plugin', async () => {
+      // @ts-ignore
+      api.uninstallPlugin = jest.fn();
 
-  it('should display grafana dependencies for a plugin if they are available', async () => {
-    const { queryByText } = renderPluginDetails({
-      id,
-      details: {
-        pluginDependencies: [],
-        grafanaDependency: '>=8.0.0',
-        links: [],
-      },
-    });
-
-    // Wait for the dependencies part to be loaded
-    await waitFor(() => expect(queryByText(/dependencies:/i)).toBeInTheDocument());
-
-    expect(queryByText('Grafana >=8.0.0')).toBeInTheDocument();
-  });
-
-  it('should show a confirm modal when trying to uninstall a plugin', async () => {
-    // @ts-ignore
-    api.uninstallPlugin = jest.fn();
-
-    const { queryByText, queryByRole, getByRole } = renderPluginDetails({
-      id,
-      name: 'Akumuli',
-      isInstalled: true,
-      details: {
-        pluginDependencies: [],
-        grafanaDependency: '>=8.0.0',
-        links: [],
-      },
-    });
-
-    // Wait for the install controls to be loaded
-    await waitFor(() => expect(queryByRole('button', { name: /install/i })).toBeInTheDocument());
-
-    // Open the confirmation modal
-    userEvent.click(getByRole('button', { name: /uninstall/i }));
-
-    expect(queryByText('Uninstall Akumuli')).toBeInTheDocument();
-    expect(queryByText('Are you sure you want to uninstall this plugin?')).toBeInTheDocument();
-    expect(api.uninstallPlugin).toHaveBeenCalledTimes(0);
-
-    // Confirm the uninstall
-    userEvent.click(getByRole('button', { name: /confirm/i }));
-    expect(api.uninstallPlugin).toHaveBeenCalledTimes(1);
-    expect(api.uninstallPlugin).toHaveBeenCalledWith(id);
-
-    // Check if the modal disappeared
-    expect(queryByText('Uninstall Akumuli')).not.toBeInTheDocument();
-  });
-
-  it('should not display the install / uninstall / update buttons if the GCOM api is not available', async () => {
-    let rendered: RenderResult;
-    const plugin = getCatalogPluginMock({ id });
-    const state = getPluginsStateMock([plugin]);
-
-    // Mock the store like if the remote plugins request was rejected
-    const pluginsStateOverride = {
-      ...state,
-      requests: {
-        ...state.requests,
-        [fetchRemotePlugins.typePrefix]: {
-          status: RequestStatus.Rejected,
+      const { queryByText, queryByRole, getByRole } = renderPluginDetails({
+        id,
+        name: 'Akumuli',
+        isInstalled: true,
+        details: {
+          pluginDependencies: [],
+          grafanaDependency: '>=8.0.0',
+          links: [],
         },
-      },
-    };
+      });
 
-    // Does not show an Install button
-    rendered = renderPluginDetails({ id }, { pluginsStateOverride });
-    await waitFor(() => expect(rendered.queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
-    rendered.unmount();
+      // Wait for the install controls to be loaded
+      await waitFor(() => expect(queryByRole('button', { name: /install/i })).toBeInTheDocument());
 
-    // Does not show a Uninstall button
-    rendered = renderPluginDetails({ id, isInstalled: true }, { pluginsStateOverride });
-    await waitFor(() => expect(rendered.queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
-    rendered.unmount();
+      // Open the confirmation modal
+      userEvent.click(getByRole('button', { name: /uninstall/i }));
 
-    // Does not show an Update button
-    rendered = renderPluginDetails({ id, isInstalled: true, hasUpdate: true }, { pluginsStateOverride });
-    await waitFor(() => expect(rendered.queryByRole('button', { name: /update/i })).not.toBeInTheDocument());
+      expect(queryByText('Uninstall Akumuli')).toBeInTheDocument();
+      expect(queryByText('Are you sure you want to uninstall this plugin?')).toBeInTheDocument();
+      expect(api.uninstallPlugin).toHaveBeenCalledTimes(0);
 
-    // Shows a message to the user
-    // TODO<Import these texts from a single source of truth instead of having them defined in multiple places>
-    const message = 'The install controls have been disabled because the Grafana server cannot access grafana.com.';
-    expect(rendered.getByText(message)).toBeInTheDocument();
-  });
+      // Confirm the uninstall
+      userEvent.click(getByRole('button', { name: /confirm/i }));
+      expect(api.uninstallPlugin).toHaveBeenCalledTimes(1);
+      expect(api.uninstallPlugin).toHaveBeenCalledWith(id);
 
-  it('should display post installation step for installed data source plugins', async () => {
-    const name = 'Akumuli';
-    const { queryByText } = renderPluginDetails({
-      name,
-      isInstalled: true,
-      type: PluginType.datasource,
+      // Check if the modal disappeared
+      expect(queryByText('Uninstall Akumuli')).not.toBeInTheDocument();
     });
 
-    await waitFor(() => queryByText('Uninstall'));
-    expect(queryByText(`Create a ${name} data source`)).toBeInTheDocument();
-  });
+    it('should not display the install / uninstall / update buttons if the GCOM api is not available', async () => {
+      let rendered: RenderResult;
+      const plugin = getCatalogPluginMock({ id });
+      const state = getPluginsStateMock([plugin]);
 
-  it('should not display post installation step for disabled data source plugins', async () => {
-    const name = 'Akumuli';
-    const { queryByText } = renderPluginDetails({
-      name,
-      isInstalled: true,
-      isDisabled: true,
-      type: PluginType.datasource,
+      // Mock the store like if the remote plugins request was rejected
+      const pluginsStateOverride = {
+        ...state,
+        requests: {
+          ...state.requests,
+          [fetchRemotePlugins.typePrefix]: {
+            status: RequestStatus.Rejected,
+          },
+        },
+      };
+
+      // Does not show an Install button
+      rendered = renderPluginDetails({ id }, { pluginsStateOverride });
+      await waitFor(() => expect(rendered.queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
+      rendered.unmount();
+
+      // Does not show a Uninstall button
+      rendered = renderPluginDetails({ id, isInstalled: true }, { pluginsStateOverride });
+      await waitFor(() => expect(rendered.queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
+      rendered.unmount();
+
+      // Does not show an Update button
+      rendered = renderPluginDetails({ id, isInstalled: true, hasUpdate: true }, { pluginsStateOverride });
+      await waitFor(() => expect(rendered.queryByRole('button', { name: /update/i })).not.toBeInTheDocument());
+
+      // Shows a message to the user
+      // TODO<Import these texts from a single source of truth instead of having them defined in multiple places>
+      const message = 'The install controls have been disabled because the Grafana server cannot access grafana.com.';
+      expect(rendered.getByText(message)).toBeInTheDocument();
     });
 
-    await waitFor(() => queryByText('Uninstall'));
-    expect(queryByText(`Create a ${name} data source`)).toBeNull();
-  });
+    it('should display post installation step for installed data source plugins', async () => {
+      const name = 'Akumuli';
+      const { queryByText } = renderPluginDetails({
+        name,
+        isInstalled: true,
+        type: PluginType.datasource,
+      });
 
-  it('should not display post installation step for panel plugins', async () => {
-    const name = 'Akumuli';
-    const { queryByText } = renderPluginDetails({
-      name,
-      isInstalled: true,
-      type: PluginType.panel,
+      await waitFor(() => queryByText('Uninstall'));
+      expect(queryByText(`Create a ${name} data source`)).toBeInTheDocument();
     });
 
-    await waitFor(() => queryByText('Uninstall'));
-    expect(queryByText(`Create a ${name} data source`)).toBeNull();
-  });
+    it('should not display post installation step for disabled data source plugins', async () => {
+      const name = 'Akumuli';
+      const { queryByText } = renderPluginDetails({
+        name,
+        isInstalled: true,
+        isDisabled: true,
+        type: PluginType.datasource,
+      });
 
-  it('should not display post installation step for app plugins', async () => {
-    const name = 'Akumuli';
-    const { queryByText } = renderPluginDetails({
-      name,
-      isInstalled: true,
-      type: PluginType.app,
+      await waitFor(() => queryByText('Uninstall'));
+      expect(queryByText(`Create a ${name} data source`)).toBeNull();
     });
 
-    await waitFor(() => queryByText('Uninstall'));
-    expect(queryByText(`Create a ${name} data source`)).toBeNull();
+    it('should not display post installation step for panel plugins', async () => {
+      const name = 'Akumuli';
+      const { queryByText } = renderPluginDetails({
+        name,
+        isInstalled: true,
+        type: PluginType.panel,
+      });
+
+      await waitFor(() => queryByText('Uninstall'));
+      expect(queryByText(`Create a ${name} data source`)).toBeNull();
+    });
+
+    it('should not display post installation step for app plugins', async () => {
+      const name = 'Akumuli';
+      const { queryByText } = renderPluginDetails({
+        name,
+        isInstalled: true,
+        type: PluginType.app,
+      });
+
+      await waitFor(() => queryByText('Uninstall'));
+      expect(queryByText(`Create a ${name} data source`)).toBeNull();
+    });
+  });
+
+  describe('viewed as user without grafana admin permissions', () => {
+    beforeAll(() => {
+      mockUserPermissions({
+        isAdmin: false,
+        isDataSourceEditor: false,
+        isOrgAdmin: false,
+      });
+    });
+
+    it("should not display an install button for a plugin that isn't installed", async () => {
+      const { queryByRole, queryByText } = renderPluginDetails({ id, isInstalled: false });
+
+      await waitFor(() => expect(queryByText('Overview')).toBeInTheDocument());
+
+      expect(queryByRole('button', { name: /install/i })).not.toBeInTheDocument();
+    });
+
+    it('should not display an uninstall button for an already installed plugin', async () => {
+      const { queryByRole, queryByText } = renderPluginDetails({ id, isInstalled: true });
+
+      await waitFor(() => expect(queryByText('Overview')).toBeInTheDocument());
+
+      expect(queryByRole('button', { name: /uninstall/i })).not.toBeInTheDocument();
+    });
+
+    it('should not display update or uninstall buttons for a plugin with update', async () => {
+      const { queryByRole, queryByText } = renderPluginDetails({ id, isInstalled: true, hasUpdate: true });
+
+      await waitFor(() => expect(queryByText('Overview')).toBeInTheDocument());
+
+      expect(queryByRole('button', { name: /update/i })).not.toBeInTheDocument();
+      expect(queryByRole('button', { name: /uninstall/i })).not.toBeInTheDocument();
+    });
+
+    it('should not display an install button for enterprise plugins if license is valid', async () => {
+      config.licenseInfo.hasValidLicense = true;
+      const { queryByRole, queryByText } = renderPluginDetails({ id, isInstalled: false, isEnterprise: true });
+
+      await waitFor(() => expect(queryByText('Overview')).toBeInTheDocument());
+
+      expect(queryByRole('button', { name: /install/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('viewed as user without data source edit permissions', () => {
+    beforeAll(() => {
+      mockUserPermissions({
+        isAdmin: true,
+        isDataSourceEditor: false,
+        isOrgAdmin: true,
+      });
+    });
+
+    it('should not display the data source post intallation step', async () => {
+      const name = 'Akumuli';
+      const { queryByText } = renderPluginDetails({
+        name,
+        isInstalled: true,
+        type: PluginType.app,
+      });
+
+      await waitFor(() => queryByText('Uninstall'));
+      expect(queryByText(`Create a ${name} data source`)).toBeNull();
+    });
   });
 });
diff --git a/public/app/features/plugins/admin/permissions.ts b/public/app/features/plugins/admin/permissions.ts
new file mode 100644
index 00000000000..e0b7d752881
--- /dev/null
+++ b/public/app/features/plugins/admin/permissions.ts
@@ -0,0 +1,18 @@
+import { config } from 'app/core/config';
+import { contextSrv } from 'app/core/services/context_srv';
+import { AccessControlAction } from 'app/types';
+
+export function isGrafanaAdmin(): boolean {
+  return config.bootData.user.isGrafanaAdmin;
+}
+
+export function isOrgAdmin() {
+  return contextSrv.hasRole('Admin');
+}
+
+export function isDataSourceEditor() {
+  return (
+    contextSrv.hasPermission(AccessControlAction.DataSourcesCreate) &&
+    contextSrv.hasPermission(AccessControlAction.DataSourcesWrite)
+  );
+}
diff --git a/public/app/features/plugins/routes.ts b/public/app/features/plugins/routes.ts
index 01cf002f6d6..1bd5bfdecb6 100644
--- a/public/app/features/plugins/routes.ts
+++ b/public/app/features/plugins/routes.ts
@@ -1,7 +1,7 @@
 import { SafeDynamicImport } from 'app/core/components/DynamicImports/SafeDynamicImport';
 import { config } from 'app/core/config';
 import { RouteDescriptor } from 'app/core/navigation/types';
-import { isGrafanaAdmin } from './admin/helpers';
+import { isGrafanaAdmin } from './admin/permissions';
 import { PluginAdminRoutes } from './admin/types';
 
 const pluginAdminRoutes = [