diff --git a/public/app/features/playlist/PlaylistPageList.tsx b/public/app/features/playlist/PlaylistPageList.tsx
index 9c31ac7e4ff..79adbe7e964 100644
--- a/public/app/features/playlist/PlaylistPageList.tsx
+++ b/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) => (
- {playlist.name}
+
+ {playlist.name}
+
+ {({ showModal, hideModal }) => (
+ {
+ showModal(ShareModal, {
+ playlistId: playlist.id,
+ onDismiss: hideModal,
+ });
+ }}
+ />
+ )}
+
+