From 18dcba6b3fc97a93a3392130d3c7c1843999d568 Mon Sep 17 00:00:00 2001 From: Bernt Christian Egeland Date: Thu, 9 May 2024 04:11:33 +0000 Subject: [PATCH 1/2] allow copy network id in network page --- src/components/networkPage/networkTable.tsx | 25 ++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/networkPage/networkTable.tsx b/src/components/networkPage/networkTable.tsx index 02d6aa95..170879a9 100644 --- a/src/components/networkPage/networkTable.tsx +++ b/src/components/networkPage/networkTable.tsx @@ -18,6 +18,9 @@ import { getLocalStorageItem, setLocalStorageItem } from "~/utils/localstorage"; import TableFooter from "../shared/tableFooter"; import { useModalStore } from "~/utils/store"; import NetworkOptionsModal from "./networkOptionsModal"; +import { CopyToClipboard } from "react-copy-to-clipboard"; +import toast from "react-hot-toast"; +import CopyIcon from "~/icons/copy"; const LOCAL_STORAGE_KEY = "networkTableSorting"; @@ -41,7 +44,9 @@ const TruncateText = ({ text }: { text: string }) => { export const NetworkTable = ({ tableData = [] }) => { const router = useRouter(); const t = useTranslations("networks"); + const n = useTranslations("networkById"); const ct = useTranslations("commonTable"); + const { callModal } = useModalStore((state) => state); // Load initial state from localStorage or set to default @@ -73,9 +78,27 @@ export const NetworkTable = ({ tableData = [] }) => { header: () => {ct("header.description")}, }), columnHelper.accessor("nwid", { - cell: (info) => info.getValue(), + // cell: (info) => info.getValue(), header: () => {ct("header.networkId")}, // footer: (info) => info.column.id, + cell: ({ row: { original } }) => { + return ( +
e.stopPropagation()}> + { + toast.success(n("copyToClipboard.success", { element: original.nwid })); + }} + title={n("copyToClipboard.title")} + > +
+ {original.nwid} + +
+ +
+ ); + }, }), columnHelper.accessor("members", { header: () => {ct("header.members")}, From 707c401805eb47dbbc59b4168bb9a11fda81802e Mon Sep 17 00:00:00 2001 From: Bernt Christian Egeland Date: Thu, 9 May 2024 04:37:08 +0000 Subject: [PATCH 2/2] add id to org network --- .../networkByIdPage/networkQrCode.tsx | 6 +- .../networkByIdPage/table/memberEditCell.tsx | 27 ++++--- .../networkPage/centralNetworkTable.tsx | 38 ++++++++-- src/components/networkPage/networkTable.tsx | 26 +++---- src/components/organization/networkTable.tsx | 44 +++++++++--- src/locales/en/common.json | 10 +-- src/locales/es/common.json | 10 +-- src/locales/fr/common.json | 10 +-- src/locales/no/common.json | 10 +-- src/locales/pl/common.json | 12 ++-- src/locales/zh-tw/common.json | 10 +-- src/locales/zh/common.json | 10 +-- src/pages/central/[id].tsx | 60 +++++++++------- src/pages/network/[id].tsx | 72 +++++++++++-------- src/pages/organization/[orgid]/[id].tsx | 62 +++++++++------- 15 files changed, 247 insertions(+), 160 deletions(-) diff --git a/src/components/networkByIdPage/networkQrCode.tsx b/src/components/networkByIdPage/networkQrCode.tsx index 80e79697..ad69023d 100644 --- a/src/components/networkByIdPage/networkQrCode.tsx +++ b/src/components/networkByIdPage/networkQrCode.tsx @@ -15,7 +15,7 @@ const urlBuilder = (networkId: string) => { }; const NetworkQrCode = ({ networkId }: IProps) => { - const t = useTranslations("networkById"); + const t = useTranslations(); const [themeRGBColor, setThemeRGBColor] = useState(""); const { theme } = useTheme(); @@ -28,7 +28,7 @@ const NetworkQrCode = ({ networkId }: IProps) => { text={urlBuilder(networkId)} onCopy={() => toast.success( - t("copyToClipboard.success", { + t("commonToast.copyToClipboard.success", { element: urlBuilder(networkId), }), { @@ -36,7 +36,7 @@ const NetworkQrCode = ({ networkId }: IProps) => { }, ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} > { - const c = useTranslations("commonTable"); - const t = useTranslations("networkById"); + const t = useTranslations(); const handleApiError = useTrpcApiErrorHandler(); const handleApiSuccess = useTrpcApiSuccessHandler(); @@ -42,7 +41,9 @@ const MemberEditCell = ({ nwid, central = false, organizationId }: IProp) => { onError: handleApiError, onSuccess: handleApiSuccess({ actions: [refetchNetworkById], - toastMessage: t("networkMembersTable.toastMessages.memberNameUpdated"), + toastMessage: t( + "networkById.networkMembersTable.toastMessages.memberNameUpdated", + ), }), }); @@ -122,7 +123,7 @@ const MemberEditCell = ({ nwid, central = false, organizationId }: IProp) => { setValue(e.target.value)} onBlur={onBlur} @@ -140,7 +141,11 @@ const MemberEditCell = ({ nwid, central = false, organizationId }: IProp) => { const has6plane = networkById?.network?.v6AssignMode?.["6plane"]; if (!original.ipAssignments?.length && !hasRfc4193 && !has6plane) { - return

{c("header.ipAssignments.notAssigned")}

; + return ( +

+ {t("commonTable.header.ipAssignments.notAssigned")} +

+ ); } const rfc4193Ip = hasRfc4193 ? toRfc4193Ip(nwid, original?.id) : undefined; @@ -150,8 +155,10 @@ const MemberEditCell = ({ nwid, central = false, organizationId }: IProp) => { return hasIp ? ( toast.success(t("copyToClipboard.success", { element: ip }))} - title={t("copyToClipboard.title")} + onCopy={() => + toast.success(t("commonToast.copyToClipboard.success", { element: ip })) + } + title={t("commonToast.copyToClipboard.title")} >
{ip}
@@ -181,10 +188,12 @@ const MemberEditCell = ({ nwid, central = false, organizationId }: IProp) => { text={assignedIp} onCopy={() => toast.success( - t("copyToClipboard.success", { element: assignedIp }), + t("commonToast.copyToClipboard.success", { + element: assignedIp, + }), ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
{assignedIp}
diff --git a/src/components/networkPage/centralNetworkTable.tsx b/src/components/networkPage/centralNetworkTable.tsx index cb41b76d..134ec106 100644 --- a/src/components/networkPage/centralNetworkTable.tsx +++ b/src/components/networkPage/centralNetworkTable.tsx @@ -16,6 +16,9 @@ import { useTranslations } from "next-intl"; import { CentralMemberEntity } from "~/types/central/members"; import { getLocalStorageItem, setLocalStorageItem } from "~/utils/localstorage"; import TableFooter from "~/components/shared/tableFooter"; +import { CopyToClipboard } from "react-copy-to-clipboard"; +import toast from "react-hot-toast"; +import CopyIcon from "~/icons/copy"; // import { makeNetworkData } from "../../utils/fakeData"; const TruncateText = ({ text }: { text: string }) => { @@ -43,7 +46,8 @@ export const CentralNetworkTable = ({ tableData = [] }) => { ]); const router = useRouter(); - const t = useTranslations("commonTable"); + const t = useTranslations(); + const [globalFilter, setGlobalFilter] = useState(""); const [sorting, setSorting] = useState(initialSortingState); @@ -53,20 +57,40 @@ export const CentralNetworkTable = ({ tableData = [] }) => { () => [ columnHelper.accessor("name", { cell: (info) => info.getValue(), - header: () => {t("header.name")}, + header: () => {t("commonTable.header.name")}, }), columnHelper.accessor("description", { size: 300, cell: (info) => , - header: () => {t("header.description")}, + header: () => {t("commonTable.header.description")}, }), columnHelper.accessor("nwid", { - cell: (info) => info.getValue(), - header: () => {t("header.networkId")}, + // cell: (info) => info.getValue(), + header: () => {t("commonTable.header.networkId")}, // footer: (info) => info.column.id, + cell: ({ row: { original } }) => { + return ( +
e.stopPropagation()}> + { + toast.success( + t("commonToast.copyToClipboard.success", { element: original.nwid }), + ); + }} + title={t("commonToast.copyToClipboard.title")} + > +
+ {original.nwid} + +
+ +
+ ); + }, }), columnHelper.accessor("totalMemberCount", { - header: () => {t("header.members")}, + header: () => {t("commonTable.header.members")}, cell: (info) => info.getValue(), }), ], @@ -130,7 +154,7 @@ export const CentralNetworkTable = ({ tableData = [] }) => { value={globalFilter ?? ""} onChange={(value) => setGlobalFilter(String(value))} className="font-lg border-block border p-2 shadow" - placeholder={t("search.networkSearchPlaceholder")} + placeholder={t("commonTable.search.networkSearchPlaceholder")} />
diff --git a/src/components/networkPage/networkTable.tsx b/src/components/networkPage/networkTable.tsx index 170879a9..4f29798f 100644 --- a/src/components/networkPage/networkTable.tsx +++ b/src/components/networkPage/networkTable.tsx @@ -43,9 +43,7 @@ const TruncateText = ({ text }: { text: string }) => { }; export const NetworkTable = ({ tableData = [] }) => { const router = useRouter(); - const t = useTranslations("networks"); - const n = useTranslations("networkById"); - const ct = useTranslations("commonTable"); + const t = useTranslations(); const { callModal } = useModalStore((state) => state); @@ -70,16 +68,16 @@ export const NetworkTable = ({ tableData = [] }) => { () => [ columnHelper.accessor("name", { cell: (info) => info.getValue(), - header: () => {ct("header.name")}, + header: () => {t("commonTable.header.name")}, }), columnHelper.accessor("description", { size: 300, cell: (info) => , - header: () => {ct("header.description")}, + header: () => {t("commonTable.header.description")}, }), columnHelper.accessor("nwid", { // cell: (info) => info.getValue(), - header: () => {ct("header.networkId")}, + header: () => {t("commonTable.header.networkId")}, // footer: (info) => info.column.id, cell: ({ row: { original } }) => { return ( @@ -87,9 +85,11 @@ export const NetworkTable = ({ tableData = [] }) => { { - toast.success(n("copyToClipboard.success", { element: original.nwid })); + toast.success( + t("commonToast.copyToClipboard.success", { element: original.nwid }), + ); }} - title={n("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
{original.nwid} @@ -101,14 +101,14 @@ export const NetworkTable = ({ tableData = [] }) => { }, }), columnHelper.accessor("members", { - header: () => {ct("header.members")}, + header: () => {t("commonTable.header.members")}, cell: ({ row: { original } }) => { if (!Array.isArray(original.networkMembers)) return 0; return {original.networkMembers.length}; }, }), columnHelper.accessor("action", { - header: () => {ct("header.actions")}, + header: () => {t("commonTable.header.actions")}, id: "action", cell: ({ row: { original } }) => { return ( @@ -120,7 +120,7 @@ export const NetworkTable = ({ tableData = [] }) => { title: (

- {t.rich("networkActionModal.modalTitle", { + {t.rich("networks.networkActionModal.modalTitle", { span: (children) => ( {children} ), @@ -135,7 +135,7 @@ export const NetworkTable = ({ tableData = [] }) => { }} className="btn btn-outline btn-xs rounded-sm" > - {ct("cell.Options")} + {t("commonTable.cell.Options")}

); @@ -201,7 +201,7 @@ export const NetworkTable = ({ tableData = [] }) => { value={globalFilter ?? ""} onChange={(value) => setGlobalFilter(String(value))} className="font-lg border-block border p-2 shadow" - placeholder={ct("search.networkSearchPlaceholder")} + placeholder={t("commonTable.search.networkSearchPlaceholder")} />
diff --git a/src/components/organization/networkTable.tsx b/src/components/organization/networkTable.tsx index 4a553b88..bd9193e1 100644 --- a/src/components/organization/networkTable.tsx +++ b/src/components/organization/networkTable.tsx @@ -16,6 +16,9 @@ import { useTranslations } from "next-intl"; import { CentralMemberEntity } from "~/types/central/members"; import { getLocalStorageItem, setLocalStorageItem } from "~/utils/localstorage"; import TableFooter from "~/components/shared/tableFooter"; +import { CopyToClipboard } from "react-copy-to-clipboard"; +import toast from "react-hot-toast"; +import CopyIcon from "~/icons/copy"; // import { makeNetworkData } from "../../utils/fakeData"; const TruncateText = ({ text }: { text: string }) => { @@ -47,7 +50,8 @@ export const OrganizationNetworkTable = ({ tableData = [] }) => { ]); const router = useRouter(); - const t = useTranslations("commonTable"); + const t = useTranslations(); + const [globalFilter, setGlobalFilter] = useState(""); const [sorting, setSorting] = useState(initialSortingState); @@ -57,20 +61,40 @@ export const OrganizationNetworkTable = ({ tableData = [] }) => { () => [ columnHelper.accessor("name", { cell: (info) => {info.getValue()}, - header: () => {t("header.name")}, + header: () => {t("commonTable.header.name")}, }), columnHelper.accessor("description", { size: 300, cell: (info) => , - header: () => {t("header.description")}, + header: () => {t("commonTable.header.description")}, + }), + columnHelper.accessor("nwid", { + // cell: (info) => info.getValue(), + header: () => {t("commonTable.header.networkId")}, + // footer: (info) => info.column.id, + cell: ({ row: { original } }) => { + return ( +
e.stopPropagation()}> + { + toast.success( + t("commonToast.copyToClipboard.success", { element: original.nwid }), + ); + }} + title={t("commonToast.copyToClipboard.title")} + > +
+ {original.nwid} + +
+ +
+ ); + }, }), - // columnHelper.accessor("nwid", { - // cell: (info) => info.getValue(), - // header: () => {t("networkId")}, - // // footer: (info) => info.column.id, - // }), columnHelper.accessor("networkMembers", { - header: () => {t("header.members")}, + header: () => {t("commonTable.header.members")}, cell: (info) => { const data = info.getValue(); return data.length; @@ -137,7 +161,7 @@ export const OrganizationNetworkTable = ({ tableData = [] }) => { value={globalFilter ?? ""} onChange={(value) => setGlobalFilter(String(value))} className="font-lg border-block border p-2 shadow" - placeholder={t("search.networkSearchPlaceholder")} + placeholder={t("commonTable.search.networkSearchPlaceholder")} />
diff --git a/src/locales/en/common.json b/src/locales/en/common.json index c4dc222a..02406b3b 100644 --- a/src/locales/en/common.json +++ b/src/locales/en/common.json @@ -84,7 +84,11 @@ "deletedSuccessfully": "Deleted successfully", "errorOccurred": "An unknown error occurred", "organizationDeleted": "Organization deleted successfully", - "sentSuccessfully": "Sent successfully" + "sentSuccessfully": "Sent successfully", + "copyToClipboard": { + "title": "copy to clipboard", + "success": "{element} copied to clipboard" + } }, "sidebar": { "navigation": "Home", @@ -153,10 +157,6 @@ "yesAction": "Yes, delete it", "noAction": "No, keep it" }, - "copyToClipboard": { - "title": "copy to clipboard", - "success": "{element} copied to clipboard" - }, "privatePublicSwitch": { "accessControllMessage": "Your network is now {authType}", "privateCardTitle": "Private", diff --git a/src/locales/es/common.json b/src/locales/es/common.json index e75035f0..ac03d9ab 100644 --- a/src/locales/es/common.json +++ b/src/locales/es/common.json @@ -84,7 +84,11 @@ "deletedSuccessfully": "Eliminado con éxito", "errorOccurred": "Ocurrió un error desconocido", "organizationDeleted": "Organización eliminada con éxito", - "sentSuccessfully": "Enviado con éxito" + "sentSuccessfully": "Enviado con éxito", + "copyToClipboard": { + "title": "copiar al portapapeles", + "success": "{element} copiado al portapapeles" + } }, "sidebar": { "navigation": "Inicio", @@ -153,10 +157,6 @@ "yesAction": "Sí, eliminar", "noAction": "No, conservarlo" }, - "copyToClipboard": { - "title": "copiar al portapapeles", - "success": "{element} copiado al portapapeles" - }, "privatePublicSwitch": { "accessControllMessage": "Tu red es ahora {authType}", "privateCardTitle": "Privado", diff --git a/src/locales/fr/common.json b/src/locales/fr/common.json index 41f673c3..7dd72dd1 100644 --- a/src/locales/fr/common.json +++ b/src/locales/fr/common.json @@ -84,7 +84,11 @@ "deletedSuccessfully": "Supprimé avec succès", "errorOccurred": "Une erreur inconnue est survenue", "organizationDeleted": "Organisation supprimée avec succès", - "sentSuccessfully": "Envoyé avec succès" + "sentSuccessfully": "Envoyé avec succès", + "copyToClipboard": { + "title": "copier dans le presse-papier", + "success": "{element} copié dans le presse-papier" + } }, "sidebar": { "navigation": "Accueil", @@ -153,10 +157,6 @@ "yesAction": "Oui, supprime-le", "noAction": "Non, garde-le" }, - "copyToClipboard": { - "title": "copier dans le presse-papier", - "success": "{element} copié dans le presse-papier" - }, "privatePublicSwitch": { "accessControllMessage": "Votre réseau est maintenant {authType}", "privateCardTitle": "Privé", diff --git a/src/locales/no/common.json b/src/locales/no/common.json index 7b54864f..35a9ec05 100644 --- a/src/locales/no/common.json +++ b/src/locales/no/common.json @@ -84,7 +84,11 @@ "deletedSuccessfully": "Slettet vellykket", "errorOccurred": "En ukjent feil oppstod", "organizationDeleted": "Organisasjonen ble slettet vellykket", - "sentSuccessfully": "Sending vellykket" + "sentSuccessfully": "Sending vellykket", + "copyToClipboard": { + "title": "kopier til utklippstavlen", + "success": "{element} kopiert til utklippstavlen" + } }, "sidebar": { "navigation": "Hjem", @@ -153,10 +157,6 @@ "yesAction": "Ja, slett det", "noAction": "Nei, behold det" }, - "copyToClipboard": { - "title": "kopier til utklippstavlen", - "success": "{element} kopiert til utklippstavlen" - }, "privatePublicSwitch": { "accessControllMessage": "Nettverket ditt er nå {authType}", "privateCardTitle": "Privat", diff --git a/src/locales/pl/common.json b/src/locales/pl/common.json index 11296957..b5da02f1 100644 --- a/src/locales/pl/common.json +++ b/src/locales/pl/common.json @@ -84,7 +84,11 @@ "deletedSuccessfully": "Usunięto pomyślnie", "errorOccurred": "Wystąpił nieznany błąd", "organizationDeleted": "Organizacja została pomyślnie usunięta", - "sentSuccessfully": "Wysłano pomyślnie" + "sentSuccessfully": "Wysłano pomyślnie", + "copyToClipboard": { + "title": "skopiuj do schowka", + "success": "{element} skopiowano do schowka" + } }, "sidebar": { "navigation": "Nawigacja", @@ -153,10 +157,6 @@ "yesAction": "Tak, usuń ją", "noAction": "Nie, zostaw ją" }, - "copyToClipboard": { - "title": "skopiuj do schowka", - "success": "{element} skopiowano do schowka" - }, "privatePublicSwitch": { "accessControllMessage": "Twoja sieć jest teraz {authType}", "privateCardTitle": "Prywatna", @@ -763,4 +763,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/locales/zh-tw/common.json b/src/locales/zh-tw/common.json index f1ed8e1a..2d7acdbe 100644 --- a/src/locales/zh-tw/common.json +++ b/src/locales/zh-tw/common.json @@ -84,7 +84,11 @@ "deletedSuccessfully": "成功刪除", "errorOccurred": "發生未知錯誤", "organizationDeleted": "組織成功刪除", - "sentSuccessfully": "成功發送" + "sentSuccessfully": "成功發送", + "copyToClipboard": { + "title": "複製到剪貼簿", + "success": "{element} 已複製到剪貼簿" + } }, "sidebar": { "navigation": "首頁", @@ -153,10 +157,6 @@ "yesAction": "是的，刪除它", "noAction": "不，保留它" }, - "copyToClipboard": { - "title": "複製到剪貼簿", - "success": "{element} 已複製到剪貼簿" - }, "privatePublicSwitch": { "accessControllMessage": "你的網路現在是 {authType}", "privateCardTitle": "私人", diff --git a/src/locales/zh/common.json b/src/locales/zh/common.json index 30b40960..077f58bb 100644 --- a/src/locales/zh/common.json +++ b/src/locales/zh/common.json @@ -84,7 +84,11 @@ "deletedSuccessfully": "成功删除", "errorOccurred": "发生未知错误", "organizationDeleted": "组织成功删除", - "sentSuccessfully": "发送成功" + "sentSuccessfully": "发送成功", + "copyToClipboard": { + "title": "复制到剪贴板", + "success": "{element} 已复制到剪贴板" + } }, "sidebar": { "navigation": "首页", @@ -153,10 +157,6 @@ "yesAction": "是的，删除它", "noAction": "不，保留它" }, - "copyToClipboard": { - "title": "复制到剪贴板", - "success": "{element} 已复制到剪贴板" - }, "privatePublicSwitch": { "accessControllMessage": "你的网络现在是 {authType}", "privateCardTitle": "私人", diff --git a/src/pages/central/[id].tsx b/src/pages/central/[id].tsx index cc0f07b4..66e0321f 100644 --- a/src/pages/central/[id].tsx +++ b/src/pages/central/[id].tsx @@ -37,7 +37,7 @@ const HeadSection = ({ title }: { title: string }) => ( ); const CentralNetworkById = ({ orgIds }) => { - const t = useTranslations("networkById"); + const t = useTranslations(); // const [state, setState] = useState({ // viewZombieTable: false, // }); @@ -80,8 +80,8 @@ const CentralNetworkById = ({ orgIds }) => {

{errorNetwork.message}

    -
  • {t("errorSteps.step1")}
    • -
  • {t("errorSteps.step2")}
    • +
  • {t("networkById.errorSteps.step1")}
    • +
  • {t("networkById.errorSteps.step2")}
@@ -95,19 +95,21 @@ const CentralNetworkById = ({ orgIds }) => {
- {t("networkId")} + {t("networkById.networkId")} toast.success( - t("copyToClipboard.success", { element: network?.nwid }), + t("commonToast.copyToClipboard.success", { + element: network?.nwid, + }), { id: "copyNwid", }, ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
{network?.nwid} @@ -130,39 +132,41 @@ const CentralNetworkById = ({ orgIds }) => {
- {t("networkStart")}{" "} + + {t("networkById.networkStart")} + {" "} - {network?.ipAssignmentPools?.[0]?.ipRangeStart || t("notSet")} + {network?.ipAssignmentPools?.[0]?.ipRangeStart || t("networkById.notSet")}
- {t("networkEnd")}{" "} + {t("networkById.networkEnd")}{" "} - {network?.ipAssignmentPools?.[0]?.ipRangeEnd || t("notSet")} + {network?.ipAssignmentPools?.[0]?.ipRangeEnd || t("networkById.notSet")}
- {t("networkCidr")}{" "} + {t("networkById.networkCidr")}{" "} - {network?.routes?.[0]?.target || t("notSet")} + {network?.routes?.[0]?.target || t("networkById.notSet")}
- {t("networkSettings")} + {t("networkById.networkSettings")}
{/* Ipv4 assignment */} @@ -192,7 +196,7 @@ const CentralNetworkById = ({ orgIds }) => {
- {t("networkMembers")} + {t("networkById.networkMembers")}
{members?.length ? ( @@ -216,21 +220,24 @@ const CentralNetworkById = ({ orgIds }) => {
-

{t("noMembersInformation.title")}

+

{t("networkById.noMembersInformation.title")}

-

{t("noMembersInformation.installZerotier")}

+

{t("networkById.noMembersInformation.installZerotier")}

- toast.success(t("copyToClipboard.success", { element: "" }), { - id: "copyNwid", - }) + toast.success( + t("commonToast.copyToClipboard.success", { element: "" }), + { + id: "copyNwid", + }, + ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
@@ -243,17 +250,20 @@ const CentralNetworkById = ({ orgIds }) => {
-

{t("noMembersInformation.joinNetwork")}

+

{t("networkById.noMembersInformation.joinNetwork")}

- toast.success(t("copyToClipboard.success", { element: "" }), { - id: "copyNwid", - }) + toast.success( + t("commonToast.copyToClipboard.success", { element: "" }), + { + id: "copyNwid", + }, + ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
zerotier-cli join {network.nwid} diff --git a/src/pages/network/[id].tsx b/src/pages/network/[id].tsx index 32969390..8bb9dee9 100644 --- a/src/pages/network/[id].tsx +++ b/src/pages/network/[id].tsx @@ -45,8 +45,8 @@ interface IProps { } const NetworkById = ({ orgIds }: IProps) => { - const b = useTranslations("commonButtons"); - const t = useTranslations("networkById"); + const t = useTranslations(); + const [state, setState] = useState({ viewZombieTable: false, isDebug: false, @@ -77,8 +77,8 @@ const NetworkById = ({ orgIds }: IProps) => {

{errorNetwork.message}

    -
  • {t("errorSteps.step1")}
    • -
  • {t("errorSteps.step2")}
    • +
  • {t("networkById.errorSteps.step1")}
    • +
  • {t("networkById.errorSteps.step2")}
Network Actions @@ -127,19 +127,21 @@ const NetworkById = ({ orgIds }: IProps) => {
- {t("networkId")} + {t("networkById.networkId")} toast.success( - t("copyToClipboard.success", { element: network?.nwid }), + t("commonToast.copyToClipboard.success", { + element: network?.nwid, + }), { id: "copyNwid", }, ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
{network?.nwid} @@ -162,39 +164,41 @@ const NetworkById = ({ orgIds }: IProps) => {
- {t("networkStart")}{" "} + + {t("networkById.networkStart")} + {" "} - {network?.ipAssignmentPools[0]?.ipRangeStart || t("notSet")} + {network?.ipAssignmentPools[0]?.ipRangeStart || t("networkById.notSet")}
- {t("networkEnd")}{" "} + {t("networkById.networkEnd")}{" "} - {network?.ipAssignmentPools[0]?.ipRangeEnd || t("notSet")} + {network?.ipAssignmentPools[0]?.ipRangeEnd || t("networkById.notSet")}
- {t("networkCidr")}{" "} + {t("networkById.networkCidr")}{" "} - {network?.routes[0]?.target || t("notSet")} + {network?.routes[0]?.target || t("networkById.notSet")}
- {t("networkSettings")} + {t("networkById.networkSettings")}
{/* Ipv4 assignment */} @@ -223,7 +227,7 @@ const NetworkById = ({ orgIds }: IProps) => {
- {t("networkMembers")} + {t("networkById.networkMembers")}
{members.length ? ( @@ -247,21 +251,24 @@ const NetworkById = ({ orgIds }: IProps) => {
-

{t("noMembersInformation.title")}

+

{t("networkById.noMembersInformation.title")}

-

{t("noMembersInformation.installZerotier")}

+

{t("networkById.noMembersInformation.installZerotier")}

- toast.success(t("copyToClipboard.success", { element: "" }), { - id: "copyNwid", - }) + toast.success( + t("commonToast.copyToClipboard.success", { element: "" }), + { + id: "copyNwid", + }, + ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
@@ -274,17 +281,20 @@ const NetworkById = ({ orgIds }: IProps) => {
-

{t("noMembersInformation.joinNetwork")}

+

{t("networkById.noMembersInformation.joinNetwork")}

- toast.success(t("copyToClipboard.success", { element: "" }), { - id: "copyNwid", - }) + toast.success( + t("commonToast.copyToClipboard.success", { element: "" }), + { + id: "copyNwid", + }, + ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
zerotier-cli join {network.nwid} @@ -317,7 +327,7 @@ const NetworkById = ({ orgIds }: IProps) => { } className="btn btn-wide" > - {t("deletedNetworkMembersTable.buttons.viewStashedMembers")} ( + {t("networkById.deletedNetworkMembersTable.buttons.viewStashedMembers")} ( {networkById?.zombieMembers?.length}) @@ -346,17 +356,17 @@ const NetworkById = ({ orgIds }: IProps) => {
*/}
- {t("networkActions")} + {t("networkById.networkActions")}
diff --git a/src/pages/organization/[orgid]/[id].tsx b/src/pages/organization/[orgid]/[id].tsx index f578362a..6923f0b2 100644 --- a/src/pages/organization/[orgid]/[id].tsx +++ b/src/pages/organization/[orgid]/[id].tsx @@ -36,7 +36,7 @@ interface IProps { } const OrganizationNetworkById = ({ orgIds }: IProps) => { - const t = useTranslations("networkById"); + const t = useTranslations(); const [state, setState] = useState({ viewZombieTable: false, isDebug: false, @@ -68,8 +68,8 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {

{errorNetwork.message}

    -
  • {t("errorSteps.step1")}
    • -
  • {t("errorSteps.step2")}
    • +
  • {t("networkById.errorSteps.step1")}
    • +
  • {t("networkById.errorSteps.step2")}
Network Actions @@ -121,17 +121,19 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
{/* Network ID */}
- {t("networkId")} + {t("networkById.networkId")} toast.success( - t("copyToClipboard.success", { element: network?.nwid }), + t("commonToast.copyToClipboard.success", { + element: network?.nwid, + }), { id: "copyNwid" }, ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
{network?.nwid} @@ -158,39 +160,41 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
- {t("networkStart")}{" "} + + {t("networkById.networkStart")} + {" "} - {network?.ipAssignmentPools[0]?.ipRangeStart || t("notSet")} + {network?.ipAssignmentPools[0]?.ipRangeStart || t("networkById.notSet")}
- {t("networkEnd")}{" "} + {t("networkById.networkEnd")}{" "} - {network?.ipAssignmentPools[0]?.ipRangeEnd || t("notSet")} + {network?.ipAssignmentPools[0]?.ipRangeEnd || t("networkById.notSet")}
- {t("networkCidr")}{" "} + {t("networkById.networkCidr")}{" "} - {network?.routes[0]?.target || t("notSet")} + {network?.routes[0]?.target || t("networkById.notSet")}
- {t("networkSettings")} + {t("networkById.networkSettings")}
{/* Ipv4 assignment */} @@ -219,7 +223,7 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
- {t("networkMembers")} + {t("networkById.networkMembers")}
{members.length ? ( @@ -247,21 +251,24 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
-

{t("noMembersInformation.title")}

+

{t("networkById.noMembersInformation.title")}

-

{t("noMembersInformation.installZerotier")}

+

{t("networkById.noMembersInformation.installZerotier")}

- toast.success(t("copyToClipboard.success", { element: "" }), { - id: "copyNwid", - }) + toast.success( + t("commonToast.copyToClipboard.success", { element: "" }), + { + id: "copyNwid", + }, + ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
@@ -274,17 +281,20 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
-

{t("noMembersInformation.joinNetwork")}

+

{t("networkById.noMembersInformation.joinNetwork")}

- toast.success(t("copyToClipboard.success", { element: "" }), { - id: "copyNwid", - }) + toast.success( + t("commonToast.copyToClipboard.success", { element: "" }), + { + id: "copyNwid", + }, + ) } - title={t("copyToClipboard.title")} + title={t("commonToast.copyToClipboard.title")} >
zerotier-cli join {network.nwid} @@ -317,7 +327,7 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => { } className="btn btn-wide" > - {t("deletedNetworkMembersTable.buttons.viewStashedMembers")} ( + {t("networkById.deletedNetworkMembersTable.buttons.viewStashedMembers")} ( {networkById?.zombieMembers?.length})