Add TextArea Parameter (#16)

* Fix Slider options when changing type * Fix Parameter Options * Update Dashboard * Add TextArea with Rows and rearrange types * Add TextArea Parameter
VolkovLabs · May 11, 2022 · 32f3aeb · 32f3aeb
1 parent c8539fe
commit 32f3aeb
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 28 deletions.
diff --git a/provisioning/dashboards/panels.json b/provisioning/dashboards/panels.json
@@ -136,7 +136,7 @@
         "uid": "grafana"
       },
       "gridPos": {
-        "h": 9,
+        "h": 12,
         "w": 9,
         "x": 0,
         "y": 6
@@ -161,13 +161,13 @@
             "id": "name",
             "title": "Name",
             "type": "string",
-            "value": "Hello"
+            "value": "Test"
           },
           {
             "id": "amount",
             "title": "Amount",
             "type": "number",
-            "value": "123"
+            "value": "1234"
           },
           {
             "id": "updated",
@@ -182,7 +182,7 @@
             "step": 1,
             "title": "Step",
             "type": "slider",
-            "value": 3
+            "value": 1
           },
           {
             "id": "select",
@@ -202,7 +202,7 @@
             ],
             "title": "Select",
             "type": "select",
-            "value": "avg"
+            "value": "max"
           },
           {
             "id": "radio",
@@ -218,7 +218,13 @@
             ],
             "title": "Radio",
             "type": "radio",
-            "value": "plus"
+            "value": "minus"
+          },
+          {
+            "id": "text",
+            "rows": 4,
+            "title": "Text",
+            "type": "textarea"
           }
         ],
         "reset": {
@@ -265,6 +271,6 @@
   "timezone": "",
   "title": "Panels",
   "uid": "O4tc_E6Gz",
-  "version": 12,
+  "version": 13,
   "weekStart": ""
 }
diff --git a/src/components/FormPanel/FormPanel.tsx b/src/components/FormPanel/FormPanel.tsx
@@ -13,6 +13,7 @@ import {
   RadioButtonGroup,
   Select,
   Slider,
+  TextArea,
 } from '@grafana/ui';
 import { BooleanParameterOptions, ButtonVariant, InputParameterType, RequestMethod } from '../../constants';
 import { getStyles } from '../../styles';
@@ -232,6 +233,19 @@ export const FormPanel: React.FC<Props> = ({ options, width, height, onOptionsCh
               </InlineField>
             )}
 
+            {parameter.type === InputParameterType.TEXTAREA && (
+              <InlineField label={parameter.title} grow labelWidth={10} invalid={parameter.value === ''}>
+                <TextArea
+                  value={parameter.value}
+                  onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+                    parameter.value = event.target.value;
+                    onOptionsChange(options);
+                  }}
+                  rows={parameter.rows}
+                />
+              </InlineField>
+            )}
+
             {parameter.type === InputParameterType.BOOLEAN && (
               <InlineField label={parameter.title} grow labelWidth={10}>
                 <RadioButtonGroup

diff --git a/src/components/InputParametesEditor/InputParametersEditor.tsx b/src/components/InputParametesEditor/InputParametersEditor.tsx
@@ -1,13 +1,7 @@
 import React, { ChangeEvent, useState } from 'react';
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
 import { Button, FieldSet, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
-import {
-  InputParameterDefault,
-  InputParameterOptionDefault,
-  InputParameterType,
-  InputParameterTypeOptions,
-  SliderDefault,
-} from '../../constants';
+import { InputParameterDefault, InputParameterType, InputParameterTypeOptions, SliderDefault } from '../../constants';
 import { InputParameter } from '../../types';
 
 /**
@@ -105,6 +99,17 @@ export const InputParametersEditor: React.FC<Props> = ({ value: parameters, onCh
               options={InputParameterTypeOptions}
               onChange={(event: SelectableValue) => {
                 parameter.type = event?.value;
+
+                /**
+                 * Slider values
+                 */
+                if (parameter.type === InputParameterType.SLIDER) {
+                  parameter.min = SliderDefault.min;
+                  parameter.max = SliderDefault.max;
+                  parameter.step = SliderDefault.step;
+                  parameter.value = SliderDefault.value;
+                }
+
                 onChange(parameters);
               }}
               value={InputParameterTypeOptions.find((type) => type.value === parameter.type)}
@@ -152,10 +157,28 @@ export const InputParametersEditor: React.FC<Props> = ({ value: parameters, onCh
             </InlineFieldRow>
           )}
 
+          {parameter.type === InputParameterType.TEXTAREA && (
+            <InlineFieldRow>
+              <InlineField label="Rows" labelWidth={8}>
+                <Input
+                  placeholder="Rows"
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                    parameter.rows = Number(event.target.value);
+                    onChange(parameters);
+                  }}
+                  type="number"
+                  width={10}
+                  value={parameter.rows}
+                  min={2}
+                />
+              </InlineField>
+            </InlineFieldRow>
+          )}
+
           {(parameter.type === InputParameterType.RADIO || parameter.type === InputParameterType.SELECT) && (
             <div>
-              {Array.from(parameter.options || []).map((option) => (
-                <InlineFieldRow key={parameter.id}>
+              {parameter.options?.map((option) => (
+                <InlineFieldRow key={option.id}>
                   <InlineField label="Value" labelWidth={8}>
                     <Input
                       placeholder="value"
@@ -191,9 +214,9 @@ export const InputParametersEditor: React.FC<Props> = ({ value: parameters, onCh
                 variant="secondary"
                 onClick={(e) => {
                   if (parameter.options) {
-                    parameter.options.push(InputParameterOptionDefault);
+                    parameter.options.push({ value: '', label: '' });
                   } else {
-                    parameter.options = [InputParameterOptionDefault];
+                    parameter.options = [{ value: '', label: '' }];
                   }
 
                   onChange(parameters);

diff --git a/src/constants/default.ts b/src/constants/default.ts
@@ -1,4 +1,3 @@
-import { SelectableValue } from '@grafana/data';
 import { InputParameter } from '../types';
 import { InputParameterType } from './parameter';
 
@@ -39,4 +38,3 @@ export const SliderDefault = {
  * Input Parameter
  */
 export const InputParameterDefault: InputParameter = { id: '', title: '', type: InputParameterType.STRING };
-export const InputParameterOptionDefault: SelectableValue = { value: '', label: '' };
diff --git a/src/constants/parameter.ts b/src/constants/parameter.ts
@@ -11,35 +11,40 @@ export const enum InputParameterType {
   RADIO = 'radio',
   SLIDER = 'slider',
   SELECT = 'select',
+  TEXTAREA = 'textarea',
 }
 
 /**
  * Input Parameter Type Options
  */
 export const InputParameterTypeOptions: SelectableValue[] = [
   {
-    value: InputParameterType.STRING,
-    label: CapitalizeFirstLetter(InputParameterType.STRING),
+    value: InputParameterType.BOOLEAN,
+    label: CapitalizeFirstLetter(InputParameterType.BOOLEAN),
   },
   {
     value: InputParameterType.NUMBER,
     label: CapitalizeFirstLetter(InputParameterType.NUMBER),
   },
   {
-    value: InputParameterType.BOOLEAN,
-    label: CapitalizeFirstLetter(InputParameterType.BOOLEAN),
+    value: InputParameterType.RADIO,
+    label: CapitalizeFirstLetter(InputParameterType.RADIO),
+  },
+  {
+    value: InputParameterType.SELECT,
+    label: CapitalizeFirstLetter(InputParameterType.SELECT),
   },
   {
     value: InputParameterType.SLIDER,
     label: CapitalizeFirstLetter(InputParameterType.SLIDER),
   },
   {
-    value: InputParameterType.RADIO,
-    label: CapitalizeFirstLetter(InputParameterType.RADIO),
+    value: InputParameterType.STRING,
+    label: CapitalizeFirstLetter(InputParameterType.STRING),
   },
   {
-    value: InputParameterType.SELECT,
-    label: CapitalizeFirstLetter(InputParameterType.SELECT),
+    value: InputParameterType.TEXTAREA,
+    label: CapitalizeFirstLetter(InputParameterType.TEXTAREA),
   },
 ];
 

diff --git a/src/types/parameter.ts b/src/types/parameter.ts
@@ -60,4 +60,11 @@ export interface InputParameter {
    * @type {number}
    */
   step?: number;
+
+  /**
+   * Rows
+   *
+   * @type {number}
+   */
+  rows?: number;
 }