feat: support select child packer

web/app/components/probeshell/package-config-card.tsx

@@ -1,19 +1,13 @@
-import type { PackerConfig } from "@/types/memshell";
+import type { PackerConfig, PackerOption } from "@/types/memshell";
 import type { ProbeShellFormSchema } from "@/types/schema";
 
 import { PackageIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
+import PackerSelector from "@/components/packer-selector";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { FieldLabel } from "@/components/ui/field";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-
-type Option = {
-  name: string;
-  value: string;
-};
 
 export default function PackageConfigCard({
   packerConfig,
@@ -22,31 +16,17 @@ export default function PackageConfigCard({
   packerConfig: PackerConfig | undefined;
   form: UseFormReturn<ProbeShellFormSchema>;
 }>) {
-  const [options, setOptions] = useState<Array<Option>>([]);
   const { t } = useTranslation("common");
 
-  useEffect(() => {
-    const filteredOptions = (packerConfig ?? []).filter((name) => {
+  const parents = useMemo<PackerOption[]>(() => {
+    return (packerConfig ?? []).filter(({ name }) => {
       return (
         !name.startsWith("Agent") &&
         !name.toLowerCase().startsWith("xxl") &&
         !name.toLowerCase().endsWith("jar")
       );
     });
-
-    const mappedOptions = filteredOptions.map((name) => {
-      return {
-        name: name,
-        value: name,
-      };
-    });
-
-    setOptions(mappedOptions);
-    const currentValue = form.getValues("packingMethod");
-    if (filteredOptions.length > 0 && (!currentValue || !filteredOptions.includes(currentValue))) {
-      form.setValue("packingMethod", filteredOptions[0]);
-    }
-  }, [form, packerConfig]);
+  }, [packerConfig]);
 
   return (
     <Card className="w-full">
@@ -57,32 +37,12 @@ export default function PackageConfigCard({
         </CardTitle>
       </CardHeader>
       <CardContent>
-        {options.length > 0 ? (
+        {parents.length > 0 ? (
           <Controller
             control={form.control}
             name="packingMethod"
             render={({ field }) => (
-              <div className="space-y-3">
-                <FieldLabel>{t("packerMethod")}</FieldLabel>
-                <div>
-                  <RadioGroup
-                    onValueChange={field.onChange}
-                    value={field.value}
-                    className="grid grid-cols-2 md:grid-cols-3"
-                  >
-                    {options.map(({ name, value }) => (
-                      <div key={value} className="flex items-center space-x-3">
-                        <div>
-                          <RadioGroupItem value={value} id={value} />
-                        </div>
-                        <FieldLabel className="text-xs" htmlFor={value}>
-                          {name}
-                        </FieldLabel>
-                      </div>
-                    ))}
-                  </RadioGroup>
-                </div>
-              </div>
+              <PackerSelector parents={parents} value={field.value} onChange={field.onChange} />
             )}
           />
         ) : (