Refactor StartModal into PlaylistSettingsModal

public/app/features/playlist/PlaylistPage.tsx

@@ -11,7 +11,7 @@ import { ConfirmModal } from '@grafana/ui';
 import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
 import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
 import { deletePlaylist, getAllPlaylist } from './api';
-import { StartModal } from './StartModal';
+import { PlaylistSettingsModal } from './PlaylistSettingsModal';
 import { PlaylistPageList } from './PlaylistPageList';
 import { EmptyQueryListBanner } from './EmptyQueryListBanner';
 
@@ -101,7 +101,13 @@ export const PlaylistPage: FC<PlaylistPageProps> = ({ navModel }) => {
             onDismiss={onDismissDelete}
           />
         )}
-        {startPlaylist && <StartModal playlist={startPlaylist} onDismiss={() => setStartPlaylist(undefined)} />}
+        {startPlaylist && (
+          <PlaylistSettingsModal
+            showStartButton
+            playlist={startPlaylist}
+            onDismiss={() => setStartPlaylist(undefined)}
+          />
+        )}
       </Page.Contents>
     </Page>
   );

public/app/features/playlist/PlaylistPageList.tsx

@@ -1,26 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { PlaylistDTO } from './types';
-import {
+import { Button, Card, LinkButton, ModalsController, useStyles2 } from '@grafana/ui';
-  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 { AppEvents, GrafanaTheme2, SelectableValue, UrlQueryMap, urlUtil } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 import { DashNavButton } from '../dashboard/components/DashNav/DashNavButton';
-import appEvents from 'app/core/app_events';
+import { PlaylistSettingsModal } from './PlaylistSettingsModal';
-import { buildBaseUrl } from '../dashboard/components/ShareModal/utils';
 
 interface Props {
   setStartPlaylist: (playlistItem: PlaylistDTO) => void;
@@ -28,70 +13,6 @@ 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 (
@@ -108,8 +29,8 @@ export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDel
                     icon="share-alt"
                     iconSize="lg"
                     onClick={() => {
-                      showModal(PlaylistShareModal, {
+                      showModal(PlaylistSettingsModal, {
-                        playlistId: playlist.id,
+                        playlist: playlist,
                         onDismiss: hideModal,
                       });
                     }}

public/app/features/playlist/PlaylistSettingsModal.tsx

@@ -0,0 +1,87 @@
+import React, { FC, useState } from 'react';
+import { AppEvents, SelectableValue, UrlQueryMap, urlUtil } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+import { PlaylistDTO } from './types';
+import { Button, 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';
+
+export interface Props {
+  playlist: PlaylistDTO;
+  onDismiss: () => void;
+  showStartButton?: boolean;
+}
+
+export const PlaylistSettingsModal: FC<Props> = ({ playlist, onDismiss, showStartButton }) => {
+  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));
+  };
+
+  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/${playlist.id}`, params);
+
+  return (
+    <Modal isOpen={true} icon="play" title="Start 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>
+      {showStartButton && (
+        <Modal.ButtonRow>
+          <Button variant="primary" onClick={onStart}>
+            Start {playlist.name}
+          </Button>
+        </Modal.ButtonRow>
+      )}
+    </Modal>
+  );
+};

public/app/features/playlist/StartModal.tsx

@@ -1,54 +0,0 @@
-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>
-  );
-};