From df014cd7809a717a5e8a75806b2577806d8290b3 Mon Sep 17 00:00:00 2001
From: Khushi Jain <57278642+khushijain21@users.noreply.github.com>
Date: Wed, 13 Sep 2023 15:09:37 +0530
Subject: [PATCH] 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>
---
 public/app/features/playlist/PlaylistPage.tsx | 21 ++++++++++++-------
 .../features/playlist/PlaylistPageList.tsx    |  9 ++++----
 public/locales/de-DE/grafana.json             | 21 +++++++++++++++++++
 public/locales/en-US/grafana.json             | 21 +++++++++++++++++++
 public/locales/es-ES/grafana.json             | 21 +++++++++++++++++++
 public/locales/fr-FR/grafana.json             | 21 +++++++++++++++++++
 public/locales/pseudo-LOCALE/grafana.json     | 21 +++++++++++++++++++
 public/locales/zh-Hans/grafana.json           | 21 +++++++++++++++++++
 8 files changed, 145 insertions(+), 11 deletions(-)

diff --git a/public/app/features/playlist/PlaylistPage.tsx b/public/app/features/playlist/PlaylistPage.tsx
index b6c590cde2e..f556fafd000 100644
--- a/public/app/features/playlist/PlaylistPage.tsx
+++ b/public/app/features/playlist/PlaylistPage.tsx
@@ -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}
diff --git a/public/app/features/playlist/PlaylistPageList.tsx b/public/app/features/playlist/PlaylistPageList.tsx
index 68246e77574..514a152626a 100644
--- a/public/app/features/playlist/PlaylistPageList.tsx
+++ b/public/app/features/playlist/PlaylistPageList.tsx
@@ -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>
                 </>
               )}
diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json
index 043f62a7ac8..3d9902318b2 100644
--- a/public/locales/de-DE/grafana.json
+++ b/public/locales/de-DE/grafana.json
@@ -631,6 +631,27 @@
     "sub-title": "",
     "title": ""
   },
+  "playlist-page": {
+    "card": {
+      "delete": "",
+      "edit": "",
+      "start": "",
+      "tooltip": ""
+    },
+    "create-button": {
+      "title": ""
+    },
+    "delete-modal": {
+      "body": "",
+      "confirm-text": ""
+    },
+    "empty": {
+      "button": "",
+      "pro-tip": "",
+      "pro-tip-link-title": "",
+      "title": ""
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Automatische Aktualisierung ausgeschaltet. Aktualisierungszeitintervall auswählen",
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index e57e094518a..2553762c79e 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -631,6 +631,27 @@
     "sub-title": "A playlist rotates through a pre-selected list of dashboards. A playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.",
     "title": "Edit playlist"
   },
+  "playlist-page": {
+    "card": {
+      "delete": "Delete playlist",
+      "edit": "Edit playlist",
+      "start": "Start playlist",
+      "tooltip": "Share playlist"
+    },
+    "create-button": {
+      "title": "New playlist"
+    },
+    "delete-modal": {
+      "body": "Are you sure you want to delete {{name}} playlist?",
+      "confirm-text": "Delete"
+    },
+    "empty": {
+      "button": "Create Playlist",
+      "pro-tip": "You can use playlists to cycle dashboards on TVs without user control",
+      "pro-tip-link-title": "Learn more",
+      "title": "There are no playlists created yet"
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Auto refresh turned off. Choose refresh time interval",
diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json
index 5d9bcc100ba..d8631fe219c 100644
--- a/public/locales/es-ES/grafana.json
+++ b/public/locales/es-ES/grafana.json
@@ -636,6 +636,27 @@
     "sub-title": "",
     "title": ""
   },
+  "playlist-page": {
+    "card": {
+      "delete": "",
+      "edit": "",
+      "start": "",
+      "tooltip": ""
+    },
+    "create-button": {
+      "title": ""
+    },
+    "delete-modal": {
+      "body": "",
+      "confirm-text": ""
+    },
+    "empty": {
+      "button": "",
+      "pro-tip": "",
+      "pro-tip-link-title": "",
+      "title": ""
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Actualización automática desactivada. Elija un intervalo de tiempo de actualización",
diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json
index b9bbb03f792..b45239be892 100644
--- a/public/locales/fr-FR/grafana.json
+++ b/public/locales/fr-FR/grafana.json
@@ -636,6 +636,27 @@
     "sub-title": "",
     "title": ""
   },
+  "playlist-page": {
+    "card": {
+      "delete": "",
+      "edit": "",
+      "start": "",
+      "tooltip": ""
+    },
+    "create-button": {
+      "title": ""
+    },
+    "delete-modal": {
+      "body": "",
+      "confirm-text": ""
+    },
+    "empty": {
+      "button": "",
+      "pro-tip": "",
+      "pro-tip-link-title": "",
+      "title": ""
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Actualisation automatique désactivée. Choisir un intervalle de temps d'actualisation",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index b73be8b081e..4004f2c6e79 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -631,6 +631,27 @@
     "sub-title": "Å pľäyľįşŧ řőŧäŧęş ŧĥřőūģĥ ä přę-şęľęčŧęđ ľįşŧ őƒ đäşĥþőäřđş. Å pľäyľįşŧ čäʼn þę ä ģřęäŧ ŵäy ŧő þūįľđ şįŧūäŧįőʼnäľ äŵäřęʼnęşş, őř ĵūşŧ şĥőŵ őƒƒ yőūř męŧřįčş ŧő yőūř ŧęäm őř vįşįŧőřş.",
     "title": "Ēđįŧ pľäyľįşŧ"
   },
+  "playlist-page": {
+    "card": {
+      "delete": "Đęľęŧę pľäyľįşŧ",
+      "edit": "Ēđįŧ pľäyľįşŧ",
+      "start": "Ŝŧäřŧ pľäyľįşŧ",
+      "tooltip": "Ŝĥäřę pľäyľįşŧ"
+    },
+    "create-button": {
+      "title": "Ńęŵ pľäyľįşŧ"
+    },
+    "delete-modal": {
+      "body": "Åřę yőū şūřę yőū ŵäʼnŧ ŧő đęľęŧę {{name}} pľäyľįşŧ?",
+      "confirm-text": "Đęľęŧę"
+    },
+    "empty": {
+      "button": "Cřęäŧę Pľäyľįşŧ",
+      "pro-tip": "Ÿőū čäʼn ūşę pľäyľįşŧş ŧő čyčľę đäşĥþőäřđş őʼn ŦVş ŵįŧĥőūŧ ūşęř čőʼnŧřőľ",
+      "pro-tip-link-title": "Ŀęäřʼn mőřę",
+      "title": "Ŧĥęřę äřę ʼnő pľäyľįşŧş čřęäŧęđ yęŧ"
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Åūŧő řęƒřęşĥ ŧūřʼnęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ",
diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json
index 1f9695d9479..669cc3c2980 100644
--- a/public/locales/zh-Hans/grafana.json
+++ b/public/locales/zh-Hans/grafana.json
@@ -626,6 +626,27 @@
     "sub-title": "",
     "title": ""
   },
+  "playlist-page": {
+    "card": {
+      "delete": "",
+      "edit": "",
+      "start": "",
+      "tooltip": ""
+    },
+    "create-button": {
+      "title": ""
+    },
+    "delete-modal": {
+      "body": "",
+      "confirm-text": ""
+    },
+    "empty": {
+      "button": "",
+      "pro-tip": "",
+      "pro-tip-link-title": "",
+      "title": ""
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "自动刷新已关闭。选择刷新时间间隔",