1import React from 'react'; 2import { PlaylistDTO } from './types'; 3import { Button, Card, LinkButton } from '@grafana/ui'; 4import { contextSrv } from 'app/core/services/context_srv'; 5 6interface Props { 7 setStartPlaylist: (playlistItem: PlaylistDTO) => void; 8 setPlaylistToDelete: (playlistItem: PlaylistDTO) => void; 9 playlists: PlaylistDTO[] | undefined; 10} 11 12export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDelete }: Props) => { 13 return ( 14 <> 15 {playlists!.map((playlist: PlaylistDTO) => ( 16 <Card heading={playlist.name} key={playlist.id.toString()}> 17 <Card.Actions> 18 <Button variant="secondary" icon="play" onClick={() => setStartPlaylist(playlist)}> 19 Start playlist 20 </Button> 21 {contextSrv.isEditor && ( 22 <> 23 <LinkButton key="edit" variant="secondary" href={`/playlists/edit/${playlist.id}`} icon="cog"> 24 Edit playlist 25 </LinkButton> 26 <Button 27 disabled={false} 28 onClick={() => setPlaylistToDelete({ id: playlist.id, name: playlist.name })} 29 icon="trash-alt" 30 variant="destructive" 31 > 32 Delete playlist 33 </Button> 34 </> 35 )} 36 </Card.Actions> 37 </Card> 38 ))} 39 </> 40 ); 41}; 42