ensure translation of default report name

src/components/hooks/useReport.js

@@ -2,18 +2,20 @@ import { produce } from 'immer';
 import { useCallback, useEffect, useState } from 'react';
 import { useTimezone } from './useTimezone';
 import useApi from './useApi';
-
-const baseParameters = {
-  name: 'Untitled',
-  description: '',
-  parameters: {},
-};
+import useMessages from './useMessages';
 
 export function useReport(reportId, defaultParameters) {
   const [report, setReport] = useState(null);
   const [isRunning, setIsRunning] = useState(false);
   const { get, post } = useApi();
   const [timezone] = useTimezone();
+  const { formatMessage, labels } = useMessages();
+
+  const baseParameters = {
+    name: formatMessage(labels.untitled),
+    description: '',
+    parameters: {},
+  };
 
   const loadReport = async id => {
     const data = await get(`/reports/${id}`);

src/components/pages/reports/ReportHeader.js

@@ -20,6 +20,7 @@ export function ReportHeader({ icon }) {
 
   const { name, description, parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};
+  const defaultName = formatMessage(labels.untitled);
 
   const handleSave = async () => {
     if (!report.id) {
@@ -39,7 +40,7 @@ export function ReportHeader({ icon }) {
   };
 
   const handleNameChange = name => {
-    updateReport({ name: name || 'Untitled' });
+    updateReport({ name: name || defaultName });
   };
 
   const handleDescriptionChange = description => {
@@ -54,7 +55,7 @@ export function ReportHeader({ icon }) {
           key={name}
           name="name"
           value={name}
-          placeholder={formatMessage(labels.untitled)}
+          placeholder={defaultName}
           onCommit={handleNameChange}
         />
       </>