prevent editing a variable value that is not customized

Author: ciyer

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

@@ -66,6 +66,7 @@ interface CustomizeLaunchLinkFormProps {
   resetField: ReturnType<
     typeof useForm<EnvVariablesCustomizationForm>
   >["resetField"];
+  watch: ReturnType<typeof useForm<EnvVariablesCustomizationForm>>["watch"];
 }
 
 function CustomizeLaunchLinkForm({
@@ -75,6 +76,7 @@ function CustomizeLaunchLinkForm({
   handleSubmit,
   register,
   resetField,
+  watch,
 }: CustomizeLaunchLinkFormProps) {
   const onSubmit = () => {};
 
@@ -98,6 +100,7 @@ function CustomizeLaunchLinkForm({
             control={control}
             register={register}
             resetField={resetField}
+            watch={watch}
           />
         ))}
       </Form>
@@ -174,21 +177,24 @@ function getLauncherDefaultValues(
   return { envVariables };
 }
 
-interface EnvVariablesCustomizationFormContentProps {
-  control: CustomizeLaunchLinkFormProps["control"];
-  errors: CustomizeLaunchLinkFormProps["errors"];
+interface EnvVariablesCustomizationFormContentProps
+  extends Pick<
+    CustomizeLaunchLinkFormProps,
+    "control" | "errors" | "register" | "resetField" | "watch"
+  > {
   index: number;
-  register: CustomizeLaunchLinkFormProps["register"];
-  resetField: CustomizeLaunchLinkFormProps["resetField"];
 }
 
 function EditEnvVariablesCustomizationFormContent({
   control,
   errors,
   index,
   resetField,
+  watch,
 }: EnvVariablesCustomizationFormContentProps) {
   const error = errors.envVariables ? errors.envVariables[index] : undefined;
+  const isCustomized = watch(`envVariables.${index}.isCustomized`);
+  console.log({ index, isCustomized });
   return (
     <div className={cx("d-flex", "align-items-baseline", "gap-3", "mb-3")}>
       <FormGroup check>
@@ -223,16 +229,19 @@ function EditEnvVariablesCustomizationFormContent({
           name={`envVariables.${index}.value`}
           render={({ field }) => {
             const { ref, ...fieldProps } = field;
-            return (
+            return isCustomized ? (
               <Input
                 bsSize="sm"
                 className={cx(error?.value && "is-invalid")}
+                disabled={!isCustomized}
                 placeholder="value"
                 type="text"
                 data-cy={`env-variables-input_${index}-value`}
                 {...fieldProps}
                 innerRef={ref}
               />
+            ) : (
+              <Label>{fieldProps.value}</Label>
             );
           }}
           rules={{
@@ -351,10 +360,10 @@ function SessionLaunchLink({
   );
 }
 
-interface SessionLaunchLinkCustomizationProps
-  extends Pick<CustomizeLaunchLinkFormProps, "fields"> {
-  watch: ReturnType<typeof useForm<EnvVariablesCustomizationForm>>["watch"];
-}
+type SessionLaunchLinkCustomizationProps = Pick<
+  CustomizeLaunchLinkFormProps,
+  "fields" | "watch"
+>;
 function SessionLaunchLinkCustomization({
   fields,
   watch,
@@ -458,6 +467,7 @@ export default function SessionLaunchLinkModal({
           handleSubmit={handleSubmit}
           register={register}
           resetField={resetField}
+          watch={watch}
         />
       </ModalFooter>
     </Modal>