Prometheus/Explore: Update position of fields in editor (#27816)

* Update position of buttons

* Refactor, add tests

* Pass onKeydown func

* Update public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx

@@ -1,9 +1,7 @@
 import React, { memo, FC } from 'react';
-import { css } from 'emotion';
 
 // Types
 import { ExploreQueryFieldProps } from '@grafana/data';
-import { RadioButtonGroup } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery, PromOptions } from '../types';
@@ -28,6 +26,12 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
     }
   }
 
+  function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter' && (e.shiftKey || e.ctrlKey)) {
+      onRunQuery();
+    }
+  }
+
   function onQueryTypeChange(value: string) {
     const { query, onChange } = props;
     let nextQuery;
@@ -41,69 +45,25 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
     onChange(nextQuery);
   }
 
-  function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-    if (e.key === 'Enter') {
-      onRunQuery();
-    }
-  }
-
   return (
-    <>
-      <PromQueryField
-        datasource={datasource}
-        query={query}
-        onRunQuery={onRunQuery}
-        onChange={onChange}
-        onBlur={() => {}}
-        history={history}
-        data={data}
-        ExtraFieldElement={
-          <PromExploreExtraField
-            label={'Step'}
-            onChangeFunc={onStepChange}
-            onKeyDownFunc={onReturnKeyDown}
-            value={query.interval || ''}
-            hasTooltip={true}
-            tooltipContent={
-              'Time units can be used here, for example: 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)'
-            }
-          />
-        }
-      />
-      <PromExploreRadioButton
-        selected={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
-        onQueryTypeChange={onQueryTypeChange}
-      />
-    </>
-  );
-};
-
-type PromExploreRadioButtonProps = {
-  selected: string;
-  onQueryTypeChange: (value: string) => void;
-};
-
-const PromExploreRadioButton: React.FunctionComponent<PromExploreRadioButtonProps> = ({
-  selected,
-  onQueryTypeChange,
-}) => {
-  const rangeOptions = [
-    { value: 'range', label: 'Range' },
-    { value: 'instant', label: 'Instant' },
-    { value: 'both', label: 'Both' },
-  ];
-
-  return (
-    <div
-      className={css`
-        display: flex;
-      `}
-    >
-      <button className={`gf-form-label gf-form-label--btn width-5`}>
-        <span className="btn-title">Query type</span>
-      </button>
-      <RadioButtonGroup options={rangeOptions} value={selected} onChange={onQueryTypeChange} />
-    </div>
+    <PromQueryField
+      datasource={datasource}
+      query={query}
+      onRunQuery={onRunQuery}
+      onChange={onChange}
+      onBlur={() => {}}
+      history={history}
+      data={data}
+      ExtraFieldElement={
+        <PromExploreExtraField
+          queryType={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
+          stepValue={query.interval || ''}
+          onQueryTypeChange={onQueryTypeChange}
+          onStepChange={onStepChange}
+          onKeyDownFunc={onReturnKeyDown}
+        />
+      }
+    />
   );
 };