setup form

8.1.4/button-with-textfield/package.json

@@ -21,4 +21,4 @@
   "engines": {
     "node": ">=14"
   }
-}
+}

8.1.4/button-with-textfield/src/SimplePanel.tsx

@@ -2,35 +2,62 @@ import React from 'react';
 import { PanelProps } from '@grafana/data';
 import { SimpleOptions } from 'types';
 import { css, cx } from 'emotion';
-import { stylesFactory } from '@grafana/ui';
-
+import { stylesFactory, Field, Input, Form, Button } from '@grafana/ui';
 interface Props extends PanelProps<SimpleOptions> {}
 
 export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
   const styles = getStyles();
   let form;
 
+  interface numberInput {
+    value: number;
+  }
+  let sendValue: numberInput = { value: options.default };
   function FormWithInput() {
     return (
-      <form onSubmit={sendRequest} className={styles.form}>
-        <label>
-          {options.text}:
-          <input type="number" name="testinput" />
-        </label>
-        <input type="submit" value="Send" />
-      </form>
+      <Form
+        defaultValues={sendValue}
+        onSubmit={(userinput: numberInput) => {
+          console.log(userinput.value);
+          sendRequest(userinput.value);
+        }}
+      >
+        {({ register, errors }) => {
+          return (
+            <div>
+              <Field label={options.text}>
+                <Input css={undefined} id="test" type="number" step={0.01} {...register('value')} />
+              </Field>
+              <Button type="submit">Test Button</Button>
+            </div>
+          );
+        }}
+      </Form>
     );
   }
   function FormWithoutInput() {
     return (
-      <form>
-        <input type="submit" value="Send" />
-      </form>
+      <Form
+        defaultValues={sendValue}
+        onSubmit={(userinput: numberInput) => {
+          console.log(userinput.value);
+          sendRequest(userinput.value);
+        }}
+      >
+        {({ register, errors }) => {
+          return (
+            <div>
+              <Button type="submit">Test Button</Button>
+            </div>
+          );
+        }}
+      </Form>
     );
   }
 
-  function sendRequest(event: any) {
-    fetch(options.url + { event }).then(() => alert('It worked'));
+  function sendRequest(event: number) {
+    //console.log(event);
+    fetch(options.url + event).then(response => console.log(response));
   }
 
   if (options.showInputField) {

8.1.4/button-with-textfield/src/module.ts

@@ -20,6 +20,11 @@ export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOption
       name: 'Destination URL',
       description: 'The destination URL for the request'
     })
+    .addNumberInput({
+      path: 'default',
+      name: 'default number',
+      description: 'a default number for the input'
+    })
     /* .addRadio({
       path: 'seriesCountSize',
       defaultValue: 'sm',

8.1.4/button-with-textfield/src/types.ts

@@ -2,4 +2,5 @@ export interface SimpleOptions {
   text: string;
   showInputField: boolean;
   url: string;
+  default: number;
 }