Internationalization: Markup for Playlist Page (#74509)

* Internationalization: Markup for Playlist Page

* Internationalization: Markup for Playlist Page

* Update public/app/features/playlist/PlaylistPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/playlist/PlaylistPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/playlist/PlaylistPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/playlist/PlaylistPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* PlaylistPage

---------

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Khushi Jain
2023-09-13 15:09:37 +05:30
committed by GitHub
parent 7ef7cedc11
commit df014cd780
8 changed files with 145 additions and 11 deletions

View File

@@ -5,6 +5,7 @@ import { ConfirmModal } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { Page } from 'app/core/components/Page/Page';
import PageActionBar from 'app/core/components/PageActionBar/PageActionBar';
import { t } from 'app/core/internationalization';
import { contextSrv } from 'app/core/services/context_srv';
import { EmptyQueryListBanner } from './EmptyQueryListBanner';
@@ -36,14 +37,14 @@ export const PlaylistPage = () => {
const emptyListBanner = (
<EmptyListCTA
title="There are no playlists created yet"
title={t('playlist-page.empty.title', 'There are no playlists created yet')}
buttonIcon="plus"
buttonLink="playlists/new"
buttonTitle="Create Playlist"
buttonTitle={t('playlist-page.empty.button', 'Create Playlist')}
buttonDisabled={!contextSrv.isEditor}
proTip="You can use playlists to cycle dashboards on TVs without user control"
proTip={t('playlist-page.empty.pro-tip', 'You can use playlists to cycle dashboards on TVs without user control')}
proTipLink="http://docs.grafana.org/reference/playlist/"
proTipLinkTitle="Learn more"
proTipLinkTitle={t('playlist-page.empty.pro-tip-link-title', 'Learn more')}
proTipTarget="_blank"
/>
);
@@ -56,7 +57,11 @@ export const PlaylistPage = () => {
{showSearch && (
<PageActionBar
searchQuery={searchQuery}
linkButton={contextSrv.isEditor ? { title: 'New playlist', href: '/playlists/new' } : undefined}
linkButton={
contextSrv.isEditor
? { title: t('playlist-page.create-button.title', 'New playlist'), href: '/playlists/new' }
: undefined
}
setSearchQuery={setSearchQuery}
/>
)}
@@ -74,8 +79,10 @@ export const PlaylistPage = () => {
{playlistToDelete && (
<ConfirmModal
title={playlistToDelete.name}
confirmText="Delete"
body={`Are you sure you want to delete '${playlistToDelete.name}' playlist?`}
confirmText={t('playlist-page.delete-modal.confirm-text', 'Delete')}
body={t('playlist-page.delete-modal.body', 'Are you sure you want to delete {{name}} playlist?', {
name: playlistToDelete.name,
})}
onConfirm={onDeletePlaylist}
isOpen={Boolean(playlistToDelete)}
onDismiss={onDismissDelete}

View File

@@ -3,6 +3,7 @@ import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Button, Card, LinkButton, ModalsController, useStyles2 } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization';
import { contextSrv } from 'app/core/services/context_srv';
import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
@@ -27,7 +28,7 @@ export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDel
<ModalsController key="button-share">
{({ showModal, hideModal }) => (
<DashNavButton
tooltip="Share playlist"
tooltip={t('playlist-page.card.tooltip', 'Share playlist')}
icon="share-alt"
iconSize="lg"
onClick={() => {
@@ -42,12 +43,12 @@ export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDel
</Card.Heading>
<Card.Actions>
<Button variant="secondary" icon="play" onClick={() => setStartPlaylist(playlist)}>
Start playlist
<Trans i18nKey="playlist-page.card.start">Start playlist</Trans>
</Button>
{contextSrv.isEditor && (
<>
<LinkButton key="edit" variant="secondary" href={`/playlists/edit/${playlist.uid}`} icon="cog">
Edit playlist
<Trans i18nKey="playlist-page.card.edit">Edit playlist</Trans>
</LinkButton>
<Button
disabled={false}
@@ -55,7 +56,7 @@ export const PlaylistPageList = ({ playlists, setStartPlaylist, setPlaylistToDel
icon="trash-alt"
variant="destructive"
>
Delete playlist
<Trans i18nKey="playlist-page.card.delete">Delete playlist</Trans>
</Button>
</>
)}