Hacky implementation of playlist share modal

public/app/features/playlist/PlaylistPageList.tsx

@@ -1,9 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { PlaylistDTO } from './types';
-import { Button, Card, LinkButton, useStyles2 } from '@grafana/ui';
+import {
+  Button,
+  Card,
+  Checkbox,
+  ClipboardButton,
+  Field,
+  FieldSet,
+  Icon,
+  Input,
+  LinkButton,
+  Modal,
+  ModalsController,
+  RadioButtonGroup,
+  useStyles2,
+} from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
-import { GrafanaTheme2 } from '@grafana/data';
+import { AppEvents, GrafanaTheme2, SelectableValue, UrlQueryMap, urlUtil } from '@grafana/data';
 import { css } from '@emotion/css';
+import { DashNavButton } from '../dashboard/components/DashNav/DashNavButton';
+import appEvents from 'app/core/app_events';
+import { buildBaseUrl } from '../dashboard/components/ShareModal/utils';
 
 interface Props {
   setStartPlaylist: (playlistItem: PlaylistDTO) => void;
@@ -11,6 +28,70 @@ interface Props {
   playlists: PlaylistDTO[] | undefined;
 }
 
+interface ShareModalProps {
+  playlistId: number;
+  onDismiss: () => void;
+}
+
+type PlaylistModes = boolean | 'tv';
+
+const PlaylistShareModal = ({ playlistId, onDismiss }: ShareModalProps) => {
+  const [mode, setMode] = useState<PlaylistModes>(false);
+  const [autoFit, setAutofit] = useState(false);
+
+  const modes: Array<SelectableValue<PlaylistModes>> = [
+    { 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>
+  );
+};
+
 export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDelete }: Props) => {
   const styles = useStyles2(getStyles);
   return (
@@ -18,7 +99,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(PlaylistShareModal, {
+                        playlistId: playlist.id,
+                        onDismiss: hideModal,
+                      });
+                    }}
+                  />
+                )}
+              </ModalsController>
+            </Card.Heading>
             <Card.Actions>
               <Button variant="secondary" icon="play" onClick={() => setStartPlaylist(playlist)}>
                 Start playlist

public/app/features/query/state/PanelQueryRunner.ts

@@ -235,7 +235,7 @@ export class PanelQueryRunner {
       // Attach the data source name to each query
       request.targets = request.targets.map((query) => {
         if (!query.datasource) {
-          query.datasource = ds.meta?.mixed ? defaultDatasource.getRef() : ds.getRef();
+          query.datasource = defaultDatasource.getRef();
         }
         return query;
       });