From ce0e94098eb027fcd8203fd159aa5cba63335fe4 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 16 Mar 2021 11:41:38 +0100
Subject: [PATCH] Fix navigate to detail after search (#1589)

Sometimes fails the navigation to a detail page after search.
This happens because of the OverviewPageActions which pushes the value of the filter to history.
This happens on change and on render, which could lead to a navigation back to the overview even after a click on an item in the overview.
---
 gradle/changelog/navigate_after_search.yaml   |  2 ++
 scm-ui/ui-api/src/urls.ts                     |  7 ++++++
 .../ui-components/src/OverviewPageActions.tsx | 23 +++++++++++--------
 3 files changed, 22 insertions(+), 10 deletions(-)
 create mode 100644 gradle/changelog/navigate_after_search.yaml

diff --git a/gradle/changelog/navigate_after_search.yaml b/gradle/changelog/navigate_after_search.yaml
new file mode 100644
index 0000000000..91bd0cb265
--- /dev/null
+++ b/gradle/changelog/navigate_after_search.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Navigate after search ([#1589](https://github.com/scm-manager/scm-manager/pull/1589))
diff --git a/scm-ui/ui-api/src/urls.ts b/scm-ui/ui-api/src/urls.ts
index 50e564d848..b413302678 100644
--- a/scm-ui/ui-api/src/urls.ts
+++ b/scm-ui/ui-api/src/urls.ts
@@ -38,6 +38,13 @@ export function withEndingSlash(url: string) {
   return url + "/";
 }
 
+export function withStartingSlash(url: string) {
+  if (url.startsWith("/")) {
+    return url;
+  }
+  return "/" + url;
+}
+
 export function concat(base: string, ...parts: string[]) {
   let url = base;
   for (const p of parts) {
diff --git a/scm-ui/ui-components/src/OverviewPageActions.tsx b/scm-ui/ui-components/src/OverviewPageActions.tsx
index abfc12c890..d5d9ee99d9 100644
--- a/scm-ui/ui-components/src/OverviewPageActions.tsx
+++ b/scm-ui/ui-components/src/OverviewPageActions.tsx
@@ -38,11 +38,15 @@ type Props = {
   searchPlaceholder?: string;
 };
 
+const createAbsoluteLink = (url: string) => {
+  return urls.withStartingSlash(urls.withEndingSlash(url));
+};
+
 const OverviewPageActions: FC<Props> = ({
   groups,
   currentGroup,
   showCreateButton,
-  link,
+  link: inputLink,
   groupSelected,
   label,
   testId,
@@ -50,8 +54,9 @@ const OverviewPageActions: FC<Props> = ({
 }) => {
   const history = useHistory();
   const location = useLocation();
-  const [filterValue, setFilterValue] = useState(urls.getQueryStringFromLocation(location));
-  
+  const [filterValue, setFilterValue] = useState(urls.getQueryStringFromLocation(location) || "");
+  const link = createAbsoluteLink(inputLink);
+
   const groupSelector = groups && (
     <div className={"column is-flex"}>
       <DropDown
@@ -67,20 +72,18 @@ const OverviewPageActions: FC<Props> = ({
     if (showCreateButton) {
       return (
         <div className={classNames("input-button", "control", "column")}>
-          <Button label={label} link={`/${link}/create`} color="primary" />
+          <Button label={label} link={`${link}create`} color="primary" />
         </div>
       );
     }
     return null;
   };
 
-  const filter = (filter: string) => {
-    if ((filter && filter !== filterValue) || (!filter && filterValue)) {
-      history.push(`/${link}/?q=${filter}`);
-    } else {
-      history.push(`${location.pathname}?q=${filter}`);
+  const filter = (q: string) => {
+    if (q !== filterValue) {
+      setFilterValue(q);
+      history.push(`${link}?q=${q}`);
     }
-    setFilterValue(filter);
   };
 
   return (