Skip to content

Commit

Permalink
patch: signature display redesign (#427)
Browse files Browse the repository at this point in the history 
Signed-off-by: Raul-Cristian Kele <[email protected]>
Signed-off-by: Andreea-Lupu <[email protected]>
Co-authored-by: Raul-Cristian Kele <[email protected]>
  • Loading branch information
@Andreea-Lupu @raulkele
Andreea-Lupu and raulkele authored Mar 24, 2024
1 parent 09ab447 commit c4d595c
Show file tree
Hide file tree
Showing 18 changed files with 443 additions and 113 deletions.
101 changes: 91 additions & 10 deletions src/__tests__/Explore/Explore.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { render, screen, waitFor } from '@testing-library/react';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { api } from 'api';
import Explore from 'components/Explore/Explore';
Expand Down Expand Up @@ -38,7 +38,7 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: 'w',
IsSigned: false,
SignatureInfo: [],
Licenses: '',
Vendor: '',
Labels: '',
Expand All @@ -63,7 +63,18 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: '',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: false,
Author: ''
},
{
Tool: 'notation',
IsTrusted: false,
Author: ''
}
],
Licenses: '',
Vendor: '',
Labels: '',
Expand All @@ -88,7 +99,18 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: '',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: ''
},
{
Tool: 'notation',
IsTrusted: true,
Author: ''
}
],
Licenses: '',
Vendor: '',
Labels: '',
Expand All @@ -113,7 +135,18 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: '',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: ''
},
{
Tool: 'notation',
IsTrusted: true,
Author: ''
}
],
Licenses: '',
Vendor: '',
Labels: '',
Expand All @@ -138,7 +171,18 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: '',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: ''
},
{
Tool: 'notation',
IsTrusted: true,
Author: ''
}
],
Licenses: '',
Vendor: '',
Labels: '',
Expand Down Expand Up @@ -167,7 +211,18 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: '',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: ''
},
{
Tool: 'notation',
IsTrusted: true,
Author: ''
}
],
Licenses: '',
Vendor: '',
Labels: '',
Expand All @@ -192,7 +247,18 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: '',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: 'author1'
},
{
Tool: 'notation',
IsTrusted: true,
Author: 'author2'
}
],
Licenses: '',
Vendor: '',
Labels: '',
Expand Down Expand Up @@ -225,7 +291,7 @@ const filteredMockImageListWindows = () => {
};

const filteredMockImageListSigned = () => {
const filteredRepos = mockImageList.GlobalSearch.Repos.filter((r) => r.NewestImage.IsSigned);
const filteredRepos = mockImageList.GlobalSearch.Repos.filter((r) => r.NewestImage.SignatureInfo?.length > 0);
return {
GlobalSearch: {
Page: { TotalCount: 6, ItemCount: 6 },
Expand Down Expand Up @@ -273,7 +339,22 @@ describe('Explore component', () => {
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageList } });
render(<StateExploreWrapper />);
expect(await screen.findAllByTestId('unverified-icon')).toHaveLength(1);
expect(await screen.findAllByTestId('verified-icon')).toHaveLength(6);
expect(await screen.findAllByTestId('untrusted-icon')).toHaveLength(2);
expect(await screen.findAllByTestId('verified-icon')).toHaveLength(10);

const allUntrustedSignaturesIcons = await screen.findAllByTestId("untrusted-icon");
fireEvent.mouseOver(allUntrustedSignaturesIcons[0]);
expect(await screen.findByText("Signed-by: Unknown")).toBeInTheDocument();
const allTrustedSignaturesIcons = await screen.findAllByTestId("verified-icon");
fireEvent.mouseOver(allTrustedSignaturesIcons[8]);
expect(await screen.findByText("Tool: cosign")).toBeInTheDocument();
expect(await screen.findByText("Signed-by: author1")).toBeInTheDocument();
fireEvent.mouseOver(allTrustedSignaturesIcons[9]);
expect(await screen.findByText("Tool: notation")).toBeInTheDocument();
expect(await screen.findByText("Signed-by: author2")).toBeInTheDocument();
const allNoSignedIcons = await screen.findAllByTestId("unverified-icon");
fireEvent.mouseOver(allNoSignedIcons[0]);
expect(await screen.findByText("Not signed")).toBeInTheDocument();
});

it('renders vulnerability icons', async () => {
Expand Down
45 changes: 39 additions & 6 deletions src/__tests__/HomePage/Home.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: 'w',
IsSigned: false,
SignatureInfo: [],
Licenses: '',
Vendor: '',
Labels: '',
Expand All @@ -49,7 +49,18 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: '',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: ''
},
{
Tool: 'notation',
IsTrusted: true,
Author: ''
}
],
Licenses: '',
Vendor: '',
Labels: '',
Expand All @@ -66,7 +77,18 @@ const mockImageList = {
NewestImage: {
Tag: 'latest',
Description: '',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: ''
},
{
Tool: 'notation',
IsTrusted: true,
Author: ''
}
],
Licenses: '',
Vendor: '',
Labels: '',
Expand All @@ -91,7 +113,7 @@ const mockImageListRecent = {
NewestImage: {
Tag: 'latest',
Description: 'w',
IsSigned: false,
SignatureInfo: [],
Licenses: '',
Vendor: '',
Labels: '',
Expand All @@ -108,7 +130,18 @@ const mockImageListRecent = {
NewestImage: {
Tag: 'latest',
Description: '',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: ''
},
{
Tool: 'notation',
IsTrusted: true,
Author: ''
}
],
Licenses: '',
Vendor: '',
Labels: '',
Expand Down Expand Up @@ -230,7 +263,7 @@ describe('Home component', () => {
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageListRecent } });
render(<HomeWrapper />);
expect(await screen.findAllByTestId('unverified-icon')).toHaveLength(4);
expect(await screen.findAllByTestId('verified-icon')).toHaveLength(5);
expect(await screen.findAllByTestId('verified-icon')).toHaveLength(10);
});

it('renders vulnerability icons', async () => {
Expand Down
26 changes: 26 additions & 0 deletions src/__tests__/RepoPage/Repo.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,18 @@ const mockRepoDetailsData = {
NewestImage: {
RepoName: 'mongo',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: 'author1'
},
{
Tool: 'notation',
IsTrusted: true,
Author: 'author2'
}
],
Vulnerabilities: {
MaxSeverity: 'CRITICAL',
Count: 15
Expand Down Expand Up @@ -285,6 +297,20 @@ describe('Repo details component', () => {
expect(await screen.findAllByTestId('high-vulnerability-icon')).toHaveLength(1);
});

it('renders signature icons', async () => {
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockRepoDetailsData } });
render(<RepoDetailsThemeWrapper />);
expect(await screen.findAllByTestId('verified-icon')).toHaveLength(2);

const allTrustedSignaturesIcons = await screen.findAllByTestId("verified-icon");
fireEvent.mouseOver(allTrustedSignaturesIcons[0]);
expect(await screen.findByText("Tool: cosign")).toBeInTheDocument();
expect(await screen.findByText("Signed-by: author1")).toBeInTheDocument();
fireEvent.mouseOver(allTrustedSignaturesIcons[1]);
expect(await screen.findByText("Tool: notation")).toBeInTheDocument();
expect(await screen.findByText("Signed-by: author2")).toBeInTheDocument();
});

it("should log error if data can't be fetched", async () => {
jest.spyOn(api, 'get').mockRejectedValue({ status: 500, data: {} });
const error = jest.spyOn(console, 'error').mockImplementation(() => {});
Expand Down
29 changes: 28 additions & 1 deletion src/__tests__/TagPage/TagDetails.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,20 @@ const mockImage = {
MaxSeverity: 'CRITICAL',
Count: 10
},
Vendor: 'CentOS'
Vendor: 'CentOS',
IsSigned: true,
SignatureInfo: [
{
Tool: 'cosign',
IsTrusted: true,
Author: 'author1'
},
{
Tool: 'notation',
IsTrusted: true,
Author: 'author2'
}
]
}
};

Expand Down Expand Up @@ -963,6 +976,20 @@ describe('Tags details', () => {
expect(await screen.findByTestId('high-vulnerability-icon')).toBeInTheDocument();
});

it('renders signature icons', async () => {
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImage } });
render(<TagDetailsThemeWrapper />);
expect(await screen.findAllByTestId('verified-icon')).toHaveLength(2);

const allTrustedSignaturesIcons = await screen.findAllByTestId("verified-icon");
fireEvent.mouseOver(allTrustedSignaturesIcons[0]);
expect(await screen.findByText("Tool: cosign")).toBeInTheDocument();
expect(await screen.findByText("Signed-by: author1")).toBeInTheDocument();
fireEvent.mouseOver(allTrustedSignaturesIcons[1]);
expect(await screen.findByText("Tool: notation")).toBeInTheDocument();
expect(await screen.findByText("Signed-by: author2")).toBeInTheDocument();
});

it('should copy the docker pull string to clipboard', async () => {
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImage } });
render(<TagDetailsThemeWrapper />);
Expand Down
1 change: 0 additions & 1 deletion src/components/Explore/Explore.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,6 @@ function Explore({ searchInputValue }) {
description={item.description}
downloads={item.downloads}
stars={item.stars}
isSigned={item.isSigned}
signatureInfo={item.signatureInfo}
isBookmarked={item.isBookmarked}
isStarred={item.isStarred}
Expand Down
1 change: 0 additions & 1 deletion src/components/Home/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,6 @@ function Home() {
description={item.description}
downloads={item.downloads}
stars={item.stars}
isSigned={item.isSigned}
signatureInfo={item.signatureInfo}
isBookmarked={item.isBookmarked}
isStarred={item.isStarred}
Expand Down
Loading

0 comments on commit c4d595c

Please sign in to comment.