{"version":3,"file":"PlaylistPage.8f45dcc09add615f90e8.js","mappings":"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","sources":["webpack://grafana/./public/app/core/components/PageActionBar/PageActionBar.tsx","webpack://grafana/./public/app/core/components/Select/SortPicker.tsx","webpack://grafana/./public/app/features/playlist/EmptyQueryListBanner.tsx","webpack://grafana/./public/app/features/playlist/ShareModal.tsx","webpack://grafana/./public/app/features/playlist/PlaylistCard.tsx","webpack://grafana/./public/app/features/playlist/PlaylistPageList.tsx","webpack://grafana/./public/app/features/playlist/StartModal.tsx","webpack://grafana/./public/app/features/playlist/PlaylistPage.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\n\nimport { SelectableValue } from '@grafana/data';\nimport { LinkButton, FilterInput, InlineField } from '@grafana/ui';\n\nimport { SortPicker } from '../Select/SortPicker';\n\nexport interface Props {\n  searchQuery: string;\n  setSearchQuery: (value: string) => void;\n  linkButton?: { href: string; title: string; disabled?: boolean };\n  target?: string;\n  placeholder?: string;\n  sortPicker?: {\n    onChange: (sortValue: SelectableValue) => void;\n    value?: string;\n    getSortOptions?: () => Promise<SelectableValue[]>;\n  };\n}\n\nexport default class PageActionBar extends PureComponent<Props> {\n  render() {\n    const {\n      searchQuery,\n      linkButton,\n      setSearchQuery,\n      target,\n      placeholder = 'Search by name or type',\n      sortPicker,\n    } = this.props;\n    const linkProps: typeof LinkButton.defaultProps = { href: linkButton?.href, disabled: linkButton?.disabled };\n\n    if (target) {\n      linkProps.target = target;\n    }\n\n    return (\n      <div className=\"page-action-bar\">\n        <InlineField grow>\n          <FilterInput value={searchQuery} onChange={setSearchQuery} placeholder={placeholder} />\n        </InlineField>\n        {sortPicker && (\n          <SortPicker\n            onChange={sortPicker.onChange}\n            value={sortPicker.value}\n            getSortOptions={sortPicker.getSortOptions}\n          />\n        )}\n        {linkButton && <LinkButton {...linkProps}>{linkButton.title}</LinkButton>}\n      </div>\n    );\n  }\n}\n","import React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { SelectableValue } from '@grafana/data';\nimport { Icon, Select } from '@grafana/ui';\nimport { DEFAULT_SORT } from 'app/features/search/constants';\nimport { getGrafanaSearcher } from 'app/features/search/service';\n\nexport interface Props {\n  onChange: (sortValue: SelectableValue) => void;\n  value?: string;\n  placeholder?: string;\n  getSortOptions?: () => Promise<SelectableValue[]>;\n  filter?: string[];\n  isClearable?: boolean;\n}\n\nconst defaultSortOptionsGetter = (): Promise<SelectableValue[]> => {\n  return getGrafanaSearcher().getSortOptions();\n};\n\nexport function SortPicker({ onChange, value, placeholder, filter, getSortOptions, isClearable }: Props) {\n  // Using sync Select and manual options fetching here since we need to find the selected option by value\n  const options = useAsync<() => Promise<SelectableValue[]>>(async () => {\n    const vals = await (getSortOptions ?? defaultSortOptionsGetter)();\n    if (filter) {\n      return vals.filter((v) => filter.includes(v.value));\n    }\n    return vals;\n  }, [getSortOptions, filter]);\n\n  if (options.loading) {\n    return null;\n  }\n\n  const isDesc = Boolean(value?.includes('desc') || value?.startsWith('-')); // bluge syntax starts with \"-\"\n  return (\n    <Select\n      key={value}\n      width={28}\n      onChange={onChange}\n      value={options.value?.find((opt) => opt.value === value) ?? null}\n      options={options.value}\n      aria-label=\"Sort\"\n      placeholder={placeholder ?? `Sort (Default ${DEFAULT_SORT.label})`}\n      prefix={<Icon name={isDesc ? 'sort-amount-down' : 'sort-amount-up'} />}\n      isClearable={isClearable}\n    />\n  );\n}\n","import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nexport const EmptyQueryListBanner = () => {\n  const styles = useStyles2(getStyles);\n  return <div className={styles.noResult}>No playlist found!</div>;\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    noResult: css`\n      padding: ${theme.spacing(2)};\n      background: ${theme.colors.secondary.main};\n      font-style: italic;\n      margin-top: ${theme.spacing(2)};\n    `,\n  };\n};\n","import React, { useState } from 'react';\n\nimport { SelectableValue, UrlQueryMap, urlUtil } from '@grafana/data';\nimport { Checkbox, ClipboardButton, Field, FieldSet, Input, Modal, RadioButtonGroup } from '@grafana/ui';\nimport { t, Trans } from 'app/core/internationalization';\nimport { buildBaseUrl } from 'app/features/dashboard/components/ShareModal/utils';\n\nimport { PlaylistMode } from './types';\n\ninterface Props {\n  playlistUid: string;\n  onDismiss: () => void;\n}\n\nexport const ShareModal = ({ playlistUid, onDismiss }: Props) => {\n  const [mode, setMode] = useState<PlaylistMode>(false);\n  const [autoFit, setAutofit] = useState(false);\n\n  const modes: Array<SelectableValue<PlaylistMode>> = [\n    { label: t('share-playlist.mode-normal', 'Normal'), value: false },\n    { label: t('share-playlist.mode-tv', 'TV'), value: 'tv' },\n    { label: t('share-playlist.mode-kiosk', 'Kiosk'), value: true },\n  ];\n\n  const params: UrlQueryMap = {};\n  if (mode) {\n    params.kiosk = mode;\n  }\n  if (autoFit) {\n    params.autofitpanels = true;\n  }\n\n  const shareUrl = urlUtil.renderUrl(`${buildBaseUrl()}/play/${playlistUid}`, params);\n\n  return (\n    <Modal isOpen={true} title={t('share-playlist.title', 'Share playlist')} onDismiss={onDismiss}>\n      <FieldSet>\n        <Field label={t('share-playlist.mode', 'Mode')}>\n          <RadioButtonGroup value={mode} options={modes} onChange={setMode} />\n        </Field>\n        <Field>\n          <Checkbox\n            label={t('share-playlist.checkbox-label', 'Autofit')}\n            description={t('share-playlist.checkbox-description', 'Panel heights will be adjusted to fit screen size')}\n            name=\"autofix\"\n            value={autoFit}\n            onChange={(e) => setAutofit(e.currentTarget.checked)}\n          />\n        </Field>\n\n        <Field label={t('share-playlist.link-url-label', 'Link URL')}>\n          <Input\n            id=\"link-url-input\"\n            value={shareUrl}\n            readOnly\n            addonAfter={\n              <ClipboardButton icon=\"copy\" variant=\"primary\" getText={() => shareUrl}>\n                <Trans i18nKey=\"share-playlist.copy-link-button\">Copy</Trans>\n              </ClipboardButton>\n            }\n          />\n        </Field>\n      </FieldSet>\n    </Modal>\n  );\n};\n","import { css } from '@emotion/css';\nimport React from 'react';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Button, Card, LinkButton, ModalsController, Stack, useStyles2 } from '@grafana/ui';\nimport { attachSkeleton, SkeletonComponent } from '@grafana/ui/src/unstable';\nimport { t, Trans } from 'app/core/internationalization';\nimport { contextSrv } from 'app/core/services/context_srv';\nimport { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';\n\nimport { ShareModal } from './ShareModal';\nimport { Playlist } from './types';\n\ninterface Props {\n  setStartPlaylist: (playlistItem: Playlist) => void;\n  setPlaylistToDelete: (playlistItem: Playlist) => void;\n  playlist: Playlist;\n}\n\nconst PlaylistCardComponent = ({ playlist, setStartPlaylist, setPlaylistToDelete }: Props) => {\n  return (\n    <Card>\n      <Card.Heading>\n        {playlist.name}\n        <ModalsController key=\"button-share\">\n          {({ showModal, hideModal }) => (\n            <DashNavButton\n              tooltip={t('playlist-page.card.tooltip', 'Share playlist')}\n              icon=\"share-alt\"\n              iconSize=\"lg\"\n              onClick={() => {\n                showModal(ShareModal, {\n                  playlistUid: playlist.uid,\n                  onDismiss: hideModal,\n                });\n              }}\n            />\n          )}\n        </ModalsController>\n      </Card.Heading>\n      <Card.Actions>\n        <Button variant=\"secondary\" icon=\"play\" onClick={() => setStartPlaylist(playlist)}>\n          <Trans i18nKey=\"playlist-page.card.start\">Start playlist</Trans>\n        </Button>\n        {contextSrv.isEditor && (\n          <>\n            <LinkButton key=\"edit\" variant=\"secondary\" href={`/playlists/edit/${playlist.uid}`} icon=\"cog\">\n              <Trans i18nKey=\"playlist-page.card.edit\">Edit playlist</Trans>\n            </LinkButton>\n            <Button\n              disabled={false}\n              onClick={() => setPlaylistToDelete(playlist)}\n              icon=\"trash-alt\"\n              variant=\"destructive\"\n            >\n              <Trans i18nKey=\"playlist-page.card.delete\">Delete playlist</Trans>\n            </Button>\n          </>\n        )}\n      </Card.Actions>\n    </Card>\n  );\n};\n\nconst PlaylistCardSkeleton: SkeletonComponent = ({ rootProps }) => {\n  const skeletonStyles = useStyles2(getSkeletonStyles);\n  return (\n    <Card {...rootProps}>\n      <Card.Heading>\n        <Skeleton width={140} />\n      </Card.Heading>\n      <Card.Actions>\n        <Stack direction=\"row\" wrap=\"wrap\">\n          <Skeleton containerClassName={skeletonStyles.button} width={142} height={32} />\n          {contextSrv.isEditor && (\n            <>\n              <Skeleton containerClassName={skeletonStyles.button} width={135} height={32} />\n              <Skeleton containerClassName={skeletonStyles.button} width={153} height={32} />\n            </>\n          )}\n        </Stack>\n      </Card.Actions>\n    </Card>\n  );\n};\n\nexport const PlaylistCard = attachSkeleton(PlaylistCardComponent, PlaylistCardSkeleton);\n\nfunction getSkeletonStyles(theme: GrafanaTheme2) {\n  return {\n    button: css({\n      lineHeight: 1,\n    }),\n  };\n}\n","import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';\n\nimport { PlaylistCard } from './PlaylistCard';\nimport { Playlist } from './types';\n\ninterface Props {\n  setStartPlaylist: (playlistItem: Playlist) => void;\n  setPlaylistToDelete: (playlistItem: Playlist) => void;\n  playlists: Playlist[];\n}\n\nconst PlaylistPageListComponent = ({ playlists, setStartPlaylist, setPlaylistToDelete }: Props) => {\n  const styles = useStyles2(getStyles);\n  return (\n    <ul className={styles.list}>\n      {playlists.map((playlist: Playlist) => (\n        <li className={styles.listItem} key={playlist.uid}>\n          <PlaylistCard\n            playlist={playlist}\n            setStartPlaylist={setStartPlaylist}\n            setPlaylistToDelete={setPlaylistToDelete}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nconst PlaylistPageListSkeleton: SkeletonComponent = ({ rootProps }) => {\n  const styles = useStyles2(getStyles);\n  return (\n    <div data-testid=\"playlist-page-list-skeleton\" className={styles.list} {...rootProps}>\n      <PlaylistCard.Skeleton />\n      <PlaylistCard.Skeleton />\n      <PlaylistCard.Skeleton />\n    </div>\n  );\n};\n\nexport const PlaylistPageList = attachSkeleton(PlaylistPageListComponent, PlaylistPageListSkeleton);\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    list: css({\n      display: 'grid',\n    }),\n    listItem: css({\n      listStyle: 'none',\n    }),\n  };\n}\n","import React, { useState } from 'react';\n\nimport { SelectableValue, UrlQueryMap, urlUtil } from '@grafana/data';\nimport { locationService } from '@grafana/runtime';\nimport { Button, Checkbox, Field, FieldSet, Modal, RadioButtonGroup } from '@grafana/ui';\n\nimport { Playlist, PlaylistMode } from './types';\n\nexport interface Props {\n  playlist: Playlist;\n  onDismiss: () => void;\n}\n\nexport const StartModal = ({ playlist, onDismiss }: Props) => {\n  const [mode, setMode] = useState<PlaylistMode>(false);\n  const [autoFit, setAutofit] = useState(false);\n\n  const modes: Array<SelectableValue<PlaylistMode>> = [\n    { label: 'Normal', value: false },\n    { label: 'TV', value: 'tv' },\n    { label: 'Kiosk', value: true },\n  ];\n\n  const onStart = () => {\n    const params: UrlQueryMap = {};\n    if (mode) {\n      params.kiosk = mode;\n    }\n    if (autoFit) {\n      params.autofitpanels = true;\n    }\n    locationService.push(urlUtil.renderUrl(`/playlists/play/${playlist.uid}`, params));\n  };\n\n  return (\n    <Modal isOpen={true} icon=\"play\" title=\"Start playlist\" onDismiss={onDismiss}>\n      <FieldSet>\n        <Field label=\"Mode\">\n          <RadioButtonGroup value={mode} options={modes} onChange={setMode} />\n        </Field>\n        <Checkbox\n          label=\"Autofit\"\n          description=\"Panel heights will be adjusted to fit screen size\"\n          name=\"autofix\"\n          value={autoFit}\n          onChange={(e) => setAutofit(e.currentTarget.checked)}\n        />\n      </FieldSet>\n      <Modal.ButtonRow>\n        <Button variant=\"primary\" onClick={onStart}>\n          Start {playlist.name}\n        </Button>\n      </Modal.ButtonRow>\n    </Modal>\n  );\n};\n","import React, { useMemo, useState } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { ConfirmModal, LinkButton } from '@grafana/ui';\nimport EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';\nimport { Page } from 'app/core/components/Page/Page';\nimport PageActionBar from 'app/core/components/PageActionBar/PageActionBar';\nimport { Trans, t } from 'app/core/internationalization';\nimport { contextSrv } from 'app/core/services/context_srv';\n\nimport { EmptyQueryListBanner } from './EmptyQueryListBanner';\nimport { PlaylistPageList } from './PlaylistPageList';\nimport { StartModal } from './StartModal';\nimport { getPlaylistAPI, searchPlaylists } from './api';\nimport { Playlist } from './types';\n\nexport const PlaylistPage = () => {\n  const api = getPlaylistAPI();\n  const [forcePlaylistsFetch, setForcePlaylistsFetch] = useState(0);\n  const [searchQuery, setSearchQuery] = useState('');\n  const allPlaylists = useAsync(() => api.getAllPlaylist(), [forcePlaylistsFetch]);\n  const playlists = useMemo(() => searchPlaylists(allPlaylists.value ?? [], searchQuery), [searchQuery, allPlaylists]);\n\n  const [startPlaylist, setStartPlaylist] = useState<Playlist | undefined>();\n  const [playlistToDelete, setPlaylistToDelete] = useState<Playlist | undefined>();\n\n  const hasPlaylists = playlists && playlists.length > 0;\n  const onDismissDelete = () => setPlaylistToDelete(undefined);\n  const onDeletePlaylist = () => {\n    if (!playlistToDelete) {\n      return;\n    }\n    api.deletePlaylist(playlistToDelete.uid).finally(() => {\n      setForcePlaylistsFetch(forcePlaylistsFetch + 1);\n      setPlaylistToDelete(undefined);\n    });\n  };\n\n  const emptyListBanner = (\n    <EmptyListCTA\n      title={t('playlist-page.empty.title', 'There are no playlists created yet')}\n      buttonIcon=\"plus\"\n      buttonLink=\"playlists/new\"\n      buttonTitle={t('playlist-page.empty.button', 'Create Playlist')}\n      buttonDisabled={!contextSrv.isEditor}\n      proTip={t('playlist-page.empty.pro-tip', 'You can use playlists to cycle dashboards on TVs without user control')}\n      proTipLink=\"http://docs.grafana.org/reference/playlist/\"\n      proTipLinkTitle={t('playlist-page.empty.pro-tip-link-title', 'Learn more')}\n      proTipTarget=\"_blank\"\n    />\n  );\n\n  const showSearch = allPlaylists.loading || playlists.length > 0 || searchQuery.length > 0;\n\n  return (\n    <Page\n      actions={\n        contextSrv.isEditor ? (\n          <LinkButton href=\"/playlists/new\">\n            <Trans i18nKey=\"playlist-page.create-button.title\">New playlist</Trans>\n          </LinkButton>\n        ) : undefined\n      }\n      navId=\"dashboards/playlists\"\n    >\n      <Page.Contents>\n        {showSearch && <PageActionBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />}\n\n        {allPlaylists.loading ? (\n          <PlaylistPageList.Skeleton />\n        ) : (\n          <>\n            {!hasPlaylists && searchQuery ? (\n              <EmptyQueryListBanner />\n            ) : (\n              <PlaylistPageList\n                playlists={playlists}\n                setStartPlaylist={setStartPlaylist}\n                setPlaylistToDelete={setPlaylistToDelete}\n              />\n            )}\n            {!showSearch && emptyListBanner}\n            {playlistToDelete && (\n              <ConfirmModal\n                title={playlistToDelete.name}\n                confirmText={t('playlist-page.delete-modal.confirm-text', 'Delete')}\n                body={t('playlist-page.delete-modal.body', 'Are you sure you want to delete {{name}} playlist?', {\n                  name: playlistToDelete.name,\n                })}\n                onConfirm={onDeletePlaylist}\n                isOpen={Boolean(playlistToDelete)}\n                onDismiss={onDismissDelete}\n              />\n            )}\n            {startPlaylist && <StartModal playlist={startPlaylist} onDismiss={() => setStartPlaylist(undefined)} />}\n          </>\n        )}\n      </Page.Contents>\n    </Page>\n  );\n};\n\nexport default PlaylistPage;\n"],"names":["PageActionBar","searchQuery","linkButton","setSearchQuery","target","placeholder","sortPicker","linkProps","defaultSortOptionsGetter","SortPicker","onChange","value","filter","getSortOptions","isClearable","options","vals","v","isDesc","opt","EmptyQueryListBanner","styles","getStyles","theme","ShareModal","playlistUid","onDismiss","mode","setMode","autoFit","setAutofit","modes","params","shareUrl","url","Modal","FieldSet","Field","RadioButtonGroup","Checkbox","e","Input","ClipboardButton","PlaylistCardComponent","playlist","setStartPlaylist","setPlaylistToDelete","Card","showModal","hideModal","DashNavButton","Button","PlaylistCardSkeleton","rootProps","skeletonStyles","getSkeletonStyles","Stack","PlaylistCard","PlaylistPageListComponent","playlists","PlaylistPageListSkeleton","PlaylistPageList","StartModal","onStart","PlaylistPage","api","forcePlaylistsFetch","setForcePlaylistsFetch","allPlaylists","useAsync","startPlaylist","playlistToDelete","hasPlaylists","onDismissDelete","onDeletePlaylist","emptyListBanner","EmptyListCTA","showSearch","Page","ConfirmModal"],"sourceRoot":""}