adds shortcuts to the query page filters

Author: samejr

apps/webapp/app/components/metrics/ScopeFilter.tsx

@@ -19,12 +19,27 @@ const scopeOptions = [
   { value: "organization", label: "Organization" },
 ] as const;
 
-export function ScopeFilter({ shortcut }: { shortcut?: ShortcutDefinition } = {}) {
-  const { value, replace } = useSearchParams();
-  const scope = (value("scope") as QueryScope) ?? "environment";
+export type ScopeFilterProps = {
+  shortcut?: ShortcutDefinition;
+  /** Controlled value. If provided, the filter uses controlled mode and ignores search params. */
+  value?: QueryScope;
+  /** Called when the user selects a new scope. Required when `value` is provided. */
+  onValueChange?: (scope: QueryScope) => void;
+};
+
+export function ScopeFilter({ shortcut, value, onValueChange }: ScopeFilterProps = {}) {
+  const { value: paramValue, replace } = useSearchParams();
+  const isControlled = value !== undefined;
+  const scope: QueryScope = isControlled
+    ? value
+    : ((paramValue("scope") as QueryScope) ?? "environment");
   const triggerRef = useRef<HTMLButtonElement>(null);
 
   const handleChange = (newScope: string) => {
+    if (isControlled) {
+      onValueChange?.(newScope as QueryScope);
+      return;
+    }
     replace({ scope: newScope === "environment" ? undefined : newScope });
   };
 
@@ -57,8 +72,8 @@ export function ScopeFilter({ shortcut }: { shortcut?: ShortcutDefinition } = {}
           />
         </Ariakit.TooltipAnchor>
         {shortcut && (
-          <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright py-1.5 pl-2.5 pr-3 text-xs text-text-dimmed">
-            <div className="flex items-center gap-3">
+          <Ariakit.Tooltip className="z-40 cursor-default rounded border border-charcoal-700 bg-background-bright py-1.5 pl-2.5 pr-2 text-xs text-text-dimmed">
+            <div className="flex items-center gap-1.5">
               <span>Change scope</span>
               <ShortcutKey className="size-4 flex-none" shortcut={shortcut} variant="small" />
             </div>

apps/webapp/app/components/primitives/Select.tsx

@@ -104,6 +104,7 @@ export interface SelectProps<TValue extends string | string[], TItem>
   open?: boolean;
   setOpen?: (open: boolean) => void;
   shortcut?: ShortcutDefinition;
+  tooltipTitle?: string;
   allowItemShortcuts?: boolean;
   clearSearchOnSelection?: boolean;
   dropdownIcon?: boolean | React.ReactNode;
@@ -127,6 +128,7 @@ export function Select<TValue extends string | string[], TItem>({
   open,
   setOpen,
   shortcut,
+  tooltipTitle,
   allowItemShortcuts = true,
   disabled,
   clearSearchOnSelection = true,
@@ -206,6 +208,7 @@ export function Select<TValue extends string | string[], TItem>({
         text={text}
         placeholder={placeholder}
         shortcut={shortcut}
+        tooltipTitle={tooltipTitle}
         disabled={disabled}
         dropdownIcon={dropdownIcon}
         {...props}

apps/webapp/app/components/query/QueryEditor.tsx

@@ -37,6 +37,7 @@ import {
   type QueryWidgetData,
 } from "~/components/metrics/QueryWidget";
 import { SaveToDashboardDialog } from "~/components/metrics/SaveToDashboardDialog";
+import { ScopeFilter } from "~/components/metrics/ScopeFilter";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import {
@@ -89,12 +90,6 @@ function toISOString(value: Date | string): string {
   return value.toISOString();
 }
 
-const scopeOptions = [
-  { value: "environment", label: "Environment" },
-  { value: "project", label: "Project" },
-  { value: "organization", label: "Organization" },
-] as const;
-
 // Type for the query action response
 type QueryActionResponse = {
   error: string | null;
@@ -277,7 +272,7 @@ const QueryEditorForm = forwardRef<
         <input type="hidden" name="from" value={from ?? ""} />
         <input type="hidden" name="to" value={to ?? ""} />
         <QueryHistoryPopover history={history} onQuerySelected={handleHistorySelected} />
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1.5">
           {isAdmin && (
             <Button
               type="submit"
@@ -289,24 +284,11 @@ const QueryEditorForm = forwardRef<
               Explain
             </Button>
           )}
-          <Select
+          <ScopeFilter
             value={scope}
-            setValue={(value) => setScope(value as QueryScope)}
-            variant="secondary/small"
-            dropdownIcon={true}
-            items={[...scopeOptions]}
-            text={(value) => {
-              return <ScopeItem scope={value as QueryScope} />;
-            }}
-          >
-            {(items) =>
-              items.map((item) => (
-                <SelectItem key={item.value} value={item.value}>
-                  <ScopeItem scope={item.value as QueryScope} />
-                </SelectItem>
-              ))
-            }
-          </Select>
+            onValueChange={setScope}
+            shortcut={{ key: "e" }}
+          />
           {queryHasTriggeredAt ? (
             <SimpleTooltip
               asChild
@@ -335,6 +317,7 @@ const QueryEditorForm = forwardRef<
               period={period}
               from={from}
               to={to}
+              shortcut={{ key: "d" }}
               applyShortcut={{ key: "enter", enabledOnInputElements: true }}
               onValueChange={(values) => {
                 flushSync(() => {
@@ -1133,27 +1116,6 @@ function ExportResultsButton({
   );
 }
 
-function ScopeItem({ scope }: { scope: QueryScope }) {
-  const organization = useOrganization();
-  const project = useProject();
-  const environment = useEnvironment();
-
-  switch (scope) {
-    case "organization":
-      return <span className="text-text-bright">{`Org: ${organization.title}`}</span>;
-    case "project":
-      return <span className="text-text-bright">{`Project: ${project.name}`}</span>;
-    case "environment":
-      return (
-        <span className="text-text-bright">
-          Env: <EnvironmentLabel environment={environment} />
-        </span>
-      );
-    default:
-      return <span className="text-text-bright">{scope}</span>;
-  }
-}
-
 function QueryResultsCallouts({
   hiddenColumns,
   periodClipped,

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx

@@ -5,7 +5,6 @@ import { Popover, PopoverTrigger } from "~/components/primitives/Popover";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import type { QueryHistoryItem } from "~/presenters/v3/QueryPresenter.server";
 import { timeFilterRenderValues } from "~/components/runs/v3/SharedFilters";
-import { ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { cn } from "~/utils/cn";
 
 const SQL_KEYWORDS = [
@@ -97,8 +96,9 @@ export function QueryHistoryPopover({
           variant="secondary/small"
           LeadingIcon={ClockRotateLeftIcon}
           leadingIconClassName="-mr-1.5"
-          TrailingIcon={ChevronUpDownIcon}
           disabled={history.length === 0}
+          tooltip="Query history"
+          shortcut={{ key: "h" }}
         >
           History
         </Button>