update launch link based on selection

Author: ciyer

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

@@ -229,10 +229,17 @@ function EditEnvVariablesCustomizationFormContent({
   );
 }
 
+type SessionLaunchLinkProps = Required<
+  Pick<SessionLaunchLinkModalProps, "launcher" | "project">
+> &
+  SessionLaunchLinkCustomizationProps;
+
 function SessionLaunchLink({
+  fields,
   launcher,
   project,
-}: Required<Pick<SessionLaunchLinkModalProps, "launcher" | "project">>) {
+  watch,
+}: SessionLaunchLinkProps) {
   const startPath = generatePath(
     ABSOLUTE_ROUTES.v2.projects.show.sessions.start,
     {
@@ -243,8 +250,29 @@ function SessionLaunchLink({
   );
   const { params } = useContext(AppContext);
   const baseUrl = params?.BASE_URL ?? window.location.href;
-  const url = new URL(startPath, baseUrl);
-  const markdown = `[![launch - renku](${baseUrl}/renku-badge.svg)](${url.toString()})`;
+  const customized = fields.map(
+    (_f, i) => `envVariables.${i}.isCustomized`
+  ) as `envVariables.${number}.isCustomized`[];
+  const values = fields.map(
+    (_f, i) => `envVariables.${i}.value`
+  ) as `envVariables.${number}.value`[];
+  const isCustomizedValues = watch(customized);
+  const fieldValues = watch(values);
+
+  const urlWithParams = useMemo(() => {
+    const url = new URL(startPath, baseUrl);
+    const searchParams = new URLSearchParams();
+    fields.forEach((field, i) => {
+      if (isCustomizedValues[i]) {
+        searchParams.append(field.name, fieldValues[i]);
+      }
+    });
+    const urlWithParams = new URL(url.toString());
+    urlWithParams.search = searchParams.toString();
+    return urlWithParams;
+  }, [baseUrl, fields, fieldValues, isCustomizedValues, startPath]);
+
+  const markdown = `[![launch - renku](${baseUrl}/renku-badge.svg)](${urlWithParams.toString()})`;
   return (
     <Row className="mb-2">
       <Col md={6}>
@@ -260,7 +288,7 @@ function SessionLaunchLink({
               "d-inline-block",
               "cursor-pointer"
             )}
-            clipboardText={url.toString()}
+            clipboardText={urlWithParams.toString()}
           >
             <span className="ms-2">Copy Launch Link</span>
           </Clipboard>
@@ -298,11 +326,11 @@ function SessionLaunchLinkCustomization({
   fields,
   watch,
 }: SessionLaunchLinkCustomizationProps) {
-  const names = fields.map(
+  const customized = fields.map(
     (_f, i) => `envVariables.${i}.isCustomized`
   ) as `envVariables.${number}.isCustomized`[];
-  const values = watch(names);
-  const shownFields = fields.filter((_f, i) => values[i]);
+  const isCustomizedValues = watch(customized);
+  const shownFields = fields.filter((_f, i) => isCustomizedValues[i]);
   if (shownFields.length < 1) return null;
   return (
     <>
@@ -386,7 +414,12 @@ export default function SessionLaunchLinkModal({
         </div>
       </ModalHeader>
       <ModalBody>
-        <SessionLaunchLink launcher={launcher} project={project} />
+        <SessionLaunchLink
+          fields={fields}
+          launcher={launcher}
+          project={project}
+          watch={watch}
+        />
         <SessionLaunchLinkCustomization fields={fields} watch={watch} />
         <CustomizeLaunchLinkForm
           control={control}