feat: frontend implementation of previous and next buttons on commit info

pkg/api/v1/api.proto

@@ -52,6 +52,8 @@ message GetCommitInfoResponse {
   string commit_message = 1;
   repeated string touched_apps = 2;
   repeated Event events = 3;
+  string next_commit_hash = 5;
+  string previous_commit_hash = 6;
 }
 
 message Event {

services/cd-service/pkg/service/git.go

@@ -185,10 +185,12 @@ func (s *GitServer) GetCommitInfo(ctx context.Context, in *api.GetCommitInfoRequ
 	}
 
 	return &api.GetCommitInfoResponse{
-		CommitHash:    commitID,
-		CommitMessage: commitMessage,
-		TouchedApps:   touchedApps,
-		Events:        events,
+		CommitHash:         commitID,
+		CommitMessage:      commitMessage,
+		TouchedApps:        touchedApps,
+		Events:             events,
+		NextCommitHash:     "",
+		PreviousCommitHash: "",
 	}, nil
 }
 

services/frontend-service/src/assets/_components.scss

@@ -44,5 +44,6 @@ Copyright 2023 freiheit.com*/
 @import 'src/ui/components/ReleaseVersion/ReleaseVersion';
 @import 'src/ui/components/RolloutStatusDescription/RolloutStatusDescription';
 @import 'src/ui/components/EnvironmentConfigDialog/EnvironmentConfigDialog';
+@import 'src/ui/components/CommitInfo/CommitInfo';
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 @import url('https://fonts.googleapis.com/icon?family=Inter');

services/frontend-service/src/ui/Pages/CommitInfo/CommitInfoPage.test.tsx

@@ -112,10 +112,11 @@ describe('Commit info page tests', () => {
                     commitHash: 'potato',
                     touchedApps: ['google', 'windows'],
                     commitMessage: `Add google to windows
-
 Commit message body line 1
 Commit message body line 2`,
                     events: [],
+                    previousCommitHash: '',
+                    nextCommitHash: '',
                 },
             },
         },

services/frontend-service/src/ui/components/CommitInfo/CommitInfo.scss

@@ -0,0 +1,25 @@
+/*This file is part of kuberpult.
+
+Kuberpult is free software: you can redistribute it and/or modify
+it under the terms of the Expat(MIT) License as published by
+the Free Software Foundation.
+
+Kuberpult is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+MIT License for more details.
+
+You should have received a copy of the MIT License
+along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
+
+Copyright 2023 freiheit.com*/
+
+.next-prev-buttons {
+    display: flex;
+    flex-direction: row;
+}
+
+.history-button-container {
+    width: auto;
+    padding: 5px;
+}

services/frontend-service/src/ui/components/CommitInfo/CommitInfo.test.tsx

@@ -50,6 +50,8 @@ test('CommitInfo component renders commit info when the response is valid', () =
         Commit message body line 1
         Commit message body line 2`,
                 touchedApps: ['google', 'windows'],
+                nextCommitHash: '123456789',
+                previousCommitHash: '',
                 events: [
                     {
                         uuid: '00000000-0000-0000-0000-000000000000',
@@ -213,3 +215,130 @@ test('CommitInfo component renders commit info when the response is valid', () =
         verifyTable(actualEventsTable, testCase.expectedEventsTable);
     }
 });
+
+test('CommitInfo component renders next and previous buttons correctly', () => {
+    type Table = {
+        head: string[];
+        // NOTE: newlines, if there are any, will effectively be removed, since they will be checked using .toHaveTextContent
+        body: string[][];
+    };
+
+    type TestCase = {
+        commitInfo: GetCommitInfoResponse;
+        expectedTitle: string;
+        expectedCommitDescriptionTable: Table;
+        expectedButtons: string[];
+    };
+
+    const testCases: TestCase[] = [
+        {
+            commitInfo: {
+                commitHash: 'potato',
+                commitMessage: `tomato
+
+        Commit message body line 1
+        Commit message body line 2`,
+                touchedApps: ['google'],
+                nextCommitHash: '123456789',
+                previousCommitHash: '987654321',
+                events: [],
+            },
+            expectedTitle: 'Commit tomato',
+            expectedCommitDescriptionTable: {
+                head: ['Commit Hash:', 'Commit Message:', 'Touched apps:'],
+                body: [['potato', `tomato Commit message body line 1 Commit message body line 2`, 'google']],
+            },
+            expectedButtons: ['Previous Commit', 'Next Commit'],
+        },
+        {
+            commitInfo: {
+                commitHash: 'potato',
+                commitMessage: `tomato
+
+        Commit message body line 1
+        Commit message body line 2`,
+                touchedApps: ['google'],
+                nextCommitHash: '123456789',
+                previousCommitHash: '',
+                events: [],
+            },
+            expectedTitle: 'Commit tomato',
+            expectedCommitDescriptionTable: {
+                head: ['Commit Hash:', 'Commit Message:', 'Touched apps:'],
+                body: [['potato', `tomato Commit message body line 1 Commit message body line 2`, 'google']],
+            },
+            expectedButtons: ['Next Commit'],
+        },
+        {
+            commitInfo: {
+                commitHash: 'potato',
+                commitMessage: `tomato
+
+        Commit message body line 1
+        Commit message body line 2`,
+                touchedApps: ['google'],
+                nextCommitHash: '',
+                previousCommitHash: '987654321',
+                events: [],
+            },
+            expectedTitle: 'Commit tomato',
+            expectedCommitDescriptionTable: {
+                head: ['Commit Hash:', 'Commit Message:', 'Touched apps:'],
+                body: [['potato', `tomato Commit message body line 1 Commit message body line 2`, 'google']],
+            },
+            expectedButtons: ['Previous Commit'],
+        },
+        {
+            commitInfo: {
+                commitHash: 'potato',
+                commitMessage: `tomato
+
+        Commit message body line 1
+        Commit message body line 2`,
+                touchedApps: ['google'],
+                nextCommitHash: '',
+                previousCommitHash: '',
+                events: [],
+            },
+            expectedTitle: 'Commit tomato',
+            expectedCommitDescriptionTable: {
+                head: ['Commit Hash:', 'Commit Message:', 'Touched apps:'],
+                body: [['potato', `tomato Commit message body line 1 Commit message body line 2`, 'google']],
+            },
+            expectedButtons: [],
+        },
+        {
+            commitInfo: {
+                commitHash: 'potato',
+                commitMessage: `tomato
+
+        Commit message body line 1
+        Commit message body line 2`,
+                touchedApps: ['google', 'microsoft'],
+                nextCommitHash: '123456789',
+                previousCommitHash: '987654321',
+                events: [],
+            },
+            expectedTitle: 'Commit tomato',
+            expectedCommitDescriptionTable: {
+                head: ['Commit Hash:', 'Commit Message:', 'Touched apps:'],
+                body: [['potato', `tomato Commit message body line 1 Commit message body line 2`, 'google']],
+            },
+            expectedButtons: [],
+        },
+    ];
+
+    for (const testCase of testCases) {
+        const { container } = render(
+            <MemoryRouter>
+                <CommitInfo commitInfo={testCase.commitInfo} />
+            </MemoryRouter>
+        );
+
+        const targetElements = container.getElementsByClassName('history-button-container');
+        expect(targetElements.length).toEqual(testCase.expectedButtons.length);
+        for (let i = 0; i < testCase.expectedButtons.length; i++) {
+            expect(targetElements[i]).toHaveTextContent(testCase.expectedButtons[i]);
+        }
+    }
+});

services/frontend-service/src/ui/components/CommitInfo/CommitInfo.tsx

@@ -15,7 +15,6 @@ along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>
 Copyright 2023 freiheit.com*/
 
 import { TopAppBar } from '../TopAppBar/TopAppBar';
-import React from 'react';
 import { GetCommitInfoResponse, Event, LockPreventedDeploymentEvent_LockType } from '../../../api/api';
 
 type CommitInfoProps = {
@@ -24,6 +23,7 @@ type CommitInfoProps = {
 
 export const CommitInfo: React.FC<CommitInfoProps> = (props) => {
     const commitInfo = props.commitInfo;
+
     if (commitInfo === undefined) {
         return (
             <div>
@@ -39,28 +39,47 @@ export const CommitInfo: React.FC<CommitInfoProps> = (props) => {
                 <h1>This page is still in beta</h1>
                 <br />
                 <h1> Commit {commitInfo.commitMessage.split('\n')[0]} </h1>
-                <table border={1}>
-                    <thead>
-                        <tr>
-                            <th>Commit Hash:</th>
-                            <th>Commit Message:</th>
-                            <th>Touched apps:</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>{commitInfo.commitHash}</td>
-                            <td>
-                                <div className={'commit-page-message'}>
-                                    {commitInfo.commitMessage.split('\n').map((msg, index) => (
-                                        <div key={index}>{msg} &nbsp;</div>
-                                    ))}
-                                </div>
-                            </td>
-                            <td>{commitInfo.touchedApps.join(', ')}</td>
-                        </tr>
-                    </tbody>
-                </table>
+                <div>
+                    <table border={1}>
+                        <thead>
+                            <tr>
+                                <th>Commit Hash:</th>
+                                <th>Commit Message:</th>
+                                <th>Touched apps:</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>{commitInfo.commitHash}</td>
+                                <td>
+                                    <div className={'commit-page-message'}>
+                                        {commitInfo.commitMessage.split('\n').map((msg, index) => (
+                                            <div key={index}>{msg} &nbsp;</div>
+                                        ))}
+                                    </div>
+                                </td>
+                                <td>{commitInfo.touchedApps.join(', ')}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div>
+                        {commitInfo.touchedApps.length < 2 && (
+                            <div className="next-prev-buttons">
+                                {commitInfo.previousCommitHash !== '' && (
+                                    <div className="history-button-container">
+                                        <a href={'/ui/commits/' + commitInfo.previousCommitHash}>Previous Commit</a>
+                                    </div>
+                                )}
+
+                                {commitInfo.nextCommitHash !== '' && (
+                                    <div className="history-button-container">
+                                        <a href={'/ui/commits/' + commitInfo.nextCommitHash}>Next Commit</a>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
                 <h2>Events</h2>
                 <CommitInfoEvents events={commitInfo.events} />
             </main>