Fix query builder behaviour

ui/queryBuilder/QueryBuilder.tsx

@@ -12,7 +12,13 @@ interface Props {
   isLoading?: boolean;
 }
 
-const QueryBuilder = (props: Props) => {
+const QueryBuilder = ({ initialValue, onSubmit, isLoading }: Props) => {
+  const [ currentValue, setCurrentValue ] = React.useState(initialValue);
+
+  React.useEffect(() => {
+    setCurrentValue(initialValue);
+  }, [ initialValue ]);
+
   return (
     <Box>
       <TabsRoot defaultValue="visual" variant="segmented" size="sm">
@@ -22,11 +28,20 @@ const QueryBuilder = (props: Props) => {
         </TabsList>
 
         <TabsContent value="visual">
-          <QueryBuilderVisual { ...props }
+          <QueryBuilderVisual
+            value={ currentValue }
+            onValueChange={ setCurrentValue }
+            onSubmit={ onSubmit }
+            isLoading={ isLoading }
           />
         </TabsContent>
         <TabsContent value="input">
-          <QueryBuilderInput { ...props }/>
+          <QueryBuilderInput
+            value={ currentValue }
+            onValueChange={ setCurrentValue }
+            onSubmit={ onSubmit }
+            isLoading={ isLoading }
+          />
         </TabsContent>
       </TabsRoot>
     </Box>

ui/queryBuilder/input/QueryBuilderInput.tsx

@@ -79,13 +79,13 @@ const detailsByOperator: Record<string, string> = {
 };
 
 interface Props {
-  initialValue: string;
+  value: string;
+  onValueChange: (value: string) => void;
   onSubmit: (value: string) => void;
   isLoading?: boolean;
 }
 
-const QueryBuilderInput = ({ initialValue, onSubmit, isLoading }: Props) => {
-  const [ value, setValue ] = React.useState(initialValue);
+const QueryBuilderInput = ({ value, onValueChange, onSubmit, isLoading }: Props) => {
   const instanceRef = React.useRef<Monaco | null>(null);
   const editorRef = React.useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
 
@@ -98,8 +98,8 @@ const QueryBuilderInput = ({ initialValue, onSubmit, isLoading }: Props) => {
   }, [ colorMode ]);
 
   const handleChange = React.useCallback((newValue: string | undefined) => {
-    setValue(newValue || '');
-  }, []);
+    onValueChange(newValue || '');
+  }, [ onValueChange ]);
 
   const handleSubmit = React.useCallback(() => {
     if (validation.isValid) {

ui/queryBuilder/visual/QueryBuilderVisual.tsx

@@ -18,13 +18,30 @@ import ValueEditor from './ValueEditor';
 import 'react-querybuilder/dist/query-builder.css';
 
 interface Props {
-  initialValue: string;
+  value: string;
+  onValueChange: (value: string) => void;
   onSubmit: (value: string) => void;
   isLoading?: boolean;
 }
 
-const QueryBuilderVisual = ({ initialValue, onSubmit, isLoading }: Props) => {
-  const [ query, setQuery ] = React.useState<RuleGroupType>(() => stringToRuleGroup(initialValue));
+const QueryBuilderVisual = ({ value, onValueChange, onSubmit, isLoading }: Props) => {
+  const [ query, setQuery ] = React.useState<RuleGroupType>(() => stringToRuleGroup(value));
+  const lastEmittedValueRef = React.useRef<string>(value);
+
+  React.useEffect(() => {
+    // Only update query if value changed externally (not from our own handleQueryChange)
+    if (value !== lastEmittedValueRef.current) {
+      const newQuery = stringToRuleGroup(value);
+      setQuery(newQuery);
+    }
+  }, [ value ]);
+
+  const handleQueryChange = React.useCallback((newQuery: RuleGroupType) => {
+    setQuery(newQuery);
+    const stringValue = ruleGroupToString(newQuery);
+    lastEmittedValueRef.current = stringValue;
+    onValueChange(stringValue);
+  }, [ onValueChange ]);
 
   const handleSubmit = React.useCallback(() => {
     onSubmit(ruleGroupToString(query));
@@ -60,7 +77,7 @@ const QueryBuilderVisual = ({ initialValue, onSubmit, isLoading }: Props) => {
       <QueryBuilderChakra>
         <QueryBuilder
           query={ query }
-          onQueryChange={ setQuery }
+          onQueryChange={ handleQueryChange }
           getOperators={ getOperators }
           validator={ validateQuery }
           resetOnFieldChange={ false }