From 54d4f7e3716501de7b143a024064a46a0d401b62 Mon Sep 17 00:00:00 2001
From: Sven Urbanski <sven.urbanski@freiheit.com>
Date: Tue, 9 Apr 2024 13:58:58 +0200
Subject: [PATCH] fix: explain missing next/previous buttons better (#1506)

Now it looks like this when there is no commit linked:
![image
(7)](https://github.com/freiheit-com/kuberpult/assets/3481382/eb188b81-f105-408a-acb4-ad0dbe83b338)

When only the next commit is linked:
![image
(8)](https://github.com/freiheit-com/kuberpult/assets/3481382/838fcf92-9144-4386-ab23-0be02187c551)

When only the previous commit is linked:
![image
(9)](https://github.com/freiheit-com/kuberpult/assets/3481382/b56e1aad-c804-4bb8-aa47-0b9bbda5597e)

The tooltip is shown whenever the user hovers over the (i) symbol.
---
 .../ui/components/CommitInfo/CommitInfo.scss  |  5 +++
 .../ui/components/CommitInfo/CommitInfo.tsx   | 42 +++++++++++--------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/services/frontend-service/src/ui/components/CommitInfo/CommitInfo.scss b/services/frontend-service/src/ui/components/CommitInfo/CommitInfo.scss
index a5e4187ca..8feed6c87 100644
--- a/services/frontend-service/src/ui/components/CommitInfo/CommitInfo.scss
+++ b/services/frontend-service/src/ui/components/CommitInfo/CommitInfo.scss
@@ -25,6 +25,11 @@ Copyright 2023 freiheit.com*/
         padding: 5px;
     }
 
+    .history-text-container {
+        width: auto;
+        padding: 5px;
+    }
+
     table,
     th,
     td {
diff --git a/services/frontend-service/src/ui/components/CommitInfo/CommitInfo.tsx b/services/frontend-service/src/ui/components/CommitInfo/CommitInfo.tsx
index ad1dc83b8..ccc80d091 100644
--- a/services/frontend-service/src/ui/components/CommitInfo/CommitInfo.tsx
+++ b/services/frontend-service/src/ui/components/CommitInfo/CommitInfo.tsx
@@ -37,8 +37,29 @@ export const CommitInfo: React.FC<CommitInfoProps> = (props) => {
     const nextPrevMessage =
         'Note that kuberpult links to the next commit in the repository that it is aware of.' +
         'This is not necessarily the next/previous commit that touches the desired microservice.';
-    const tooltipMsg = ' Limitation: Currently only commits that touch exactly one app are linked.';
+    const tooltipMsg =
+        ' Limitation: Currently only commits that touch exactly one app are linked. Additionally, kuberpult can only link commits if the previous commit hash is supplied to the /release endpoint.';
     const showInfo = !commitInfo.nextCommitHash || !commitInfo.previousCommitHash;
+    const previousButton =
+        commitInfo.previousCommitHash !== '' ? (
+            <div className="history-button-container">
+                <a href={'/ui/commits/' + commitInfo.previousCommitHash} title={nextPrevMessage}>
+                    Previous Commit
+                </a>
+            </div>
+        ) : (
+            <div className="history-text-container">Previous commit not found &nbsp;</div>
+        );
+    const nextButton =
+        commitInfo.nextCommitHash !== '' ? (
+            <div className="history-button-container">
+                <a href={'/ui/commits/' + commitInfo.nextCommitHash} title={nextPrevMessage}>
+                    Next Commit
+                </a>
+            </div>
+        ) : (
+            <div className="history-text-container">Next commit not found &nbsp;</div>
+        );
     return (
         <div>
             <TopAppBar showAppFilter={false} showTeamFilter={false} showWarningFilter={false} />
@@ -73,24 +94,9 @@ export const CommitInfo: React.FC<CommitInfoProps> = (props) => {
                     <div>
                         {commitInfo.touchedApps.length < 2 && (
                             <div className="next-prev-buttons">
-                                {commitInfo.previousCommitHash !== '' && (
-                                    <div className="history-button-container">
-                                        <a
-                                            href={'/ui/commits/' + commitInfo.previousCommitHash}
-                                            title={nextPrevMessage}>
-                                            Previous Commit
-                                        </a>
-                                    </div>
-                                )}
-
-                                {commitInfo.nextCommitHash !== '' && (
-                                    <div className="history-button-container">
-                                        <a href={'/ui/commits/' + commitInfo.nextCommitHash} title={nextPrevMessage}>
-                                            Next Commit
-                                        </a>
-                                    </div>
-                                )}
+                                {previousButton}
 
+                                {nextButton}
                                 {showInfo && <div title={tooltipMsg}> ⓘ </div>}
                             </div>
                         )}