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 a87bb3efdc..078ef24b12 100644
--- a/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/ChartSeriesEditor.tsx
@@ -533,7 +533,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(