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>
2 years ago · df014cd780
parent 7ef7cedc11
commit df014cd780
8 changed files with 145 additions and 11 deletions
--- 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}
--- 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>
                </>
              )}
--- 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",
--- 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",
--- 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",
--- 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",
--- 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ľįşŧ čäŉ þę ä ģřęäŧ ŵäy ŧő þūįľđ şįŧūäŧįőŉäľ äŵäřęŉęşş, őř ĵūşŧ şĥőŵ őƒƒ 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őū ŵäŉŧ ŧő đęľęŧę {{name}} pľäyľįşŧ?",
+      "confirm-text": "Đęľęŧę"
+    },
+    "empty": {
+      "button": "Cřęäŧę Pľäyľįşŧ",
+      "pro-tip": "Ÿőū čäŉ ūşę pľäyľįşŧş ŧő čyčľę đäşĥþőäřđş őŉ ŦVş ŵįŧĥőūŧ ūşęř čőŉŧřőľ",
+      "pro-tip-link-title": "Ŀęäřŉ mőřę",
+      "title": "Ŧĥęřę äřę ŉő pľäyľįşŧş čřęäŧęđ yęŧ"
+    }
+  },
  "refresh-picker": {
    "aria-label": {
      "choose-interval": "Åūŧő řęƒřęşĥ ŧūřŉęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įŉŧęřväľ",
--- 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": "自动刷新已关闭。选择刷新时间间隔",