fix: Fix editing search tiles in dashboard (#820)

Fix the issue with `select` field becoming an empty array for Search tiles.

Author: ernestii

packages/app/src/components/DBEditTimeChartForm.tsx

@@ -339,7 +339,7 @@ export default function EditTimeChartForm({
 
   const { fields, append, remove } = useFieldArray({
     control: control as Control<SavedChartConfigWithSelectArray>,
-    name: 'select', // TODO: bug with select = "" - it becomes and empty array
+    name: 'select',
   });
 
   const select = watch('select');
@@ -422,6 +422,17 @@ export default function EditTimeChartForm({
     })();
   }, [handleSubmit, setChartConfig, setQueriedConfig, tableSource, dateRange]);
 
+  const handleSave = useCallback(
+    (v: SavedChartConfig) => {
+      // If the chart type is search, we need to ensure the select is a string
+      if (displayType === DisplayType.Search && typeof v.select !== 'string') {
+        v.select = '';
+      }
+      onSave?.(v);
+    },
+    [onSave, displayType],
+  );
+
   watch((_, { name, type }) => {
     // Emulate the granularity picker auto-searching similar to dashboards
     if (name === 'granularity' && type === 'change') {
@@ -786,11 +797,7 @@ export default function EditTimeChartForm({
             <Button
               loading={isSaving}
               variant="outline"
-              onClick={() => {
-                handleSubmit(v => {
-                  onSave?.(v);
-                })();
-              }}
+              onClick={handleSubmit(handleSave)}
             >
               Save
             </Button>

packages/app/src/components/SQLInlineEditor.tsx

@@ -359,12 +359,22 @@ export function SQLInlineEditorControlled({
 }: Omit<SQLInlineEditorProps, 'value' | 'onChange'> & UseControllerProps<any>) {
   const { field } = useController(props);
 
+  // Guard against wrongly typed values
+  const value = field.value || props.defaultValue;
+
+  let stringValue = '';
+  if (typeof value === 'string') {
+    stringValue = value;
+  } else {
+    console.error('SQLInlineEditor: value is not a string', value);
+  }
+
   return (
     <SQLInlineEditor
       filterField={filterField}
       onChange={field.onChange}
       placeholder={placeholder}
-      value={field.value || props.defaultValue}
+      value={stringValue}
       additionalSuggestions={additionalSuggestions}
       queryHistoryType={queryHistoryType}
       {...props}