refactor: single form

components/dashboard/application/environment/show.tsx

@@ -1,3 +1,5 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
 import { Secrets } from "@/components/ui/secrets";
 import { api } from "@/utils/api";
@@ -8,15 +10,10 @@ import { z } from "zod";
 
 const addEnvironmentSchema = z.object({
 	env: z.string(),
-});
-
-type EnvironmentSchema = z.infer<typeof addEnvironmentSchema>;
-
-const addBuildArgsSchema = z.object({
 	buildArgs: z.string(),
 });
 
-type BuildArgsSchema = z.infer<typeof addBuildArgsSchema>;
+type EnvironmentSchema = z.infer<typeof addEnvironmentSchema>;
 
 interface Props {
 	applicationId: string;
@@ -24,7 +21,6 @@ interface Props {
 
 export const ShowEnvironment = ({ applicationId }: Props) => {
 	const saveEnvironmentMutation = api.application.saveEnvironment.useMutation();
-	const saveBuildArgsMutation = api.application.saveBuildArgs.useMutation();
 
 	const { data, refetch } = api.application.one.useQuery(
 		{
@@ -38,21 +34,16 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 	const envForm = useForm<EnvironmentSchema>({
 		defaultValues: {
 			env: data?.env || "",
-		},
-		resolver: zodResolver(addEnvironmentSchema),
-	});
-
-	const buildArgsForm = useForm<BuildArgsSchema>({
-		defaultValues: {
 			buildArgs: data?.buildArgs || "",
 		},
-		resolver: zodResolver(addBuildArgsSchema),
+		resolver: zodResolver(addEnvironmentSchema),
 	});
 
 	const onEnvSubmit = async (data: EnvironmentSchema) => {
 		saveEnvironmentMutation
 			.mutateAsync({
 				env: data.env,
+				buildArgs: data.buildArgs,
 				applicationId,
 			})
 			.then(async () => {
@@ -64,40 +55,22 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 			});
 	};
 
-	const onBuildArgsSubmit = async (data: BuildArgsSchema) => {
-		saveBuildArgsMutation
-			.mutateAsync({
-				buildArgs: data.buildArgs,
-				applicationId,
-			})
-			.then(async () => {
-				toast.success("Buildargs Added");
-				await refetch();
-			})
-			.catch(() => {
-				toast.error("Error to add build-args");
-			});
-	};
-
 	return (
-		<div className="flex w-full flex-col gap-5 ">
+		<Form {...envForm}>
-			<Form {...envForm}>
+			<form
-				<form onSubmit={envForm.handleSubmit(onEnvSubmit)}>
+				onSubmit={envForm.handleSubmit(onEnvSubmit)}
+				className="flex w-full flex-col gap-5 "
+			>
+				<Card className="bg-background">
 					<Secrets
 						name="env"
-						isLoading={saveEnvironmentMutation.isLoading}
 						title="Environment Settings"
 						description="You can add environment variables to your resource."
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
 					/>
-				</form>
+					{data?.buildType === "dockerfile" && (
-			</Form>
-			{data?.buildType === "dockerfile" && (
-				<Form {...buildArgsForm}>
-					<form onSubmit={buildArgsForm.handleSubmit(onBuildArgsSubmit)}>
 						<Secrets
 							name="buildArgs"
-							isLoading={saveBuildArgsMutation.isLoading}
 							title="Build-time Variables"
 							description={
 								<span>
@@ -115,9 +88,20 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							}
 							placeholder="NPM_TOKEN=xyz"
 						/>
-					</form>
+					)}
-				</Form>
+					<CardContent>
-			)}
+						<div className="flex flex-row justify-end">
-		</div>
+							<Button
+								isLoading={saveEnvironmentMutation.isLoading}
+								className="w-fit"
+								type="submit"
+							>
+								Save
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
+			</form>
+		</Form>
 	);
 };

components/ui/secrets.tsx

@@ -23,7 +23,6 @@ interface Props {
 	title: string;
 	description: ReactNode;
 	placeholder: string;
-	isLoading: boolean;
 }
 
 export const Secrets = (props: Props) => {
@@ -31,7 +30,7 @@ export const Secrets = (props: Props) => {
 	const form = useFormContext<Record<string, string>>();
 
 	return (
-		<Card className="bg-background">
+		<>
 			<CardHeader className="flex flex-row w-full items-center justify-between">
 				<div>
 					<CardTitle className="text-xl">{props.title}</CardTitle>
@@ -75,18 +74,7 @@ export const Secrets = (props: Props) => {
 						</FormItem>
 					)}
 				/>
-
-				<div className="flex flex-row justify-end">
-					<Button
-						disabled={isVisible}
-						isLoading={props.isLoading}
-						className="w-fit"
-						type="submit"
-					>
-						Save
-					</Button>
-				</div>
 			</CardContent>
-		</Card>
+		</>
 	);
 };

server/api/routers/application.ts

@@ -9,7 +9,6 @@ import {
 	apiFindMonitoringStats,
 	apiFindOneApplication,
 	apiReloadApplication,
-	apiSaveBuildArgs,
 	apiSaveBuildType,
 	apiSaveDockerProvider,
 	apiSaveEnvironmentVariables,
@@ -188,13 +187,6 @@ export const applicationRouter = createTRPCRouter({
 		.mutation(async ({ input }) => {
 			await updateApplication(input.applicationId, {
 				env: input.env,
-			});
-			return true;
-		}),
-	saveBuildArgs: protectedProcedure
-		.input(apiSaveBuildArgs)
-		.mutation(async ({ input }) => {
-			await updateApplication(input.applicationId, {
 				buildArgs: input.buildArgs,
 			});
 			return true;

server/db/schema/application.ts

@@ -276,6 +276,7 @@ const createSchema = createInsertSchema(applications, {
 	applicationId: z.string(),
 	autoDeploy: z.boolean(),
 	env: z.string().optional(),
+	buildArgs: z.string().optional(),
 	name: z.string().min(1),
 	description: z.string().optional(),
 	memoryReservation: z.number().optional(),
@@ -376,12 +377,6 @@ export const apiSaveEnvironmentVariables = createSchema
 	.pick({
 		applicationId: true,
 		env: true,
-	})
-	.required();
-
-export const apiSaveBuildArgs = createSchema
-	.pick({
-		applicationId: true,
 		buildArgs: true,
 	})
 	.required();