From f784e3d401c233232fc89ea67a14412f074b0c85 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 18 Sep 2026 11:45:53 +0200 Subject: [PATCH] fix(app): drop the search bar WHERE label and / keycap The label repeated the SQL placeholder, and the overlay clipped long queries. Keyboard shortcuts still focus the input. Co-authored-by: Cursor --- .changeset/search-bar-drop-where-label.md | 7 ++++ packages/app/src/DBDashboardPage.tsx | 1 - packages/app/src/SessionSubpanel.tsx | 1 - .../ChartEditorControls.tsx | 2 -- .../DBEditTimeChartForm/ChartSeriesEditor.tsx | 1 - .../HeatmapSeriesEditor.tsx | 1 - .../OnClickForm/OnClickDrawer.tsx | 2 -- .../src/components/DBTraceWaterfallChart.tsx | 2 -- .../QueryExpressionFilterEditForm.tsx | 1 - .../SearchInput/SearchWhereInput.module.scss | 26 --------------- .../SearchInput/SearchWhereInput.stories.tsx | 8 ----- .../SearchInput/SearchWhereInput.tsx | 22 +------------ .../__tests__/SearchWhereInput.test.tsx | 32 +++++++------------ 13 files changed, 20 insertions(+), 86 deletions(-) create mode 100644 .changeset/search-bar-drop-where-label.md diff --git a/.changeset/search-bar-drop-where-label.md b/.changeset/search-bar-drop-where-label.md new file mode 100644 index 0000000000..72fcd54222 --- /dev/null +++ b/.changeset/search-bar-drop-where-label.md @@ -0,0 +1,7 @@ +--- +'@hyperdx/app': patch +--- + +fix: drop the search bar WHERE label and `/` keycap overlay + +The `WHERE` label repeated the SQL placeholder, and the `/` hint clipped long queries. `/` and `s` still focus the input; the overlay is gone. diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx index da2338bfa8..81441a79f5 100644 --- a/packages/app/src/DBDashboardPage.tsx +++ b/packages/app/src/DBDashboardPage.tsx @@ -3117,7 +3117,6 @@ function DBDashboardPage({ onLanguageChange={(lang: 'sql' | 'lucene') => setValue('whereLanguage', lang) } - label="WHERE" enableHotkey allowMultiline minWidth={300} diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx index b50f2515d1..9a513375ba 100644 --- a/packages/app/src/SessionSubpanel.tsx +++ b/packages/app/src/SessionSubpanel.tsx @@ -463,7 +463,6 @@ export default function SessionSubpanel({ control={control} name="where" size="xs" - showLabel={false} enableHotkey onSubmit={handleSubmit(handleWhereSubmit)} onLanguageChange={onLanguageChange} diff --git a/packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx b/packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx index a172809faf..7eccae2dfc 100644 --- a/packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx +++ b/packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx @@ -269,7 +269,6 @@ export function ChartEditorControls({ onLanguageChange={(lang: 'sql' | 'lucene') => setValue('whereLanguage', lang) } - showLabel={false} enableVariables /> @@ -560,7 +559,6 @@ export function ChartEditorControls({ onLanguageChange={(lang: 'sql' | 'lucene') => setValue('whereLanguage', lang) } - showLabel={false} enableVariables /> diff --git a/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx b/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx index e855685409..1b5667c976 100644 --- a/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx +++ b/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx @@ -450,7 +450,6 @@ export function ChartSeriesEditor({ control={control} name={`${namePrefix}aggCondition`} onSubmit={onSubmit} - showLabel={false} additionalSuggestions={attributeSuggestions} data-testid="series-where-input" enableVariables diff --git a/packages/app/src/components/DBEditTimeChartForm/HeatmapSeriesEditor.tsx b/packages/app/src/components/DBEditTimeChartForm/HeatmapSeriesEditor.tsx index eb94ec8f53..3fd98cfb7a 100644 --- a/packages/app/src/components/DBEditTimeChartForm/HeatmapSeriesEditor.tsx +++ b/packages/app/src/components/DBEditTimeChartForm/HeatmapSeriesEditor.tsx @@ -38,7 +38,6 @@ export function HeatmapSeriesEditor({ onLanguageChange={(lang: 'sql' | 'lucene') => setValue('whereLanguage', lang) } - showLabel={false} enableVariables /> diff --git a/packages/app/src/components/DBEditTimeChartForm/OnClickForm/OnClickDrawer.tsx b/packages/app/src/components/DBEditTimeChartForm/OnClickForm/OnClickDrawer.tsx index a5dcd2f1e7..2a5a339033 100644 --- a/packages/app/src/components/DBEditTimeChartForm/OnClickForm/OnClickDrawer.tsx +++ b/packages/app/src/components/DBEditTimeChartForm/OnClickForm/OnClickDrawer.tsx @@ -79,7 +79,6 @@ function SearchOnClickFields({ control }: { control: DrawerControl }) { name="onClick.whereTemplate" languageName="onClick.whereLanguage" allowMultiline - showLabel={false} sqlPlaceholder="ServiceName = '{{ServiceName}}'" lucenePlaceholder="ServiceName:{{ServiceName}}" /> @@ -162,7 +161,6 @@ function DashboardOnClickFields({ name="onClick.whereTemplate" languageName="onClick.whereLanguage" allowMultiline - showLabel={false} sqlPlaceholder="ServiceName = '{{ServiceName}}'" lucenePlaceholder="ServiceName:{{ServiceName}}" /> diff --git a/packages/app/src/components/DBTraceWaterfallChart.tsx b/packages/app/src/components/DBTraceWaterfallChart.tsx index 85ebaca5d0..123177df02 100644 --- a/packages/app/src/components/DBTraceWaterfallChart.tsx +++ b/packages/app/src/components/DBTraceWaterfallChart.tsx @@ -1288,7 +1288,6 @@ export function DBTraceWaterfallChartContainer({ languageName="traceWhereLanguage" control={control} size="xs" - showLabel={false} allowMultiline={false} onSubmit={handleSubmit(onSubmitFilters)} onLanguageChange={lang => @@ -1327,7 +1326,6 @@ export function DBTraceWaterfallChartContainer({ languageName="logWhereLanguage" control={control} size="xs" - showLabel={false} allowMultiline={false} onSubmit={handleSubmit(onSubmitFilters)} onLanguageChange={lang => diff --git a/packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx b/packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx index de206bde6c..7c455f605c 100644 --- a/packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx +++ b/packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx @@ -197,7 +197,6 @@ export const QueryExpressionFilterEditForm = ({ control={control} name="where" languageName="whereLanguage" - showLabel={false} allowMultiline={true} sqlPlaceholder="Filter for dropdown values" lucenePlaceholder="Filter for dropdown values" diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss index 13e18b0818..f964001bf1 100644 --- a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss +++ b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss @@ -9,7 +9,6 @@ } .inputWrapper { - position: relative; flex: 1; min-width: 0; @@ -69,28 +68,3 @@ flex-shrink: 0; height: calc(var(--editor-base-height) - var(--editor-border-inset, 2px)); } - -.shortcutHint { - position: absolute; - top: 50%; - right: 8px; - transform: translateY(-50%); - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; - - /* Perfect square Kbd: Mantine Kbd renders as */ - /* stylelint-disable-next-line selector-pseudo-class-no-unknown */ - :global(kbd) { - width: 22px; - height: 22px; - min-width: 22px; - min-height: 22px; - padding: 0; - display: inline-flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - } -} diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.stories.tsx b/packages/app/src/components/SearchInput/SearchWhereInput.stories.tsx index 0f5ca85121..6b37fdb762 100644 --- a/packages/app/src/components/SearchInput/SearchWhereInput.stories.tsx +++ b/packages/app/src/components/SearchInput/SearchWhereInput.stories.tsx @@ -22,12 +22,10 @@ const mockTableConnection = { function SearchWhereInputWrapper({ defaultLanguage = 'lucene', width, - showLabel, allowMultiline, }: { defaultLanguage?: 'sql' | 'lucene'; width?: string; - showLabel?: boolean; allowMultiline?: boolean; }) { const { control } = useForm({ @@ -46,7 +44,6 @@ function SearchWhereInputWrapper({ name="where" enableHotkey width={width} - showLabel={showLabel} allowMultiline={allowMultiline} /> @@ -67,11 +64,6 @@ export const CustomWidth = () => ( ); CustomWidth.storyName = 'Custom Width (50%)'; -export const NoLabel = () => ( - -); -NoLabel.storyName = 'SQL Without Label'; - export const NoMultiline = () => ( ); diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.tsx b/packages/app/src/components/SearchInput/SearchWhereInput.tsx index e9df15a90c..5b09bab036 100644 --- a/packages/app/src/components/SearchInput/SearchWhereInput.tsx +++ b/packages/app/src/components/SearchInput/SearchWhereInput.tsx @@ -1,6 +1,6 @@ import { FieldPath, useController, UseControllerProps } from 'react-hook-form'; import { TableConnectionChoice } from '@hyperdx/common-utils/dist/core/metadata'; -import { ActionIcon, Box, Flex, Kbd, Tooltip } from '@mantine/core'; +import { ActionIcon, Box, Flex, Tooltip } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { IconHelp } from '@tabler/icons-react'; @@ -59,14 +59,6 @@ export type SearchWhereInputProps = { * Size of the input */ size?: 'xs' | 'sm'; - /** - * Show label on SQL input (default true). Use label to customize text (e.g. "GLOBAL WHERE"). - */ - showLabel?: boolean; - /** - * Label text when showLabel is true (default "WHERE") - */ - label?: string; /** * Enable multiline for SQL input */ @@ -155,8 +147,6 @@ export default function SearchWhereInput({ onLanguageChange, enableHotkey, size = 'sm', - showLabel = true, - label: labelText = 'WHERE', allowMultiline = true, sqlQueryHistoryType, luceneQueryHistoryType, @@ -242,7 +232,6 @@ export default function SearchWhereInput({ name={name} placeholder={sqlPlaceholder} onSubmit={onSubmit} - label={showLabel ? labelText : undefined} queryHistoryType={sqlQueryHistoryType} enableHotkey={enableHotkey} allowMultiline={allowMultiline} @@ -271,15 +260,6 @@ export default function SearchWhereInput({ enableVariables={enableVariables} /> )} - {enableHotkey && ( - - / - - )} diff --git a/packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx b/packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx index 1dcb451e6a..bc9f2dd2a9 100644 --- a/packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx +++ b/packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx @@ -79,13 +79,17 @@ describe('SearchWhereInput', () => { describe('Lucene Mode', () => { it('renders Lucene input when whereLanguage is lucene', () => { - renderWithMantine(); + const { container } = renderWithMantine( + , + ); // Lucene mode uses a textarea from AutocompleteInput const input = screen.getByPlaceholderText( /Search your events w\/ Lucene/i, ); expect(input).toBeInTheDocument(); + // `/` and `s` still focus the input; the overlay keycap is gone. + expect(container.querySelector('kbd')).not.toBeInTheDocument(); }); it('allows typing in Lucene mode', async () => { @@ -135,10 +139,15 @@ describe('SearchWhereInput', () => { }); describe('SQL Mode', () => { - it('renders SQL input with WHERE label when whereLanguage is sql', () => { + it('renders the SQL editor when whereLanguage is sql', () => { renderWithMantine(); - expect(screen.getByText('WHERE')).toBeInTheDocument(); + expect( + screen.getByRole('combobox', { name: 'Query language' }), + ).toHaveValue('SQL'); + expect( + screen.queryByPlaceholderText(/Search your events w\/ Lucene/i), + ).not.toBeInTheDocument(); }); it('renders SQL placeholder', () => { @@ -196,23 +205,6 @@ describe('SearchWhereInput', () => { ).toBeInTheDocument(); }); - it('hides label when showLabel is false', () => { - renderWithMantine( - - {({ control }) => ( - - )} - , - ); - - expect(screen.queryByText('WHERE')).not.toBeInTheDocument(); - }); - it('uses custom placeholders when provided', () => { renderWithMantine(