feat: Make commit bubble a clickable button

freiheit-com · Aug 16, 2024 · 5ead999 · 5ead999
1 parent ab8a8e7
commit 5ead999
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>