diff --git a/ui/src/app/certificate_requests/page.test.tsx b/ui/src/app/certificate_requests/page.test.tsx
index e69de29..50eaaba 100644
--- a/ui/src/app/certificate_requests/page.test.tsx
+++ b/ui/src/app/certificate_requests/page.test.tsx
@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import CertificateRequests from './page'
+
+test('CertificateRequestsPage', () => {
+ render(< CertificateRequests />)
+ expect(screen.getByRole('table', {})).toBeDefined()
+})
\ No newline at end of file
diff --git a/ui/src/app/certificate_requests/page.tsx b/ui/src/app/certificate_requests/page.tsx
index c356950..a0e69a4 100644
--- a/ui/src/app/certificate_requests/page.tsx
+++ b/ui/src/app/certificate_requests/page.tsx
@@ -1,6 +1,5 @@
"use client"
-import { useState } from "react"
import { CertificateRequestsTable } from "./table"
export default function CertificateRequests() {
diff --git a/ui/src/app/certificate_requests/row.test.tsx b/ui/src/app/certificate_requests/row.test.tsx
new file mode 100644
index 0000000..cc88a08
--- /dev/null
+++ b/ui/src/app/certificate_requests/row.test.tsx
@@ -0,0 +1,14 @@
+import { expect, test } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Row from './row'
+
+test('Certificate Requests Table Row', () => {
+ render(
)
+ expect(screen.getByRole('table', {})).toBeDefined()
+})
+// when certificate rejected => rejected status
+// when certificate empty => outstanding status
+// when certificate anything else => certificate.NotAfter
+
+
+// TODO button call correct api endpoints test
\ No newline at end of file
diff --git a/ui/src/app/certificate_requests/row.tsx b/ui/src/app/certificate_requests/row.tsx
new file mode 100644
index 0000000..d6c68ec
--- /dev/null
+++ b/ui/src/app/certificate_requests/row.tsx
@@ -0,0 +1,32 @@
+const extractCSR = (csrPemString: string) => {
+ //TODO
+}
+
+const extractCert = (certPemString: string) => {
+ //TODO
+}
+
+type rowProps = {
+ id: number,
+ csr: string,
+ certificate: string
+}
+export default function Row({ id, csr, certificate }: rowProps) {
+ return (
+
+ {id} |
+
+ CN: example.com
+ SAN: example.com, 127.0.0.1, 1.2.3.4.5.56
+ |
+ {certificate == "" ? "outstanding" : (certificate == "rejected" ? "rejected" : "certificate expiry date here")} |
+
+
+
+ |
+
+
+ |
+
+ )
+}
\ No newline at end of file
diff --git a/ui/src/app/certificate_requests/table.test.tsx b/ui/src/app/certificate_requests/table.test.tsx
new file mode 100644
index 0000000..14b7ad0
--- /dev/null
+++ b/ui/src/app/certificate_requests/table.test.tsx
@@ -0,0 +1,2 @@
+
+// when add cert button clicked, asideOpen called
\ No newline at end of file
diff --git a/ui/src/app/certificate_requests/table.tsx b/ui/src/app/certificate_requests/table.tsx
index 3905043..af46027 100644
--- a/ui/src/app/certificate_requests/table.tsx
+++ b/ui/src/app/certificate_requests/table.tsx
@@ -1,12 +1,13 @@
import { Dispatch, SetStateAction, useContext } from "react"
import { AsideContext } from "../nav"
+import Row from "./row"
export function CertificateRequestsTable() {
const { isOpen: isAsideOpen, setIsOpen: setAsideIsOpen } = useContext(AsideContext)
return (
-
+
Certificate Requests
@@ -25,21 +26,9 @@ export function CertificateRequestsTable() {
-
- 1 |
-
- CN: example.com
- SAN: example.com, 127.0.0.1, 1.2.3.4.5.56
- |
- outstanding |
-
-
-
- |
-
-
- |
-
+
+
+
diff --git a/ui/src/app/globals.scss b/ui/src/app/globals.scss
index 4d70b51..4124068 100644
--- a/ui/src/app/globals.scss
+++ b/ui/src/app/globals.scss
@@ -2,92 +2,4 @@
@import 'node_modules/vanilla-framework';
// Include all of Vanilla Framework
-@include vanilla;
-
-body {
- margin: 0 !important;
- /* override codepen embedded examples styles */
-}
-
-/* application layout demo styles */
-.l-application .u-fixed-width {
- /* temporary, as I don't want to change the global setting */
- max-width: 95rem;
-}
-
-.demo-status {
- background-color: #f7f7f7;
- /* $colors--light-theme--background-alt; */
- padding-bottom: 0.75rem;
- /* $spv--medium; */
- padding-top: 0.75rem;
-}
-
-/* demo JAAS CSS */
-.u-flex {
- display: flex;
-}
-
-.u-flex--block {
- flex: 1 1 auto;
-}
-
-.has-icon [class*='p-icon']:first-child {
- margin-right: 0.25rem;
- margin-top: 0.25rem;
-}
-
-.status-icon {
- display: inline-block;
- padding-left: 1.5rem;
- position: relative;
-}
-
-.status-icon::before {
- content: '\00B7';
- font-size: 5rem;
- left: 0;
- position: absolute;
- top: -6px;
-}
-
-.status-icon.is-blocked::before,
-.status-icon.is-down::before,
-.status-icon.is-error::before,
-.status-icon.is-provisioning::before {
- color: #c7162b;
-}
-
-.status-icon.is-alert::before,
-.status-icon.is-attention::before,
-.status-icon.is-maintenance::before,
-.status-icon.is-pending::before,
-.status-icon.is-stopped::before,
-.status-icon.is-waiting::before {
- color: #f99b11;
-}
-
-.status-icon.is-active::before,
-.status-icon.is-running::before,
-.status-icon.is-started::before {
- color: #cdcdcd;
-}
-
-.status-icon.is-unknown::before {
- border: 1px solid #cdcdcd;
- border-radius: 50%;
- content: '';
- height: 0.6rem;
- left: 0.35rem;
- top: 0.5rem;
- width: 0.6rem;
-}
-
-table thead::after {
- content: none;
-}
-
-td,
-th {
- min-width: 150px;
-}
\ No newline at end of file
+@include vanilla;
\ No newline at end of file
diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
index 9a909cb..5ee9ea2 100644
--- a/ui/src/app/layout.tsx
+++ b/ui/src/app/layout.tsx
@@ -22,4 +22,4 @@ export default function RootLayout({