Add timeshift input (#466)

src/components/QueryEditor/VisualQueryEditor.tsx

@@ -12,6 +12,7 @@ import { AdxDataSourceOptions, AdxSchema, defaultQuery, KustoQuery } from 'types
 import FilterSection from './VisualQueryEditor/FilterSection';
 import AggregateSection from './VisualQueryEditor/AggregateSection';
 import GroupBySection from './VisualQueryEditor/GroupBySection';
+import Timeshift from './VisualQueryEditor/Timeshift';
 
 type Props = QueryEditorProps<AdxDataSource, KustoQuery, AdxDataSourceOptions>;
 
@@ -99,6 +100,7 @@ export const VisualQueryEditor: React.FC<VisualQueryEditorProps> = (props) => {
       <FilterSection {...props} tableSchema={tableSchema} />
       <AggregateSection {...props} tableSchema={tableSchema} />
       <GroupBySection {...props} tableSchema={tableSchema} />
+      <Timeshift {...props} tableSchema={tableSchema} />
       {/* TODO: Use proper preview component */}
       <pre>{query.query}</pre>
     </EditorRows>

src/components/QueryEditor/VisualQueryEditor/Timeshift.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import { QueryEditorExpressionType } from 'components/LegacyQueryEditor/editor/expressions';
+import { mockDatasource, mockQuery } from 'components/__fixtures__/Datasource';
+import React from 'react';
+import { openMenu } from 'react-select-event';
+import { QueryEditorPropertyType } from 'schema/types';
+import Timeshift from './Timeshift';
+
+const defaultProps = {
+  datasource: mockDatasource(),
+  query: mockQuery,
+  templateVariableOptions: {},
+  tableSchema: {
+    loading: false,
+    value: [
+      {
+        Name: 'foo',
+        CslType: 'string',
+      },
+    ],
+  },
+  database: 'db',
+  onChange: jest.fn(),
+  onRunQuery: jest.fn(),
+};
+
+describe('TimeshiftItem', () => {
+  it('should select a time shift', () => {
+    const onChange = jest.fn();
+    render(<Timeshift {...defaultProps} onChange={onChange} />);
+    screen.getByLabelText('Add').click();
+    const sel = screen.getByLabelText('timeshift');
+    openMenu(sel);
+    screen.getByText('Hour before').click();
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        expression: expect.objectContaining({
+          timeshift: {
+            property: { name: '1h', type: QueryEditorPropertyType.TimeSpan },
+            type: QueryEditorExpressionType.Property,
+          },
+        }),
+      })
+    );
+  });
+});

src/components/QueryEditor/VisualQueryEditor/Timeshift.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+
+import { Button, Select } from '@grafana/ui';
+import { AccessoryButton, EditorField, EditorFieldGroup, EditorRow, InputGroup } from '@grafana/experimental';
+
+import { AdxColumnSchema, KustoQuery } from '../../../types';
+import { QueryEditorExpressionType } from 'components/LegacyQueryEditor/editor/expressions';
+import { QueryEditorPropertyType } from 'schema/types';
+import { AdxDataSource } from 'datasource';
+import { AsyncState } from 'react-use/lib/useAsyncFn';
+
+interface TimeshiftProps {
+  datasource: AdxDataSource;
+  query: KustoQuery;
+  tableSchema: AsyncState<AdxColumnSchema[]>;
+  onChange: (query: KustoQuery) => void;
+}
+
+const Timeshift: React.FC<TimeshiftProps> = (props) => {
+  const { datasource, query, onChange, tableSchema } = props;
+  const [displaySelect, setDisplaySelect] = useState(false);
+  const onChangeValue = (value?: string) => {
+    const newExpression = {
+      ...query.expression,
+      timeshift: {
+        property: {
+          name: value || '',
+          type: QueryEditorPropertyType.TimeSpan,
+        },
+        type: QueryEditorExpressionType.Property,
+      },
+    };
+    onChange({
+      ...query,
+      expression: newExpression,
+      query: datasource.parseExpression(newExpression, tableSchema.value),
+    });
+  };
+
+  return (
+    <EditorRow>
+      <EditorFieldGroup>
+        <EditorField label="Timeshift" optional={true}>
+          <InputGroup>
+            <Button
+              onClick={() => setDisplaySelect(true)}
+              variant="secondary"
+              size="md"
+              icon="plus"
+              aria-label="Add"
+              type="button"
+              hidden={displaySelect}
+            />
+            <div hidden={!displaySelect}>
+              <Select
+                width={'auto'}
+                aria-label="timeshift"
+                allowCustomValue
+                options={[
+                  {
+                    label: 'No timeshift',
+                    value: '',
+                  },
+                  {
+                    label: 'Hour before',
+                    value: '1h',
+                  },
+                  {
+                    label: 'Day before',
+                    value: '1d',
+                  },
+                  {
+                    label: 'Week before',
+                    value: '7d',
+                  },
+                ]}
+                value={query.expression.timeshift?.property?.name || ''}
+                onChange={(e) => onChangeValue(e.value)}
+              />
+              <AccessoryButton
+                aria-label="remove"
+                icon="times"
+                variant="secondary"
+                onClick={() => {
+                  onChangeValue();
+                  setDisplaySelect(false);
+                }}
+              />
+            </div>
+          </InputGroup>
+        </EditorField>
+      </EditorFieldGroup>
+    </EditorRow>
+  );
+};
+
+export default Timeshift;