current progress

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()
+})

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() {

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(<Row id={1} csr='' certificate='' />)
+    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

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 (
+        <tr data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
+            <td className="" data-test-column="id">{id}</td>
+            <td className="u-overflow--visible" data-test-column="details">
+                <p>CN: example.com</p>
+                <p>SAN: example.com, 127.0.0.1, 1.2.3.4.5.56</p>
+            </td>
+            <td className="" data-test-column="status">{certificate == "" ? "outstanding" : (certificate == "rejected" ? "rejected" : "certificate expiry date here")}</td>
+            <td className="" data-test-column="action">
+                <button>Sign</button>
+                <button>Reject</button>
+            </td>
+            <td className="" data-test-column="delete">
+                <button>Delete CSR</button>
+            </td>
+        </tr>
+    )
+}

ui/src/app/certificate_requests/table.test.tsx

@@ -0,0 +1,2 @@
+
+// when add cert button clicked, asideOpen called

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 (
         <div className="p-panel">
-            <div className="p-panel__header">
+            <div className="p-panel__header is-sticky">
                 <h4 className="p-panel__title">Certificate Requests</h4>
                 <div className="p-panel__controls">
                     <button className="u-no-margin--bottom" onClick={() => setAsideIsOpen(true)}>Add New CSR</button>
@@ -25,21 +26,9 @@ export function CertificateRequestsTable() {
                             </tr>
                         </thead>
                         <tbody>
-                            <tr data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
-                                <td className="" data-test-column="id">1</td>
-                                <td className="u-overflow--visible" data-test-column="details">
-                                    <p>CN: example.com</p>
-                                    <p>SAN: example.com, 127.0.0.1, 1.2.3.4.5.56</p>
-                                </td>
-                                <td className="" data-test-column="status">outstanding</td>
-                                <td className="" data-test-column="action">
-                                    <button>Sign</button>
-                                    <button>Reject</button>
-                                </td>
-                                <td className="" data-test-column="delete">
-                                    <button>Delete CSR</button>
-                                </td>
-                            </tr>
+                            <Row id={1} csr="csr1" certificate="" />
+                            <Row id={2} csr="csr2" certificate="rejected" />
+                            <Row id={3} csr="csr3" certificate="a real cert" />
                         </tbody>
                     </table>
                 </div>

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;
-}
+@include vanilla;

ui/src/app/layout.tsx

@@ -22,4 +22,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}