design-system: support "all" selected state for MultiSelectCombobox (#36699)

When we use MultiSelectCombobox, we currently have to maintain the list of selected values all the time, even when the intent is to just select them all (the default state in all current scenarios). If the list of available values change, we would need to have logic to keep track of which values need to be added when all values are selected.

Instead, have MultiSelectCombobox and it's instantiating components be aware of an "all selected" state that means all values should be selected.

GitOrigin-RevId: b5d22ec4fbff31269b01a5a7414080d164f8fb40

Author: atrakh

npm-packages/@convex-dev/design-system/src/MultiSelectCombobox.tsx

@@ -13,6 +13,8 @@ import { Button } from "@ui/Button";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 
+export type MultiSelectValue = string[] | "all";
+
 export function MultiSelectCombobox({
   options,
   selectedOptions,
@@ -26,8 +28,8 @@ export function MultiSelectCombobox({
   processFilterOption = (option) => option,
 }: {
   options: string[];
-  selectedOptions: string[];
-  setSelectedOptions(newValue: string[]): void;
+  selectedOptions: MultiSelectValue;
+  setSelectedOptions(newValue: MultiSelectValue): void;
   unit: string;
   unitPlural: string;
   label: string;
@@ -79,9 +81,16 @@ export function MultiSelectCombobox({
       ? options
       : options.filter((option) => test(query, processFilterOption(option)));
 
-  const count = selectedOptions.filter((name) => name !== "_other").length;
+  // Convert to internal array representation for Combobox
+  const selectedArray = selectedOptions === "all" ? options : selectedOptions;
+
+  const count =
+    selectedOptions === "all"
+      ? options.length
+      : selectedOptions.filter((name) => name !== "_other").length;
+
   const displayValue =
-    selectedOptions.length === options.length
+    selectedOptions === "all"
       ? `All ${unitPlural}`
       : `${count} ${count !== 1 ? unitPlural : unit}`;
 
@@ -92,11 +101,26 @@ export function MultiSelectCombobox({
     }
   }, [isOpen, update]);
 
+  const handleSelectAll = () => {
+    if (selectedOptions === "all") {
+      setSelectedOptions([]);
+    } else {
+      setSelectedOptions("all");
+    }
+  };
+
   return (
     <Combobox
       as="div"
-      value={selectedOptions}
-      onChange={setSelectedOptions}
+      value={selectedArray}
+      onChange={(newSelection) => {
+        // Check if all options are selected and convert to "all" state
+        if (newSelection.length === options.length) {
+          setSelectedOptions("all");
+        } else {
+          setSelectedOptions(newSelection);
+        }
+      }}
       multiple
     >
       {({ open }) => {
@@ -175,15 +199,9 @@ export function MultiSelectCombobox({
                         <button
                           type="button"
                           className="w-full cursor-pointer p-2 pl-7 text-left text-content-primary hover:bg-background-tertiary"
-                          onClick={() =>
-                            setSelectedOptions(
-                              options.length === selectedOptions.length
-                                ? []
-                                : [...options],
-                            )
-                          }
+                          onClick={handleSelectAll}
                         >
-                          {options.length === selectedOptions.length
+                          {selectedOptions === "all"
                             ? "Deselect all"
                             : "Select all"}
                         </button>

npm-packages/dashboard-common/src/features/functions/components/FunctionLogs.tsx

@@ -13,6 +13,7 @@ import { Button } from "@ui/Button";
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
 import { useRouter } from "next/router";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { MultiSelectValue } from "@ui/MultiSelectCombobox";
 
 type LogLevel = "success" | "failure" | "DEBUG" | "INFO" | "WARN" | "ERROR";
 
@@ -49,10 +50,21 @@ export function FunctionLogs({
     "",
   );
   const [innerFilter, setInnerFilter] = useState(filter ?? "");
-  const [selectedLevels, setSelectedLevels] = useLocalStorage<LogLevel[]>(
-    `function-logs/${functionId}/selected-levels`,
-    DEFAULT_LOG_LEVELS,
-  );
+  const [selectedLevelsStorage, setSelectedLevelsStorage] = useLocalStorage<
+    LogLevel[] | "all"
+  >(`function-logs/${functionId}/selected-levels`, "all");
+
+  // Convert the stored levels to MultiSelectValue type
+  const selectedLevels: MultiSelectValue =
+    selectedLevelsStorage === "all"
+      ? "all"
+      : ((selectedLevelsStorage || []) as string[]);
+  const setSelectedLevels = (newLevels: MultiSelectValue) => {
+    // Store in localStorage
+    setSelectedLevelsStorage(
+      newLevels === "all" ? "all" : (newLevels as LogLevel[]),
+    );
+  };
 
   useDebounce(
     () => {
@@ -104,9 +116,9 @@ export function FunctionLogs({
         functions={[functionId]}
         selectedFunctions={[functionId]}
         setSelectedFunctions={(_functions) => {}}
-        selectedLevels={selectedLevels ?? DEFAULT_LOG_LEVELS}
-        setSelectedLevels={(levels) => setSelectedLevels(levels as LogLevel[])}
-        selectedNents={selectedNent ? [selectedNent.path] : []}
+        selectedLevels={selectedLevels}
+        setSelectedLevels={setSelectedLevels}
+        selectedNents={selectedNent ? [selectedNent.path] : "all"}
         setSelectedNents={() => {}}
         hideFunctionFilter
         firstItem={
@@ -134,7 +146,7 @@ export function FunctionLogs({
         logs={logs}
         filteredLogs={filterLogs(
           {
-            logTypes: selectedLevels ?? DEFAULT_LOG_LEVELS,
+            logTypes: selectedLevels,
             functions: [functionId],
             selectedFunctions: [functionId],
             filter: filter ?? "",

npm-packages/dashboard-common/src/features/logs/components/LogList.tsx

@@ -6,19 +6,11 @@ import {
   InfoCircledIcon,
   QuestionMarkCircledIcon,
 } from "@radix-ui/react-icons";
-import {
-  Fragment,
-  memo,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { Fragment, memo, useCallback, useRef, useState } from "react";
 import { FixedSizeList, ListOnScrollProps, areEqual } from "react-window";
-import { useDebounce, useMeasure, usePrevious } from "react-use";
+import { useDebounce, useMeasure } from "react-use";
 import { Transition, Dialog } from "@headlessui/react";
 import isEqual from "lodash/isEqual";
-import difference from "lodash/difference";
 import { PauseCircleIcon, PlayCircleIcon } from "@heroicons/react/24/outline";
 import { DeploymentEventListItem } from "@common/features/logs/components/DeploymentEventListItem";
 import {
@@ -41,6 +33,7 @@ import { Button } from "@ui/Button";
 import { ClosePanelButton } from "@ui/ClosePanelButton";
 import { CopyTextButton } from "@common/elements/CopyTextButton";
 import { TextInput } from "@ui/TextInput";
+import { MultiSelectValue } from "@ui/MultiSelectCombobox";
 
 export type LogListProps = {
   logs?: UdfLog[];
@@ -306,29 +299,10 @@ function RequestIdLogs({
       }),
     ),
   );
-  const previousFunctions = usePrevious(functions);
   const [selectedFunctions, setSelectedFunctions] =
-    useState<string[]>(functions);
-
-  // If there are new functions in the list of logs, add them to the selected functions.
-  useEffect(() => {
-    if (functions.length === previousFunctions?.length) {
-      return;
-    }
-    const newFunctions = previousFunctions
-      ? difference(functions, previousFunctions)
-      : [];
-    setSelectedFunctions((current) => [...current, ...newFunctions]);
-  }, [functions, previousFunctions]);
+    useState<MultiSelectValue>("all");
 
-  const [selectedLevels, setSelectedLevels] = useState<string[]>([
-    "success",
-    "failure",
-    "DEBUG",
-    "INFO",
-    "WARN",
-    "ERROR",
-  ]);
+  const [selectedLevels, setSelectedLevels] = useState<MultiSelectValue>("all");
 
   const filters = {
     logTypes: selectedLevels,

npm-packages/dashboard-common/src/features/logs/components/LogToolbar.test.tsx

@@ -28,31 +28,26 @@ describe("selectNentOption", () => {
       functions,
       newNents: [],
       expectedSelectedNents: [],
-      expectedSelectedFunctions: [],
+      expectedSelectedFunctions: "all",
     },
     {
       name: "removing two nents removes functions related to those nents",
       nents,
       functions,
       newNents: ["_App"],
       expectedSelectedNents: ["_App"],
-      expectedSelectedFunctions: [functions[0]],
-    },
-    {
-      name: "adding two nents adds functions related to those nents",
-      nents: [],
-      functions: [],
-      newNents: ["_App", "nent2"],
-      expectedSelectedNents: ["_App", "nent2"],
-      expectedSelectedFunctions: [functions[0], functions[3]],
+      expectedSelectedFunctions: "all",
     },
     {
       name: "adding a nent does not add functions related to other nents",
       nents: ["_App"],
       functions: [],
       newNents: ["_App", "nent2"],
       expectedSelectedNents: ["_App", "nent2"],
-      expectedSelectedFunctions: [functions[3]],
+      expectedSelectedFunctions: [
+        functionIdentifierValue("func1"),
+        functionIdentifierValue("func4", "nent2", "id2"),
+      ],
     },
   ];
 
@@ -95,9 +90,9 @@ describe("functionsForSelectedNents", () => {
 
   const testCases = [
     {
-      name: "returns no functions when no nents are selected",
+      name: "returns all functions when no nents are selected",
       nents: [],
-      expectedFunctions: [],
+      expectedFunctions: functions,
     },
     {
       name: "returns only functions related to selected nents",
@@ -120,7 +115,7 @@ describe("functionsForSelectedNents", () => {
       expectedFunctions: [functions[0]],
     },
     {
-      name: "returns nent functions when only _App is selected",
+      name: "returns nent functions when only nent1 and nent2 are selected",
       nents: ["nent1", "nent2"],
       expectedFunctions: functions.slice(1),
     },