revert some field/test changes

grafana · Nov 16, 2023 · e880fbf · e880fbf
1 parent e0e79a9
commit e880fbf
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 52 deletions.
diff --git a/src/components/queryBuilder/FilterEditor.test.tsx b/src/components/queryBuilder/FilterEditor.test.tsx
@@ -38,7 +38,9 @@ describe('FilterEditor', () => {
       const result = render(<FiltersEditor allColumns={[]} filters={filters} onFiltersChange={() => {}} />);
       expect(result.container.firstChild).not.toBeNull();
       expect(result.getAllByText(selectors.components.QueryEditor.QueryBuilder.WHERE.label).length).toBe(1);
-      expect(result.getByTestId('query-builder-filters-add-button')).toBeInTheDocument();
+      expect(result.queryByTestId('query-builder-filters-add-button')).not.toBeInTheDocument();
+      expect(result.getByTestId('query-builder-filters-inline-add-button')).toBeInTheDocument();
+      expect(result.getAllByTestId('query-builder-filters-inline-add-button').length).toBe(1);
       expect(result.getAllByTestId('query-builder-filters-remove-button').length).toBe(filters.length);
     });
     it('should call the onFiltersChange with correct args', async () => {
@@ -62,9 +64,11 @@ describe('FilterEditor', () => {
       const result = render(<FiltersEditor allColumns={[]} filters={filters} onFiltersChange={onFiltersChange} />);
       expect(result.container.firstChild).not.toBeNull();
       expect(result.getAllByText(selectors.components.QueryEditor.QueryBuilder.WHERE.label).length).toBe(1);
-      expect(result.getByTestId('query-builder-filters-add-button')).toBeInTheDocument();
+      expect(result.queryByTestId('query-builder-filters-add-button')).not.toBeInTheDocument();
+      expect(result.getByTestId('query-builder-filters-inline-add-button')).toBeInTheDocument();
+      expect(result.getAllByTestId('query-builder-filters-inline-add-button').length).toBe(1);
       expect(result.getAllByTestId('query-builder-filters-remove-button').length).toBe(filters.length);
-      await userEvent.click(result.getByTestId('query-builder-filters-add-button'));
+      await userEvent.click(result.getByTestId('query-builder-filters-inline-add-button'));
       expect(onFiltersChange).toBeCalledTimes(1);
       expect(onFiltersChange).toHaveBeenNthCalledWith(1, [...filters, defaultNewFilter]);
       await userEvent.click(result.getAllByTestId('query-builder-filters-remove-button')[0]);

diff --git a/src/components/queryBuilder/FilterEditor.tsx b/src/components/queryBuilder/FilterEditor.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Button, Input, MultiSelect, RadioButtonGroup, Select } from '@grafana/ui';
+import { Button, InlineFormLabel, Input, MultiSelect, RadioButtonGroup, Select } from '@grafana/ui';
 import { Filter, FilterOperator, TableColumn, NullFilter } from 'types/queryBuilder';
 import * as utils from 'components/queryBuilder/utils';
 import labels from 'labels';
 import { styles } from 'styles';
-import { EditorField, EditorFieldGroup } from '@grafana/experimental';
 
 const boolValues: Array<SelectableValue<boolean>> = [
   { value: true, label: 'True' },
@@ -67,7 +66,11 @@ const FilterValueNumberItem = (props: { value: number; onChange: (value: number)
 const FilterValueSingleStringItem = (props: { value: string; onChange: (value: string) => void }) => {
   return (
     <div data-testid="query-builder-filters-single-string-value-container">
-      <Input type="text" defaultValue={props.value} onBlur={(e) => props.onChange(e.currentTarget.value)} />
+      <Input
+        type="text"
+        defaultValue={props.value}
+        onBlur={(e) => props.onChange(e.currentTarget.value)}
+      />
     </div>
   );
 };
@@ -329,31 +332,34 @@ export const FilterEditor = (props: {
     onFilterChange(index, filter);
   };
   return (
-    <EditorFieldGroup>
+    <>
       {index !== 0 && (
         <RadioButtonGroup options={conditions} value={filter.condition} onChange={(e) => onFilterConditionChange(e!)} />
       )}
       <Select
         disabled={Boolean(filter.hint)}
         placeholder={filter.hint || undefined}
         value={filter.key}
-        width={30}
+        width={40}
+        className={styles.Common.inlineSelect}
         options={getFields()}
         isOpen={isOpen}
         onOpenMenu={() => setIsOpen(true)}
         onCloseMenu={() => setIsOpen(false)}
         onChange={(e) => onFilterNameChange(e.value!)}
         allowCustomValue={true}
+        menuPlacement={'bottom'}
       />
       <Select
         value={filter.operator}
         width={40}
         className={styles.Common.inlineSelect}
         options={getFilterOperatorsByType(filter.type)}
         onChange={(e) => onFilterOperatorChange(e.value!)}
+        menuPlacement={'bottom'}
       />
       <FilterValueEditor filter={filter} onFilterChange={onFilterValueChange} allColumns={fieldsList} />
-    </EditorFieldGroup>
+    </>
   );
 };
 
@@ -378,34 +384,61 @@ export const FiltersEditor = (props: {
     onFiltersChange(newFilters);
   };
   return (
-    <EditorField tooltip={tooltip} label={label}>
-      <EditorFieldGroup>
-        {filters.map((filter, index) => {
-          return (
-            <div className="gf-form" key={index}>
-              <FilterEditor allColumns={fieldsList} filter={filter} onFilterChange={onFilterChange} index={index} />
-              <Button
-                data-testid="query-builder-filters-remove-button"
-                icon="trash-alt"
-                variant="destructive"
-                size="sm"
-                className={styles.Common.smallBtn}
-                onClick={() => removeFilter(index)}
-              />
-            </div>
-          );
-        })}
-        <Button
-          data-testid="query-builder-filters-add-button"
-          icon="plus-circle"
-          variant="secondary"
-          size="sm"
-          className={styles.Common.smallBtn}
-          onClick={addFilter}
-        >
-          {addLabel}
-        </Button>
-      </EditorFieldGroup>
-    </EditorField>
+    <>
+      {filters.length === 0 && (
+        <div className="gf-form">
+          <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
+            {label}
+          </InlineFormLabel>
+          <Button
+            data-testid="query-builder-filters-add-button"
+            icon="plus-circle"
+            variant="secondary"
+            size="sm"
+            className={styles.Common.smallBtn}
+            onClick={addFilter}
+          >
+            {addLabel}
+          </Button>
+        </div>
+      )}
+      {filters.map((filter, index) => {
+        return (
+          <div className="gf-form" key={index}>
+            {index === 0 ? (
+              <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
+                {label}
+              </InlineFormLabel>
+            ) : (
+              <div className={`width-8 ${styles.Common.firstLabel}`}></div>
+            )}
+            <FilterEditor allColumns={fieldsList} filter={filter} onFilterChange={onFilterChange} index={index} />
+            <Button
+              data-testid="query-builder-filters-remove-button"
+              icon="trash-alt"
+              variant="destructive"
+              size="sm"
+              className={styles.Common.smallBtn}
+              onClick={() => removeFilter(index)}
+            />
+          </div>
+        );
+      })}
+      {filters.length !== 0 && (
+        <div className="gf-form">
+          <div className={`width-8 ${styles.Common.firstLabel}`}></div>
+          <Button
+            data-testid="query-builder-filters-inline-add-button"
+            icon="plus-circle"
+            variant="secondary"
+            size="sm"
+            className={styles.Common.smallBtn}
+            onClick={addFilter}
+          >
+            {addLabel}
+          </Button>
+        </div>
+      )}
+    </>
   );
 };
diff --git a/src/components/queryBuilder/LimitEditor.tsx b/src/components/queryBuilder/LimitEditor.tsx
@@ -1,20 +1,22 @@
 import React, { useState } from 'react';
+import { InlineFormLabel, Input } from '@grafana/ui';
 import labels from 'labels';
 import { selectors } from 'selectors';
-import { Input } from '@grafana/ui';
-import { EditorField } from '@grafana/experimental';
 
 interface LimitEditorProps {
   limit: number;
   onLimitChange: (limit: number) => void;
 }
 
 export const LimitEditor = (props: LimitEditorProps) => {
-  const [limit, setLimit] = useState<number>(props.limit || 1000);
+  const [limit, setLimit] = useState<number>(props.limit || 0);
   const { label, tooltip } = labels.components.LimitEditor;
 
   return (
-    <EditorField tooltip={tooltip} label={label}>
+    <div className="gf-form">
+      <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
+        {label}
+      </InlineFormLabel>
       <Input
         data-testid={selectors.components.QueryBuilder.LimitEditor.input}
         width={10}
@@ -24,6 +26,6 @@ export const LimitEditor = (props: LimitEditorProps) => {
         onChange={e => setLimit(e.currentTarget.valueAsNumber)}
         onBlur={() => props.onLimitChange(limit)}
       />
-    </EditorField>
+    </div>
   );
 };
diff --git a/src/components/queryBuilder/SqlPreview.tsx b/src/components/queryBuilder/SqlPreview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { EditorField, EditorRow } from '@grafana/experimental';
+import { InlineFormLabel } from '@grafana/ui';
 import labels from 'labels';
 
 interface SqlPreviewProps {
@@ -11,10 +11,11 @@ export const SqlPreview = (props: SqlPreviewProps) => {
   const { label, tooltip } = labels.components.SqlPreview;
 
   return (
-    <EditorRow>
-      <EditorField tooltip={tooltip} label={label}>
-        <pre>{sql}</pre>
-      </EditorField>
-    </EditorRow>
+    <div className="gf-form">
+      <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
+        {label}
+      </InlineFormLabel>
+      <pre>{sql}</pre>
+    </div>
   );
 };
diff --git a/src/data/sqlGenerator.ts b/src/data/sqlGenerator.ts
@@ -234,11 +234,12 @@ const getTraceDurationSelectSql = (columnIdentifier: string, timeUnit?: TimeUnit
 }
 
 const getLimit = (limit?: number | undefined): string => {
-  if (limit === undefined) {
-    return '';
+  limit = Math.max(0, limit || 0);
+  if (limit > 0) {
+    return 'LIMIT ' + limit;
   }
 
-  return 'LIMIT ' + Math.max(0, limit || 1000);
+  return '';
 };
 
 const getFilters = (options: QueryBuilderOptions): string => {