refactor: change field location

web/app/components/memshell/jreversion-field.tsx

@@ -0,0 +1,76 @@
+import { Controller, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldLabel,
+} from "@/components/ui/field";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { MemShellFormSchema } from "@/types/schema";
+
+const JDKVersion = [
+  { name: "Java6", value: "50" },
+  { name: "Java8", value: "52" },
+  { name: "Java9", value: "53" },
+  { name: "Java11", value: "55" },
+  { name: "Java17", value: "61" },
+  { name: "Java21", value: "65" },
+];
+
+export function JREVersionFormField({
+  form,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+}>) {
+  const { t } = useTranslation(["common"]);
+  return (
+    <Controller
+      control={form.control}
+      name="targetJdkVersion"
+      render={({ field, fieldState }) => (
+        <Field orientation="vertical" data-invalid={fieldState.invalid}>
+          <FieldContent>
+            <FieldLabel htmlFor="targetJdkVersion">
+              {t("common:targetJdkVersion")}
+            </FieldLabel>
+            <Select
+              onValueChange={(v) => {
+                if (Number.parseInt(v ?? "0", 10) >= 53) {
+                  form.setValue("byPassJavaModule", true);
+                } else {
+                  form.setValue("byPassJavaModule", false);
+                }
+                field.onChange(v);
+              }}
+              value={field.value}
+            >
+              <SelectTrigger
+                id="targetJdkVersion"
+                aria-invalid={fieldState.invalid}
+              >
+                <SelectValue
+                  data-placeholder={t("common:placeholders.select")}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {JDKVersion.map((v) => (
+                  <SelectItem key={v.value} value={v.value}>
+                    {v.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {fieldState.error && <FieldError errors={[fieldState.error]} />}
+          </FieldContent>
+        </Field>
+      )}
+    />
+  );
+}

web/app/components/memshell/main-config-card.tsx

@@ -25,7 +25,6 @@ import {
   Field,
   FieldContent,
   FieldDescription,
-  FieldError,
   FieldLabel,
 } from "@/components/ui/field";
 import { Label } from "@/components/ui/label";
@@ -50,15 +49,8 @@ import {
 } from "@/types/memshell";
 import type { MemShellFormSchema } from "@/types/schema";
 import { Spinner } from "../ui/spinner";
-
-const JDKVersion = [
-  { name: "Java6", value: "50" },
-  { name: "Java8", value: "52" },
-  { name: "Java9", value: "53" },
-  { name: "Java11", value: "55" },
-  { name: "Java17", value: "61" },
-  { name: "Java21", value: "65" },
-];
+import { JREVersionFormField } from "./jreversion-field";
+import { ServerVersionFormField } from "./serverversion-field";
 
 const shellToolIcons: Record<ShellToolType, JSX.Element> = {
   [ShellToolType.Behinder]: <ShieldOffIcon className="h-4 w-4" />,
@@ -294,54 +286,9 @@ export default function MainConfigCard({
                     </Field>
                   )}
                 />
-                <Controller
-                  control={form.control}
-                  name="targetJdkVersion"
-                  render={({ field, fieldState }) => (
-                    <Field
-                      orientation="vertical"
-                      data-invalid={fieldState.invalid}
-                    >
-                      <FieldContent>
-                        <FieldLabel htmlFor="targetJdkVersion">
-                          {t("common:targetJdkVersion")}
-                        </FieldLabel>
-                        <Select
-                          onValueChange={(v) => {
-                            if (Number.parseInt(v ?? "0", 10) >= 53) {
-                              form.setValue("byPassJavaModule", true);
-                            } else {
-                              form.setValue("byPassJavaModule", false);
-                            }
-                            field.onChange(v);
-                          }}
-                          value={field.value}
-                        >
-                          <SelectTrigger
-                            id="targetJdkVersion"
-                            aria-invalid={fieldState.invalid}
-                          >
-                            <SelectValue
-                              data-placeholder={t("common:placeholders.select")}
-                            />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {JDKVersion.map((v) => (
-                              <SelectItem key={v.value} value={v.value}>
-                                {v.name}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        {fieldState.error && (
-                          <FieldError errors={[fieldState.error]} />
-                        )}
-                      </FieldContent>
-                    </Field>
-                  )}
-                />
+                <ServerVersionFormField form={form} />
               </div>
-              <div className="grid grid-cols-1">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                 <Controller
                   control={form.control}
                   name="shellTool"
@@ -377,6 +324,7 @@ export default function MainConfigCard({
                     </Field>
                   )}
                 />
+                <JREVersionFormField form={form} />
               </div>
               <div className="flex gap-4 mt-4 flex-col lg:grid lg:grid-cols-2 2xl:grid 2xl:grid-cols-3">
                 <Controller

web/app/components/memshell/serverversion-field.tsx

@@ -0,0 +1,76 @@
+import { Controller, type UseFormReturn, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldLabel,
+} from "@/components/ui/field";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { MemShellFormSchema } from "@/types/schema";
+
+export function ServerVersionFormField({
+  form,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+}>) {
+  const { t } = useTranslation(["common"]);
+  const server = useWatch({ control: form.control, name: "server" });
+  const serverVersionOptions = getServerVersionOptions(server);
+  return (
+    <Controller
+      control={form.control}
+      name="serverVersion"
+      render={({ field, fieldState }) => (
+        <Field orientation="vertical" data-invalid={fieldState.invalid}>
+          <FieldContent>
+            <FieldLabel htmlFor="serverVersion">
+              {t("common:serverVersion")}
+            </FieldLabel>
+            <Select onValueChange={field.onChange} value={field.value}>
+              <SelectTrigger
+                id="serverVersion"
+                aria-invalid={fieldState.invalid}
+              >
+                <SelectValue
+                  data-placeholder={t("common:placeholders.select")}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {serverVersionOptions.map((v) => (
+                  <SelectItem key={v.value} value={v.value}>
+                    {v.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {fieldState.error && <FieldError errors={[fieldState.error]} />}
+          </FieldContent>
+        </Field>
+      )}
+    />
+  );
+}
+
+function getServerVersionOptions(server: string) {
+  if (server === "TongWeb") {
+    return [
+      { name: "6", value: "6" },
+      { name: "7", value: "7" },
+      { name: "8", value: "8" },
+    ];
+  } else if (server === "Jetty") {
+    return [
+      { name: "6", value: "6" },
+      { name: "7+", value: "7+" },
+      { name: "12", value: "12" },
+    ];
+  }
+  return [{ name: "Unknown", value: "Unknown" }];
+}

web/app/components/memshell/tabs/shelltype-field.tsx

@@ -1,11 +1,6 @@
 import { Controller, type UseFormReturn, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import {
-  Field,
-  FieldContent,
-  FieldError,
-  FieldLabel,
-} from "@/components/ui/field";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -26,13 +21,7 @@ export function ShellTypeFormField({
 }>) {
   const { t } = useTranslation(["memshell", "common"]);
   const shellType = useWatch({ control: form.control, name: "shellType" });
-  const server = useWatch({ control: form.control, name: "server" });
-  const needSelectServerVersion =
-    (server === "TongWeb" && shellType.endsWith("Valve")) ||
-    (server === "Jetty" &&
-      (shellType === "Handler" || shellType === "JakartaHandler"));
   const needUrlPattern = !notNeedUrlPattern(shellType);
-  const serverVersionOptions = getServerVersionOptions(server);
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
       <Controller
@@ -84,59 +73,6 @@ export function ShellTypeFormField({
           </Field>
         )}
       />
-      <Controller
-        control={form.control}
-        name="serverVersion"
-        render={({ field, fieldState }) => (
-          <Field
-            className={cn("gap-1", needSelectServerVersion ? "grid" : "hidden")}
-            orientation="vertical"
-            data-invalid={fieldState.invalid}
-          >
-            <FieldContent>
-              <FieldLabel htmlFor="serverVersion">
-                {t("common:serverVersion")}
-              </FieldLabel>
-              <Select onValueChange={field.onChange} value={field.value}>
-                <SelectTrigger
-                  id="serverVersion"
-                  aria-invalid={fieldState.invalid}
-                >
-                  <SelectValue
-                    data-placeholder={t("common:placeholders.select")}
-                  />
-                </SelectTrigger>
-                <SelectContent>
-                  {serverVersionOptions.map((v) => (
-                    <SelectItem key={v.value} value={v.value}>
-                      {v.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {fieldState.error && <FieldError errors={[fieldState.error]} />}
-            </FieldContent>
-          </Field>
-        )}
-      />
     </div>
   );
 }
-
-function getServerVersionOptions(server: string) {
-  let serverVersionOptions = [] as { name: string; value: string }[];
-  if (server === "TongWeb") {
-    serverVersionOptions = [
-      { name: "6", value: "6" },
-      { name: "7", value: "7" },
-      { name: "8", value: "8" },
-    ];
-  } else if (server === "Jetty") {
-    serverVersionOptions = [
-      { name: "6", value: "6" },
-      { name: "7+", value: "7+" },
-      { name: "12", value: "12" },
-    ];
-  }
-  return serverVersionOptions;
-}