Internationalization: Translate TimePickerContent component (#58316)

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -86,7 +86,7 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
                 autoFocus={true}
                 value={searchTerm}
                 onChange={setSearchQuery}
-                placeholder={'Search quick ranges'}
+                placeholder={t('time-picker.content.filter-placeholder', 'Search quick ranges')}
               />
             </div>
             <CustomScrollbar>
@@ -220,22 +220,24 @@ const EmptyRecentList = memo(() => {
 
   return (
     <div className={styles.container}>
-      <div>
-        <span>
-          It looks like you haven&apos;t used this time picker before. As soon as you enter some time intervals,
-          recently used intervals will appear here.
-        </span>
-      </div>
-      <div>
-        <a
-          className={styles.link}
-          href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls"
-          target="_new"
-        >
-          Read the documentation
-        </a>
-        <span> to find out more about how to enter custom time ranges.</span>
-      </div>
+      <Trans i18nKey="time-picker.content.empty-recent-list">
+        <div>
+          <span>
+            It looks like you haven&apos;t used this time picker before. As soon as you enter some time intervals,
+            recently used intervals will appear here.
+          </span>
+        </div>
+        <div>
+          <a
+            className={styles.link}
+            href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls"
+            target="_new"
+          >
+            Read the documentation
+          </a>
+          <span> to find out more about how to enter custom time ranges.</span>
+        </div>
+      </Trans>
     </div>
   );
 });