Revert "Early 0.18 work (#22138)" (#22142)

This reverts commit d24b96d3bb.

web/src/components/overlay/ExportDialog.tsx

@@ -22,14 +22,7 @@ import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
+import { SelectSeparator } from "../ui/select";
 import { isDesktop, isIOS, isMobile } from "react-device-detect";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import SaveExportOverlay from "./SaveExportOverlay";
@@ -38,7 +31,6 @@ import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import { GenericVideoPlayer } from "../player/GenericVideoPlayer";
 import { useTranslation } from "react-i18next";
-import { ExportCase } from "@/types/export";
 
 const EXPORT_OPTIONS = [
   "1",
@@ -75,9 +67,6 @@ export default function ExportDialog({
 }: ExportDialogProps) {
   const { t } = useTranslation(["components/dialog"]);
   const [name, setName] = useState("");
-  const [selectedCaseId, setSelectedCaseId] = useState<string | undefined>(
-    undefined,
-  );
 
   const onStartExport = useCallback(() => {
     if (!range) {
@@ -100,7 +89,6 @@ export default function ExportDialog({
         {
           playback: "realtime",
           name,
-          export_case_id: selectedCaseId || undefined,
         },
       )
       .then((response) => {
@@ -114,7 +102,6 @@ export default function ExportDialog({
             ),
           });
           setName("");
-          setSelectedCaseId(undefined);
           setRange(undefined);
           setMode("none");
         }
@@ -131,11 +118,10 @@ export default function ExportDialog({
           { position: "top-center" },
         );
       });
-  }, [camera, name, range, selectedCaseId, setRange, setName, setMode, t]);
+  }, [camera, name, range, setRange, setName, setMode, t]);
 
   const handleCancel = useCallback(() => {
     setName("");
-    setSelectedCaseId(undefined);
     setMode("none");
     setRange(undefined);
   }, [setMode, setRange]);
@@ -204,10 +190,8 @@ export default function ExportDialog({
             currentTime={currentTime}
             range={range}
             name={name}
-            selectedCaseId={selectedCaseId}
             onStartExport={onStartExport}
             setName={setName}
-            setSelectedCaseId={setSelectedCaseId}
             setRange={setRange}
             setMode={setMode}
             onCancel={handleCancel}
@@ -223,10 +207,8 @@ type ExportContentProps = {
   currentTime: number;
   range?: TimeRange;
   name: string;
-  selectedCaseId?: string;
   onStartExport: () => void;
   setName: (name: string) => void;
-  setSelectedCaseId: (caseId: string | undefined) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
   onCancel: () => void;
@@ -236,17 +218,14 @@ export function ExportContent({
   currentTime,
   range,
   name,
-  selectedCaseId,
   onStartExport,
   setName,
-  setSelectedCaseId,
   setRange,
   setMode,
   onCancel,
 }: ExportContentProps) {
   const { t } = useTranslation(["components/dialog"]);
   const [selectedOption, setSelectedOption] = useState<ExportOption>("1");
-  const { data: cases } = useSWR<ExportCase[]>("cases");
 
   const onSelectTime = useCallback(
     (option: ExportOption) => {
@@ -341,44 +320,6 @@ export function ExportContent({
         value={name}
         onChange={(e) => setName(e.target.value)}
       />
-      <div className="my-4">
-        <Label className="text-sm text-secondary-foreground">
-          {t("export.case.label", { defaultValue: "Case (optional)" })}
-        </Label>
-        <Select
-          value={selectedCaseId || "none"}
-          onValueChange={(value) =>
-            setSelectedCaseId(value === "none" ? undefined : value)
-          }
-        >
-          <SelectTrigger className="mt-2">
-            <SelectValue
-              placeholder={t("export.case.placeholder", {
-                defaultValue: "Select a case (optional)",
-              })}
-            />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem
-              value="none"
-              className="cursor-pointer hover:bg-accent hover:text-accent-foreground"
-            >
-              {t("label.none", { ns: "common" })}
-            </SelectItem>
-            {cases
-              ?.sort((a, b) => a.name.localeCompare(b.name))
-              .map((caseItem) => (
-                <SelectItem
-                  key={caseItem.id}
-                  value={caseItem.id}
-                  className="cursor-pointer hover:bg-accent hover:text-accent-foreground"
-                >
-                  {caseItem.name}
-                </SelectItem>
-              ))}
-          </SelectContent>
-        </Select>
-      </div>
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
       <DialogFooter
         className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -75,9 +75,6 @@ export default function MobileReviewSettingsDrawer({
   // exports
 
   const [name, setName] = useState("");
-  const [selectedCaseId, setSelectedCaseId] = useState<string | undefined>(
-    undefined,
-  );
   const onStartExport = useCallback(() => {
     if (!range) {
       toast.error(t("toast.error.noValidTimeSelected"), {
@@ -99,7 +96,6 @@ export default function MobileReviewSettingsDrawer({
         {
           playback: "realtime",
           name,
-          export_case_id: selectedCaseId || undefined,
         },
       )
       .then((response) => {
@@ -118,7 +114,6 @@ export default function MobileReviewSettingsDrawer({
             },
           );
           setName("");
-          setSelectedCaseId(undefined);
           setRange(undefined);
           setMode("none");
         }
@@ -138,7 +133,7 @@ export default function MobileReviewSettingsDrawer({
           },
         );
       });
-  }, [camera, name, range, selectedCaseId, setRange, setName, setMode, t]);
+  }, [camera, name, range, setRange, setName, setMode, t]);
 
   // filters
 
@@ -205,10 +200,8 @@ export default function MobileReviewSettingsDrawer({
         currentTime={currentTime}
         range={range}
         name={name}
-        selectedCaseId={selectedCaseId}
         onStartExport={onStartExport}
         setName={setName}
-        setSelectedCaseId={setSelectedCaseId}
         setRange={setRange}
         setMode={(mode) => {
           setMode(mode);
@@ -220,7 +213,6 @@ export default function MobileReviewSettingsDrawer({
         onCancel={() => {
           setMode("none");
           setRange(undefined);
-          setSelectedCaseId(undefined);
           setDrawerMode("select");
         }}
       />

web/src/components/overlay/dialog/OptionAndInputDialog.tsx

@@ -1,166 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { cn } from "@/lib/utils";
-import { isMobile } from "react-device-detect";
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-type Option = {
-  value: string;
-  label: string;
-};
-
-type OptionAndInputDialogProps = {
-  open: boolean;
-  title: string;
-  description?: string;
-  options: Option[];
-  newValueKey: string;
-  initialValue?: string;
-  nameLabel: string;
-  descriptionLabel: string;
-  setOpen: (open: boolean) => void;
-  onSave: (value: string) => void;
-  onCreateNew: (name: string, description: string) => void;
-};
-
-export default function OptionAndInputDialog({
-  open,
-  title,
-  description,
-  options,
-  newValueKey,
-  initialValue,
-  nameLabel,
-  descriptionLabel,
-  setOpen,
-  onSave,
-  onCreateNew,
-}: OptionAndInputDialogProps) {
-  const { t } = useTranslation("common");
-  const firstOption = useMemo(() => options[0]?.value, [options]);
-
-  const [selectedValue, setSelectedValue] = useState<string | undefined>(
-    initialValue ?? firstOption,
-  );
-  const [name, setName] = useState("");
-  const [descriptionValue, setDescriptionValue] = useState("");
-
-  useEffect(() => {
-    if (open) {
-      setSelectedValue(initialValue ?? firstOption);
-      setName("");
-      setDescriptionValue("");
-    }
-  }, [open, initialValue, firstOption]);
-
-  const isNew = selectedValue === newValueKey;
-  const disableSave = !selectedValue || (isNew && name.trim().length === 0);
-
-  const handleSave = () => {
-    if (!selectedValue) {
-      return;
-    }
-
-    const trimmedName = name.trim();
-    const trimmedDescription = descriptionValue.trim();
-
-    if (isNew) {
-      onCreateNew(trimmedName, trimmedDescription);
-    } else {
-      onSave(selectedValue);
-    }
-    setOpen(false);
-  };
-
-  return (
-    <Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
-      <DialogContent
-        className={cn("space-y-4", isMobile && "px-4")}
-        onOpenAutoFocus={(e) => {
-          if (isMobile) {
-            e.preventDefault();
-          }
-        }}
-      >
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          {description && <DialogDescription>{description}</DialogDescription>}
-        </DialogHeader>
-
-        <div className="space-y-2">
-          <Select
-            value={selectedValue}
-            onValueChange={(val) => setSelectedValue(val)}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {options.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        {isNew && (
-          <div className="space-y-4">
-            <div className="space-y-1">
-              <label className="text-sm font-medium text-secondary-foreground">
-                {nameLabel}
-              </label>
-              <Input value={name} onChange={(e) => setName(e.target.value)} />
-            </div>
-            <div className="space-y-1">
-              <label className="text-sm font-medium text-secondary-foreground">
-                {descriptionLabel}
-              </label>
-              <Input
-                value={descriptionValue}
-                onChange={(e) => setDescriptionValue(e.target.value)}
-              />
-            </div>
-          </div>
-        )}
-
-        <DialogFooter className={cn("pt-2", isMobile && "gap-2")}>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            {t("button.cancel")}
-          </Button>
-          <Button
-            type="button"
-            variant="select"
-            disabled={disableSave}
-            onClick={handleSave}
-          >
-            {t("button.save")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}