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.
freiheit-com · Apr 9, 2024 · 54d4f7e · 54d4f7e
1 parent f5c822f
commit 54d4f7e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git 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
@@ -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>
                         )}