Feat: If a query variable in a data manipulation operator is deleted, a warning message should be displayed to the user. #10427 #11255 (#11384)

### What problem does this PR solve?

Feat: If a query variable in a data manipulation operator is deleted, a
warning message should be displayed to the user. #10427 #11255

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/form/components/dynamic-fom-header.tsx

@@ -7,17 +7,24 @@ export type FormListHeaderProps = {
   label: ReactNode;
   tooltip?: string;
   onClick?: () => void;
+  disabled?: boolean;
 };
 
 export function DynamicFormHeader({
   label,
   tooltip,
   onClick,
+  disabled = false,
 }: FormListHeaderProps) {
   return (
     <div className="flex items-center justify-between">
       <FormLabel tooltip={tooltip}>{label}</FormLabel>
-      <Button variant={'ghost'} type="button" onClick={onClick}>
+      <Button
+        variant={'ghost'}
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+      >
         <Plus />
       </Button>
     </div>

web/src/pages/agent/form/components/query-variable-list.tsx

@@ -2,6 +2,10 @@ import { Button } from '@/components/ui/button';
 import { X } from 'lucide-react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { JsonSchemaDataType } from '../../constant';
+import {
+  flatOptions,
+  useFilterQueryVariableOptionsByTypes,
+} from '../../hooks/use-get-begin-query';
 import { DynamicFormHeader, FormListHeaderProps } from './dynamic-fom-header';
 import { QueryVariable } from './query-variable';
 
@@ -16,6 +20,10 @@ export function QueryVariableList({
   const form = useFormContext();
   const name = 'query';
 
+  let options = useFilterQueryVariableOptionsByTypes(types);
+
+  const secondOptions = flatOptions(options);
+
   const { fields, remove, append } = useFieldArray({
     name: name,
     control: form.control,
@@ -26,14 +34,15 @@ export function QueryVariableList({
       <DynamicFormHeader
         label={label}
         tooltip={tooltip}
-        onClick={() => append({ input: '' })}
+        onClick={() => append({ input: secondOptions.at(0)?.value })}
+        disabled={!secondOptions.length}
       ></DynamicFormHeader>
       <div className="space-y-5">
         {fields.map((field, index) => {
           const nameField = `${name}.${index}.input`;
 
           return (
-            <div key={field.id} className="flex items-center gap-2">
+            <div key={field.id} className="flex gap-2">
               <QueryVariable
                 name={nameField}
                 hideLabel

web/src/pages/agent/form/data-operations-form/index.tsx

@@ -4,6 +4,7 @@ import { Form } from '@/components/ui/form';
 import { Separator } from '@/components/ui/separator';
 import { buildOptions } from '@/utils/form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from 'i18next';
 import { memo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -25,7 +26,11 @@ import { SelectKeys } from './select-keys';
 import { Updates } from './updates';
 
 export const RetrievalPartialSchema = {
-  query: z.array(z.object({ input: z.string().optional() })),
+  query: z.array(
+    z.object({
+      input: z.string().min(1, { message: t('flow.queryRequired') }),
+    }),
+  ),
   operations: z.string(),
   select_keys: z.array(z.object({ name: z.string().optional() })).optional(),
   remove_keys: z.array(z.object({ name: z.string().optional() })).optional(),