New time period filter (permanently displayed)

matt-aitken · matt-aitken · commit c3c79a429313 · 2025-03-27T14:07:03.000Z
diff --git a/apps/webapp/app/components/primitives/AppliedFilter.tsx b/apps/webapp/app/components/primitives/AppliedFilter.tsx
@@ -34,7 +34,14 @@ export function AppliedFilter({
 }: AppliedFilterProps) {
   const variantClassName = variants[variant];
   return (
-    <div className={cn("flex items-center transition", variantClassName.box, className)}>
+    <div
+      className={cn(
+        "flex items-center transition",
+        variantClassName.box,
+        !removable && "pr-2",
+        className
+      )}
+    >
       <div className="flex items-center gap-0.5">
         <div className="text-text-dimmed">
           <span>{label}</span>:
diff --git a/apps/webapp/app/components/primitives/DateField.tsx b/apps/webapp/app/components/primitives/DateField.tsx
@@ -10,12 +10,12 @@ import { Button } from "./Buttons";
 
 const variants = {
   small: {
-    fieldStyles: "h-5 text-sm rounded-sm px-0.5",
+    fieldStyles: "h-5 text-xs rounded-sm px-0.5",
     nowButtonVariant: "tertiary/small" as const,
     clearButtonVariant: "tertiary/small" as const,
   },
   medium: {
-    fieldStyles: "h-7 text-base rounded px-1",
+    fieldStyles: "h-7 text-sm rounded px-1",
     nowButtonVariant: "tertiary/medium" as const,
     clearButtonVariant: "minimal/medium" as const,
   },
diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx
@@ -1,14 +1,14 @@
 import * as Ariakit from "@ariakit/react";
-import { SelectProps as AriaSelectProps } from "@ariakit/react";
+import { type SelectProps as AriaSelectProps } from "@ariakit/react";
 import { SelectValue } from "@ariakit/react-core/select/select-value";
 import { Link } from "@remix-run/react";
 import * as React from "react";
 import { Fragment, useMemo, useState } from "react";
-import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
 import { ShortcutKey } from "./ShortcutKey";
 import { ChevronDown } from "lucide-react";
-import { MatchSorterOptions, matchSorter } from "match-sorter";
+import { type MatchSorterOptions, matchSorter } from "match-sorter";
 
 const sizes = {
   small: {
diff --git a/apps/webapp/app/components/primitives/Switch.tsx b/apps/webapp/app/components/primitives/Switch.tsx
@@ -3,7 +3,15 @@
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "~/utils/cn";
-import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
+
+const small = {
+  container:
+    "flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary disabled:hover:bg-transparent pr-1 py-[0.1rem] pl-1.5 transition focus-custom disabled:hover:text-charcoal-400 disabled:opacity-50 text-charcoal-400 hover:text-charcoal-200 disabled:hover:cursor-not-allowed hover:cursor-pointer",
+  root: "h-3 w-6",
+  thumb: "size-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
+  text: "text-xs text-text-dimmed",
+};
 
 const variations = {
   large: {
@@ -12,12 +20,15 @@ const variations = {
     thumb: "size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
     text: "text-sm text-text-dimmed",
   },
-  small: {
-    container:
-      "flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary disabled:hover:bg-transparent pr-1 py-[0.1rem] pl-1.5 transition focus-custom disabled:hover:text-charcoal-400 disabled:opacity-50 text-charcoal-400 hover:text-charcoal-200 disabled:hover:cursor-not-allowed hover:cursor-pointer",
-    root: "h-3 w-6",
-    thumb: "size-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
-    text: "text-xs text-text-dimmed",
+  small,
+  "tertiary/small": {
+    container: small.container,
+    root: cn(
+      small.root,
+      "group-data-[state=unchecked]:bg-charcoal-600 group-data-[state=unchecked]:group-hover:bg-charcoal-500/50"
+    ),
+    thumb: small.thumb,
+    text: cn(small.text, "transition group-hover:text-text-bright"),
   },
 };
 
diff --git a/apps/webapp/app/components/runs/v3/BatchFilters.tsx b/apps/webapp/app/components/runs/v3/BatchFilters.tsx
@@ -36,14 +36,7 @@ import {
   batchStatusTitle,
   descriptionForBatchStatus,
 } from "./BatchStatus";
-import {
-  AppliedCustomDateRangeFilter,
-  AppliedPeriodFilter,
-  appliedSummary,
-  CreatedAtDropdown,
-  CustomDateRangeDropdown,
-  FilterMenuProvider,
-} from "./SharedFilters";
+import { TimeFilter, appliedSummary, FilterMenuProvider } from "./SharedFilters";
 
 export const BatchStatus = z.enum(allBatchStatuses);
 
@@ -54,10 +47,7 @@ export const BatchListFilters = z.object({
     (value) => (typeof value === "string" ? [value] : value),
     BatchStatus.array().optional()
   ),
-  period: z.preprocess((value) => (value === "all" ? undefined : value), z.string().optional()),
   id: z.string().optional(),
-  from: z.coerce.number().optional(),
-  to: z.coerce.number().optional(),
 });
 
 export type BatchListFilters = z.infer<typeof BatchListFilters>;
@@ -69,16 +59,12 @@ type BatchFiltersProps = {
 export function BatchFilters(props: BatchFiltersProps) {
   const location = useOptimisticLocation();
   const searchParams = new URLSearchParams(location.search);
-  const hasFilters =
-    searchParams.has("statuses") ||
-    searchParams.has("id") ||
-    searchParams.has("period") ||
-    searchParams.has("from") ||
-    searchParams.has("to");
+  const hasFilters = searchParams.has("statuses") || searchParams.has("id");
 
   return (
     <div className="flex flex-row flex-wrap items-center gap-1">
       <FilterMenu {...props} />
+      <TimeFilter />
       <AppliedFilters />
       {hasFilters && (
         <Form className="h-6">
@@ -101,8 +87,6 @@ const filterTypes = [
       </div>
     ),
   },
-  { name: "created", title: "Created", icon: <CalendarIcon className="size-4" /> },
-  { name: "daterange", title: "Custom date range", icon: <CalendarIcon className="size-4" /> },
   { name: "batch", title: "Batch ID", icon: <Squares2X2Icon className="size-4" /> },
 ] as const;
 
@@ -148,8 +132,6 @@ function AppliedFilters() {
   return (
     <>
       <AppliedStatusFilter />
-      <AppliedPeriodFilter />
-      <AppliedCustomDateRangeFilter />
       <AppliedBatchIdFilter />
     </>
   );
@@ -169,10 +151,6 @@ function Menu(props: MenuProps) {
       return <MainMenu {...props} />;
     case "statuses":
       return <StatusDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
-    case "created":
-      return <CreatedAtDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
-    case "daterange":
-      return <CustomDateRangeDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "batch":
       return <BatchIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
   }
@@ -181,7 +159,6 @@ function Menu(props: MenuProps) {
 function MainMenu({ searchValue, trigger, clearSearchValue, setFilterType }: MenuProps) {
   const filtered = useMemo(() => {
     return filterTypes.filter((item) => {
-      if (item.name === "daterange") return false;
       return item.title.toLowerCase().includes(searchValue.toLowerCase());
     });
   }, [searchValue]);
diff --git a/apps/webapp/app/components/runs/v3/RunFilters.tsx b/apps/webapp/app/components/runs/v3/RunFilters.tsx
@@ -1,8 +1,6 @@
 import * as Ariakit from "@ariakit/react";
 import {
-  CalendarIcon,
   ClockIcon,
-  CpuChipIcon,
   FingerPrintIcon,
   Squares2X2Icon,
   TagIcon,
@@ -14,6 +12,7 @@ import { ListChecks, ListFilterIcon } from "lucide-react";
 import { matchSorter } from "match-sorter";
 import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
+import { StatusIcon } from "~/assets/icons/StatusIcon";
 import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { AppliedFilter } from "~/components/primitives/AppliedFilter";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -45,14 +44,7 @@ import { useSearchParams } from "~/hooks/useSearchParam";
 import { type loader as tagsLoader } from "~/routes/resources.projects.$projectParam.runs.tags";
 import { Button } from "../../primitives/Buttons";
 import { BulkActionStatusCombo } from "./BulkAction";
-import {
-  AppliedCustomDateRangeFilter,
-  AppliedPeriodFilter,
-  appliedSummary,
-  CreatedAtDropdown,
-  CustomDateRangeDropdown,
-  FilterMenuProvider,
-} from "./SharedFilters";
+import { appliedSummary, FilterMenuProvider, TimeFilter } from "./SharedFilters";
 import {
   allTaskRunStatuses,
   descriptionForTaskRunStatus,
@@ -61,7 +53,6 @@ import {
   TaskRunStatusCombo,
 } from "./TaskRunStatus";
 import { TaskTriggerSourceIcon } from "./TaskTriggerSource";
-import { StatusIcon } from "~/assets/icons/StatusIcon";
 
 export const TaskAttemptStatus = z.enum(allTaskRunStatuses);
 
@@ -117,11 +108,8 @@ export function RunsFilters(props: RunFiltersProps) {
   const hasFilters =
     searchParams.has("statuses") ||
     searchParams.has("tasks") ||
-    searchParams.has("period") ||
     searchParams.has("bulkId") ||
     searchParams.has("tags") ||
-    searchParams.has("from") ||
-    searchParams.has("to") ||
     searchParams.has("batchId") ||
     searchParams.has("runId") ||
     searchParams.has("scheduleId");
@@ -130,6 +118,7 @@ export function RunsFilters(props: RunFiltersProps) {
     <div className="flex flex-row flex-wrap items-center gap-1">
       <FilterMenu {...props} />
       <RootOnlyToggle defaultValue={props.rootOnlyDefault} />
+      <TimeFilter />
       <AppliedFilters {...props} />
       {hasFilters && (
         <Form className="h-6">
@@ -153,8 +142,6 @@ const filterTypes = [
   },
   { name: "tasks", title: "Tasks", icon: <TaskIcon className="size-4" /> },
   { name: "tags", title: "Tags", icon: <TagIcon className="size-4" /> },
-  { name: "created", title: "Created", icon: <CalendarIcon className="size-4" /> },
-  { name: "daterange", title: "Custom date range", icon: <CalendarIcon className="size-4" /> },
   { name: "run", title: "Run ID", icon: <FingerPrintIcon className="size-4" /> },
   { name: "batch", title: "Batch ID", icon: <Squares2X2Icon className="size-4" /> },
   { name: "schedule", title: "Schedule ID", icon: <ClockIcon className="size-4" /> },
@@ -175,7 +162,7 @@ function FilterMenu(props: RunFiltersProps) {
           <ListFilterIcon className="size-3.5" />
         </div>
       }
-      variant={"minimal/small"}
+      variant={"tertiary/small"}
       shortcut={shortcut}
       tooltipTitle={"Filter runs"}
     >
@@ -205,8 +192,6 @@ function AppliedFilters({ possibleTasks, bulkActions }: RunFiltersProps) {
       <AppliedStatusFilter />
       <AppliedTaskFilter possibleTasks={possibleTasks} />
       <AppliedTagsFilter />
-      <AppliedPeriodFilter />
-      <AppliedCustomDateRangeFilter />
       <AppliedRunIdFilter />
       <AppliedBatchIdFilter />
       <AppliedScheduleIdFilter />
@@ -229,13 +214,8 @@ function Menu(props: MenuProps) {
       return <MainMenu {...props} />;
     case "statuses":
       return <StatusDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
-
     case "tasks":
       return <TasksDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
-    case "created":
-      return <CreatedAtDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
-    case "daterange":
-      return <CustomDateRangeDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "bulk":
       return <BulkActionsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "tags":
@@ -252,7 +232,6 @@ function Menu(props: MenuProps) {
 function MainMenu({ searchValue, trigger, clearSearchValue, setFilterType }: MenuProps) {
   const filtered = useMemo(() => {
     return filterTypes.filter((item) => {
-      if (item.name === "daterange") return false;
       return item.title.toLowerCase().includes(searchValue.toLowerCase());
     });
   }, [searchValue]);
@@ -699,9 +678,10 @@ function RootOnlyToggle({ defaultValue }: { defaultValue: boolean }) {
   return (
     <Switch
       disabled={disabled}
-      variant="small"
+      variant="tertiary/small"
       label="Root only"
       checked={disabled ? false : rootOnly}
+      className="bg-tertiary transition hover:bg-charcoal-600"
       onCheckedChange={(checked) => {
         replace({
           rootOnly: checked ? "true" : "false",
diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
diff --git a/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx b/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx
