PlayList: add delete functionality to remove playlist (#38120)

* WIP: add delete functionality to playlist

* fixes deleted item to be removed instantly without manual refresh

* update confirmModal to reference playlist name

* refactor confirmModal message to be clear enough

* WIP: some unit tests for the playlistPage

* added more tests and did some cleanup

* some code refactoring

* adds ability for user roles to control playlist delete

* some abstraction to cleanup code

* modified alert message for delete button to correspond with action

* tried a better approach to modify the alert message

* fixes playlist lookup on each render

* update handlers to not use anonymous function

* exposed getBackendSrv().get api to fetch all playlist

* used better naming convention

* removes unecessary async/await construct

* some code refactoring

* used the correct param structure

public/app/features/playlist/StartModal.tsx

@@ -0,0 +1,54 @@
+import React, { FC, useState } from 'react';
+import { SelectableValue, urlUtil } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+import { PlaylistDTO } from './types';
+import { Button, Checkbox, Field, Modal, RadioButtonGroup, VerticalGroup } from '@grafana/ui';
+
+export interface StartModalProps {
+  playlist: PlaylistDTO;
+  onDismiss: () => void;
+}
+
+export const StartModal: FC<StartModalProps> = ({ playlist, onDismiss }) => {
+  const [mode, setMode] = useState<any>(false);
+  const [autoFit, setAutofit] = useState(false);
+
+  const modes: Array<SelectableValue<any>> = [
+    { label: 'Normal', value: false },
+    { label: 'TV', value: 'tv' },
+    { label: 'Kiosk', value: true },
+  ];
+
+  const onStart = () => {
+    const params: any = {};
+    if (mode) {
+      params.kiosk = mode;
+    }
+    if (autoFit) {
+      params.autofitpanels = true;
+    }
+    locationService.push(urlUtil.renderUrl(`/playlists/play/${playlist.id}`, params));
+  };
+
+  return (
+    <Modal isOpen={true} icon="play" title="Start playlist" onDismiss={onDismiss}>
+      <VerticalGroup>
+        <Field label="Mode">
+          <RadioButtonGroup value={mode} options={modes} onChange={setMode} />
+        </Field>
+        <Checkbox
+          label="Autofit"
+          description="Panel heights will be adjusted to fit screen size"
+          name="autofix"
+          value={autoFit}
+          onChange={(e) => setAutofit(e.currentTarget.checked)}
+        />
+      </VerticalGroup>
+      <Modal.ButtonRow>
+        <Button variant="primary" onClick={onStart}>
+          Start {playlist.name}
+        </Button>
+      </Modal.ButtonRow>
+    </Modal>
+  );
+};