feat: 🎸 limit query results

lib/js/app/modules/queries/actions.ts

@@ -33,7 +33,10 @@ export const setQueryCacheLimitError = (error: Error): QueriesActions => ({
   payload: { error },
 });
 
-export const saveQuery = (name: string, body: Record<string, any>): QueriesActions => ({
+export const saveQuery = (
+  name: string,
+  body: Record<string, any>
+): QueriesActions => ({
   type: SAVE_QUERY,
   payload: { name, body },
 });
@@ -73,7 +76,9 @@ export const getSavedQueries = (): QueriesActions => ({
   type: GET_SAVED_QUERIES,
 });
 
-export const getSavedQueriesSuccess = (queries: Record<string, any>[]): QueriesActions => ({
+export const getSavedQueriesSuccess = (
+  queries: Record<string, any>[]
+): QueriesActions => ({
   type: GET_SAVED_QUERIES_SUCCESS,
   payload: { queries },
 });
@@ -88,7 +93,9 @@ export const runQuery = (body: Record<string, any>): QueriesActions => ({
   payload: { body },
 });
 
-export const runQuerySuccess = (results: Record<string, any>): QueriesActions => ({
+export const runQuerySuccess = (
+  results: Record<string, any>
+): QueriesActions => ({
   type: RUN_QUERY_SUCCESS,
   payload: { results },
 });

lib/js/app/queryCreator/components/AbsoluteTime/__snapshots__/AbsoluteTime.test.tsx.snap

@@ -46,6 +46,27 @@ exports[`renders date picker for timeframe end 1`] = `
   box-shadow: 0 0 3px 1px rgba(119,163,187,0.5);
 }
 
+.c0 .DateInput_input:disabled {
+  border: 1px solid rgba(39,86,109,0.5);
+  background: #FFFFFF;
+}
+
+.c0 .DateInput_input:disabled::-webkit-input-placeholder {
+  color: rgba(39,52,55,0.4);
+}
+
+.c0 .DateInput_input:disabled::-moz-placeholder {
+  color: rgba(39,52,55,0.4);
+}
+
+.c0 .DateInput_input:disabled:-ms-input-placeholder {
+  color: rgba(39,52,55,0.4);
+}
+
+.c0 .DateInput_input:disabled::placeholder {
+  color: rgba(39,52,55,0.4);
+}
+
 .c0 .DateInput_fang {
   display: none;
 }
@@ -141,6 +162,27 @@ exports[`renders date picker for timeframe start 1`] = `
   box-shadow: 0 0 3px 1px rgba(119,163,187,0.5);
 }
 
+.c0 .DateInput_input:disabled {
+  border: 1px solid rgba(39,86,109,0.5);
+  background: #FFFFFF;
+}
+
+.c0 .DateInput_input:disabled::-webkit-input-placeholder {
+  color: rgba(39,52,55,0.4);
+}
+
+.c0 .DateInput_input:disabled::-moz-placeholder {
+  color: rgba(39,52,55,0.4);
+}
+
+.c0 .DateInput_input:disabled:-ms-input-placeholder {
+  color: rgba(39,52,55,0.4);
+}
+
+.c0 .DateInput_input:disabled::placeholder {
+  color: rgba(39,52,55,0.4);
+}
+
 .c0 .DateInput_fang {
   display: none;
 }

lib/js/app/queryCreator/components/GroupBy/GroupBy.test.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import {
-  render as rtlRender,
-  fireEvent,
-} from '@testing-library/react';
+import { render as rtlRender, fireEvent } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 
 import GroupBy from './GroupBy';
 
-
 const render = (storeState: any = {}, overProps: any = {}) => {
   const mockStore = configureStore([]);
   const store = mockStore({ ...storeState });

lib/js/app/queryCreator/components/Input/Input.styles.ts

@@ -19,6 +19,15 @@ export const inputMixin = () => css`
   &:focus {
     box-shadow: 0 0 3px 1px rgba(119, 163, 187, 0.5);
   }
+
+  &:disabled {
+    border: 1px solid ${transparentize(0.5, colors.blue[500])};
+    background: ${colors.white[500]};
+  }
+
+  &:disabled::placeholder {
+    color: ${transparentize(0.6, colors.black[400])};
+  }
 `;
 
 export const Input = styled.input`

lib/js/app/queryCreator/components/Limit/Limit.test.tsx

@@ -21,12 +21,41 @@ const render = (storeState: any = {}) => {
   };
 };
 
+test('allows user to set limit', () => {
+  const {
+    wrapper: { getByTestId },
+    store,
+  } = render({
+    query: {
+      groupBy: ['category'],
+      orderBy: [{ propertyName: 'result', direction: 'DESC' }],
+      limit: undefined,
+    },
+  });
+  const input = getByTestId('limit');
+
+  fireEvent.change(input, { target: { value: 80 } });
+
+  expect(store.getActions()).toMatchInlineSnapshot(`
+    Array [
+      Object {
+        "payload": Object {
+          "limit": 80,
+        },
+        "type": "@query-creator/SET_LIMIT",
+      },
+    ]
+  `);
+});
+
 test('allows user to set limit', () => {
   const {
     wrapper: { container },
     store,
   } = render({
     query: {
+      groupBy: ['category'],
+      orderBy: [{ propertyName: 'result', direction: 'DESC' }],
       limit: undefined,
     },
   });
@@ -46,16 +75,48 @@ test('allows user to set limit', () => {
   `);
 });
 
+test('do not allows user to set limit without order settings', () => {
+  const {
+    wrapper: { getByTestId },
+  } = render({
+    query: {
+      groupBy: ['category'],
+      orderBy: undefined,
+      limit: undefined,
+    },
+  });
+  const input = getByTestId('limit');
+
+  expect(input).toBeDisabled();
+});
+
+test('do not allows user to set limit without group by settings', () => {
+  const {
+    wrapper: { getByTestId },
+  } = render({
+    query: {
+      groupBy: undefined,
+      orderBy: [{ propertyName: 'result', direction: 'DESC' }],
+      limit: undefined,
+    },
+  });
+  const input = getByTestId('limit');
+
+  expect(input).toBeDisabled();
+});
+
 test('allows user to remove limit', () => {
   const {
-    wrapper: { container },
+    wrapper: { getByTestId },
     store,
   } = render({
     query: {
       limit: 100,
+      groupBy: ['category'],
+      orderBy: [{ propertyName: 'result', direction: 'DESC' }],
     },
   });
-  const input = container.querySelector('input[type="number"]');
+  const input = getByTestId('limit');
 
   fireEvent.change(input, { target: { value: null } });
 

lib/js/app/queryCreator/components/Limit/Limit.tsx

@@ -1,8 +1,15 @@
 import React, { FC, useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Label, Input } from '@keen.io/ui-core';
 
-import { setLimit, getLimit } from '../../modules/query';
+import Title from '../Title';
+import Input from '../Input';
+
+import {
+  setLimit,
+  getLimit,
+  getGroupBy,
+  getOrderBy,
+} from '../../modules/query';
 
 import text from './text.json';
 
@@ -11,6 +18,9 @@ type Props = {};
 const Limit: FC<Props> = () => {
   const dispatch = useDispatch();
   const limit = useSelector(getLimit);
+  const groupBy = useSelector(getGroupBy);
+  const orderBy = useSelector(getOrderBy);
+  const isDisabled = !groupBy || !orderBy;
 
   const changeHandler = useCallback((eventValue) => {
     if (eventValue) {
@@ -25,14 +35,22 @@ const Limit: FC<Props> = () => {
     return () => dispatch(setLimit(undefined));
   }, []);
 
+  useEffect(() => {
+    if (isDisabled) {
+      dispatch(setLimit(undefined));
+    }
+  }, [isDisabled]);
+
   return (
     <>
-      <Label htmlFor="limit">{text.label}</Label>
+      <Title isDisabled={isDisabled}>{text.label}</Title>
       <Input
+        disabled={isDisabled}
         type="number"
+        data-testid="limit"
         id="limit"
-        variant="solid"
-        value={limit ? limit : undefined}
+        placeholder={text.placeholder}
+        value={limit ? limit : ''}
         onChange={(e) => changeHandler(e.target.value)}
       />
     </>

lib/js/app/queryCreator/components/Limit/text.json

@@ -1,3 +1,4 @@
 {
-  "label": "Limit"
+  "label": "Limit results to",
+  "placeholder": "Limit to"
 }

lib/js/app/queryCreator/components/OrderBy/OrderBy.test.tsx

@@ -107,7 +107,7 @@ test('allows user to remove order by settings', () => {
     Array [
       Object {
         "payload": Object {
-          "orderBy": Array [],
+          "orderBy": undefined,
         },
         "type": "@query-creator/SET_ORDER_BY",
       },