feat: Refactors VerticalGroup to Stack

Also makes the query inputs auto-sized

Author: NeedleInAJayStack

src/components/HaystackQueryInput.tsx

@@ -1,4 +1,4 @@
-import { Icon, InlineField, Input } from '@grafana/ui';
+import { AutoSizeInput, Icon, InlineField } from '@grafana/ui';
 import React, { ChangeEvent } from 'react';
 import { DEFAULT_QUERY, HaystackQuery } from 'types';
 
@@ -12,13 +12,13 @@ export function HaystackQueryInput({ query, onChange }: HaystackQueryInputProps)
     onChange(event.target.value);
   };
 
-  let width = 100;
+  let minWidth = 50;
   switch (query.type) {
     case "eval":
       return (
         <InlineField>
-          <Input
-            width={width}
+          <AutoSizeInput
+            minWidth={minWidth}
             prefix={<Icon name="angle-right" />}
             onChange={onQueryChange}
             value={query.eval}
@@ -29,8 +29,8 @@ export function HaystackQueryInput({ query, onChange }: HaystackQueryInputProps)
     case "hisRead":
       return (
         <InlineField>
-          <Input
-            width={width}
+          <AutoSizeInput
+            minWidth={minWidth}
             prefix={'@'}
             onChange={onQueryChange}
             value={query.hisRead}
@@ -41,8 +41,8 @@ export function HaystackQueryInput({ query, onChange }: HaystackQueryInputProps)
     case "hisReadFilter":
       return (
         <InlineField>
-          <Input
-            width={width}
+          <AutoSizeInput
+            minWidth={minWidth}
             prefix={<Icon name="filter" />}
             onChange={onQueryChange}
             value={query.hisReadFilter}
@@ -53,8 +53,8 @@ export function HaystackQueryInput({ query, onChange }: HaystackQueryInputProps)
     case "read":
       return (
         <InlineField>
-          <Input
-            width={width}
+          <AutoSizeInput
+            minWidth={minWidth}
             prefix={<Icon name="filter" />}
             onChange={onQueryChange}
             value={query.read}

src/components/QueryEditor.tsx

@@ -1,5 +1,5 @@
 import React, {  } from 'react';
-import { Button, Form, VerticalGroup } from '@grafana/ui';
+import { Button, Form, Stack } from '@grafana/ui';
 import { QueryEditorProps } from '@grafana/data';
 import { DataSource } from '../datasource';
 import { HaystackDataSourceOptions, HaystackQuery } from '../types';
@@ -30,11 +30,13 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
   }
 
   return (
-    <div className="gf-form">
       <Form onSubmit={onSubmit}>
         {({ register, errors }) => {
           return (
-            <VerticalGroup>
+            <Stack
+              direction="column"
+              alignItems="flex-start"
+            >
               <HaystackQueryTypeSelector
                 datasource={datasource}
                 type={query.type}
@@ -46,10 +48,9 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
                 onChange={onQueryChange}
               />
               <Button type="submit" >Run</Button>
-            </VerticalGroup>
+            </Stack>
           );
         }}
       </Form>
-    </div>
   );
 }