Skip to content

[HDX-5307] Drop the search bar WHERE label and / keycap #3152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elizabetdev merged 1 commit into from
Sep 19, 2026
Merged

[HDX-5307] Drop the search bar WHERE label and / keycap #3152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/search-bar-drop-where-label.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
1 change: 0 additions & 1 deletion packages/app/src/DBDashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3117,7 +3117,6 @@ function DBDashboardPage({
onLanguageChange={(lang: 'sql' | 'lucene') =>
setValue('whereLanguage', lang)
}
label="WHERE"
enableHotkey
allowMultiline
minWidth={300}
Expand Down
1 change: 0 additions & 1 deletion packages/app/src/SessionSubpanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,7 +463,6 @@ export default function SessionSubpanel({
control={control}
name="where"
size="xs"
showLabel={false}
enableHotkey
onSubmit={handleSubmit(handleWhereSubmit)}
onLanguageChange={onLanguageChange}
Expand Down
2 changes: 0 additions & 2 deletions packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,6 @@ export function ChartEditorControls({
onLanguageChange={(lang: 'sql' | 'lucene') =>
setValue('whereLanguage', lang)
}
showLabel={false}
enableVariables
/>
</Flex>
Expand Down Expand Up @@ -560,7 +559,6 @@ export function ChartEditorControls({
onLanguageChange={(lang: 'sql' | 'lucene') =>
setValue('whereLanguage', lang)
}
showLabel={false}
enableVariables
/>
</Flex>
Expand Down
1 change: 0 additions & 1 deletion packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -533,7 +533,6 @@ export function ChartSeriesEditor({
control={control}
name={`${namePrefix}aggCondition`}
onSubmit={onSubmit}
showLabel={false}
additionalSuggestions={attributeSuggestions}
data-testid="series-where-input"
enableVariables
Expand Down
1 change: 0 additions & 1 deletion packages/app/src/components/DBEditTimeChartForm/HeatmapSeriesEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ export function HeatmapSeriesEditor({
onLanguageChange={(lang: 'sql' | 'lucene') =>
setValue('whereLanguage', lang)
}
showLabel={false}
enableVariables
/>
<Divider />
Expand Down
2 changes: 0 additions & 2 deletions packages/app/src/components/DBEditTimeChartForm/OnClickForm/OnClickDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@ function SearchOnClickFields({ control }: { control: DrawerControl }) {
name="onClick.whereTemplate"
languageName="onClick.whereLanguage"
allowMultiline
showLabel={false}
sqlPlaceholder="ServiceName = '{{ServiceName}}'"
lucenePlaceholder="ServiceName:{{ServiceName}}"
/>
Expand Down Expand Up @@ -162,7 +161,6 @@ function DashboardOnClickFields({
name="onClick.whereTemplate"
languageName="onClick.whereLanguage"
allowMultiline
showLabel={false}
sqlPlaceholder="ServiceName = '{{ServiceName}}'"
lucenePlaceholder="ServiceName:{{ServiceName}}"
/>
Expand Down
2 changes: 0 additions & 2 deletions packages/app/src/components/DBTraceWaterfallChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1288,7 +1288,6 @@ export function DBTraceWaterfallChartContainer({
languageName="traceWhereLanguage"
control={control}
size="xs"
showLabel={false}
allowMultiline={false}
onSubmit={handleSubmit(onSubmitFilters)}
onLanguageChange={lang =>
Expand Down Expand Up @@ -1327,7 +1326,6 @@ export function DBTraceWaterfallChartContainer({
languageName="logWhereLanguage"
control={control}
size="xs"
showLabel={false}
allowMultiline={false}
onSubmit={handleSubmit(onSubmitFilters)}
onLanguageChange={lang =>
Expand Down
1 change: 0 additions & 1 deletion packages/app/src/components/DashboardFiltersModal/QueryExpressionFilterEditForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
26 changes: 0 additions & 26 deletions packages/app/src/components/SearchInput/SearchWhereInput.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
}

.inputWrapper {
position: relative;
flex: 1;
min-width: 0;

Expand Down Expand Up @@ -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 <kbd> */
/* 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;
}
}
8 changes: 0 additions & 8 deletions packages/app/src/components/SearchInput/SearchWhereInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -46,7 +44,6 @@ function SearchWhereInputWrapper({
name="where"
enableHotkey
width={width}
showLabel={showLabel}
allowMultiline={allowMultiline}
/>
</Stack>
Expand All @@ -67,11 +64,6 @@ export const CustomWidth = () => (
);
CustomWidth.storyName = 'Custom Width (50%)';

export const NoLabel = () => (
<SearchWhereInputWrapper defaultLanguage="sql" showLabel={false} />
);
NoLabel.storyName = 'SQL Without Label';

export const NoMultiline = () => (
<SearchWhereInputWrapper defaultLanguage="sql" allowMultiline={false} />
);
Expand Down
22 changes: 1 addition & 21 deletions packages/app/src/components/SearchInput/SearchWhereInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -155,8 +147,6 @@ export default function SearchWhereInput({
onLanguageChange,
enableHotkey,
size = 'sm',
showLabel = true,
label: labelText = 'WHERE',
allowMultiline = true,
sqlQueryHistoryType,
luceneQueryHistoryType,
Expand Down Expand Up @@ -242,7 +232,6 @@ export default function SearchWhereInput({
name={name}
placeholder={sqlPlaceholder}
onSubmit={onSubmit}
label={showLabel ? labelText : undefined}
queryHistoryType={sqlQueryHistoryType}
enableHotkey={enableHotkey}
allowMultiline={allowMultiline}
Expand Down Expand Up @@ -271,15 +260,6 @@ export default function SearchWhereInput({
enableVariables={enableVariables}
/>
)}
{enableHotkey && (
<Box
className={styles.shortcutHint}
title="Press / or s to focus search"
aria-hidden
>
<Kbd size="xs">/</Kbd>
</Box>
)}
</Box>
</Box>
</>
Expand Down
32 changes: 12 additions & 20 deletions packages/app/src/components/SearchInput/__tests__/SearchWhereInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,17 @@ describe('SearchWhereInput', () => {

describe('Lucene Mode', () => {
it('renders Lucene input when whereLanguage is lucene', () => {
renderWithMantine(<TestWrapper defaultLanguage="lucene" />);
const { container } = renderWithMantine(
<TestWrapper defaultLanguage="lucene" />,
);

// 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 () => {
Expand Down Expand Up @@ -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(<TestWrapper defaultLanguage="sql" />);

expect(screen.getByText('WHERE')).toBeInTheDocument();
expect(

@github-actions github-actions Bot Sep 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 minor — No test pins the removal of the WHERE label, the PR's main change

The label only ever rendered in SQL mode (it was passed to SQLInlineEditorControlled), and this diff deletes both tests that covered it (renders SQL input with WHERE label and hides label when showLabel is false). The replacement asserts the language combobox reads SQL and that the Lucene placeholder is absent — both true whether or not a WHERE label renders — so reintroducing the label leaves the suite green. Add expect(screen.queryByText('WHERE')).not.toBeInTheDocument(); to this SQL-mode test. (The new kbd assertion at line 92 lives in the Lucene block, and the keycap rendered in both languages, so it likewise wouldn't catch a SQL-only regression.)

screen.getByRole('combobox', { name: 'Query language' }),

@github-actions github-actions Bot Sep 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 minor — Rewritten SQL-mode test asserts nothing about the SQL editor it is named for

The old assertion (getByText('WHERE')) proved the SQL branch rendered, because the label lived inside SQLInlineEditor. The replacements do not: the Query language combobox renders in both languages and its value comes straight from the form default the test itself set, and the missing Lucene placeholder is only an absence. Replacing isSql ? <SQLInlineEditorControlled …/> with isSql ? null in SearchWhereInput.tsx:228 keeps this test green. Assert on the SQL editor itself — e.g. expect(container.querySelector('.cm-editor')).toBeInTheDocument() — or fold this case into the neighbouring renders SQL placeholder test, which is currently the only thing covering that branch.

).toHaveValue('SQL');
expect(
screen.queryByPlaceholderText(/Search your events w\/ Lucene/i),
).not.toBeInTheDocument();
});

it('renders SQL placeholder', () => {
Expand Down Expand Up @@ -196,23 +205,6 @@ describe('SearchWhereInput', () => {
).toBeInTheDocument();
});

it('hides label when showLabel is false', () => {
renderWithMantine(
<TestWrapper defaultLanguage="sql">
{({ control }) => (
<SearchWhereInput
tableConnection={mockTableConnection}
control={control}
name="where"
showLabel={false}
/>
)}
</TestWrapper>,
);

expect(screen.queryByText('WHERE')).not.toBeInTheDocument();
});

it('uses custom placeholders when provided', () => {
renderWithMantine(
<TestWrapper defaultLanguage="lucene">
Expand Down
Loading