feat: Clone a Proxy Host

frontend/src/locale/src/de.json

@@ -38,6 +38,9 @@
 	"action.add-location": {
 		"defaultMessage": "Pfad Hinzufügen"
 	},
+	"action.clone": {
+		"defaultMessage": "Klonen"
+	},
 	"action.close": {
 		"defaultMessage": "Schließen"
 	},

frontend/src/locale/src/en.json

@@ -44,6 +44,9 @@
 	"action.allow": {
 		"defaultMessage": "Allow"
 	},
+	"action.clone": {
+		"defaultMessage": "Clone"
+	},
 	"action.close": {
 		"defaultMessage": "Close"
 	},

frontend/src/locale/src/es.json

@@ -44,6 +44,9 @@
 	"action.allow": {
 		"defaultMessage": "Permitir"
 	},
+	"action.clone": {
+		"defaultMessage": "Clonar"
+	},
 	"action.close": {
 		"defaultMessage": "Cerrar"
 	},

frontend/src/locale/src/it.json

@@ -38,6 +38,9 @@
 	"action.add-location": {
 		"defaultMessage": "Aggiungi Percorso"
 	},
+	"action.clone": {
+		"defaultMessage": "Clona"
+	},
 	"action.close": {
 		"defaultMessage": "Chiudi"
 	},

frontend/src/locale/src/ja.json

@@ -38,6 +38,9 @@
 	"action.add-location": {
 		"defaultMessage": "場所を追加"
 	},
+	"action.clone": {
+		"defaultMessage": "複製"
+	},
 	"action.close": {
 		"defaultMessage": "閉じる"
 	},

frontend/src/locale/src/nl.json

@@ -38,6 +38,9 @@
 	"action.add-location": {
 		"defaultMessage": "Locatie Toevoegen"
 	},
+	"action.clone": {
+		"defaultMessage": "Klonen"
+	},
 	"action.close": {
 		"defaultMessage": "Sluiten"
 	},
@@ -644,4 +647,4 @@
 	"users": {
 		"defaultMessage": "Gebruikers"
 	}
-}
+}

frontend/src/locale/src/pl.json

@@ -38,6 +38,9 @@
 	"action.add-location": {
 		"defaultMessage": "Dodaj lokalizację"
 	},
+	"action.clone": {
+		"defaultMessage": "Klonuj"
+	},
 	"action.close": {
 		"defaultMessage": "Zamknij"
 	},

frontend/src/locale/src/ru.json

@@ -38,6 +38,9 @@
 	"action.add-location": {
 		"defaultMessage": "Добавить маршрут"
 	},
+	"action.clone": {
+		"defaultMessage": "Клонировать"
+	},
 	"action.close": {
 		"defaultMessage": "Закрыть"
 	},

frontend/src/locale/src/sk.json

@@ -38,6 +38,9 @@
 	"action.add-location": {
 		"defaultMessage": "Pridať umiestnenie"
 	},
+	"action.clone": {
+		"defaultMessage": "Klonovať"
+	},
 	"action.close": {
 		"defaultMessage": "Zavrieť"
 	},

frontend/src/locale/src/vi.json

@@ -38,6 +38,9 @@
 	"action.add-location": {
 		"defaultMessage": "Thêm Vị trí"
 	},
+	"action.clone": {
+		"defaultMessage": "Nhân bản"
+	},
 	"action.close": {
 		"defaultMessage": "Đóng"
 	},

frontend/src/locale/src/zh.json

@@ -38,6 +38,9 @@
 	"action.add-location": {
 		"defaultMessage": "添加路径规则(Location)"
 	},
+	"action.clone": {
+		"defaultMessage": "克隆"
+	},
 	"action.close": {
 		"defaultMessage": "关闭"
 	},

frontend/src/modals/ProxyHostModal.tsx

@@ -22,14 +22,12 @@ import { MANAGE, PROXY_HOSTS } from "src/modules/Permissions";
 import { validateNumber, validateString } from "src/modules/Validations";
 import { showObjectSuccess } from "src/notifications";
 
-const showProxyHostModal = (id: number | "new") => {
-	EasyModal.show(ProxyHostModal, { id });
-};
-
 interface Props extends InnerModalProps {
 	id: number | "new";
+	isClone?: boolean;
 }
-const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
+
+const ProxyHostModal = EasyModal.create(({ id, isClone = false, visible, remove }: Props) => {
 	const { data: currentUser, isLoading: userIsLoading, error: userError } = useUser("me");
 	const { data, isLoading, error } = useProxyHost(id);
 	const { mutate: setProxyHost } = useSetProxyHost();
@@ -42,7 +40,7 @@ const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
 		setErrorMsg(null);
 
 		const { ...payload } = {
-			id: id === "new" ? undefined : id,
+			id: id === "new" || isClone ? undefined : id,
 			...values,
 		};
 
@@ -99,7 +97,7 @@ const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
 						<Form>
 							<Modal.Header closeButton>
 								<Modal.Title>
-									<T id={data?.id ? "object.edit" : "object.add"} tData={{ object: "proxy-host" }} />
+									<T id={isClone ? "object.add" : data?.id ? "object.edit" : "object.add"} tData={{ object: "proxy-host" }} />
 								</Modal.Title>
 							</Modal.Header>
 							<Modal.Body className="p-0">
@@ -373,4 +371,8 @@ const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
 	);
 });
 
+const showProxyHostModal = (id: number | "new", isClone = false) => {
+	EasyModal.show(ProxyHostModal, { id, isClone } as Omit<Props, "visible" | "remove">);
+};
+
 export { showProxyHostModal };

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

@@ -1,4 +1,4 @@
-import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
+import { IconCopy, IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
 import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { ProxyHost } from "src/api/backend";
@@ -20,11 +20,12 @@ interface Props {
 	isFiltered?: boolean;
 	isFetching?: boolean;
 	onEdit?: (id: number) => void;
+	onClone?: (id: number) => void;
 	onDelete?: (id: number) => void;
 	onDisableToggle?: (id: number, enabled: boolean) => void;
 	onNew?: () => void;
 }
-export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
+export default function Table({ data, isFetching, onEdit, onClone, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
 	const columnHelper = createColumnHelper<ProxyHost>();
 	const columns = useMemo(
 		() => [
@@ -107,6 +108,17 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 									<IconEdit size={16} />
 									<T id="action.edit" />
 								</a>
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onClone?.(info.row.original.id);
+									}}
+								>
+									<IconCopy size={16} />
+									<T id="action.clone" />
+								</a>
 								<HasPermission section={PROXY_HOSTS} permission={MANAGE} hideError>
 									<a
 										className="dropdown-item"
@@ -141,7 +153,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 				},
 			}),
 		],
-		[columnHelper, onEdit, onDisableToggle, onDelete],
+		[columnHelper, onEdit, onClone, onDisableToggle, onDelete],
 	);
 
 	const tableInstance = useReactTable<ProxyHost>({

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

@@ -99,6 +99,7 @@ export default function TableWrapper() {
 					isFiltered={!!search}
 					isFetching={isFetching}
 					onEdit={(id: number) => showProxyHostModal(id)}
+					onClone={(id: number) => showProxyHostModal(id, true)}
 					onDelete={(id: number) =>
 						showDeleteConfirmModal({
 							title: <T id="object.delete" tData={{ object: "proxy-host" }} />,