Skip to content

Commit

Permalink
format
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayra1
kayra1 committed Jun 13, 2024
1 parent 3940cfb commit 8cb16e4
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 69 deletions.
8 changes: 4 additions & 4 deletions ui/src/app/certificate_requests/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CertificateRequestsTable } from "./table"
import { getCertificateRequests } from "./queries"
import { CSREntry } from "./types"

function Error({msg}:{msg: string}) {
function Error({ msg }: { msg: string }) {
return (
<caption>
<div className="p-strip">
Expand Down Expand Up @@ -36,9 +36,9 @@ function Loading() {

export default function CertificateRequests() {
const query = useQuery<CSREntry[], Error>('csrs', getCertificateRequests)

Check failure on line 38 in ui/src/app/certificate_requests/page.tsx

View workflow job for this annotation

GitHub Actions / unit-test-frontend / nextjs-unit-tests

src/app/certificate_requests/page.test.tsx > CertificateRequestsPage 

Error: No QueryClient set, use QueryClientProvider to set one
 ❯ useQueryClient node_modules/react-query/lib/react/QueryClientProvider.js:36:11
 ❯ useBaseQuery node_modules/react-query/lib/react/useBaseQuery.js:24:61
 ❯ Proxy.useQuery node_modules/react-query/lib/react/useQuery.js:14:41
 ❯ CertificateRequests src/app/certificate_requests/page.tsx:38:19
 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18
 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13
 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16
 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5
if (query.status == "loading") { return <Loading/> }
if (query.status == "error") { return <Error msg={query.error.message}/> }
const csrs = Array.from(query.data? query.data: [])
if (query.status == "loading") { return <Loading /> }
if (query.status == "error") { return <Error msg={query.error.message} /> }
const csrs = Array.from(query.data ? query.data : [])
return (
<CertificateRequestsTable csrs={csrs} />
)
Expand Down
26 changes: 13 additions & 13 deletions ui/src/app/certificate_requests/row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,37 +19,37 @@ export default function Row({ id, csr, certificate, ActionMenuExpanded, setActio
const toggleActionMenu = () => {
if (ActionMenuExpanded == id) {
setActionMenuExpanded(0)
}else{
} else {
setActionMenuExpanded(id)
}
}
return (
<tr>
<td className="" width={5} data-test-column="id">{id}</td>
<td className="">
<button
className="u-toggle p-contextual-menu__toggle p-button--base is-small"
<button
className="u-toggle p-contextual-menu__toggle p-button--base is-small"
aria-controls="expanded-row"
aria-expanded={detailsMenuOpen? "true": "false"}
aria-expanded={detailsMenuOpen ? "true" : "false"}
onClick={() => setDetailsMenuOpen(!detailsMenuOpen)}>
<i className="p-icon--chevron-down p-contextual-menu__indicator"></i>
<i className="p-icon--chevron-down p-contextual-menu__indicator"></i>
</button>
<span>{csrObj.subjects.find((e) => e.type == "Common Name")?.value}</span>
</td>
<td className="" data-test-column="status">{certificate == "" ? "outstanding" : (certificate == "rejected" ? "rejected" : "fulfilled")}</td>
<td className="" data-test-column="status">{certificate == "" ? "" : (certificate == "rejected" ? "" : certObj?.notAfter)}</td>
<td className="has-overflow" data-heading="Actions">
<span className="p-contextual-menu--center u-no-margin--bottom">
<button
className="p-contextual-menu__toggle p-button--base is-small u-no-margin--bottom"
aria-controls="action-menu"
aria-expanded={ActionMenuExpanded == id ? "true": "false"}
aria-haspopup="true"
<button
className="p-contextual-menu__toggle p-button--base is-small u-no-margin--bottom"
aria-controls="action-menu"
aria-expanded={ActionMenuExpanded == id ? "true" : "false"}
aria-haspopup="true"
onClick={toggleActionMenu}
onBlur={toggleActionMenu}>
<i className="p-icon--menu p-contextual-menu__indicator"></i>
<i className="p-icon--menu p-contextual-menu__indicator"></i>
</button>
<span className="p-contextual-menu__dropdown" id="action-menu" aria-hidden={ActionMenuExpanded == id? "false": "true"}>
<span className="p-contextual-menu__dropdown" id="action-menu" aria-hidden={ActionMenuExpanded == id ? "false" : "true"}>
<span className="p-contextual-menu__group">
<button className="p-contextual-menu__link">Copy Certificate Request to Clipboard</button>
<button className="p-contextual-menu__link">Download Certificate Request</button>
Expand All @@ -63,7 +63,7 @@ export default function Row({ id, csr, certificate, ActionMenuExpanded, setActio
</span>
</span>
</td>
<td id="expanded-row" className="p-table__expanding-panel" aria-hidden={detailsMenuOpen? "false": "true"}>
<td id="expanded-row" className="p-table__expanding-panel" aria-hidden={detailsMenuOpen ? "false" : "true"}>
<div className="row">
<div className="col-8">
<p><b>Common Name</b>: {csrObj.subjects.find((e) => e.type == "Common Name")?.value}</p>
Expand Down
14 changes: 7 additions & 7 deletions ui/src/app/certificate_requests/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function sortByCertStatus(a: CSREntry, b: CSREntry) {
}
}

export function CertificateRequestsTable({csrs: rows}: TableProps) {
export function CertificateRequestsTable({ csrs: rows }: TableProps) {
const { isOpen: isAsideOpen, setIsOpen: setAsideIsOpen } = useContext(AsideContext)

const [actionsMenuExpanded, setActionsMenuExpanded] = useState<number>(0)
Expand All @@ -41,9 +41,9 @@ export function CertificateRequestsTable({csrs: rows}: TableProps) {
const sortedRows = () => {
switch (sortedColumn) {
case "csr":
return (sortDescending? rows.sort(sortByCSRStatus).reverse() : rows.sort(sortByCSRStatus))
return (sortDescending ? rows.sort(sortByCSRStatus).reverse() : rows.sort(sortByCSRStatus))
case "cert":
return (sortDescending? rows.sort(sortByCertStatus).reverse() : rows.sort(sortByCertStatus))
return (sortDescending ? rows.sort(sortByCertStatus).reverse() : rows.sort(sortByCertStatus))
default:
return rows
}
Expand All @@ -63,18 +63,18 @@ export function CertificateRequestsTable({csrs: rows}: TableProps) {
<tr>
<th>ID</th>
<th>Details</th>
<th aria-sort={sortedColumn == "csr"? (sortDescending? "descending": "ascending"): "none"} onClick={() => {setSortedColumn('csr');setSortDescending(!sortDescending)}}>CSR Status</th>
<th aria-sort={sortedColumn == "cert"? (sortDescending? "descending": "ascending"): "none"} onClick={() => {setSortedColumn('cert');setSortDescending(!sortDescending)}}>Certificate Expiry Date</th>
<th aria-sort={sortedColumn == "csr" ? (sortDescending ? "descending" : "ascending") : "none"} onClick={() => { setSortedColumn('csr'); setSortDescending(!sortDescending) }}>CSR Status</th>
<th aria-sort={sortedColumn == "cert" ? (sortDescending ? "descending" : "ascending") : "none"} onClick={() => { setSortedColumn('cert'); setSortDescending(!sortDescending) }}>Certificate Expiry Date</th>
<th className="has-overflow">Actions</th>
<th aria-hidden="true"></th>
</tr>
</thead>
<tbody>
{
sortedRows().map((row) => (

Check failure on line 74 in ui/src/app/certificate_requests/table.tsx

View workflow job for this annotation

GitHub Actions / unit-test-frontend / nextjs-unit-tests

src/app/nav.test.tsx > Navigation > should open aside when clicking button 

TypeError: Cannot read properties of undefined (reading 'map')
 ❯ CertificateRequestsTable src/app/certificate_requests/table.tsx:74:44
 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18
 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13
 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16
 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14
 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12
 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5
 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7
 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20
 ❯ performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:25789:22
<Row key={row.ID} id={row.ID} csr={row.CSR} certificate={row.Certificate} ActionMenuExpanded={actionsMenuExpanded} setActionMenuExpanded={setActionsMenuExpanded}/>
<Row key={row.ID} id={row.ID} csr={row.CSR} certificate={row.Certificate} ActionMenuExpanded={actionsMenuExpanded} setActionMenuExpanded={setActionsMenuExpanded} />
)
)}
)}
</tbody>
</table>
</div>
Expand Down
38 changes: 19 additions & 19 deletions ui/src/app/nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client"

import { SetStateAction, Dispatch, useState, createContext, useEffect , ChangeEvent} from "react"
import { SetStateAction, Dispatch, useState, createContext, useEffect, ChangeEvent } from "react"
import { QueryClient, QueryClientProvider } from "react-query";
import Image from "next/image";

Expand All @@ -25,10 +25,10 @@ export function Aside({ isOpen, setIsOpen }: { isOpen: boolean, setIsOpen: Dispa
setCSRPEMString(e.target.result.toString());
}
}
};
reader.readAsText(file);
};
reader.readAsText(file);
}
};
};
return (
<aside className={"l-aside" + (isOpen ? "" : " is-collapsed")} id="aside-panel" aria-label="aside-panel">
<div className="p-panel">
Expand All @@ -44,7 +44,7 @@ export function Aside({ isOpen, setIsOpen }: { isOpen: boolean, setIsOpen: Dispa
<label htmlFor="textarea">
Enter or upload CSR in PEM format below
</label>
<textarea id="csr-textarea" name="textarea" rows={10} placeholder="-----BEGIN CERTIFICATE REQUEST-----" onChange={handleTextChange} value={CSRPEMString}/>
<textarea id="csr-textarea" name="textarea" rows={10} placeholder="-----BEGIN CERTIFICATE REQUEST-----" onChange={handleTextChange} value={CSRPEMString} />
</div>
<div className="p-form__group row">
<input type="file" name="upload" accept=".pem" onChange={handleFileChange}></input>
Expand All @@ -62,10 +62,10 @@ export function Aside({ isOpen, setIsOpen }: { isOpen: boolean, setIsOpen: Dispa
export function SideBar({ sidebarVisible, setSidebarVisible }: { sidebarVisible: boolean, setSidebarVisible: Dispatch<SetStateAction<boolean>> }) {
const [activeTab, setActiveTab] = useState<string>("");
useEffect(() => {
if (typeof window !== 'undefined') {
setActiveTab(location.pathname.split('/')[1]);
}
}, []);
if (typeof window !== 'undefined') {
setActiveTab(location.pathname.split('/')[1]);
}
}, []);
return (
<header className={sidebarVisible ? "l-navigation" : "l-navigation is-collapsed"}>
<div className="l-navigation__drawer">
Expand Down Expand Up @@ -117,16 +117,16 @@ export function TopBar({ setSidebarVisible }: { setSidebarVisible: Dispatch<SetS
export function Logo() {
return (
<div className="logo">
<div className="logo-tag">
<Image
src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg"
alt="circle of friends"
width={32}
height={32}
className="logo-image"
/>
</div>
<span className="logo-text p-heading--4">GoCert</span>
<div className="logo-tag">
<Image
src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg"
alt="circle of friends"
width={32}
height={32}
className="logo-image"
/>
</div>
<span className="logo-text p-heading--4">GoCert</span>
</div>
)
}
Expand Down
52 changes: 26 additions & 26 deletions ui/src/app/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,39 @@ import { CertificationRequest, Certificate } from "pkijs";
import { fromBER } from "asn1js";


export const oidToName =(oid: string) => {
const map :{ [key: string]: string } = {
export const oidToName = (oid: string) => {
const map: { [key: string]: string } = {
// Subject OID's
"2.5.4.3": "Common Name",
"2.5.4.6": "Country",
"2.5.4.7": "Locality",
"2.5.4.8": "State or Province",
"2.5.4.9": "Street Address",
"2.5.4.97": "Organization Identifier",
"2.5.4.10": "Organization Name",
"2.5.4.11": "Organizational Unit Name",
"2.5.4.97": "Organization Identifier",
"2.5.4.10": "Organization Name",
"2.5.4.11": "Organizational Unit Name",
"2.5.4.5": "Serial Number",
"2.5.4.4": "Surname",
"2.5.4.42": "Given Name",
"2.5.4.12": "Title",
"2.5.4.43": "Initials",
"2.5.4.44": "Generation Qualifier",
"2.5.4.45": "X500 Unique Identifier",
"2.5.4.46": "Dn Qualifier",
"2.5.4.42": "Given Name",
"2.5.4.12": "Title",
"2.5.4.43": "Initials",
"2.5.4.44": "Generation Qualifier",
"2.5.4.45": "X500 Unique Identifier",
"2.5.4.46": "Dn Qualifier",
"2.5.4.65": "Pseudonym",
"0.9.2342.19200300.100.1.1": "User Id",
"0.9.2342.19200300.100.1.25": "Domain Component",
"1.2.840.113549.1.9.1": "Email Address",
"1.3.6.1.4.1.311.60.2.1.3": "Jurisdiction Country-Name",
"1.3.6.1.4.1.311.60.2.1.1": "Jurisdiction Locality-Name",
"1.3.6.1.4.1.311.60.2.1.2": "Jurisdiction State Or Province Name",
"2.5.4.15": "Business Category",
"0.9.2342.19200300.100.1.1": "User Id",
"0.9.2342.19200300.100.1.25": "Domain Component",
"1.2.840.113549.1.9.1": "Email Address",
"1.3.6.1.4.1.311.60.2.1.3": "Jurisdiction Country-Name",
"1.3.6.1.4.1.311.60.2.1.1": "Jurisdiction Locality-Name",
"1.3.6.1.4.1.311.60.2.1.2": "Jurisdiction State Or Province Name",
"2.5.4.15": "Business Category",
"2.5.4.16": "Postal Address",
"2.5.4.17": "Postal Code",
"1.2.643.3.131.1.1": "Inn",
"1.2.643.100.1": "Ogrn",
"1.2.643.100.3": "Snils",
"1.2.840.113549.1.9.2": "Unstructured Name",
"2.5.4.17": "Postal Code",
"1.2.643.3.131.1.1": "Inn",
"1.2.643.100.1": "Ogrn",
"1.2.643.100.3": "Snils",
"1.2.840.113549.1.9.2": "Unstructured Name",
// OID for pkcs-9-at-extensionRequest
"1.2.840.113549.1.9.14": "Extension Request",
// OID for basicConstraint
Expand Down Expand Up @@ -77,11 +77,11 @@ export const extractCSR = (csrPemString: string) => {
type: oidToName(typeAndValue.type),
value: typeAndValue.values
}))
return {subjects}
return { subjects }
}

export const extractCert = (certPemString: string) => {
if (certPemString == "" || certPemString == "rejected") {return}
if (certPemString == "" || certPemString == "rejected") { return }
// Decode PEM to DER
const pemHeader = "-----BEGIN CERTIFICATE-----";
const pemFooter = "-----END CERTIFICATE-----";
Expand Down Expand Up @@ -115,5 +115,5 @@ export const extractCert = (certPemString: string) => {
const notBefore = cert.notBefore.value.toString();
const notAfter = cert.notAfter.value.toString();

return {notAfter}
return { notAfter }
}

0 comments on commit 8cb16e4

Please sign in to comment.