From 89d6f7aba1bf5743d3b3d5708299ebfa59a71c79 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 17 Jun 2022 08:15:50 -0400
Subject: [PATCH] Playlists: Disable Create Playlist buttons for users with
 viewer role (#50840) (#51032)

* Disable / hide buttons for creating playlist for users with viewer role

* Update tests

* Re-add mock for contextSrv module

(cherry picked from commit 43839dc40b0371e47fb62bb515af311071bd26f4)

Co-authored-by: asymness <asym1999@gmail.com>
---
 .../features/playlist/PlaylistPage.test.tsx   | 45 ++++++++++++++++---
 public/app/features/playlist/PlaylistPage.tsx |  4 +-
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/public/app/features/playlist/PlaylistPage.test.tsx b/public/app/features/playlist/PlaylistPage.test.tsx
index db381034faf..53d9a6aa57e 100644
--- a/public/app/features/playlist/PlaylistPage.test.tsx
+++ b/public/app/features/playlist/PlaylistPage.test.tsx
@@ -1,6 +1,8 @@
 import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 
+import { contextSrv } from 'app/core/services/context_srv';
+
 import { locationService } from '../../../../packages/grafana-runtime/src';
 
 import { PlaylistPage, PlaylistPageProps } from './PlaylistPage';
@@ -56,6 +58,22 @@ describe('PlaylistPage', () => {
       const { getByText } = getTestContext();
       await waitFor(() => getByText('There are no playlists created yet'));
     });
+    describe('and signed in user is not a viewer', () => {
+      it('then create playlist button should not be disabled', async () => {
+        contextSrv.isEditor = true;
+        const { getByRole } = getTestContext();
+        const createPlaylistButton = await waitFor(() => getByRole('link', { name: /create playlist/i }));
+        expect(createPlaylistButton).not.toHaveStyle('pointer-events: none');
+      });
+    });
+    describe('and signed in user is a viewer', () => {
+      it('then create playlist button should be disabled', async () => {
+        contextSrv.isEditor = false;
+        const { getByRole } = getTestContext();
+        const createPlaylistButton = await waitFor(() => getByRole('link', { name: /create playlist/i }));
+        expect(createPlaylistButton).toHaveStyle('pointer-events: none');
+      });
+    });
   });
   describe('when mounted with a playlist', () => {
     it('page should load', () => {
@@ -75,12 +93,27 @@ describe('PlaylistPage', () => {
       const { getByText } = getTestContext();
       expect(getByText(/loading/i)).toBeInTheDocument();
     });
-    it('then playlist title and buttons should appear on the page', async () => {
-      const { getByRole, getByText } = getTestContext();
-      await waitFor(() => getByText('A test playlist'));
-      expect(getByRole('button', { name: /Start playlist/i })).toBeInTheDocument();
-      expect(getByRole('link', { name: /Edit playlist/i })).toBeInTheDocument();
-      expect(getByRole('button', { name: /Delete playlist/i })).toBeInTheDocument();
+    describe('and signed in user is not a viewer', () => {
+      it('then playlist title and all playlist buttons should appear on the page', async () => {
+        contextSrv.isEditor = true;
+        const { getByRole, getByText } = getTestContext();
+        await waitFor(() => getByText('A test playlist'));
+        expect(getByRole('link', { name: /New playlist/i })).toBeInTheDocument();
+        expect(getByRole('button', { name: /Start playlist/i })).toBeInTheDocument();
+        expect(getByRole('link', { name: /Edit playlist/i })).toBeInTheDocument();
+        expect(getByRole('button', { name: /Delete playlist/i })).toBeInTheDocument();
+      });
+    });
+    describe('and signed in user is a viewer', () => {
+      it('then playlist title and only start playlist button should appear on the page', async () => {
+        contextSrv.isEditor = false;
+        const { getByRole, getByText, queryByRole } = getTestContext();
+        await waitFor(() => getByText('A test playlist'));
+        expect(queryByRole('link', { name: /New playlist/i })).not.toBeInTheDocument();
+        expect(getByRole('button', { name: /Start playlist/i })).toBeInTheDocument();
+        expect(queryByRole('link', { name: /Edit playlist/i })).not.toBeInTheDocument();
+        expect(queryByRole('button', { name: /Delete playlist/i })).not.toBeInTheDocument();
+      });
     });
   });
 });
diff --git a/public/app/features/playlist/PlaylistPage.tsx b/public/app/features/playlist/PlaylistPage.tsx
index 8513249222e..62e85085d2f 100644
--- a/public/app/features/playlist/PlaylistPage.tsx
+++ b/public/app/features/playlist/PlaylistPage.tsx
@@ -7,6 +7,7 @@ import { ConfirmModal } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
 import { getNavModel } from 'app/core/selectors/navModel';
+import { contextSrv } from 'app/core/services/context_srv';
 import { StoreState } from 'app/types';
 
 import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
@@ -64,6 +65,7 @@ export const PlaylistPage: FC<PlaylistPageProps> = ({ navModel }) => {
       buttonIcon="plus"
       buttonLink="playlists/new"
       buttonTitle="Create Playlist"
+      buttonDisabled={!contextSrv.isEditor}
       proTip="You can use playlists to cycle dashboards on TVs without user control"
       proTipLink="http://docs.grafana.org/reference/playlist/"
       proTipLinkTitle="Learn more"
@@ -79,7 +81,7 @@ export const PlaylistPage: FC<PlaylistPageProps> = ({ navModel }) => {
         {showSearch && (
           <PageActionBar
             searchQuery={searchQuery}
-            linkButton={{ title: 'New playlist', href: '/playlists/new' }}
+            linkButton={contextSrv.isEditor && { title: 'New playlist', href: '/playlists/new' }}
             setSearchQuery={setSearchQuery}
           />
         )}