([]);
26 |
27 | const prevCommitQuery = useQuery({
28 | queryKey: ["prevCommit"],
29 | queryFn: async () => {
30 | const response = await fetch(
31 | getScorecardUrl({ platform, org, repo, commitHash: prevCommitHash }),
32 | );
33 | if (response.status >= 500) {
34 | throw new Error("An error ocurred. Invalid response from server");
35 | }
36 | return response.json();
37 | },
38 | });
39 |
40 | const currentCommitQuery = useQuery({
41 | queryKey: ["currentCommit"],
42 | queryFn: async () => {
43 | const response = await fetch(
44 | getScorecardUrl({ platform, org, repo, commitHash: currentCommitHash }),
45 | );
46 | if (response.status >= 500) {
47 | throw new Error("An error ocurred. Invalid response from server");
48 | }
49 | return response.json();
50 | },
51 | });
52 |
53 | const currentData = currentCommitQuery?.data;
54 | const previousData = prevCommitQuery?.data;
55 |
56 | useEffect(() => {
57 | const areEqualDetails = () => {
58 | if (!previousData?.checks || !previousData?.score) {
59 | return;
60 | }
61 |
62 | const refinedChecks = getRefinedChecks(
63 | previousData?.checks,
64 | currentData?.checks,
65 | );
66 |
67 | const data = refinedChecks.common.map((name: string) => {
68 | const previousElement = previousData?.checks?.filter(
69 | (el: ScoreElement) => el.name === name,
70 | )[0];
71 | const currentElement = currentData?.checks?.filter(
72 | (el: ScoreElement) => el.name === name,
73 | )[0];
74 | return {
75 | areEqual: areEqualElements(currentElement, previousElement),
76 | name: previousElement.name,
77 | details: currentElement.details,
78 | reason: currentElement.reason,
79 | score: currentElement.score,
80 | short: currentElement.documentation.short,
81 | url: currentElement.documentation.url,
82 | prevDetails: previousElement.details,
83 | prevReason: previousElement.reason,
84 | prevScore: previousElement.score,
85 | };
86 | });
87 | setConsolidatedData(data);
88 | setDiscrepancies(refinedChecks.discrepancies);
89 | };
90 | areEqualDetails();
91 | }, [currentData, previousData]);
92 |
93 | if (prevCommitQuery.isLoading || currentCommitQuery.isLoading) {
94 | return ;
95 | }
96 |
97 | if (prevCommitQuery.error || currentCommitQuery.error) {
98 | return ;
99 | }
100 |
101 | return (
102 | <>
103 | OpenSSF Scorecard comparator for {`${org}/${repo}`}
104 |
105 |
{`Current Score: ${currentData.score}/10`}
106 | {scoreChecker(currentData.score, previousData.score)}
107 |
108 |
109 | Analysis of commits{" "}
110 |
115 | {`(${currentData.repo.commit.substring(0, 8)})`}
116 | {" "}
117 | and{" "}
118 |
123 | {`(${previousData.repo.commit.substring(0, 8)})`}
124 |
125 |
126 | Date: {formatDate(currentData.date)}
127 |
128 | Scorecard version {currentData.scorecard.version}{" "}
129 |
134 | {`(${currentData.scorecard.commit.substring(0, 8)})`}
135 |
136 |
137 | {discrepancies.length > 0 && (
138 |
139 | {`Scorecard API missing: ${discrepancies.join(", ")} checks. See `}
140 |
145 | details
146 |
147 |
148 | )}
149 |
150 | {Array.isArray(consolidatedData) &&
151 | consolidatedData.map((element: ConsolidatedScoreElement) => (
152 | <>
153 |
154 |
155 |
156 |
{element.name}
157 |
161 | {element.score >= 0 ? (
162 | <>
163 | {scoreChecker(element.score, element.prevScore)}
164 | {element.score}/10
165 |
166 | ) : (
167 |
168 | )}
169 |
170 |
171 |
172 |
173 |
174 | Description: {element.short.toLocaleLowerCase()}{" "}
175 |
176 | See documentation
177 |
178 |
179 | {!element.areEqual &&
Additional details / variations
}
180 | {!element.areEqual ? (
181 |
182 | Reasoning:{" "}
183 |
187 |
188 | ) : (
189 |
190 | Reasoning: {element?.reason.toLocaleLowerCase()}
191 |
192 | )}
193 | {Array.isArray(element.details) && (
194 |
198 | )}
199 |
201 |
202 | ))}
203 |
204 | );
205 | }
206 |
207 | export default ProjectComparator;
208 |
--------------------------------------------------------------------------------
/src/components/ProjectDetails.tsx:
--------------------------------------------------------------------------------
1 | import { useParams } from "react-router-dom";
2 | import { useQuery } from "@tanstack/react-query";
3 |
4 | import { getScorecardUrl } from "../utils/getScorecardUrl";
5 | import { formatDate } from "../utils/formatDate";
6 | import CommonError from "./CommonError";
7 | import Collapsible from "./Collapsable";
8 | import Loading from "./Loading";
9 | import NoAvailableDataMark from "./NoAvailableDataMark";
10 | import { ScoreElement } from "../types";
11 | import { GITHUB } from "../constants/platforms";
12 |
13 | import "../styles/ProjectDetails.css";
14 |
15 | function ProjectDetails() {
16 | const params = useParams();
17 | const { platform, org, repo, commitHash } = params;
18 |
19 | const { isLoading, error, data } = useQuery({
20 | queryKey: ["projectData"],
21 | queryFn: async () => {
22 | const response = await fetch(
23 | getScorecardUrl({ platform, org, repo, commitHash }),
24 | );
25 | if (response.status >= 500) {
26 | throw new Error("An error ocurred. Invalid response from server");
27 | }
28 | return response.json();
29 | },
30 | });
31 |
32 | if (isLoading) {
33 | return ;
34 | }
35 |
36 | if (error) {
37 | return ;
38 | }
39 |
40 | return (
41 | <>
42 | OpenSSF Scorecard for {`${org}/${repo}`}
43 | {`Score: ${data.score}/10`}
44 | Date: {formatDate(data.date)}
45 |
46 | Scorecard version {data.scorecard.version}{" "}
47 |
52 | {`(${data.scorecard.commit.substring(0, 8)})`}
53 |
54 |
55 |
56 | Current commit{" "}
57 |
62 | {`(${data.repo.commit.substring(0, 8)})`}
63 |
64 |
65 | {platform === GITHUB && (
66 | <>
67 |
68 | Additional info at{" "}
69 |
74 | deps.dev
75 |
76 |
77 |
78 | Improve your scoring with{" "}
79 |
84 | StepSecurity
85 |
86 |
87 |
88 | )}
89 |
90 |
91 | {data.checks.map((element: ScoreElement) => (
92 | <>
93 |
94 |
95 |
{element.name}
96 | {element.score !== -1 ? (
97 | {element.score}/10
98 | ) : (
99 |
100 | )}
101 |
102 |
103 | Description: {element.documentation.short.toLocaleLowerCase()}{" "}
104 |
109 | See documentation
110 |
111 |
112 |
Reasoning: {element?.reason.toLocaleLowerCase()}
113 | {Array.isArray(element.details) && (
114 |
115 | )}
116 |
118 |
119 | ))}
120 |
121 | );
122 | }
123 |
124 | export default ProjectDetails;
125 |
--------------------------------------------------------------------------------
/src/constants/checks.ts:
--------------------------------------------------------------------------------
1 | export const CHECKS_LIST_NAMES = [
2 | "Binary-Artifacts",
3 | "Branch-Protection",
4 | "CI-Tests",
5 | "CII-Best-Practices",
6 | "Code-Review",
7 | "Contributors",
8 | "Dangerous-Workflow",
9 | "Dependency-Update-Tool",
10 | "Fuzzing",
11 | "License",
12 | "Maintained",
13 | "Packaging",
14 | "Pinned-Dependencies",
15 | "SAST",
16 | "Security-Policy",
17 | "Signed-Releases",
18 | "Token-Permissions",
19 | "Vulnerabilities",
20 | ];
21 |
--------------------------------------------------------------------------------
/src/constants/commonErrorMessage.ts:
--------------------------------------------------------------------------------
1 | export const SERVER_ERROR_MESSAGE: string =
2 | "An error ocurred. Invalid response from server.";
3 | export const SPECIFIC_SERVER_ERROR_MESSAGE: string =
4 | "Please check if the commits are a valid reference or refresh.";
5 | export const COMMON_ERROR_MESSAGE: string =
6 | "An error ocurred. Please refresh/try again.";
7 | export const TYPO_ERROR_MESSAGE: string =
8 | "Please check if the org/repository/commit has been analysed by the Scorecard.";
9 |
--------------------------------------------------------------------------------
/src/constants/platforms.ts:
--------------------------------------------------------------------------------
1 | export const GITHUB = "github.com";
2 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 20px;
4 | font-family: "Montserrat", sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | #root {
10 | background-color: #fff;
11 | border-radius: 4px;
12 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
13 | padding: 20px;
14 | margin-bottom: 20px;
15 | }
16 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import { createHashRouter, RouterProvider } from "react-router-dom";
4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
5 | import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
6 |
7 | import NotFound from "./components/NotFound";
8 | import CommonError from "./components/CommonError";
9 | import ProjectDetails from "./components/ProjectDetails";
10 | import ProjectComparator from "./components/ProjectComparator";
11 |
12 | import reportWebVitals from "./reportWebVitals";
13 | import "./index.css";
14 |
15 | const router = createHashRouter([
16 | {
17 | path: "*",
18 | element: ,
19 | errorElement: ,
20 | },
21 | {
22 | path: "404",
23 | element: ,
24 | },
25 | {
26 | path: "projects/:platform/:org/:repo/compare/:prevCommitHash/:currentCommitHash",
27 | element: ,
28 | errorElement: ,
29 | },
30 | {
31 | path: "projects/:platform/:org/:repo/commit/:commitHash",
32 | element: ,
33 | errorElement: ,
34 | },
35 | {
36 | path: "projects/:platform/:org/:repo",
37 | element: ,
38 | errorElement: ,
39 | },
40 | ]);
41 |
42 | const queryClient = new QueryClient();
43 |
44 | const root = ReactDOM.createRoot(
45 | document.getElementById("root") as HTMLElement,
46 | );
47 | root.render(
48 |
49 |
50 |
51 |
52 |
53 | ,
54 | );
55 |
56 | // If you want to start measuring performance in your app, pass a function
57 | // to log results (for example: reportWebVitals(console.log))
58 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
59 | reportWebVitals();
60 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from "web-vitals";
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import "@testing-library/jest-dom";
6 |
--------------------------------------------------------------------------------
/src/styles/Badge.css:
--------------------------------------------------------------------------------
1 | .badge {
2 | width: auto;
3 | padding: 0.4rem;
4 | margin-right: 1rem;
5 | color: white;
6 | background-color: #6c757d;
7 | border-radius: 5px;
8 | font-size: 14px;
9 | display: inline-block;
10 | font-weight: 600;
11 | }
12 |
13 | .badge-increased {
14 | background-color: #188754;
15 | }
16 |
17 | .badge-decreased {
18 | background-color: #dc3545;
19 | }
20 |
--------------------------------------------------------------------------------
/src/styles/Collapsable.css:
--------------------------------------------------------------------------------
1 | details {
2 | border: 1.3px solid black;
3 | border-radius: 5px;
4 | padding: 0.5em 0.5em 0;
5 | background-color: #f4f7f9;
6 | }
7 |
8 | summary {
9 | font-weight: bold;
10 | margin: -0.5em -0.5em 0;
11 | padding: 0.8em;
12 | cursor: pointer;
13 | }
14 |
15 | details[open] {
16 | padding: 0.5em;
17 | }
18 |
19 | details[open] summary {
20 | border-bottom: 1px solid black;
21 | margin-bottom: 0.5em;
22 | }
23 |
--------------------------------------------------------------------------------
/src/styles/ComparatorDiff.css:
--------------------------------------------------------------------------------
1 | .text-addition {
2 | background-color: #acf2bd;
3 | }
4 |
5 | .text-removal {
6 | background-color: #fdb8c0;
7 | text-decoration: line-through;
8 | text-decoration-thickness: -2px;
9 | }
10 |
--------------------------------------------------------------------------------
/src/styles/Loading.css:
--------------------------------------------------------------------------------
1 | .loader {
2 | text-align: center;
3 | margin-top: 100px;
4 | }
5 | .loader span {
6 | display: inline-block;
7 | vertical-align: middle;
8 | width: 10px;
9 | height: 10px;
10 | margin: 50px auto;
11 | background: black;
12 | border-radius: 50px;
13 | animation: loader 0.9s infinite alternate;
14 | -moz-animation: loader 0.9s infinite alternate;
15 | }
16 | .loader span:nth-of-type(2) {
17 | animation-delay: 0.3s;
18 | -moz-animation-delay: 0.3s;
19 | }
20 | .loader span:nth-of-type(3) {
21 | animation-delay: 0.6s;
22 | -moz-animation-delay: 0.6s;
23 | }
24 |
25 | @keyframes loader {
26 | 0% {
27 | width: 10px;
28 | height: 10px;
29 | opacity: 0.9;
30 | -webkit-transform: translateY(0);
31 | }
32 | 100% {
33 | width: 24px;
34 | height: 24px;
35 | opacity: 0.1;
36 | -webkit-transform: translateY(-21px);
37 | }
38 | }
39 | @-moz-keyframes loader {
40 | 0% {
41 | width: 10px;
42 | height: 10px;
43 | opacity: 0.9;
44 | -moz-transform: translateY(0);
45 | }
46 | 100% {
47 | width: 24px;
48 | height: 24px;
49 | opacity: 0.1;
50 | -moz-transform: translateY(-21px);
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/styles/NoAvailableDataMark.css:
--------------------------------------------------------------------------------
1 | .not-available-data {
2 | display: inline-block;
3 | color: red;
4 | font-size: 24px;
5 | font-weight: 900;
6 | }
7 |
8 | .tooltip {
9 | position: relative;
10 | cursor: pointer;
11 | font-size: 14px;
12 | }
13 |
14 | .tooltip::before {
15 | content: attr(data-tooltip);
16 | position: absolute;
17 | bottom: 100%;
18 | left: 50%;
19 | transform: translate(-50%);
20 | margin-bottom: 15px;
21 | color: #fff;
22 | background: rgba(0, 0, 0, 0.5);
23 | border-radius: 5px;
24 | padding: 5px;
25 | }
26 |
27 | .tooltip::after {
28 | position: absolute;
29 | content: "";
30 | width: 0;
31 | height: 0;
32 | border-left: 5px solid transparent;
33 | border-right: 5px solid transparent;
34 | border-top: 7px solid rgba(0, 0, 0, 0.5);
35 | }
36 |
37 | .tooltip::before,
38 | .tooltip::after {
39 | opacity: 0;
40 | visibility: hidden;
41 | transition: opacity 0.3s ease-in-out;
42 | }
43 |
44 | .tooltip:hover::before,
45 | .tooltip:hover::after {
46 | opacity: 1;
47 | visibility: visible;
48 | }
49 |
50 | .tooltip--top::before,
51 | .tooltip--top::after {
52 | bottom: 100%;
53 | left: 50%;
54 | transform: translate(-50%);
55 | margin-bottom: 15px;
56 | }
57 |
58 | .tooltip--top::after {
59 | margin-bottom: 8px;
60 | border-left: 5px solid transparent;
61 | border-right: 5px solid transparent;
62 | border-top: 7px solid rgba(0, 0, 0, 0.5);
63 | }
64 |
--------------------------------------------------------------------------------
/src/styles/ProjectDetails.css:
--------------------------------------------------------------------------------
1 | *,
2 | *:before,
3 | *:after {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | padding: 40px;
9 | }
10 |
11 | /* Style the headings and other elements */
12 | h1 {
13 | font-size: 28px;
14 | margin: 0.5em 0 0.8em 0;
15 | font-weight: 600;
16 | }
17 |
18 | h2 {
19 | font-size: 24px;
20 | margin-right: 1rem;
21 | }
22 |
23 | h3 {
24 | font-size: 22px;
25 | margin-right: 1rem;
26 | }
27 |
28 | h4 {
29 | color: orange;
30 | margin: 2rem 0 1rem 0;
31 | }
32 |
33 | p {
34 | margin: 0 0 1em;
35 | }
36 |
37 | hr {
38 | border: none;
39 | border-top: 1px solid #eee;
40 | margin: 1.5rem 0 0 0;
41 | }
42 |
43 | div > div > span {
44 | font-size: 24px;
45 | font-weight: bold;
46 | }
47 |
48 | div > div > div {
49 | margin-top: 10px;
50 | }
51 |
52 | ul {
53 | list-style-type: disc;
54 | }
55 |
56 | a {
57 | color: #007bff;
58 | }
59 |
60 | a:hover {
61 | text-decoration: underline;
62 | }
63 |
64 | /* Style the wrapper elements */
65 | .card__wrapper {
66 | padding: 0.7rem;
67 | }
68 |
69 | .card__wrapper li {
70 | margin-bottom: 0.7rem;
71 | }
72 |
73 | .heading__wrapper {
74 | display: flex;
75 | align-items: center;
76 | justify-content: space-between;
77 | }
78 |
79 | .details__wrapper {
80 | background-color: #f4f7f9;
81 | padding-top: 0.5rem;
82 | padding-bottom: 0.5rem;
83 | font-size: 14px;
84 | font-weight: 500;
85 | font-family: monospace;
86 | letter-spacing: 0.3px;
87 | line-height: 1.2rem;
88 | overflow-x: scroll;
89 | }
90 |
91 | .score-wrapper {
92 | display: flex;
93 | flex-direction: row;
94 | align-items: center;
95 | }
96 |
97 | .info-badge__wrapper {
98 | width: 100%;
99 | display: flex;
100 | flex-direction: row;
101 | align-items: center;
102 | justify-content: space-between;
103 | }
104 |
105 | .info-score__wrapper {
106 | display: flex;
107 | align-items: center;
108 | }
109 |
110 | .warning-message {
111 | width: auto;
112 | padding: 10px;
113 | color: black;
114 | background-color: orange;
115 | border-radius: 5px;
116 | font-size: 1rem;
117 | display: inline-block;
118 | font-weight: 600;
119 | line-height: 1.5rem;
120 | }
121 |
--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export interface ScoreElement {
2 | name: string;
3 | score: number;
4 | reason: string;
5 | details: string[];
6 | documentation: {
7 | short: string;
8 | url: string;
9 | };
10 | }
11 |
12 | export interface ConsolidatedScoreElement {
13 | areEqual: boolean;
14 | name: string;
15 | details: string[];
16 | reason: string;
17 | score: number;
18 | short: string;
19 | url: string;
20 | prevDetails: string[];
21 | prevReason: string;
22 | prevScore: number;
23 | }
24 |
--------------------------------------------------------------------------------
/src/utils/comparator/areEqualElements.test.js:
--------------------------------------------------------------------------------
1 | import { areEqualElements } from "./areEqualElements.tsx";
2 |
3 | const baseScoreElement = {
4 | name: "foo",
5 | score: 0,
6 | reason: "sample reason",
7 | details: ["sample detail"],
8 | documentation: {
9 | short: "documentation short",
10 | url: "documentation url",
11 | },
12 | };
13 |
14 | describe("util: areEqualElements", () => {
15 | it("returns true if two elements are equal", () => {
16 | expect(
17 | areEqualElements(
18 | { ...baseScoreElement, details: ["foo"], reason: "foo" },
19 | { ...baseScoreElement, details: ["foo"], reason: "foo" },
20 | ),
21 | ).toBe(true);
22 | });
23 |
24 | it("returns false if two elements are not equal", () => {
25 | expect(
26 | areEqualElements(
27 | { ...baseScoreElement, details: ["foo"], reason: "foo" },
28 | { ...baseScoreElement, details: ["bar"], reason: "bar" },
29 | ),
30 | ).toBe(false);
31 | expect(
32 | areEqualElements(
33 | { ...baseScoreElement, details: ["foo"], reason: "foo" },
34 | { ...baseScoreElement, details: ["bar"], reason: "foo" },
35 | ),
36 | ).toBe(false);
37 | expect(
38 | areEqualElements(
39 | { ...baseScoreElement, details: ["foo"], reason: "foo" },
40 | { ...baseScoreElement, details: ["foo"], reason: "bar" },
41 | ),
42 | ).toBe(false);
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/src/utils/comparator/areEqualElements.tsx:
--------------------------------------------------------------------------------
1 | import { ScoreElement } from "../../types";
2 |
3 | export const areEqualElements = (
4 | currentElement: ScoreElement,
5 | previousElement: ScoreElement,
6 | ) =>
7 | JSON.stringify(currentElement.details) ===
8 | JSON.stringify(previousElement.details) &&
9 | JSON.stringify(currentElement.reason) ===
10 | JSON.stringify(previousElement.reason);
11 |
--------------------------------------------------------------------------------
/src/utils/comparator/getRefinedChecks.test.js:
--------------------------------------------------------------------------------
1 | import { getRefinedChecks } from "./getRefinedChecks.tsx";
2 | import { CHECKS_LIST_NAMES } from "../../constants/checks.ts";
3 | import sample1 from "../../../cypress/fixtures/2ac5e9889aba461f5a54d320973d2574980d206b.json";
4 | import sample2 from "../../../cypress/fixtures/077fd7d83d7d41695137c1af5b9be1d72250e69e.json";
5 |
6 | describe("util: getRefinedChecks", () => {
7 | it("Should handle empty checks", () => {
8 | expect(getRefinedChecks([], [])).toEqual({
9 | common: [],
10 | discrepancies: [],
11 | });
12 | });
13 |
14 | it("Should handle an empty check", () => {
15 | expect(getRefinedChecks(sample1.checks, [])).toEqual({
16 | common: [],
17 | discrepancies: CHECKS_LIST_NAMES,
18 | });
19 |
20 | expect(getRefinedChecks([], sample1.checks)).toEqual({
21 | common: [],
22 | discrepancies: CHECKS_LIST_NAMES,
23 | });
24 | });
25 |
26 | it("Should generate a refined valid result", () => {
27 | expect(getRefinedChecks(sample1.checks, sample2.checks)).toEqual({
28 | common: CHECKS_LIST_NAMES,
29 | discrepancies: [],
30 | });
31 | });
32 |
33 | it("Should handle discrepancies and provide a valid result", () => {
34 | const filteredList = sample1.checks.filter(
35 | (item) => item.name !== "Binary-Artifacts",
36 | );
37 | expect(getRefinedChecks(filteredList, sample2.checks)).toEqual({
38 | common: filteredList.map((item) => item.name),
39 | discrepancies: ["Binary-Artifacts"],
40 | });
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/src/utils/comparator/getRefinedChecks.tsx:
--------------------------------------------------------------------------------
1 | import { ScoreElement } from "../../types";
2 | import { CHECKS_LIST_NAMES } from "../../constants/checks";
3 |
4 | export const getRefinedChecks = (
5 | from: ScoreElement[] = [],
6 | to: ScoreElement[] = [],
7 | ) => {
8 | const haveMaxChecksNumber =
9 | from.length === CHECKS_LIST_NAMES.length &&
10 | to.length === CHECKS_LIST_NAMES.length;
11 |
12 | if (haveMaxChecksNumber) {
13 | return {
14 | common: CHECKS_LIST_NAMES,
15 | discrepancies: [],
16 | };
17 | }
18 |
19 | const fromNames = from.map((el: ScoreElement) => el.name);
20 | const toNames = to.map((el: ScoreElement) => el.name);
21 | const allNames = new Set([...fromNames, ...toNames]);
22 | const common = [];
23 | const discrepancies = [];
24 |
25 | for (const name of allNames) {
26 | if (fromNames.includes(name) && toNames.includes(name)) {
27 | common.push(name);
28 | } else {
29 | discrepancies.push(name);
30 | }
31 | }
32 |
33 | return {
34 | common: common.sort(),
35 | discrepancies: discrepancies.sort(),
36 | };
37 | };
38 |
--------------------------------------------------------------------------------
/src/utils/comparator/scoreChecker.tsx:
--------------------------------------------------------------------------------
1 | import Badge from "../../components/Badge";
2 |
3 | export const scoreChecker = (currentValue: number, previousValue: number) => {
4 | if (currentValue < 0) {
5 | currentValue = 0;
6 | }
7 |
8 | if (previousValue < 0) {
9 | previousValue = 0;
10 | }
11 |
12 | const result = currentValue - previousValue;
13 |
14 | if (result > 0) {
15 | return (
16 |
17 | );
18 | }
19 |
20 | if (result < 0) {
21 | return (
22 |
23 | );
24 | }
25 |
26 | return ;
27 | };
28 |
--------------------------------------------------------------------------------
/src/utils/formatDate.test.ts:
--------------------------------------------------------------------------------
1 | import { formatDate } from "./formatDate";
2 |
3 | describe("Format date", () => {
4 | it("should return the date formatted as expected", () => {
5 | const dateToFormat = "2023-07-02T10:27:18.412Z";
6 | expect(formatDate(dateToFormat)).toBe("July 2, 2023");
7 | });
8 | });
9 |
--------------------------------------------------------------------------------
/src/utils/formatDate.ts:
--------------------------------------------------------------------------------
1 | interface Options {
2 | year?: "numeric" | "2-digit";
3 | month?: "numeric" | "2-digit" | "long" | "short" | "narrow";
4 | day?: "numeric" | "2-digit";
5 | }
6 |
7 | export const formatDate = (date: string) => {
8 | const options: Options = { year: "numeric", month: "long", day: "numeric" };
9 | return new Date(date).toLocaleDateString("en-US", options);
10 | };
11 |
--------------------------------------------------------------------------------
/src/utils/getScorecardUrl.test.ts:
--------------------------------------------------------------------------------
1 | import { getScorecardUrl } from "./getScorecardUrl";
2 |
3 | describe("Get Scorecard Url", () => {
4 | const params = {
5 | platform: "github.com",
6 | org: "nodejs",
7 | repo: "node",
8 | commitHash: undefined,
9 | };
10 | it("Should return the scorecard url", () => {
11 | expect(getScorecardUrl(params)).toBe(
12 | "https://api.securityscorecards.dev/projects/github.com/nodejs/node",
13 | );
14 | });
15 | it("Should return the scorecard url with commit hash", () => {
16 | expect(
17 | getScorecardUrl({
18 | ...params,
19 | commitHash: "1cea384480a6dea80128e5e0ddb714df7bea1520",
20 | }),
21 | ).toBe(
22 | "https://api.securityscorecards.dev/projects/github.com/nodejs/node/?commit=1cea384480a6dea80128e5e0ddb714df7bea1520",
23 | );
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/utils/getScorecardUrl.ts:
--------------------------------------------------------------------------------
1 | interface paramsTypes {
2 | platform: string | undefined;
3 | org: string | undefined;
4 | repo: string | undefined;
5 | commitHash: string | undefined;
6 | }
7 |
8 | export const getScorecardUrl = (params: paramsTypes): string => {
9 | let baseUrl = `https://api.securityscorecards.dev/projects/${params.platform}/${params.org}/${params.repo}`;
10 | if (params.commitHash) {
11 | baseUrl += `/?commit=${params.commitHash}`;
12 | }
13 | return baseUrl;
14 | };
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"]
20 | }
21 |
--------------------------------------------------------------------------------
16 | 
26 | 
36 | 
39 | 
49 | 
59 |