ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-11-03 17:13:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tidy up

Browse Source 
- Add help docs for most sections
- Add translations documentation
- Fix up todos
- Remove german translation
This commit is contained in:
Jamie Curnow
2025-10-27 23:59:00 +10:00
parent 0f718570d6
commit 5d6916dcf0
38 changed files with 686 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/Access/Table.tsx
View File

@@ -53,7 +53,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
cell: (info: any) => <T id="proxy-hosts.count" data={{ count: info.getValue() }} />,
}),
columnHelper.display({
id: "id", // todo: not needed for a display?
id: "id",
cell: (info: any) => {
return (
<span className="dropdown">

22
frontend/src/pages/Access/TableWrapper.tsx
View File

@@ -1,11 +1,11 @@
import { IconSearch } from "@tabler/icons-react";
import { IconHelp, IconSearch } from "@tabler/icons-react";
import { useState } from "react";
import Alert from "react-bootstrap/Alert";
import { deleteAccessList } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useAccessLists } from "src/hooks";
import { T } from "src/locale";
import { showAccessListModal, showDeleteConfirmModal } from "src/modals";
import { showAccessListModal, showDeleteConfirmModal, showHelpModal } from "src/modals";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
@@ -47,9 +47,10 @@ export default function TableWrapper() {
<T id="access-lists" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
{data?.length ? (
<div className="input-group input-group-flat w-auto">
<span className="input-group-text input-group-text-sm">
<IconSearch size={16} />
@@ -62,12 +63,17 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
) : null}
<Button size="sm" onClick={() => showHelpModal("AccessLists", "cyan")}>
<IconHelp size={20} />
</Button>
{data?.length ? (
<Button size="sm" className="btn-cyan" onClick={() => showAccessListModal("new")}>
<T id="object.add" tData={{ object: "access-list" }} />
</Button>
</div>
) : null}
</div>
) : null}
</div>
</div>
</div>
<Table
@@ -77,7 +83,7 @@ export default function TableWrapper() {
onEdit={(id: number) => showAccessListModal(id)}
onDelete={(id: number) =>
showDeleteConfirmModal({
title: "access.delete.title",
title: <T id="object.delete" tData={{ object: "access-list" }} />,
onConfirm: () => handleDelete(id),
invalidations: [["access-lists"], ["access-list", id]],
children: <T id="object.delete.content" tData={{ object: "access-list" }} />,

21
frontend/src/pages/Certificates/TableWrapper.tsx
View File

@@ -1,14 +1,15 @@
import { IconSearch } from "@tabler/icons-react";
import { IconHelp, IconSearch } from "@tabler/icons-react";
import { useState } from "react";
import Alert from "react-bootstrap/Alert";
import { deleteCertificate, downloadCertificate } from "src/api/backend";
import { LoadingPage } from "src/components";
import { Button, LoadingPage } from "src/components";
import { useCertificates } from "src/hooks";
import { T } from "src/locale";
import {
showCustomCertificateModal,
showDeleteConfirmModal,
showDNSCertificateModal,
showHelpModal,
showHTTPCertificateModal,
showRenewCertificateModal,
} from "src/modals";
@@ -69,9 +70,10 @@ export default function TableWrapper() {
<T id="certificates" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
{data?.length ? (
<div className="input-group input-group-flat w-auto">
<span className="input-group-text input-group-text-sm">
<IconSearch size={16} />
@@ -84,6 +86,11 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
) : null}
<Button size="sm" onClick={() => showHelpModal("Certificates", "pink")}>
<IconHelp size={20} />
</Button>
{data?.length ? (
<div className="dropdown">
<button
type="button"
@@ -126,9 +133,9 @@ export default function TableWrapper() {
</a>
</div>
</div>
</div>
) : null}
</div>
) : null}
</div>
</div>
</div>
<Table

5
frontend/src/pages/Dashboard/index.tsx
View File

@@ -116,12 +116,7 @@ const Dashboard = () => {
<code>{`Todo:
- check mobile
- use statuses for table formatters where applicable: https://docs.tabler.io/ui/components/statuses
- add help docs for host types
- REDO SCREENSHOTS in docs folder
- search codebase for "TODO"
- update documentation to add development notes for translations
- double check output of access field selection on proxy host dialog, after access lists are completed
- check permissions in all places
More for api, then implement here:

2
frontend/src/pages/Nginx/DeadHosts/Table.tsx
View File

@@ -58,7 +58,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
},
}),
columnHelper.display({
id: "id", // todo: not needed for a display?
id: "id",
cell: (info: any) => {
return (
<span className="dropdown">

20
frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx
View File

@@ -1,4 +1,4 @@
import { IconSearch } from "@tabler/icons-react";
import { IconHelp, IconSearch } from "@tabler/icons-react";
import { useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import Alert from "react-bootstrap/Alert";
@@ -6,7 +6,7 @@ import { deleteDeadHost, toggleDeadHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useDeadHosts } from "src/hooks";
import { T } from "src/locale";
import { showDeadHostModal, showDeleteConfirmModal } from "src/modals";
import { showDeadHostModal, showDeleteConfirmModal, showHelpModal } from "src/modals";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
@@ -56,9 +56,10 @@ export default function TableWrapper() {
<T id="dead-hosts" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
{data?.length ? (
<div className="input-group input-group-flat w-auto">
<span className="input-group-text input-group-text-sm">
<IconSearch size={16} />
@@ -71,12 +72,17 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
) : null}
<Button size="sm" onClick={() => showHelpModal("DeadHosts", "red")}>
<IconHelp size={20} />
</Button>
{data?.length ? (
<Button size="sm" className="btn-red" onClick={() => showDeadHostModal("new")}>
<T id="object.add" tData={{ object: "dead-host" }} />
</Button>
</div>
) : null}
</div>
) : null}
</div>
</div>
</div>
<Table

20
frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
View File

@@ -1,4 +1,4 @@
import { IconSearch } from "@tabler/icons-react";
import { IconHelp, IconSearch } from "@tabler/icons-react";
import { useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import Alert from "react-bootstrap/Alert";
@@ -6,7 +6,7 @@ import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useProxyHosts } from "src/hooks";
import { T } from "src/locale";
import { showDeleteConfirmModal, showProxyHostModal } from "src/modals";
import { showDeleteConfirmModal, showHelpModal, showProxyHostModal } from "src/modals";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
@@ -59,9 +59,10 @@ export default function TableWrapper() {
<T id="proxy-hosts" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
{data?.length ? (
<div className="input-group input-group-flat w-auto">
<span className="input-group-text input-group-text-sm">
<IconSearch size={16} />
@@ -74,12 +75,17 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
) : null}
<Button size="sm" onClick={() => showHelpModal("ProxyHosts", "lime")}>
<IconHelp size={20} />
</Button>
{data?.length ? (
<Button size="sm" className="btn-lime" onClick={() => showProxyHostModal("new")}>
<T id="object.add" tData={{ object: "proxy-host" }} />
</Button>
</div>
) : null}
</div>
) : null}
</div>
</div>
</div>
<Table

20
frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx
View File

@@ -1,4 +1,4 @@
import { IconSearch } from "@tabler/icons-react";
import { IconHelp, IconSearch } from "@tabler/icons-react";
import { useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import Alert from "react-bootstrap/Alert";
@@ -6,7 +6,7 @@ import { deleteRedirectionHost, toggleRedirectionHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useRedirectionHosts } from "src/hooks";
import { T } from "src/locale";
import { showDeleteConfirmModal, showRedirectionHostModal } from "src/modals";
import { showDeleteConfirmModal, showHelpModal, showRedirectionHostModal } from "src/modals";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
@@ -59,9 +59,10 @@ export default function TableWrapper() {
<T id="redirection-hosts" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
{data?.length ? (
<div className="input-group input-group-flat w-auto">
<span className="input-group-text input-group-text-sm">
<IconSearch size={16} />
@@ -74,6 +75,11 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
) : null}
<Button size="sm" onClick={() => showHelpModal("RedirectionHosts", "yellow")}>
<IconHelp size={20} />
</Button>
{data?.length ? (
<Button
size="sm"
className="btn-yellow"
@@ -81,9 +87,9 @@ export default function TableWrapper() {
>
<T id="object.add" tData={{ object: "redirection-host" }} />
</Button>
</div>
) : null}
</div>
) : null}
</div>
</div>
</div>
<Table

2
frontend/src/pages/Nginx/Streams/Table.tsx
View File

@@ -87,7 +87,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
},
}),
columnHelper.display({
id: "id", // todo: not needed for a display?
id: "id",
cell: (info: any) => {
return (
<span className="dropdown">

20
frontend/src/pages/Nginx/Streams/TableWrapper.tsx
View File

@@ -1,4 +1,4 @@
import { IconSearch } from "@tabler/icons-react";
import { IconHelp, IconSearch } from "@tabler/icons-react";
import { useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import Alert from "react-bootstrap/Alert";
@@ -6,7 +6,7 @@ import { deleteStream, toggleStream } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useStreams } from "src/hooks";
import { T } from "src/locale";
import { showDeleteConfirmModal, showStreamModal } from "src/modals";
import { showDeleteConfirmModal, showHelpModal, showStreamModal } from "src/modals";
import { showObjectSuccess } from "src/notifications";
import Table from "./Table";
@@ -61,9 +61,10 @@ export default function TableWrapper() {
<T id="streams" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
{data?.length ? (
<div className="input-group input-group-flat w-auto">
<span className="input-group-text input-group-text-sm">
<IconSearch size={16} />
@@ -76,12 +77,17 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
) : null}
<Button size="sm" onClick={() => showHelpModal("Streams", "blue")}>
<IconHelp size={20} />
</Button>
{data?.length ? (
<Button size="sm" className="btn-blue" onClick={() => showStreamModal("new")}>
<T id="object.add" tData={{ object: "stream" }} />
</Button>
</div>
) : null}
</div>
) : null}
</div>
</div>
</div>
<Table