Certificates section react work

frontend/src/pages/Certificates/Table.tsx

@@ -5,6 +5,7 @@ import type { Certificate } from "src/api/backend";
 import { DomainsFormatter, EmptyData, GravatarFormatter } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
+import { showCustomCertificateModal, showDNSCertificateModal, showHTTPCertificateModal } from "src/modals";
 
 interface Props {
 	data: Certificate[];
@@ -121,17 +122,28 @@ export default function Table({ data, isFetching }: Props) {
 					href="#"
 					onClick={(e) => {
 						e.preventDefault();
-						// onNew();
+						showHTTPCertificateModal();
 					}}
 				>
-					<T id="lets-encrypt" />
+					<T id="lets-encrypt-via-http" />
 				</a>
 				<a
 					className="dropdown-item"
 					href="#"
 					onClick={(e) => {
 						e.preventDefault();
-						// onNewCustom();
+						showDNSCertificateModal();
+					}}
+				>
+					<T id="lets-encrypt-via-dns" />
+				</a>
+				<div className="dropdown-divider" />
+				<a
+					className="dropdown-item"
+					href="#"
+					onClick={(e) => {
+						e.preventDefault();
+						showCustomCertificateModal();
 					}}
 				>
 					<T id="certificates.custom" />

frontend/src/pages/Certificates/TableWrapper.tsx

@@ -3,6 +3,7 @@ import Alert from "react-bootstrap/Alert";
 import { LoadingPage } from "src/components";
 import { useCertificates } from "src/hooks";
 import { T } from "src/locale";
+import { showCustomCertificateModal, showDNSCertificateModal, showHTTPCertificateModal } from "src/modals";
 import Table from "./Table";
 
 export default function TableWrapper() {
@@ -54,10 +55,35 @@ export default function TableWrapper() {
 										<T id="object.add" tData={{ object: "certificate" }} />
 									</button>
 									<div className="dropdown-menu">
-										<a className="dropdown-item" href="#">
-											<T id="lets-encrypt" />
+										<a
+											className="dropdown-item"
+											href="#"
+											onClick={(e) => {
+												e.preventDefault();
+												showHTTPCertificateModal();
+											}}
+										>
+											<T id="lets-encrypt-via-http" />
 										</a>
-										<a className="dropdown-item" href="#">
+										<a
+											className="dropdown-item"
+											href="#"
+											onClick={(e) => {
+												e.preventDefault();
+												showDNSCertificateModal();
+											}}
+										>
+											<T id="lets-encrypt-via-dns" />
+										</a>
+										<div className="dropdown-divider" />
+										<a
+											className="dropdown-item"
+											href="#"
+											onClick={(e) => {
+												e.preventDefault();
+												showCustomCertificateModal();
+											}}
+										>
 											<T id="certificates.custom" />
 										</a>
 									</div>

frontend/src/pages/Dashboard/index.tsx

@@ -118,15 +118,9 @@ const Dashboard = () => {
 - check mobile
 - add help docs for host types
 - REDO SCREENSHOTS in docs folder
-- translations for:
-  - src/components/Form/AccessField.tsx
-  - src/components/Form/SSLCertificateField.tsx
-  - src/components/Form/DNSProviderFields.tsx
 - search codebase for "TODO"
 - update documentation to add development notes for translations
-- use syntax highligting for audit logs json output
 - double check output of access field selection on proxy host dialog, after access lists are completed
-- proxy host custom locations dialog
 - check permissions in all places
 
 More for api, then implement here:

frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx

@@ -37,13 +37,12 @@ export default function TableWrapper() {
 
 	let filtered = null;
 	if (search && data) {
-		filtered = data?.filter((_item) => {
-			return true;
-			// TODO
-			// item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
-			// item.forwardDomainName.toLowerCase().includes(search)
-			// );
-		});
+		filtered = data?.filter(
+			(item) =>
+				item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
+				item.forwardHost.toLowerCase().includes(search) ||
+				`${item.forwardPort}`.includes(search),
+		);
 	} else if (search !== "") {
 		// this can happen if someone deletes the last item while searching
 		setSearch("");