track selected values

Author: Chandrasekhar Ramakrishnan

client/src/features/sessionsV2/SessionView/SessionLaunchLinkModal.tsx

@@ -290,14 +290,23 @@ function SessionLaunchLink({
   );
 }
 
+interface SessionLaunchLinkCustomizationProps
+  extends Pick<CustomizeLaunchLinkFormProps, "fields"> {
+  watch: ReturnType<typeof useForm<EnvVariablesCustomizationForm>>["watch"];
+}
 function SessionLaunchLinkCustomization({
   fields,
-}: Pick<CustomizeLaunchLinkFormProps, "fields">) {
-  const shownFields = fields.filter((field) => field.isCustomized);
+  watch,
+}: SessionLaunchLinkCustomizationProps) {
+  const names = fields.map(
+    (_f, i) => `envVariables.${i}.isCustomized`
+  ) as `envVariables.${number}.isCustomized`[];
+  const values = watch(names);
+  const shownFields = fields.filter((_f, i) => values[i]);
   if (shownFields.length < 1) return null;
   return (
     <>
-      <Row>
+      <Row className="mt-3">
         <Col>
           <p>The link and badge above include the following customizations:</p>
         </Col>
@@ -347,6 +356,7 @@ export default function SessionLaunchLinkModal({
     register,
     reset,
     resetField,
+    watch,
   } = useForm<EnvVariablesCustomizationForm>({
     defaultValues,
   });
@@ -377,7 +387,7 @@ export default function SessionLaunchLinkModal({
       </ModalHeader>
       <ModalBody>
         <SessionLaunchLink launcher={launcher} project={project} />
-        <SessionLaunchLinkCustomization fields={fields} />
+        <SessionLaunchLinkCustomization fields={fields} watch={watch} />
         <CustomizeLaunchLinkForm
           control={control}
           errors={errors}