Skip to content
Snippets Groups Projects
Verified Commit a5135622 authored by Tim Bastin's avatar Tim Bastin :lemon:
Browse files

adds badge description, some styling

parent f6cbcce4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
.env.example
+ 1
− 1
View file @ a5135622
REACT_APP_API_BASE_URL=http://localhost:8080/api/v1 NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api/v1
\ No newline at end of file \ No newline at end of file
src/components/CheckRepoForm.tsx
+ 0
− 8
View file @ a5135622
...@@ -32,14 +32,6 @@ const CheckRepoForm: FunctionComponent<Props> = ({ ...@@ -32,14 +32,6 @@ const CheckRepoForm: FunctionComponent<Props> = ({
return return
} }
setIsPending(true) setIsPending(true)
// check if valid url
await new Promise<void>((resolve) =>
setTimeout(() => {
console.log('resolved')
resolve()
}, 100000),
)
try { try {
const url = new URL(repositoryUrl) const url = new URL(repositoryUrl)
......
src/components/ResultGrid.tsx
+ 25
− 14
View file @ a5135622
import Image from 'next/image'
import { SarifApiResponse } from '../lib/apiClient' import { SarifApiResponse } from '../lib/apiClient'
import { cn } from '../lib/utils' import { cn } from '../lib/utils'
import ResultTable from './ResultTable' import ResultTable from './ResultTable'
...@@ -39,25 +40,35 @@ export default function ResultGrid({ currentScan }: Props) { ...@@ -39,25 +40,35 @@ export default function ResultGrid({ currentScan }: Props) {
) )
.map((badge) => ( .map((badge) => (
<div <div
className="relative bg-gray-400/10 p-6" className="overflow-hidden bg-gray-400/10 p-10"
key={`${badge.badgeId}-${badge.badgeLevel}`} key={`${badge.badgeId}-${badge.badgeLevel}`}
> >
<img <div className="relative aspect-square">
{!badge.badgeGranted && (
<div className="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 rotate-45 bg-red-600 px-10 py-2 font-bold text-white">
Not granted
</div>
)}
<Image
className={cn(
'h-40 w-full object-contain',
!badge.badgeGranted &&
'opacity-50',
)}
src={badge.badgeUrl}
fill
alt={badge.badgeId}
/>
</div>
<p
className={cn( className={cn(
'h-40 w-full object-contain', 'text-sm',
!badge.badgeGranted && !badge.badgeGranted &&
'opacity-30 grayscale', 'opacity-50',
)} )}
src={badge.badgeUrl} >
alt={badge.badgeId} {badge.badgeDescription}
/> </p>
{!badge.badgeGranted && (
<div className="absolute inset-0 top-40 flex flex-col items-center justify-center">
<p className="text-lg font-semibold">
Not granted
</p>
</div>
)}
</div> </div>
))} ))}
</div> </div>
......
src/components/ResultTable.tsx
+ 38
− 34
View file @ a5135622
import { ChevronDownIcon } from '@heroicons/react/24/outline'
import { SarifApiResponse } from '../lib/apiClient' import { SarifApiResponse } from '../lib/apiClient'
import { cn } from '../lib/utils' import { cn } from '../lib/utils'
import { Badge } from './ui/badge'
const people = [ const people = [
{ {
...@@ -22,79 +24,81 @@ export default function ResultTable({ currentScan }: Props) { ...@@ -22,79 +24,81 @@ export default function ResultTable({ currentScan }: Props) {
.map((badge) => ( .map((badge) => (
<div <div
key={`${badge.badgeId}-${badge.badgeLevel}`} key={`${badge.badgeId}-${badge.badgeLevel}`}
className="mt-8 rounded-lg bg-gray-100 p-10" className="mt-8 rounded-lg bg-gray-100 px-4 py-2"
> >
<details className=""> <details className="">
<summary className="relative text-lg font-medium text-gray-900"> <summary className="relative flex cursor-pointer flex-row justify-between text-lg font-medium text-gray-900">
Details on: {badge.badgeId} {badge.badgeLevel} <span>
<span className="ml-2 inline-block"> Details on: {badge.badgeId}{' '}
<span className="relative flex size-3"> {badge.badgeLevel}
<span <Badge
className={cn( variant={
'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75', badge.badgeGranted
badge.badgeGranted ? 'default'
? 'bg-green-400' : 'destructive'
: 'bg-red-400', }
)} className="ml-2"
></span> >
<span {badge.badgeGranted
className={cn( ? 'Granted'
'relative inline-flex size-3 rounded-full', : 'Not granted'}
badge.badgeGranted </Badge>
? 'bg-green-400'
: 'bg-red-400',
)}
></span>
</span>
</span> </span>
<ChevronDownIcon className="w-5" />
</summary> </summary>
<div className="mt-8"> <div className="mt-8">
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="overflow-x-aut">
<div className="inline-block min-w-full py-2 align-middle"> <div className="inline-block min-w-full py-2 align-middle">
<table className="min-w-full divide-y divide-gray-300"> <table className="min-w-full divide-y divide-gray-400">
<thead> <thead>
<tr className="grid grid-cols-6"> <tr className="grid grid-cols-6">
<th <th
scope="col" scope="col"
className="col-span-1 py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8" className="col-span-1 py-3.5 pl-4 pr-3 text-left font-semibold sm:pl-6 lg:pl-8"
> >
Check Check
</th> </th>
<th <th
scope="col" scope="col"
className="col-span-1 px-3 py-3.5 text-left text-sm font-semibold text-gray-900" className="col-span-1 px-3 py-3.5 text-left font-semibold"
> >
Status Status
</th> </th>
<th <th
scope="col" scope="col"
className="col-span-2 px-3 py-3.5 text-left text-sm font-semibold text-gray-900" className="col-span-2 px-3 py-3.5 text-left font-semibold"
> >
Description Description
</th> </th>
<th <th
scope="col" scope="col"
className="col-span-2 px-3 py-3.5 text-left text-sm font-semibold text-gray-900" className="col-span-2 px-3 py-3.5 text-left font-semibold"
> >
Evidence Evidence
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200"> <tbody className="divide-y divide-gray-300">
{badge.badgeExplanation.criteria.map( {badge.badgeExplanation.criteria.map(
(criteria) => ( (criteria) => (
<tr <tr
key={`${badge.badgeId}-${badge.badgeLevel}-${criteria.ruleId}`} key={`${badge.badgeId}-${badge.badgeLevel}-${criteria.ruleId}`}
className="grid grid-cols-6" className="grid grid-cols-6"
> >
<td className="col-span-1 whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8"> <td
title={
criteria.ruleId
}
className="col-span-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-4 pl-4 pr-3 font-medium text-gray-900 sm:pl-6 lg:pl-8"
>
{ {
criteria.ruleId.split( criteria.ruleId.split(
':', ':',
)[0] )[0]
} }
</td> </td>
<td className="col-span-1 whitespace-nowrap px-3 py-4 text-sm text-gray-500"> <td className="col-span-1 whitespace-nowrap px-3 py-4">
<div className="flex items-center justify-end gap-x-2 sm:justify-start"> <div className="flex items-center justify-end gap-x-2 sm:justify-start">
<span className="relative flex size-2"> <span className="relative flex size-2">
<span <span
...@@ -122,19 +126,19 @@ export default function ResultTable({ currentScan }: Props) { ...@@ -122,19 +126,19 @@ export default function ResultTable({ currentScan }: Props) {
)} )}
></span> ></span>
</span> </span>
<div className="hidden text-black sm:block"> <div className="hidden sm:block">
{ {
criteria.status criteria.status
} }
</div> </div>
</div> </div>
</td> </td>
<td className="col-span-2 px-3 py-4 text-sm text-gray-500"> <td className="col-span-2 px-3 py-4">
{ {
criteria.description criteria.description
} }
</td> </td>
<td className="col-span-2 px-3 py-4 text-sm text-gray-500"> <td className="col-span-2 px-3 py-4">
{ {
criteria.evidence criteria.evidence
} }
......
src/lib/apiClient.ts
+ 1
− 0
View file @ a5135622
...@@ -16,6 +16,7 @@ export interface Badge { ...@@ -16,6 +16,7 @@ export interface Badge {
badgeInformationUri: string badgeInformationUri: string
badgeExplanation: BadgeExplanation badgeExplanation: BadgeExplanation
badgeGranted: boolean badgeGranted: boolean
badgeDescription: string
} }
export interface BadgeExplanation { export interface BadgeExplanation {
......
tailwind.config.js
+ 19
− 0
View file @ a5135622
...@@ -25,6 +25,21 @@ module.exports = { ...@@ -25,6 +25,21 @@ module.exports = {
900: '#0c5550', 900: '#0c5550',
950: '#003433', 950: '#003433',
}, },
primary: {
DEFAULT: '#2f6eff',
foreground: "#FFFFFF",
50: '#e8f5ff',
100: '#d5edff',
200: '#b3dbff',
300: '#85c1ff',
400: '#5698ff',
500: '#2f6eff',
600: '#0c3fff',
700: '#1544ff',
800: '#0631cd',
900: '#10329f',
950: '#0a1c5c',
},
blue: { blue: {
50: '#e8f5ff', 50: '#e8f5ff',
100: '#d5edff', 100: '#d5edff',
...@@ -38,6 +53,10 @@ module.exports = { ...@@ -38,6 +53,10 @@ module.exports = {
900: '#10329f', 900: '#10329f',
950: '#0a1c5c', 950: '#0a1c5c',
}, },
destructive: {
DEFAULT: "#E71507",
foreground: "#FFFFFF",
}
}, },
} }
}, },
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Consent

On this website, we use the web analytics service Matomo to analyze and review the use of our website. Through the collected statistics, we can improve our offerings and make them more appealing for you. Here, you can decide whether to allow us to process your data and set corresponding cookies for these purposes, in addition to technically necessary cookies. Further information on data protection—especially regarding "cookies" and "Matomo"—can be found in our privacy policy. You can withdraw your consent at any time.