history: empty state translations (#1547)

* history: empty state translations

* show the empty text only when it matches the response

* final translations

* correct file

Author: shakyShane

special-pages/pages/history/app/components/Empty.js

@@ -3,6 +3,8 @@ import { useTypedTranslation } from '../types.js';
 import cn from 'classnames';
 import styles from './VirtualizedList.module.css';
 import { useQueryContext } from '../global/Providers/QueryProvider.js';
+import { useResultsData } from '../global/Providers/HistoryServiceProvider.js';
+import { useComputed } from '@preact/signals';
 
 /**
  * Empty state component displayed when no results are available
@@ -28,11 +30,28 @@ export function Empty({ title, text }) {
  */
 export function EmptyState() {
     const { t } = useTypedTranslation();
+    const results = useResultsData();
     const query = useQueryContext();
-    const hasSearch = query.value.term !== null && query.value.term.trim().length > 0;
+    const hasSearch = useComputed(() => query.value.term !== null && query.value.term.trim().length > 0);
 
-    if (hasSearch) {
-        return <Empty title={t('no_results_title', { term: `"${query.value.term}"` })} text={t('no_results_text')} />;
+    /**
+     * Compute the empty state title. this text needs to match the results
+     * it produces, not just the latest UI value.
+     */
+    const text = useComputed(() => {
+        const termFromSearchBox = query.value.term;
+        if (!('term' in results.value.info.query)) return termFromSearchBox;
+
+        // if we have results + a search term in the UI, choose which term to show
+        const termFromApiResponse = results.value.info.query.term;
+        if (termFromSearchBox === termFromApiResponse) {
+            return termFromSearchBox;
+        }
+        return termFromApiResponse;
+    });
+
+    if (hasSearch.value) {
+        return <Empty title={t('no_results_title', { term: `"${text.value}"` })} text={t('no_results_text')} />;
     }
 
     return <Empty title={t('empty_title')} text={t('empty_text')} />;

special-pages/pages/history/app/global/Providers/HistoryServiceProvider.js

@@ -7,6 +7,7 @@ import { signal, useSignal, useSignalEffect } from '@preact/signals';
 import { generateHeights, generateViewIds } from '../../utils.js';
 
 /**
+ * @typedef {import('../../../types/history.ts').HistoryQueryInfo} HistoryQueryInfo
  * @typedef {import('../../../types/history.ts').HistoryQuery['source']} Source
  * @typedef {{kind: 'search-commit', params: URLSearchParams, source: Source}
  * | {kind: 'delete-range'; value: string }
@@ -33,13 +34,23 @@ const HistoryServiceDispatchContext = createContext(defaultDispatch);
  * @property {import('../../../types/history.ts').HistoryItem[]} items
  * @property {number[]} heights
  * @property {string[]} viewIds
+ * @property {HistoryQueryInfo} info
  */
 /**
  * @typedef {import('../../../types/history.ts').Range} Range
  * @import { ReadonlySignal } from '@preact/signals'
  */
 
-const ResultsContext = createContext(/** @type {ReadonlySignal<Results>} */ (signal({ items: [], heights: [], viewIds: [] })));
+const ResultsContext = createContext(
+    /** @type {ReadonlySignal<Results>} */ (
+        signal({
+            items: [],
+            heights: [],
+            viewIds: [],
+            info: { finished: false, query: { term: '' } },
+        })
+    ),
+);
 const RangesContext = createContext(/** @type {ReadonlySignal<Range[]>} */ (signal([])));
 
 /**
@@ -55,6 +66,7 @@ export function HistoryServiceProvider({ service, children, initial }) {
     const queryDispatch = useQueryDispatch();
     const ranges = useSignal(initial.ranges.ranges);
     const results = useSignal({
+        info: initial.query.info,
         items: initial.query.results,
         heights: generateHeights(initial.query.results),
         viewIds: generateViewIds(initial.query.results),
@@ -64,6 +76,7 @@ export function HistoryServiceProvider({ service, children, initial }) {
         const unsub = service.onResults((data) => {
             results.value = {
                 items: data.results,
+                info: data.info,
                 heights: generateHeights(data.results),
                 viewIds: generateViewIds(data.results),
             };

special-pages/pages/history/app/index.js

@@ -139,7 +139,7 @@ async function fetchInitial(query, service, didCatch) {
 async function getStrings(environment) {
     return environment.locale === 'en'
         ? enStrings
-        : await fetch(`./locales/${environment.locale}/new-tab.json`)
+        : await fetch(`./locales/${environment.locale}/history.json`)
               .then((x) => x.json())
               .catch((e) => {
                   console.error('Could not load locale', environment.locale, e);

special-pages/pages/history/app/mocks/mock-transport.js

@@ -219,10 +219,14 @@ function queryResponseFrom(memory, msg) {
         const { term } = msg.params.query;
         if (term !== '') {
             if (term === 'empty' || term.includes('"') || term.includes('<')) {
-                return asResponse([], msg.params.offset, msg.params.limit);
+                const response = asResponse([], msg.params.offset, msg.params.limit);
+                response.info.query = { term };
+                return response;
             }
             if (term === 'empty') {
-                return asResponse([], msg.params.offset, msg.params.limit);
+                const response = asResponse([], msg.params.offset, msg.params.limit);
+                response.info.query = { term };
+                return response;
             }
             if (term.trim().match(/^\d+$/)) {
                 const int = parseInt(term.trim(), 10);

special-pages/pages/history/app/strings.json

@@ -12,7 +12,7 @@
     "note": "The placeholder {term} will be dynamically replaced with the search term entered by the user. For example, if the user searches for 'cats', the title will become 'No results found for cats'."
   },
   "no_results_text": {
-    "title": "Try searching for a different URL or keywords",
+    "title": "Try searching for a different URL or keywords.",
     "note": "Placeholder text when a search gave no results."
   },
   "delete_all": {

special-pages/pages/history/public/locales/de/history.json

@@ -13,9 +13,17 @@
     "note" : "Text shown where there are no remaining history entries"
   },
   "empty_text" : {
-    "title" : "Seitenbesuche werden angezeigt, sobald du mit dem Browsen beginnst.",
+    "title" : "Noch kein Browserverlauf.",
     "note" : "Placeholder text when there's no results to show"
   },
+  "no_results_title" : {
+    "title" : "Keine Ergebnisse für {term} gefunden",
+    "note" : "The placeholder {term} will be dynamically replaced with the search term entered by the user. For example, if the user searches for 'cats', the title will become 'No results found for cats'."
+  },
+  "no_results_text" : {
+    "title" : "Versuche es mit einer anderen URL oder anderen Stichwörtern.",
+    "note" : "Placeholder text when a search gave no results."
+  },
   "delete_all" : {
     "title" : "Alle löschen",
     "note" : "Text for a button that deletes all items or entries. An additional confirmation dialog will be presented."

special-pages/pages/history/public/locales/en/history.json

@@ -22,7 +22,7 @@
     "note": "The placeholder {term} will be dynamically replaced with the search term entered by the user. For example, if the user searches for 'cats', the title will become 'No results found for cats'."
   },
   "no_results_text": {
-    "title": "Try searching for a different URL or keywords",
+    "title": "Try searching for a different URL or keywords.",
     "note": "Placeholder text when a search gave no results."
   },
   "delete_all": {

special-pages/pages/history/public/locales/es/history.json

@@ -13,9 +13,17 @@
     "note" : "Text shown where there are no remaining history entries"
   },
   "empty_text" : {
-    "title" : "Las visitas a la página se mostrarán cuando empieces a navegar.",
+    "title" : "Todavía no hay historial de navegación.",
     "note" : "Placeholder text when there's no results to show"
   },
+  "no_results_title" : {
+    "title" : "No se han encontrado resultados para {term}",
+    "note" : "The placeholder {term} will be dynamically replaced with the search term entered by the user. For example, if the user searches for 'cats', the title will become 'No results found for cats'."
+  },
+  "no_results_text" : {
+    "title" : "Intenta buscar una URL diferente o palabras clave distintas.",
+    "note" : "Placeholder text when a search gave no results."
+  },
   "delete_all" : {
     "title" : "Eliminar todo",
     "note" : "Text for a button that deletes all items or entries. An additional confirmation dialog will be presented."

special-pages/pages/history/public/locales/fr/history.json

@@ -13,9 +13,17 @@
     "note" : "Text shown where there are no remaining history entries"
   },
   "empty_text" : {
-    "title" : "Les visites de page apparaîtront une fois que vous commencerez à naviguer.",
+    "title" : "Aucun historique de navigation pour le moment.",
     "note" : "Placeholder text when there's no results to show"
   },
+  "no_results_title" : {
+    "title" : "Aucun résultat trouvé pour {term}",
+    "note" : "The placeholder {term} will be dynamically replaced with the search term entered by the user. For example, if the user searches for 'cats', the title will become 'No results found for cats'."
+  },
+  "no_results_text" : {
+    "title" : "Essayez de rechercher une URL ou des mots-clés différents.",
+    "note" : "Placeholder text when a search gave no results."
+  },
   "delete_all" : {
     "title" : "Tout supprimer",
     "note" : "Text for a button that deletes all items or entries. An additional confirmation dialog will be presented."

special-pages/pages/history/public/locales/it/history.json

@@ -13,9 +13,17 @@
     "note" : "Text shown where there are no remaining history entries"
   },
   "empty_text" : {
-    "title" : "Le visite alla pagina appariranno non appena inizierai la navigazione.",
+    "title" : "Ancora nessuna cronologia di navigazione.",
     "note" : "Placeholder text when there's no results to show"
   },
+  "no_results_title" : {
+    "title" : "Nessun risultato trovato per {term}",
+    "note" : "The placeholder {term} will be dynamically replaced with the search term entered by the user. For example, if the user searches for 'cats', the title will become 'No results found for cats'."
+  },
+  "no_results_text" : {
+    "title" : "Prova a cercare un URL o parole chiave diverse.",
+    "note" : "Placeholder text when a search gave no results."
+  },
   "delete_all" : {
     "title" : "Elimina tutto",
     "note" : "Text for a button that deletes all items or entries. An additional confirmation dialog will be presented."