Locales cleanup

frontend/src/api/npm/createCertificate.ts

@@ -0,0 +1,16 @@
+import * as api from "./base";
+import { Certificate } from "./models";
+
+export async function createCertificate(
+	data: Certificate,
+	abortController?: AbortController,
+): Promise<Certificate> {
+	const { result } = await api.post(
+		{
+			url: "/certificates",
+			data,
+		},
+		abortController,
+	);
+	return result;
+}

frontend/src/api/npm/getCertificate.ts

@@ -0,0 +1,13 @@
+import * as api from "./base";
+import { Certificate } from "./models";
+
+export async function getCertificate(
+	id: number,
+	params = {},
+): Promise<Certificate> {
+	const { result } = await api.get({
+		url: `/certificates/${id}`,
+		params,
+	});
+	return result;
+}

frontend/src/api/npm/index.ts

@@ -1,7 +1,9 @@
+export * from "./createCertificate";
 export * from "./createCertificateAuthority";
 export * from "./createDNSProvider";
 export * from "./createUser";
 export * from "./getAccessLists";
+export * from "./getCertificate";
 export * from "./getCertificateAuthorities";
 export * from "./getCertificateAuthority";
 export * from "./getCertificates";
@@ -22,6 +24,7 @@ export * from "./models";
 export * from "./refreshToken";
 export * from "./responseTypes";
 export * from "./setAuth";
+export * from "./setCertificate";
 export * from "./setCertificateAuthority";
 export * from "./setDNSProvider";
 export * from "./setUser";

frontend/src/api/npm/setCertificate.ts

@@ -0,0 +1,17 @@
+import * as api from "./base";
+import { Certificate } from "./models";
+
+export async function setCertificate(
+	id: number,
+	data: any,
+): Promise<Certificate> {
+	if (data.id) {
+		delete data.id;
+	}
+
+	const { result } = await api.put({
+		url: `/certificates/${id}`,
+		data,
+	});
+	return result;
+}

frontend/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from "./useAccessLists";
+export * from "./useCertificate";
 export * from "./useCertificateAuthorities";
 export * from "./useCertificateAuthority";
 export * from "./useCertificates";

frontend/src/hooks/useCertificate.ts

@@ -0,0 +1,56 @@
+import {
+	createCertificate,
+	getCertificate,
+	setCertificate,
+	Certificate,
+} from "api/npm";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+
+const fetchCertificate = (id: any) => {
+	return getCertificate(id);
+};
+
+const useCertificate = (id: number, options = {}) => {
+	return useQuery<Certificate, Error>(
+		["certificate", id],
+		() => fetchCertificate(id),
+		{
+			staleTime: 60 * 1000, // 1 minute
+			...options,
+		},
+	);
+};
+
+const useSetCertificate = () => {
+	const queryClient = useQueryClient();
+	return useMutation(
+		(values: Certificate) => {
+			return values.id
+				? setCertificate(values.id, values)
+				: createCertificate(values);
+		},
+		{
+			onMutate: (values) => {
+				const previousObject = queryClient.getQueryData([
+					"certificate",
+					values.id,
+				]);
+
+				queryClient.setQueryData(["certificate", values.id], (old: any) => ({
+					...old,
+					...values,
+				}));
+
+				return () =>
+					queryClient.setQueryData(["certificate", values.id], previousObject);
+			},
+			onError: (error, values, rollback: any) => rollback(),
+			onSuccess: async ({ id }: Certificate) => {
+				queryClient.invalidateQueries(["certificate", id]);
+				queryClient.invalidateQueries("certificate");
+			},
+		},
+	);
+};
+
+export { useCertificate, useSetCertificate };

frontend/src/locale/src/de.json

@@ -56,9 +56,6 @@
 	"certificate-authority.max-domains": {
 		"defaultMessage": "Maximale Domains pro Zertifikat"
 	},
-	"certificate-authority.name": {
-		"defaultMessage": "Name"
-	},
 	"certificate.create": {
 		"defaultMessage": "Zertifikat erstellen"
 	},
@@ -86,9 +83,6 @@
 	"column.max-domains": {
 		"defaultMessage": "Domänen pro Zertifikat"
 	},
-	"column.name": {
-		"defaultMessage": "Name"
-	},
 	"column.servers": {
 		"defaultMessage": "Servers"
 	},
@@ -140,7 +134,7 @@
 	"dns-provider.create": {
 		"defaultMessage": "Erstellen Sie einen DNS-Anbieter"
 	},
-	"dns-provider.name": {
+	"name": {
 		"defaultMessage": "Name"
 	},
 	"dns-providers.title": {

frontend/src/locale/src/en.json

@@ -332,9 +332,6 @@
 	"certificate-authority.max-domains": {
 		"defaultMessage": "Maximum Domains per Certificate"
 	},
-	"certificate-authority.name": {
-		"defaultMessage": "Name"
-	},
 	"certificate.create": {
 		"defaultMessage": "Create Certificate"
 	},
@@ -362,9 +359,6 @@
 	"column.max-domains": {
 		"defaultMessage": "Domains per Cert"
 	},
-	"column.name": {
-		"defaultMessage": "Name"
-	},
 	"column.servers": {
 		"defaultMessage": "Servers"
 	},
@@ -416,7 +410,7 @@
 	"dns-provider.create": {
 		"defaultMessage": "Create DNS Provider"
 	},
-	"dns-provider.name": {
+	"name": {
 		"defaultMessage": "Name"
 	},
 	"dns-providers.title": {

frontend/src/locale/src/fa.json

@@ -56,9 +56,6 @@
 	"certificate-authority.max-domains": {
 		"defaultMessage": "حداکثر دامنه در هر گواهی"
 	},
-	"certificate-authority.name": {
-		"defaultMessage": "نام"
-	},
 	"certificate.create": {
 		"defaultMessage": "ایجاد گواهی"
 	},
@@ -86,9 +83,6 @@
 	"column.max-domains": {
 		"defaultMessage": "دامنه در هر گواهی"
 	},
-	"column.name": {
-		"defaultMessage": "نام"
-	},
 	"column.servers": {
 		"defaultMessage": "Servers"
 	},
@@ -140,7 +134,7 @@
 	"dns-provider.create": {
 		"defaultMessage": "ارائه دهنده DNS ایجاد کنید"
 	},
-	"dns-provider.name": {
+	"name": {
 		"defaultMessage": "نام"
 	},
 	"dns-providers.title": {

frontend/src/modals/AccessListCreateModal.tsx

@@ -97,14 +97,14 @@ function AccessListCreateModal({
 												isInvalid={form.errors.name && form.touched.name}>
 												<FormLabel htmlFor="name">
 													{intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												</FormLabel>
 												<Input
 													{...field}
 													id="name"
 													placeholder={intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												/>
 												<FormErrorMessage>{form.errors.name}</FormErrorMessage>

frontend/src/modals/CertificateAuthorityCreateModal.tsx

@@ -96,14 +96,14 @@ function CertificateAuthorityCreateModal({
 												isInvalid={form.errors.name && form.touched.name}>
 												<FormLabel htmlFor="name">
 													{intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												</FormLabel>
 												<Input
 													{...field}
 													id="name"
 													placeholder={intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												/>
 												<FormErrorMessage>{form.errors.name}</FormErrorMessage>

frontend/src/modals/CertificateAuthorityEditModal.tsx

@@ -109,14 +109,14 @@ function CertificateAuthorityEditModal({
 													isInvalid={form.errors.name && form.touched.name}>
 													<FormLabel htmlFor="name">
 														{intl.formatMessage({
-															id: "certificate-authority.name",
+															id: "name",
 														})}
 													</FormLabel>
 													<Input
 														{...field}
 														id="name"
 														placeholder={intl.formatMessage({
-															id: "certificate-authority.name",
+															id: "name",
 														})}
 													/>
 													<FormErrorMessage>

frontend/src/modals/CertificateCreateModal.tsx

@@ -1,6 +1,5 @@
 import {
 	Button,
-	Checkbox,
 	FormControl,
 	FormErrorMessage,
 	FormLabel,
@@ -15,12 +14,12 @@ import {
 	Stack,
 	useToast,
 } from "@chakra-ui/react";
-import { CertificateAuthority } from "api/npm";
+import { Certificate } from "api/npm";
 import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { useSetCertificateAuthority } from "hooks";
+import { useSetCertificate } from "hooks";
 import { intl } from "locale";
-import { validateNumber, validateString } from "modules/Validations";
+import { validateString } from "modules/Validations";
 
 interface CertificateCreateModalProps {
 	isOpen: boolean;
@@ -31,10 +30,10 @@ function CertificateCreateModal({
 	onClose,
 }: CertificateCreateModalProps) {
 	const toast = useToast();
-	const { mutate: setCertificateAuthority } = useSetCertificateAuthority();
+	const { mutate: setCertificate } = useSetCertificate();
 
 	const onSubmit = async (
-		payload: CertificateAuthority,
+		payload: Certificate,
 		{ setErrors, setSubmitting }: any,
 	) => {
 		const showErr = (msg: string) => {
@@ -49,7 +48,7 @@ function CertificateCreateModal({
 			});
 		};
 
-		setCertificateAuthority(payload, {
+		setCertificate(payload, {
 			onError: (err: any) => {
 				if (err.message === "ca-bundle-does-not-exist") {
 					setErrors({
@@ -78,13 +77,13 @@ function CertificateCreateModal({
 							caBundle: "",
 							maxDomains: 5,
 							isWildcardSupported: false,
-						} as CertificateAuthority
+						} as Certificate
 					}
 					onSubmit={onSubmit}>
 					{({ isSubmitting }) => (
 						<Form>
 							<ModalHeader>
-								{intl.formatMessage({ id: "certificate-authority.create" })}
+								{intl.formatMessage({ id: "certificate.create" })}
 							</ModalHeader>
 							<ModalCloseButton />
 							<ModalBody>
@@ -96,110 +95,20 @@ function CertificateCreateModal({
 												isInvalid={form.errors.name && form.touched.name}>
 												<FormLabel htmlFor="name">
 													{intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												</FormLabel>
 												<Input
 													{...field}
 													id="name"
 													placeholder={intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												/>
 												<FormErrorMessage>{form.errors.name}</FormErrorMessage>
 											</FormControl>
 										)}
 									</Field>
-									<Field name="acmeshServer" validate={validateString(2, 255)}>
-										{({ field, form }: any) => (
-											<FormControl
-												isRequired
-												isInvalid={
-													form.errors.acmeshServer && form.touched.acmeshServer
-												}>
-												<FormLabel htmlFor="acmeshServer">
-													{intl.formatMessage({
-														id: "certificate-authority.acmesh-server",
-													})}
-												</FormLabel>
-												<Input
-													{...field}
-													id="acmeshServer"
-													placeholder="https://example.com/acme/directory"
-												/>
-												<FormErrorMessage>
-													{form.errors.acmeshServer}
-												</FormErrorMessage>
-											</FormControl>
-										)}
-									</Field>
-									<Field name="caBundle" validate={validateString(2, 255)}>
-										{({ field, form }: any) => (
-											<FormControl
-												isRequired
-												isInvalid={
-													form.errors.caBundle && form.touched.caBundle
-												}>
-												<FormLabel htmlFor="caBundle">
-													{intl.formatMessage({
-														id: "certificate-authority.ca-bundle",
-													})}
-												</FormLabel>
-												<Input
-													{...field}
-													id="caBundle"
-													placeholder="/path/to/certs/custom-ca-bundle.crt"
-												/>
-												<FormErrorMessage>
-													{form.errors.caBundle}
-												</FormErrorMessage>
-											</FormControl>
-										)}
-									</Field>
-									<Field
-										name="maxDomains"
-										validate={validateNumber(1)}
-										type="number">
-										{({ field, form }: any) => (
-											<FormControl
-												isRequired
-												isInvalid={
-													form.errors.maxDomains && form.touched.maxDomains
-												}>
-												<FormLabel htmlFor="maxDomains">
-													{intl.formatMessage({
-														id: "certificate-authority.max-domains",
-													})}
-												</FormLabel>
-												<Input {...field} id="maxDomains" type="number" />
-												<FormErrorMessage>
-													{form.errors.maxDomains}
-												</FormErrorMessage>
-											</FormControl>
-										)}
-									</Field>
-									<Field name="isWildcardSupported" type="checkbox">
-										{({ field, form }: any) => (
-											<FormControl
-												isInvalid={
-													form.errors.isWildcardSupported &&
-													form.touched.isWildcardSupported
-												}>
-												<Checkbox
-													{...field}
-													isChecked={field.checked}
-													size="md"
-													colorScheme="green">
-													{intl.formatMessage({
-														id: "certificate-authority.has-wildcard-support",
-													})}
-												</Checkbox>
-												<FormErrorMessage>
-													{form.errors.isWildcardSupported}
-												</FormErrorMessage>
-											</FormControl>
-										)}
-									</Field>
 								</Stack>
 							</ModalBody>
 							<ModalFooter>

frontend/src/modals/CertificateEditModal.tsx

@@ -109,14 +109,14 @@ function CertificateEditModal({
 													isInvalid={form.errors.name && form.touched.name}>
 													<FormLabel htmlFor="name">
 														{intl.formatMessage({
-															id: "certificate-authority.name",
+															id: "name",
 														})}
 													</FormLabel>
 													<Input
 														{...field}
 														id="name"
 														placeholder={intl.formatMessage({
-															id: "certificate-authority.name",
+															id: "name",
 														})}
 													/>
 													<FormErrorMessage>

frontend/src/modals/DNSProviderCreateModal.tsx

@@ -227,14 +227,14 @@ function DNSProviderCreateModal({
 															isInvalid={form.errors.name && form.touched.name}>
 															<FormLabel htmlFor="name">
 																{intl.formatMessage({
-																	id: "dns-provider.name",
+																	id: "name",
 																})}
 															</FormLabel>
 															<Input
 																{...field}
 																id="name"
 																placeholder={intl.formatMessage({
-																	id: "dns-provider.name",
+																	id: "name",
 																})}
 															/>
 															<FormErrorMessage>

frontend/src/modals/DNSProviderEditModal.tsx.disabled

@@ -1,229 +0,0 @@
-import { useEffect, useState } from "react";
-
-import {
-	Button,
-	Checkbox,
-	FormControl,
-	FormErrorMessage,
-	FormLabel,
-	Input,
-	Modal,
-	ModalOverlay,
-	ModalContent,
-	ModalHeader,
-	ModalCloseButton,
-	ModalBody,
-	ModalFooter,
-	Select,
-	Stack,
-	useToast,
-} from "@chakra-ui/react";
-import {
-	DNSProvider,
-	DNSProvidersAcmesh,
-	DNSProvidersAcmeshField,
-} from "api/npm";
-import { PrettyButton } from "components";
-import { Formik, Form, Field } from "formik";
-import {
-	useDNSProvider,
-	useSetDNSProvider,
-	useDNSProvidersAcmesh,
-} from "hooks";
-import { intl } from "locale";
-import { validateString } from "modules/Validations";
-
-interface DNSProviderEditModalProps {
-	editId: number;
-	isOpen: boolean;
-	onClose: () => void;
-}
-function DNSProviderEditModal({
-	editId,
-	isOpen,
-	onClose,
-}: DNSProviderEditModalProps) {
-	const toast = useToast();
-	const { status, data } = useDNSProvider(editId);
-	const { mutate: setDNSProvider } = useSetDNSProvider();
-
-	const onSubmit = async (
-		payload: DNSProvider,
-		{ setErrors, setSubmitting }: any,
-	) => {
-		// TODO: filter out the meta object and only include items that apply to the acmesh provider selected
-
-		const showErr = (msg: string) => {
-			toast({
-				description: intl.formatMessage({
-					id: `error.${msg}`,
-				}),
-				status: "error",
-				position: "top",
-				duration: 3000,
-				isClosable: true,
-			});
-		};
-
-		setDNSProvider(payload, {
-			onError: (err: any) => {
-				showErr(err.message);
-			},
-			onSuccess: () => onClose(),
-			onSettled: () => setSubmitting(false),
-		});
-	};
-
-	const renderInputType = (
-		field: any,
-		f: DNSProvidersAcmeshField,
-		value: any,
-	) => {
-		if (f.type === "bool") {
-			return (
-				<Checkbox {...field} size="md" colorScheme="orange" isChecked={value}>
-					{f.name}
-				</Checkbox>
-			);
-		}
-
-		return (
-			<Input {...field} id={f.metaKey} type={f.type} defaultValue={value} />
-		);
-	};
-
-	return (
-		<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
-			<ModalOverlay />
-			<ModalContent>
-				{acmeshIsLoading ? (
-					"loading"
-				) : (
-					<Formik
-						initialValues={
-							{
-								acmeshName: "",
-								name: "",
-								dnsSleep: 0,
-								meta: {},
-							} as DNSProvider
-						}
-						onSubmit={onSubmit}>
-						{({ isSubmitting, handleChange, values, setValues }) => (
-							<Form>
-								<ModalHeader>
-									{intl.formatMessage({ id: "dns-provider.create" })}
-								</ModalHeader>
-								<ModalCloseButton />
-								<ModalBody>
-									<Stack spacing={4}>
-										<Field name="name" validate={validateString(1, 100)}>
-											{({ field, form }: any) => (
-												<FormControl
-													isRequired
-													isInvalid={form.errors.name && form.touched.name}>
-													<FormLabel htmlFor="name">
-														{intl.formatMessage({
-															id: "dns-provider.name",
-														})}
-													</FormLabel>
-													<Input
-														{...field}
-														id="name"
-														placeholder={intl.formatMessage({
-															id: "dns-provider.name",
-														})}
-													/>
-													<FormErrorMessage>
-														{form.errors.name}
-													</FormErrorMessage>
-												</FormControl>
-											)}
-										</Field>
-										<Field name="acmeshName">
-											{({ field, form }: any) => (
-												<FormControl
-													isRequired
-													isInvalid={
-														form.errors.acmeshName && form.touched.acmeshName
-													}>
-													<FormLabel htmlFor="acmeshName">
-														{intl.formatMessage({
-															id: "dns-provider.acmesh-name",
-														})}
-													</FormLabel>
-													<Select
-														{...field}
-														id="acmeshName"
-														onChange={(e: any) => {
-															handleChange(e);
-															setAcmeshItem(e.target.value);
-														}}>
-														<option value="" />
-														{acmeshData.map((item: DNSProvidersAcmesh) => {
-															return (
-																<option
-																	key={item.acmeshName}
-																	value={item.acmeshName}>
-																	{intl.formatMessage({
-																		id: `acmesh.${item.acmeshName}`,
-																	})}
-																</option>
-															);
-														})}
-													</Select>
-													<FormErrorMessage>
-														{form.errors.acmeshName}
-													</FormErrorMessage>
-												</FormControl>
-											)}
-										</Field>
-										{acmeshItem !== "" ? <hr /> : null}
-										{getAcmeshItem(acmeshItem)?.fields.map((f: any) => {
-											const name = `meta[${f.metaKey}]`;
-											return (
-												<Field
-													name={name}
-													type={f.type === "bool" ? "checkbox" : undefined}>
-													{({ field, form }: any) => (
-														<FormControl
-															isRequired={f.isRequired}
-															isInvalid={
-																form.errors[name] && form.touched[name]
-															}>
-															{f.type !== "bool" ? (
-																<FormLabel htmlFor={name}>{f.name}</FormLabel>
-															) : null}
-															{renderInputType(
-																field,
-																f,
-																values.meta[f.metaKey],
-															)}
-															<FormErrorMessage>
-																{form.errors[name]}
-															</FormErrorMessage>
-														</FormControl>
-													)}
-												</Field>
-											);
-										})}
-									</Stack>
-								</ModalBody>
-								<ModalFooter>
-									<PrettyButton mr={3} isLoading={isSubmitting}>
-										{intl.formatMessage({ id: "form.save" })}
-									</PrettyButton>
-									<Button onClick={onClose} isLoading={isSubmitting}>
-										{intl.formatMessage({ id: "form.cancel" })}
-									</Button>
-								</ModalFooter>
-							</Form>
-						)}
-					</Formik>
-				)}
-			</ModalContent>
-		</Modal>
-	);
-}
-
-export { DNSProviderEditModal };

frontend/src/modals/HostCreateModal.tsx

@@ -93,14 +93,14 @@ function HostCreateModal({ isOpen, onClose }: HostCreateModalProps) {
 												isInvalid={form.errors.name && form.touched.name}>
 												<FormLabel htmlFor="name">
 													{intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												</FormLabel>
 												<Input
 													{...field}
 													id="name"
 													placeholder={intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												/>
 												<FormErrorMessage>{form.errors.name}</FormErrorMessage>

frontend/src/modals/UpstreamCreateModal.tsx

@@ -94,14 +94,14 @@ function UpstreamCreateModal({ isOpen, onClose }: UpstreamCreateModalProps) {
 												isInvalid={form.errors.name && form.touched.name}>
 												<FormLabel htmlFor="name">
 													{intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												</FormLabel>
 												<Input
 													{...field}
 													id="name"
 													placeholder={intl.formatMessage({
-														id: "certificate-authority.name",
+														id: "name",
 													})}
 												/>
 												<FormErrorMessage>{form.errors.name}</FormErrorMessage>

frontend/src/modals/UpstreamEditModal.tsx

@@ -110,14 +110,14 @@ function UpstreamEditModal({
 													isInvalid={form.errors.name && form.touched.name}>
 													<FormLabel htmlFor="name">
 														{intl.formatMessage({
-															id: "certificate-authority.name",
+															id: "name",
 														})}
 													</FormLabel>
 													<Input
 														{...field}
 														id="name"
 														placeholder={intl.formatMessage({
-															id: "certificate-authority.name",
+															id: "name",
 														})}
 													/>
 													<FormErrorMessage>

frontend/src/pages/AccessLists/Table.tsx

@@ -37,7 +37,7 @@ function Table({
 				sortable: true,
 			},
 			{
-				Header: intl.formatMessage({ id: "column.name" }),
+				Header: intl.formatMessage({ id: "name" }),
 				accessor: "name",
 				sortable: true,
 				Filter: TextFilter,

frontend/src/pages/CertificateAuthorities/Table.tsx

@@ -33,7 +33,7 @@ function Table({
 	const [columns, tableData] = useMemo(() => {
 		const columns = [
 			{
-				Header: intl.formatMessage({ id: "column.name" }),
+				Header: intl.formatMessage({ id: "name" }),
 				accessor: "name",
 				sortable: true,
 				Filter: TextFilter,

frontend/src/pages/Certificates/Table.tsx

@@ -49,7 +49,7 @@ function Table({
 				sortable: true,
 			},
 			{
-				Header: intl.formatMessage({ id: "column.name" }),
+				Header: intl.formatMessage({ id: "name" }),
 				accessor: "name",
 				sortable: true,
 				Filter: TextFilter,

frontend/src/pages/DNSProviders/Table.tsx

@@ -39,7 +39,7 @@ function Table({
 				sortable: true,
 			},
 			{
-				Header: intl.formatMessage({ id: "column.name" }),
+				Header: intl.formatMessage({ id: "name" }),
 				accessor: "name",
 				sortable: true,
 				Filter: TextFilter,

frontend/src/pages/NginxTemplates/NginxTemplatesTable.tsx

@@ -50,7 +50,7 @@ function NginxTemplatesTable({
 				sortable: true,
 			},
 			{
-				Header: intl.formatMessage({ id: "column.name" }),
+				Header: intl.formatMessage({ id: "name" }),
 				accessor: "name",
 				sortable: true,
 				Filter: TextFilter,

frontend/src/pages/Settings/SettingsTable.tsx

@@ -41,7 +41,7 @@ function SettingsTable({
 	const [columns, tableData] = useMemo(() => {
 		const columns = [
 			{
-				Header: intl.formatMessage({ id: "column.name" }),
+				Header: intl.formatMessage({ id: "name" }),
 				accessor: "name",
 				sortable: true,
 				Filter: TextFilter,

frontend/src/pages/Upstreams/Table.tsx

@@ -47,7 +47,7 @@ function Table({
 				className: "w-80",
 			},
 			{
-				Header: intl.formatMessage({ id: "column.name" }),
+				Header: intl.formatMessage({ id: "name" }),
 				accessor: "name",
 				sortable: true,
 				Filter: TextFilter,