feat: Allow using legacy code editor

fr-ser · Jun 28, 2022 · fdb932b · fdb932b
1 parent aa1918e
commit fdb932b
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
 
-## [3.1.0] - 2022-06-22
+## [3.1.0] - 2022-06-28
 
 ### Changed
 

diff --git a/selenium/writing_queries.test.ts b/selenium/writing_queries.test.ts
@@ -24,13 +24,14 @@ describe.only('writing queries', () => {
     await driver.quit();
   });
 
-  it.only(
+  it(
     'runs an updated query',
     saveTestState(testStatus, async () => {
-      // the .inputarea element is an invisible accessibility element belonging to the monaco
-      // code editor
+      // the .inputarea element is an invisible accessibility element belonging to the monaco code editor
       await driver.findElement(By.css('.inputarea')).sendKeys(Key.chord(Key.CONTROL, 'a'), 'SELECT 12345678987654321');
       await driver.findElement(By.css('.explore-toolbar')).click();
+
+      // check that the query was executed with the new input
       await driver.wait(
         until.elementLocated(
           By.xpath(`//div[contains(@aria-label, 'Explore Table')]//*[text()[contains(., "12345678987654321")]]`)
@@ -39,4 +40,31 @@ describe.only('writing queries', () => {
       );
     })
   );
+
+  it(
+    'converts the new code editor to the legacy code editor',
+    saveTestState(testStatus, async () => {
+      // the .inputarea element is an invisible accessibility element belonging to the monaco code editor
+      await driver.findElement(By.css('.inputarea')).sendKeys(Key.chord(Key.CONTROL, 'a'), 'SELECT 12121992');
+      await driver.findElement(By.xpath(`//input[contains(@role, 'use-legacy-editor-switch')]//..//label`)).click();
+      await driver.wait(
+        until.elementLocated(
+          By.xpath(`//textarea[contains(@role, 'query-editor-input')][text()[contains(., "12121992")]]`)
+        ),
+        5 * 1000
+      );
+
+      await driver
+        .findElement(By.css('[role="query-editor-input"]'))
+        .sendKeys(Key.chord(Key.CONTROL, 'a'), 'SELECT 231992');
+
+      // check that the query was executed with the new input
+      await driver.wait(
+        until.elementLocated(
+          By.xpath(`//div[contains(@aria-label, 'Explore Table')]//*[text()[contains(., "231992")]]`)
+        ),
+        5 * 1000
+      );
+    })
+  );
 });
diff --git a/src/QueryEditor.tsx b/src/QueryEditor.tsx
@@ -1,7 +1,7 @@
-import { TagsInput, Icon, Alert, InlineFormLabel, Select, CodeEditor } from '@grafana/ui';
+import { TextArea, TagsInput, Icon, Alert, InlineFormLabel, Select, CodeEditor, Switch } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import defaults from 'lodash/defaults';
-import React, { useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 
 import { DataSource } from './DataSource';
 import { defaultQuery, MyDataSourceOptions, SQLiteQuery } from './types';
@@ -54,39 +54,68 @@ export function QueryEditor(props: Props) {
   const query = defaults(props.query, defaultQuery);
   const { rawQueryText, timeColumns } = query;
   const [showHelp, setShowHelp] = useState(false);
+  const [useLegacyEditor, setUseLegacyEditor] = useState(false);
 
   const options: Array<SelectableValue<string>> = [
     { label: 'Table', value: 'table' },
     { label: 'Time series', value: 'time series' },
   ];
   const selectedOption = options.find((options) => options.value === query.queryType) || options[0];
+
   return (
     <>
-      <div className="gf-form max-width-8" role="query-type-container">
-        <Select
-          allowCustomValue={false}
-          isSearchable={false}
-          onChange={onQueryTypeChange}
-          options={options}
-          value={selectedOption}
+      {useLegacyEditor ? (
+        <div className="gf-form">
+          <TextArea
+            style={{ height: 100 }}
+            role="query-editor-input"
+            value={rawQueryText}
+            onBlur={() => props.onRunQuery()}
+            onChange={(event: ChangeEvent<HTMLTextAreaElement>) => onQueryTextChange(event.target.value)}
+          />
+        </div>
+      ) : (
+        <CodeEditor
+          height={calculateHeight(rawQueryText)}
+          value={rawQueryText}
+          onBlur={onQueryTextChange}
+          onSave={onQueryTextChange}
+          language="sql"
+          showMiniMap={false}
         />
-      </div>
-      <CodeEditor
-        height={calculateHeight(rawQueryText)}
-        value={rawQueryText}
-        onBlur={onQueryTextChange}
-        onSave={onQueryTextChange}
-        language="sql"
-        showMiniMap={false}
-      />
-      <div className="gf-form">
-        <div style={{ display: 'flex', flexDirection: 'column', marginRight: 15 }} role="time-column-selector">
+      )}
+      <div className="gf-form-inline">
+        <div className="gf-form" role="query-type-container" style={{ marginRight: 15 }}>
           <InlineFormLabel>
-            <div style={{ whiteSpace: 'nowrap' }} onClick={() => setShowHelp(!showHelp)}>
-              Time formatted columns <Icon name={showHelp ? 'angle-down' : 'angle-right'} />
-            </div>
+            <div style={{ whiteSpace: 'nowrap' }}>Format as:</div>
           </InlineFormLabel>
-          <TagsInput onChange={(tags: string[]) => onUpdateColumnTypes('timeColumns', tags)} tags={timeColumns} />
+          <Select
+            allowCustomValue={false}
+            isSearchable={false}
+            onChange={onQueryTypeChange}
+            options={options}
+            value={selectedOption}
+          />
+        </div>
+        <div className="gf-form">
+          <div style={{ display: 'flex', flexDirection: 'row', marginRight: 15 }} role="time-column-selector">
+            <InlineFormLabel>
+              <div style={{ whiteSpace: 'nowrap' }} onClick={() => setShowHelp(!showHelp)}>
+                Time formatted columns <Icon name={showHelp ? 'angle-down' : 'angle-right'} />
+              </div>
+            </InlineFormLabel>
+            <TagsInput onChange={(tags: string[]) => onUpdateColumnTypes('timeColumns', tags)} tags={timeColumns} />
+          </div>
+          <div className="gf-form" style={{ alignItems: 'center' }}>
+            <InlineFormLabel>
+              <div style={{ whiteSpace: 'nowrap' }}>Use legacy code editor:</div>
+            </InlineFormLabel>
+            <Switch
+              role="use-legacy-editor-switch"
+              value={useLegacyEditor}
+              onChange={() => setUseLegacyEditor(!useLegacyEditor)}
+            />
+          </div>
         </div>
       </div>
       {showHelp && (