[BUGFIX] Fix variable editing panel's custom all value text field to handle empty string

plugin-system/src/components/Variables/VariableEditorForm/VariableEditorForm.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { DispatchWithoutAction, ReactElement, useCallback, useState } from 'react';
+import { DispatchWithoutAction, ReactElement, useCallback, useState, useEffect } from 'react';
 import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';
 import { VariableDefinition, ListVariableDefinition, Action } from '@perses-dev/core';
 import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';
@@ -121,11 +121,24 @@ function ListVariableEditorForm({ action, control }: KindVariableEditorFormProps
     name: 'spec.allowAllValue',
   });
 
+  const _customAllValue = useWatch<VariableDefinition, 'spec.customAllValue'>({
+    control: control,
+    name: 'spec.customAllValue',
+  });
+
   const sortMethod = useWatch<VariableDefinition, 'spec.sort'>({
     control: control,
     name: 'spec.sort',
   }) as SortMethodName;
 
+  // State for managing whether to use custom all value
+  const [useCustomAllValue, setUseCustomAllValue] = useState(_customAllValue !== undefined);
+
+  // Sync switch state when form value changes externally
+  useEffect(() => {
+    setUseCustomAllValue(_customAllValue !== undefined);
+  }, [_customAllValue]);
+
   // When variable kind is selected we need to provide default values
   // TODO: check if react-hook-form has a better way to do this
   if (values.spec.allowAllValue === undefined) {
@@ -309,35 +322,53 @@ function ListVariableEditorForm({ action, control }: KindVariableEditorFormProps
             Enables an option to include all variable values
           </Typography>
           {_allowAllValue && (
-            <Controller
-              control={control}
-              name="spec.customAllValue"
-              render={({ field, fieldState }) => (
-                <TextField
-                  {...field}
-                  fullWidth
-                  label="Custom All Value"
-                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}
-                  InputProps={{
-                    readOnly: action === 'read',
-                  }}
-                  error={!!fieldState.error}
-                  helperText={
-                    fieldState.error?.message
-                      ? fieldState.error.message
-                      : 'When All is selected, this value will be used'
-                  }
-                  value={field.value ?? ''}
-                  onChange={(event) => {
-                    if (event.target.value === '') {
-                      field.onChange(undefined);
-                    } else {
-                      field.onChange(event);
-                    }
-                  }}
+            <Stack spacing={1}>
+              <FormControlLabel
+                label="Use Custom All Value"
+                control={
+                  <Switch
+                    checked={useCustomAllValue}
+                    readOnly={action === 'read'}
+                    onChange={(event) => {
+                      if (action === 'read') return;
+                      const isEnabled = event.target.checked;
+                      setUseCustomAllValue(isEnabled);
+                      if (!isEnabled) {
+                        form.setValue('spec.customAllValue', undefined);
+                      } else {
+                        form.setValue('spec.customAllValue', '');
+                      }
+                    }}
+                  />
+                }
+              />
+              <Typography variant="caption" sx={{ mt: -0.5 }}>
+                Enable to set a custom value when &quot;All&quot; is selected
+              </Typography>
+              {useCustomAllValue && (
+                <Controller
+                  control={control}
+                  name="spec.customAllValue"
+                  render={({ field, fieldState }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      label="Custom All Value"
+                      InputLabelProps={{ shrink: action === 'read' ? true : undefined }}
+                      InputProps={{
+                        readOnly: action === 'read',
+                      }}
+                      error={!!fieldState.error}
+                      helperText={fieldState.error?.message}
+                      value={field.value ?? ''}
+                      onChange={(event) => {
+                        field.onChange(event.target.value || '');
+                      }}
+                    />
+                  )}
                 />
               )}
-            />
+            </Stack>
           )}
         </Stack>
       </Stack>