From aa341d1dd295d69adb400960ba5f3fb0317e64f2 Mon Sep 17 00:00:00 2001
From: Maxime-J <Maxime-J@users.noreply.github.com>
Date: Fri, 1 Sep 2023 09:45:59 +0000
Subject: [PATCH] ensure translation of default report name

---
 src/components/hooks/useReport.js            | 14 ++++++++------
 src/components/pages/reports/ReportHeader.js |  5 +++--
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/hooks/useReport.js b/src/components/hooks/useReport.js
index 72f90af3..7c698b4e 100644
--- a/src/components/hooks/useReport.js
+++ b/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}`);
diff --git a/src/components/pages/reports/ReportHeader.js b/src/components/pages/reports/ReportHeader.js
index e81d6ece..930f745b 100644
--- a/src/components/pages/reports/ReportHeader.js
+++ b/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}
         />
       </>