feat(api-key): Add auto create

src/route-widgets/SettingsAPIKeysRoute/CreateNewAPIKeyDialog.tsx

@@ -48,6 +48,9 @@ export interface CreateNewAPIKeyDialogProps {
 	open: boolean
 	onClose: () => void
 	onCreated: (key: APIKey & {key: string}) => void
+
+	prefilledLabel: string
+	prefilledScopes: APIKeyScope[]
 }
 
 const PRESET_DAYS: number[] = [1, 7, 30, 180, 360]
@@ -76,6 +79,8 @@ const normalizeTime = (date: Date) =>
 
 export default function CreateNewAPIKeyDialog({
 	open,
+	prefilledLabel,
+	prefilledScopes,
 	onClose,
 	onCreated,
 }: CreateNewAPIKeyDialogProps): ReactElement {
@@ -108,9 +113,9 @@ export default function CreateNewAPIKeyDialog({
 	const formik = useFormik<CreateAPIKeyData & {detail: string}>({
 		validationSchema: scheme,
 		initialValues: {
-			label: "",
+			label: prefilledLabel,
 			expiresAt: addDays(new Date(), 30),
-			scopes: [],
+			scopes: [...prefilledScopes],
 			detail: "",
 		},
 		onSubmit: async (values, {setErrors}) => {

src/routes/SettingsAPIKeysRoute.tsx

@@ -1,4 +1,4 @@
-import {ReactElement, useState} from "react"
+import {ReactElement, useLayoutEffect, useState} from "react"
 import {useTranslation} from "react-i18next"
 import {useQuery} from "@tanstack/react-query"
 import {APIKey, PaginationResult} from "~/server-types"
@@ -7,17 +7,38 @@ import {getAPIKeys} from "~/apis"
 import {QueryResult, SimplePage} from "~/components"
 import {Button, List} from "@mui/material"
 import {MdAdd} from "react-icons/md"
+import {useQueryParams} from "~/hooks"
+import {isArray} from "lodash"
+import {API_KEY_SCOPES} from "~/constants/values"
+import {useNavigate} from "react-router-dom"
 import APIKeyListItem from "~/route-widgets/SettingsAPIKeysRoute/APIKeyListItem"
 import CreateNewAPIKeyDialog from "../route-widgets/SettingsAPIKeysRoute/CreateNewAPIKeyDialog"
 import EmptyStateScreen from "~/route-widgets/SettingsAPIKeysRoute/EmptyStateScreen"
 
 export default function SettingsAPIKeysRoute(): ReactElement {
 	const {t} = useTranslation("settings-api-keys")
+	const navigate = useNavigate()
+
+	const rawParams = useQueryParams<{action?: any; scopes?: any; label?: any}>()
+	const params = {
+		action: rawParams.action === "create-new" ? "create-new" : undefined,
+		scopes: isArray(rawParams.scopes?.split(","))
+			? rawParams.scopes.split(",").filter((scope: string) => API_KEY_SCOPES.includes(scope))
+			: [],
+		label: rawParams.label,
+	}
+
 	const queryKey = ["get_api_keys"]
 	const query = useQuery<PaginationResult<APIKey>, AxiosError>(queryKey, () => getAPIKeys())
 
 	const [createdAPIKey, setCreatedAPIKey] = useState<(APIKey & {key: string}) | null>(null)
-	const [createNew, setCreateNew] = useState<boolean>(false)
+	const [createNew, setCreateNew] = useState<boolean>(params.action === "create-new")
+
+	useLayoutEffect(() => {
+		if (params.action === "create-new") {
+			navigate(location.pathname, {replace: true})
+		}
+	}, [params.action, navigate])
 
 	return (
 		<>
@@ -60,6 +81,8 @@ export default function SettingsAPIKeysRoute(): ReactElement {
 			<CreateNewAPIKeyDialog
 				key={createNew.toString()}
 				open={createNew}
+				prefilledScopes={params.scopes}
+				prefilledLabel={params.label}
 				onClose={() => setCreateNew(false)}
 				onCreated={key => {
 					query.refetch()