New filtered dropdown and run filters (#1089)

* Extract out useFilterTasks

* WIP on Combobox

* Revert "WIP on Combobox"

This reverts commit f0a9b2e.

* Added ariakit

* Started adding a Listbox component

* Listbox WIP

* More WIP on the list box

* More work on the Listbox

* WIP on filterable Listbox using headless… but it’s going to be a nightmare to make it good. Wrong approach

* WIP using Ariakit

* Multiple selection working

* WIP in reworking it so search is built in and it’s easier to use

* Nicer API for listbox

* Allow sections to be rendered with filtering

* More progress on the styling of the menu

* The empty state

* Removed focus outline

* Allow filtering based on the section title

* Render the shortcut correctly

* Allow passing static children to Select and render a separator if a section has no title

* Static example and added subtle focus

* Allow static data with no items array passed in

* Allow shortcuts on select items

* Only how heading if true

* Tooltip for keyboard shortcut

* useShortcutKeys fixes

- Can be passed an undefined definition (so we render the same number of hooks always).
- Fix for enabledOnInputElements not being used…

* Shortcut keys working with lists

* Don’t render shortcut numbers higher than 0

* More improvements

* WIP on a Link row

* Nicer API for the children function

* Much nicer shortcut key support

* Separated SelectTrigger out

* Heading separated out

* More styled elements created

* Removed unused element

* Reordered statuses

* Added search context

* Fixes for default values

* Removed tab elements

* Combo box

* Simplified it more

* Started work on Filter menu

* Experiments with filter menu

* Filter menu proof of concept working

* Nice hook for using a search param

* The escape key goes back to the previous menu

* Added filter page to storybook

* Added other variants

* Renamed Select file to OldSelect, implemented Feedback form

* Added placeholder support

* Added an optional dropdown icon (defaults to a chevron down)

* Feedback new Select

* Feedback just use static items

* New project page

* Renamed storybook pages

* Lots of progress on the new run filters

* Added new tasks filters

* Show the applied filters

* Added period filtering

* Fix for escape resetting the period value to the previous value when escape is pressed

* Show the Clear button sooner

* Removed unused code

* Reworked useSearchParams so multiple values can be set at once…

* Renamed file: OldSelect -> SImpleSelect

* Fix for new Select not working in forms because props weren’t being passed through

* New Select on the schedules page

* Better layout when there are lots of run filters

* Many style improvements to run filters

* Status filter allows you to select as well

* Rolled out the menus for the other files

* Minor improvements to schedule page and page padding

* Latest lockfile

Author: matt-aitken

apps/webapp/app/components/Feedback.tsx

@@ -1,10 +1,14 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
+import { BookOpenIcon } from "@heroicons/react/20/solid";
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react";
 import { DiscordIcon, GitHubLightIcon } from "@trigger.dev/companyicons";
+import { ActivityIcon } from "lucide-react";
 import { ReactNode, useState } from "react";
 import { FeedbackType, feedbackTypeLabel, schema } from "~/routes/resources.feedback";
+import { cn } from "~/utils/cn";
+import { docsPath } from "~/utils/pathBuilder";
 import { Button, LinkButton } from "./primitives/Buttons";
 import { Fieldset } from "./primitives/Fieldset";
 import { FormButtons } from "./primitives/FormButtons";
@@ -13,20 +17,9 @@ import { Header1, Header2 } from "./primitives/Headers";
 import { InputGroup } from "./primitives/InputGroup";
 import { Label } from "./primitives/Label";
 import { Paragraph } from "./primitives/Paragraph";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./primitives/Select";
+import { Select, SelectItem } from "./primitives/Select";
 import { Sheet, SheetBody, SheetContent, SheetTrigger } from "./primitives/Sheet";
 import { TextArea } from "./primitives/TextArea";
-import { cn } from "~/utils/cn";
-import { BookOpenIcon } from "@heroicons/react/20/solid";
-import { ActivityIcon, HeartPulseIcon } from "lucide-react";
-import { docsPath } from "~/utils/pathBuilder";
 
 type FeedbackProps = {
   button: ReactNode;
@@ -78,20 +71,20 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
             <Fieldset className="max-w-full gap-y-3">
               <input value={location.pathname} {...conform.input(path, { type: "hidden" })} />
               <InputGroup className="max-w-full">
-                <SelectGroup>
-                  <Select {...conform.input(feedbackType)} defaultValue={defaultValue}>
-                    <SelectTrigger size="medium" width="full">
-                      <SelectValue placeholder="Type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {Object.entries(feedbackTypeLabel).map(([key, value]) => (
-                        <SelectItem key={key} value={key}>
-                          {value}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </SelectGroup>
+                <Select
+                  {...conform.select(feedbackType)}
+                  variant="tertiary/medium"
+                  defaultValue={defaultValue}
+                  placeholder="Select type"
+                  text={(value) => feedbackTypeLabel[value]}
+                  dropdownIcon
+                >
+                  {Object.entries(feedbackTypeLabel).map(([name, title]) => (
+                    <SelectItem key={name} value={name}>
+                      {title}
+                    </SelectItem>
+                  ))}
+                </Select>
                 <FormError id={feedbackType.errorId}>{feedbackType.error}</FormError>
               </InputGroup>
               <InputGroup className="max-w-full">

apps/webapp/app/components/events/EventsFilters.tsx

@@ -9,7 +9,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../primitives/Select";
+} from "../primitives/SimpleSelect";
 import { EventListSearchSchema } from "./EventStatuses";
 import { environmentKeys, FilterableEnvironment } from "~/components/runs/RunStatuses";
 import { TimeFrameFilter } from "../runs/TimeFrameFilter";

apps/webapp/app/components/layout/AppLayout.tsx

@@ -41,7 +41,7 @@ export function PageBody({
     <div
       className={cn(
         scrollable
-          ? "overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+          ? "overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
           : "overflow-hidden",
         className
       )}

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

@@ -0,0 +1,56 @@
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import { ReactNode } from "react";
+import { cn } from "~/utils/cn";
+
+const variants = {
+  "tertiary/small": {
+    box: "h-6 bg-tertiary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-charcoal-600",
+    clear: "size-6 text-text-dimmed hover:text-text-bright transition-colors",
+  },
+  "minimal/small": {
+    box: "h-6 hover:bg-tertiary rounded pl-1.5 gap-1.5 text-xs",
+    clear: "size-6 text-text-dimmed hover:text-text-bright transition-colors",
+  },
+};
+
+type Variant = keyof typeof variants;
+
+type AppliedFilterProps = {
+  label: ReactNode;
+  value: ReactNode;
+  removable?: boolean;
+  onRemove?: () => void;
+  variant?: Variant;
+  className?: string;
+};
+
+export function AppliedFilter({
+  label,
+  value,
+  removable = true,
+  onRemove,
+  variant = "tertiary/small",
+  className,
+}: AppliedFilterProps) {
+  const variantClassName = variants[variant];
+  return (
+    <div className={cn("flex items-center transition", variantClassName.box, className)}>
+      <div className="flex items-center gap-0.5">
+        <div className="text-text-dimmed">
+          <span>{label}</span>:
+        </div>
+        <div className="text-text-bright">
+          <div>{value}</div>
+        </div>
+      </div>
+      {removable && (
+        <button
+          className={cn("group flex size-6 items-center justify-center", variantClassName.clear)}
+          onClick={onRemove}
+        >
+          <XMarkIcon className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}