From 1d590164db5221d219fb911b7fc760af0b56699b Mon Sep 17 00:00:00 2001
From: Kai Rollmann <kai.rollmann@gmail.com>
Date: Mon, 24 Jun 2024 10:52:37 +0200
Subject: [PATCH] Improve history's default filter state and its empty search
 state

---
 .../src/js/entity-history/ContentControl.tsx  |  4 +--
 frontend/src/js/entity-history/Timeline.tsx   |  2 +-
 .../timeline/TimelineEmptyPlaceholder.tsx     | 29 +++++++++++++------
 frontend/src/localization/de.json             |  3 +-
 frontend/src/localization/en.json             |  3 +-
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/src/js/entity-history/ContentControl.tsx b/frontend/src/js/entity-history/ContentControl.tsx
index a9ee200c4c..9fab0b7810 100644
--- a/frontend/src/js/entity-history/ContentControl.tsx
+++ b/frontend/src/js/entity-history/ContentControl.tsx
@@ -83,11 +83,11 @@ const ContentControl = ({ value, onChange }: Props) => {
 
 export const useContentControl = () => {
   const [contentFilter, setContentFilter] = useState<ContentFilterValue>({
-    groupId: false,
+    groupId: true,
     secondaryId: true,
     concept: true,
     money: true,
-    rest: false,
+    rest: true,
     dates: true,
   });
 
diff --git a/frontend/src/js/entity-history/Timeline.tsx b/frontend/src/js/entity-history/Timeline.tsx
index 55214f4c5a..b289aa6a37 100644
--- a/frontend/src/js/entity-history/Timeline.tsx
+++ b/frontend/src/js/entity-history/Timeline.tsx
@@ -124,7 +124,7 @@ export const Timeline = memo(
               timeStratifiedInfos={currentEntityTimeStratifiedInfos}
             />
           )}
-          {isEmpty && <SxTimelineEmptyPlaceholder />}
+          {isEmpty && <SxTimelineEmptyPlaceholder searchTerm={searchTerm} />}
           {dateColumn &&
             sourceColumn &&
             eventsByQuarterWithGroups.map(({ year, quarterwiseData }, i) => (
diff --git a/frontend/src/js/entity-history/timeline/TimelineEmptyPlaceholder.tsx b/frontend/src/js/entity-history/timeline/TimelineEmptyPlaceholder.tsx
index 1ccd9a8757..16d4a40a53 100644
--- a/frontend/src/js/entity-history/timeline/TimelineEmptyPlaceholder.tsx
+++ b/frontend/src/js/entity-history/timeline/TimelineEmptyPlaceholder.tsx
@@ -1,8 +1,9 @@
 import styled from "@emotion/styled";
-import { faListUl } from "@fortawesome/free-solid-svg-icons";
+import { faListUl, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 
+import { useMemo } from "react";
 import { StateT } from "../../app/reducers";
 import FaIcon from "../../icon/FaIcon";
 import { EntityHistoryStateT } from "../reducer";
@@ -49,8 +50,10 @@ const Description = styled("p")`
 
 export const TimelineEmptyPlaceholder = ({
   className,
+  searchTerm,
 }: {
   className?: string;
+  searchTerm?: string;
 }) => {
   const { t } = useTranslation();
 
@@ -61,20 +64,28 @@ export const TimelineEmptyPlaceholder = ({
     (state) => state.entityHistory.currentEntityId,
   );
 
+  const message = useMemo(() => {
+    if (searchTerm) {
+      return t("history.emptyTimeline.descriptionWithSearchTerm", {
+        searchTerm,
+      });
+    }
+
+    if (ids.length === 0 || !id) {
+      return t("history.emptyTimeline.descriptionWithoutIds");
+    }
+
+    return t("history.emptyTimeline.descriptionWithId");
+  }, [ids, id, t, searchTerm]);
+
   return (
     <Root className={className}>
       <Row>
-        <BigIcon icon={faListUl} />
+        <BigIcon icon={searchTerm ? faMagnifyingGlass : faListUl} />
         <div>
           <Headline>{t("history.emptyTimeline.headline")}</Headline>
           <Description>{t("history.emptyTimeline.description")}</Description>
-          <Message>
-            {ids.length === 0
-              ? t("history.emptyTimeline.descriptionWithoutIds")
-              : id
-              ? t("history.emptyTimeline.descriptionWithId")
-              : t("history.emptyTimeline.descriptionWithoutId")}
-          </Message>
+          <Message dangerouslySetInnerHTML={{ __html: message }} />
         </div>
       </Row>
     </Root>
diff --git a/frontend/src/localization/de.json b/frontend/src/localization/de.json
index 7501c91d60..12150190c1 100644
--- a/frontend/src/localization/de.json
+++ b/frontend/src/localization/de.json
@@ -482,7 +482,8 @@
       "description": "Hier werden Informationen chronologisch dargestellt.",
       "descriptionWithoutIds": "Importiere IDs in die leere Liste auf der linken Seite, um zu starten.",
       "descriptionWithoutId": "Wähle eine ID aus der Liste auf der linken Seite.",
-      "descriptionWithId": "Für diese ID konnten keine Daten gefunden werden."
+      "descriptionWithId": "Für diese ID konnten keine Daten gefunden werden.",
+      "descriptionWithSearchTerm": "Für den Suchbegriff '<strong>{{ searchTerm }}</strong>' konnten keine Daten gefunden werden."
     },
     "backButtonWarning": "Achtung: Wenn Du zurück gehst, werden Änderungen an der Liste verworfen. Lade die Liste vorher herunter, um sie zu speichern.",
     "history": "Historie",
diff --git a/frontend/src/localization/en.json b/frontend/src/localization/en.json
index c9a3e426f9..e5e556ffc3 100644
--- a/frontend/src/localization/en.json
+++ b/frontend/src/localization/en.json
@@ -482,7 +482,8 @@
       "description": "Exploring individual events chronologically.",
       "descriptionWithoutIds": "To get started, import IDs into the empty list on the left side.",
       "descriptionWithoutId": "Select an ID from the list on the left side",
-      "descriptionWithId": "Couldn't find any data for this ID."
+      "descriptionWithId": "Couldn't find any data for this ID.",
+      "descriptionWithSearchTerm": "Couldn't find any data for the search term '<strong>{{ searchTerm }}</strong>'."
     },
     "backButtonWarning": "Note: changes will be discarded. Please download the list before going back.",
     "history": "History",