From ac762762c39c1885397ee14431d178877cf1b62e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 4 Nov 2024 13:50:05 -0600
Subject: [PATCH] Overwrite existing saved search (#14792)

* Overwrite existing saved search

* simplify
---
 web/src/components/input/InputWithTags.tsx    | 22 +++++++++++++------
 web/src/components/input/SaveSearchDialog.tsx | 15 ++++++++++++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/web/src/components/input/InputWithTags.tsx b/web/src/components/input/InputWithTags.tsx
index becc0f4e1..ff46375fd 100644
--- a/web/src/components/input/InputWithTags.tsx
+++ b/web/src/components/input/InputWithTags.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
 import {
   LuX,
   LuFilter,
@@ -88,6 +94,11 @@ export default function InputWithTags({
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [searchToDelete, setSearchToDelete] = useState<string | null>(null);
 
+  const searchHistoryNames = useMemo(
+    () => searchHistory?.map((item) => item.name) ?? [],
+    [searchHistory],
+  );
+
   const handleSetSearchHistory = useCallback(() => {
     setIsSaveDialogOpen(true);
   }, []);
@@ -96,12 +107,8 @@ export default function InputWithTags({
     (name: string) => {
       if (searchHistoryLoaded) {
         setSearchHistory([
-          ...(searchHistory ?? []),
-          {
-            name: name,
-            search: search,
-            filter: filters,
-          },
+          ...(searchHistory ?? []).filter((item) => item.name !== name),
+          { name, search, filter: filters },
         ]);
       }
     },
@@ -835,6 +842,7 @@ export default function InputWithTags({
         </CommandList>
       </Command>
       <SaveSearchDialog
+        existingNames={searchHistoryNames}
         isOpen={isSaveDialogOpen}
         onClose={() => setIsSaveDialogOpen(false)}
         onSave={handleSaveSearch}
diff --git a/web/src/components/input/SaveSearchDialog.tsx b/web/src/components/input/SaveSearchDialog.tsx
index 89e9217d7..322a76421 100644
--- a/web/src/components/input/SaveSearchDialog.tsx
+++ b/web/src/components/input/SaveSearchDialog.tsx
@@ -9,17 +9,19 @@ import {
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { toast } from "sonner";
 
 type SaveSearchDialogProps = {
+  existingNames: string[];
   isOpen: boolean;
   onClose: () => void;
   onSave: (name: string) => void;
 };
 
 export function SaveSearchDialog({
+  existingNames,
   isOpen,
   onClose,
   onSave,
@@ -37,6 +39,11 @@ export function SaveSearchDialog({
     }
   };
 
+  const overwrite = useMemo(
+    () => existingNames.includes(searchName),
+    [existingNames, searchName],
+  );
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent
@@ -58,6 +65,12 @@ export function SaveSearchDialog({
           onChange={(e) => setSearchName(e.target.value)}
           placeholder="Enter a name for your search"
         />
+        {overwrite && (
+          <div className="ml-1 text-sm text-danger">
+            {searchName} already exists. Saving will overwrite the existing
+            value.
+          </div>
+        )}
         <DialogFooter>
           <Button aria-label="Cancel" onClick={onClose}>
             Cancel