Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 11 commits into from
Mar 20, 2024
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2dd2e66
Adds information regarding next and prev commits to API. Adds UI to s…
miguel-crespo-fdc Mar 14, 2024
108a40e
Fixed broken test
miguel-crespo-fdc Mar 14, 2024
2d57f50
Fixed broken Frontend test
miguel-crespo-fdc Mar 14, 2024
6e5186e
Fixed linter and warnings
miguel-crespo-fdc Mar 14, 2024
c017004
Fixing pipeline
miguel-crespo-fdc Mar 14, 2024
94d1ed6
Addressed PR concerns
miguel-crespo-fdc Mar 15, 2024
62d0bca
Linting
miguel-crespo-fdc Mar 15, 2024
3062c20
Addressed PR issues
miguel-crespo-fdc Mar 15, 2024
6b96f8f
Fixed CSS import
miguel-crespo-fdc Mar 15, 2024
85770be
Next and previous buttons test now unfold into individual tests
miguel-crespo-fdc Mar 18, 2024
5452c72
Merge remote-tracking branch 'origin/main' into mc-next-prev-buttons-…
miguel-crespo-fdc Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions pkg/api/v1/api.proto
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
10 changes: 6 additions & 4 deletions services/cd-service/pkg/service/git.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down
3 changes: 2 additions & 1 deletion services/frontend-service/src/ui/Pages/CommitInfo/CommitInfoPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
},
},
},
Expand Down
24 changes: 24 additions & 0 deletions services/frontend-service/src/ui/components/CommitInfo/CommitInfo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/*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;
}
113 changes: 113 additions & 0 deletions services/frontend-service/src/ui/components/CommitInfo/CommitInfo.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -157,6 +159,94 @@ test('CommitInfo component renders commit info when the response is valid', () =
],
},
},
{
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']],
},
expectedEventsTable: {
head: ['Date:', 'Event Description:', 'Environments:'],
body: [],
},
},
{
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']],
},
expectedEventsTable: {
head: ['Date:', 'Event Description:', 'Environments:'],
body: [],
},
},
{
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']],
},
expectedEventsTable: {
head: ['Date:', 'Event Description:', 'Environments:'],
body: [],
},
},
{
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']],
},
expectedEventsTable: {
head: ['Date:', 'Event Description:', 'Environments:'],
body: [],
},
},
];

const verifyTable = (actualTable: HTMLTableElement, expectedTable: Table) => {
Expand Down Expand Up @@ -209,6 +299,29 @@ test('CommitInfo component renders commit info when the response is valid', () =
const actualCommitDescriptionTable = tables[0];
const actualEventsTable = tables[1];

const targetElements = container.getElementsByClassName('history-button-container');
if (testCase.commitInfo.touchedApps.length < 2) {
if (testCase.commitInfo.previousCommitHash !== '' && testCase.commitInfo.nextCommitHash !== '') {
expect(targetElements.length).toEqual(2);
expect(targetElements[0]).toHaveTextContent('Previous Commit');
expect(targetElements[1]).toHaveTextContent('Next Commit');
} else {
if (testCase.commitInfo.previousCommitHash !== '' || testCase.commitInfo.nextCommitHash !== '') {
const target = targetElements[0];
if (testCase.commitInfo.previousCommitHash !== '') {
expect(target).toHaveTextContent('Previous Commit');
}
if (testCase.commitInfo.nextCommitHash !== '') {
expect(target).toHaveTextContent('Next Commit');
}
} else {
expect(targetElements.length).toEqual(0);
}
}
} else {
expect(targetElements.length).toEqual(0);
}
miguel-crespo-fdc marked this conversation as resolved.
Show resolved Hide resolved

verifyTable(actualCommitDescriptionTable, testCase.expectedCommitDescriptionTable);
verifyTable(actualEventsTable, testCase.expectedEventsTable);
}
Expand Down
88 changes: 65 additions & 23 deletions services/frontend-service/src/ui/components/CommitInfo/CommitInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,30 @@ 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 React, { useCallback } from 'react';
import { GetCommitInfoResponse, Event, LockPreventedDeploymentEvent_LockType } from '../../../api/api';
import { Button } from '../button';
import './CommitInfo.scss';
miguel-crespo-fdc marked this conversation as resolved.
Show resolved Hide resolved

type CommitInfoProps = {
commitInfo: GetCommitInfoResponse | undefined;
};

export const CommitInfo: React.FC<CommitInfoProps> = (props) => {
const commitInfo = props.commitInfo;

const onClickPrevious = useCallback((): void => {
if (commitInfo !== undefined) {
window.location.href = commitInfo?.previousCommitHash;
}
}, [commitInfo]);

const onClickNext = useCallback((): void => {
if (commitInfo !== undefined) {
window.location.href = commitInfo?.nextCommitHash;
}
}, [commitInfo]);
miguel-crespo-fdc marked this conversation as resolved.
Show resolved Hide resolved

if (commitInfo === undefined) {
return (
<div>
Expand All @@ -39,28 +54,55 @@ 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">
<Button
id={'previous-button'}
onClick={onClickPrevious}
label={' Previous Commit '}
className={'history-button'}></Button>
</div>
)}

{commitInfo.nextCommitHash !== '' && (
<div className="history-button-container">
<Button
id={'next-button'}
onClick={onClickNext}
label={' Next Commit '}
className={'history-button'}></Button>
</div>
)}
</div>
)}
</div>
</div>
<h2>Events</h2>
<CommitInfoEvents events={commitInfo.events} />
</main>
Expand Down
Loading