From 5ead9997010642d616d081bfb186d2d4a5acc38b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Correia?= <joao.correia@freiheit.com>
Date: Fri, 16 Aug 2024 11:43:58 +0100
Subject: [PATCH] feat: Make commit bubble a clickable button

---
 .../ui/components/ServiceLane/ServiceLane.scss    | 14 ++++++++++++++
 .../components/ServiceLane/ServiceLane.test.tsx   | 12 ++++++++++--
 .../src/ui/components/ServiceLane/ServiceLane.tsx | 15 ++++++++++++---
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.scss b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.scss
index d34dc29239..b8d022885a 100644
--- a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.scss
+++ b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.scss
@@ -59,6 +59,7 @@ Copyright freiheit.com*/
     align-self: center;
     justify-content: space-evenly;
     width: $service-lane-diff-element-width;
+    opacity: 100%;
 
     .service-lane__diff--number {
         @extend .text-bold;
@@ -85,3 +86,16 @@ Copyright freiheit.com*/
         border-radius: $border-radius-large;
     }
 }
+.service-lane__diff--container:hover {
+    cursor: pointer;
+    opacity: 60%;
+    .service-lane__diff--number {
+        background-color: var(--mdc-theme-surface, #fff);
+    }
+}
+
+.service-lane__diff--container:active {
+    .service-lane__diff--number {
+        transform: translateY(4px);
+    }
+}
diff --git a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.test.tsx b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.test.tsx
index 14f5ba61d7..4ba29a7990 100644
--- a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.test.tsx
+++ b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.test.tsx
@@ -13,8 +13,8 @@ You should have received a copy of the MIT License
 along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
 
 Copyright freiheit.com*/
-import { render } from '@testing-library/react';
-import { ServiceLane } from './ServiceLane';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ServiceLane, DiffElement } from './ServiceLane';
 import { UpdateOverview } from '../../utils/store';
 import { Spy } from 'spy4js';
 import {
@@ -661,3 +661,11 @@ describe('Service Lane AppLockSummary', () => {
         });
     });
 });
+
+test('Hidden commits button', () => {
+    const testClick = jest.fn();
+    render(<DiffElement diff={3} title="test" navCallback={testClick}/>);
+    const button = screen.getAllByTestId('hidden-commits-button')[0];
+    fireEvent.click(button);
+    expect(testClick).toBeCalled();
+});
diff --git a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.tsx b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.tsx
index 89357e7ec3..256e05ccef 100644
--- a/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.tsx
+++ b/services/frontend-service/src/ui/components/ServiceLane/ServiceLane.tsx
@@ -62,8 +62,16 @@ function getNumberOfReleasesBetween(releases: number[], higherVersion: number, l
     return releases.findIndex((ver) => ver === lowerVersion) - releases.findIndex((ver) => ver === higherVersion) - 1;
 }
 
-const DiffElement: React.FC<{ diff: number; title: string }> = ({ diff, title }) => (
-    <div className="service-lane__diff--container" title={title}>
+export const DiffElement: React.FC<{ diff: number; title: string; navCallback: () => void }> = ({
+    diff,
+    title,
+    navCallback,
+}) => (
+    <div
+        className="service-lane__diff--container"
+        title={title}
+        onClick={navCallback}
+        data-testid="hidden-commits-button">
         <div className="service-lane__diff--dot" />
         <div className="service-lane__diff--dot" />
         <div className="service-lane__diff--number">{diff}</div>
@@ -135,7 +143,8 @@ export const ServiceLane: React.FC<{ application: Application }> = (props) => {
                     {!!diff && (
                         <DiffElement
                             diff={diff}
-                            title={'There are ' + diff + ' more releases hidden. Click on History to view more'}
+                            title={'There are ' + diff + ' more releases hidden. Click me to view more'}
+                            navCallback={navCallback}
                         />
                     )}
                 </div>