feat: Frontend basic (#17)

Co-authored-by: Guillaume Belanger <[email protected]>

.github/workflows/build-rock.yaml

@@ -37,7 +37,8 @@ jobs:
         id: test_image
         run: |
           sleep 30
-          curl -k https://localhost:3000 2>&1 | grep GoCert
+          docker logs gocert
+          curl -k https://localhost:3000/certificate_requests.html 2>&1 | grep "Certificate Requests"
         
       - uses: actions/upload-artifact@v4
         if: steps.test_image.outcome == 'success'

ui/package.json

@@ -7,12 +7,15 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test-live": "vitest"
   },
   "dependencies": {
+    "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.3"
+    "sass": "^1.77.4",
+    "vanilla-framework": "^4.11.0"
   },
   "devDependencies": {
     "@testing-library/react": "^15.0.4",
@@ -29,4 +32,4 @@
   "overrides": {
     "rollup": "npm:@rollup/wasm-node@*"
   }
-}
+}

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

@@ -0,0 +1,9 @@
+"use client"
+
+import { CertificateRequestsTable } from "./table"
+
+export default function CertificateRequests() {
+    return (
+        <CertificateRequestsTable />
+    )
+}

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

@@ -0,0 +1,11 @@
+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.getByText('1')).toBeDefined()
+})
+// TODO: when certificate rejected => rejected status
+// TODO: when certificate empty => outstanding status
+// TODO: when certificate anything else => certificate.NotAfter

ui/src/app/certificate_requests/row.tsx

@@ -0,0 +1,78 @@
+import { useState, Dispatch, SetStateAction } from "react"
+const extractCSR = (csrPemString: string) => {
+    //TODO
+}
+
+const extractCert = (certPemString: string) => {
+    //TODO
+}
+
+type rowProps = {
+    id: number,
+    csr: string,
+    certificate: string
+
+    ActionMenuExpanded: number
+    setActionMenuExpanded: Dispatch<SetStateAction<number>>
+}
+export default function Row({ id, csr, certificate, ActionMenuExpanded, setActionMenuExpanded }: rowProps) {
+    const [detailsMenuOpen, setDetailsMenuOpen] = useState<boolean>(false)
+
+    const toggleActionMenu = () => {
+        if (ActionMenuExpanded == id) {
+            setActionMenuExpanded(0)
+        }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" 
+                    aria-controls="expanded-row"
+                    aria-expanded={detailsMenuOpen? "true": "false"}
+                    onClick={() => setDetailsMenuOpen(!detailsMenuOpen)}>
+                        <i className="p-icon--chevron-down p-contextual-menu__indicator"></i>
+                </button>
+                <span> example.com</span>
+            </td>
+            <td className="" data-test-column="status">{certificate == "" ? "outstanding" : (certificate == "rejected" ? "rejected" : "fulfilled")}</td>
+            <td className="" data-test-column="status">{certificate == "" ? "" : (certificate == "rejected" ? "" : "date")}</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" 
+                        onClick={toggleActionMenu}
+                        onBlur={toggleActionMenu}>
+                            <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__group">
+                            <button className="p-contextual-menu__link">Copy Certificate Request to Clipboard</button>
+                            <button className="p-contextual-menu__link">Download Certificate Request</button>
+                            <button className="p-contextual-menu__link">Reject Certificate Request</button>
+                            <button className="p-contextual-menu__link">Delete Certificate Request</button>
+                        </span>
+                        <span className="p-contextual-menu__group">
+                            <button className="p-contextual-menu__link">Upload Certificate</button>
+                            <button className="p-contextual-menu__link">Revoke Certificate</button>
+                        </span>
+                    </span>
+                </span>
+            </td>
+            <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>: example.com</p>
+                        <p><b>Subject Alternative Names</b>: example.com, 127.0.0.1, 1.2.3.4.5.56</p>
+                    </div>
+                </div>
+            </td>
+        </tr>
+    )
+}