Playlists: Enable sharing direct links to playlists (#44161)

* Special case mixed datasources... :/

* Hacky implementation of playlist share modal

* Refactor StartModal into PlaylistSettingsModal

* Revert "Refactor StartModal into PlaylistSettingsModal"

This reverts commit e71fc33865.

* Create new ShareModal component

* Revert "Special case mixed datasources... :/"

This reverts commit dd0e3ea4a8.

* PlaylistMode instead of PlaylistModes

* kick drone

public/app/features/playlist/PlaylistPageList.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { PlaylistDTO } from './types';
-import { Button, Card, LinkButton, useStyles2 } from '@grafana/ui';
+import { Button, Card, LinkButton, ModalsController, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
+import { DashNavButton } from '../dashboard/components/DashNav/DashNavButton';
+import { ShareModal } from './ShareModal';
 
 interface Props {
   setStartPlaylist: (playlistItem: PlaylistDTO) => void;
@@ -18,7 +20,24 @@ export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDel
       {playlists!.map((playlist: PlaylistDTO) => (
         <li className={styles.listItem} key={playlist.id.toString()}>
           <Card>
-            <Card.Heading>{playlist.name}</Card.Heading>
+            <Card.Heading>
+              {playlist.name}
+              <ModalsController key="button-share">
+                {({ showModal, hideModal }) => (
+                  <DashNavButton
+                    tooltip="Share playlist"
+                    icon="share-alt"
+                    iconSize="lg"
+                    onClick={() => {
+                      showModal(ShareModal, {
+                        playlistId: playlist.id,
+                        onDismiss: hideModal,
+                      });
+                    }}
+                  />
+                )}
+              </ModalsController>
+            </Card.Heading>
             <Card.Actions>
               <Button variant="secondary" icon="play" onClick={() => setStartPlaylist(playlist)}>
                 Start playlist

public/app/features/playlist/ShareModal.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { AppEvents, SelectableValue, UrlQueryMap, urlUtil } from '@grafana/data';
+import { Checkbox, ClipboardButton, Field, FieldSet, Icon, Input, Modal, RadioButtonGroup } from '@grafana/ui';
+import appEvents from 'app/core/app_events';
+import { buildBaseUrl } from '../dashboard/components/ShareModal/utils';
+import { PlaylistMode } from './types';
+
+interface ShareModalProps {
+  playlistId: number;
+  onDismiss: () => void;
+}
+
+export const ShareModal = ({ playlistId, onDismiss }: ShareModalProps) => {
+  const [mode, setMode] = useState<PlaylistMode>(false);
+  const [autoFit, setAutofit] = useState(false);
+
+  const modes: Array<SelectableValue<PlaylistMode>> = [
+    { label: 'Normal', value: false },
+    { label: 'TV', value: 'tv' },
+    { label: 'Kiosk', value: true },
+  ];
+
+  const onShareUrlCopy = () => {
+    appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']);
+  };
+
+  const params: UrlQueryMap = {};
+  if (mode) {
+    params.kiosk = mode;
+  }
+  if (autoFit) {
+    params.autofitpanels = true;
+  }
+
+  const shareUrl = urlUtil.renderUrl(`${buildBaseUrl()}/play/${playlistId}`, params);
+
+  return (
+    <Modal isOpen={true} title="Share playlist" onDismiss={onDismiss}>
+      <FieldSet>
+        <Field label="Mode">
+          <RadioButtonGroup value={mode} options={modes} onChange={setMode} />
+        </Field>
+        <Field>
+          <Checkbox
+            label="Autofit"
+            description="Panel heights will be adjusted to fit screen size"
+            name="autofix"
+            value={autoFit}
+            onChange={(e) => setAutofit(e.currentTarget.checked)}
+          />
+        </Field>
+
+        <Field label="Link URL">
+          <Input
+            id="link-url-input"
+            value={shareUrl}
+            readOnly
+            addonAfter={
+              <ClipboardButton variant="primary" getText={() => shareUrl} onClipboardCopy={onShareUrlCopy}>
+                <Icon name="copy" /> Copy
+              </ClipboardButton>
+            }
+          />
+        </Field>
+      </FieldSet>
+    </Modal>
+  );
+};

public/app/features/playlist/StartModal.tsx

@@ -1,8 +1,8 @@
 import React, { FC, useState } from 'react';
 import { SelectableValue, urlUtil } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { PlaylistDTO } from './types';
+import { PlaylistDTO, PlaylistMode } from './types';
-import { Button, Checkbox, Field, Modal, RadioButtonGroup, VerticalGroup } from '@grafana/ui';
+import { Button, Checkbox, Field, FieldSet, Modal, RadioButtonGroup } from '@grafana/ui';
 
 export interface StartModalProps {
   playlist: PlaylistDTO;
@@ -10,10 +10,10 @@ export interface StartModalProps {
 }
 
 export const StartModal: FC<StartModalProps> = ({ playlist, onDismiss }) => {
-  const [mode, setMode] = useState<any>(false);
+  const [mode, setMode] = useState<PlaylistMode>(false);
   const [autoFit, setAutofit] = useState(false);
 
-  const modes: Array<SelectableValue<any>> = [
+  const modes: Array<SelectableValue<PlaylistMode>> = [
     { label: 'Normal', value: false },
     { label: 'TV', value: 'tv' },
     { label: 'Kiosk', value: true },
@@ -32,7 +32,7 @@ export const StartModal: FC<StartModalProps> = ({ playlist, onDismiss }) => {
 
   return (
     <Modal isOpen={true} icon="play" title="Start playlist" onDismiss={onDismiss}>
-      <VerticalGroup>
+      <FieldSet>
         <Field label="Mode">
           <RadioButtonGroup value={mode} options={modes} onChange={setMode} />
         </Field>
@@ -43,7 +43,7 @@ export const StartModal: FC<StartModalProps> = ({ playlist, onDismiss }) => {
           value={autoFit}
           onChange={(e) => setAutofit(e.currentTarget.checked)}
         />
-      </VerticalGroup>
+      </FieldSet>
       <Modal.ButtonRow>
         <Button variant="primary" onClick={onStart}>
           Start {playlist.name}

public/app/features/playlist/types.ts

@@ -4,6 +4,8 @@ export interface PlaylistDTO {
   startUrl?: string;
 }
 
+export type PlaylistMode = boolean | 'tv';
+
 export interface PlayListItemDTO {
   id: number;
   title: string;