From ec0f925f2824b6b112724d9f73bcf4dacca14998 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:29:08 +0300
Subject: [PATCH] [ENG-1497] Save search enter key support, no duplicate
 queries (#1884)

prevent duplicate queries, submit pressing enter on save search
---
 .../app/$libraryId/Search/AppliedFilters.tsx  |  8 ++--
 interface/app/$libraryId/Search/Filters.tsx   | 18 ++++-----
 interface/app/$libraryId/Search/index.tsx     | 38 ++++++++++---------
 3 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/interface/app/$libraryId/Search/AppliedFilters.tsx b/interface/app/$libraryId/Search/AppliedFilters.tsx
index bad97a30b..941fd0d8c 100644
--- a/interface/app/$libraryId/Search/AppliedFilters.tsx
+++ b/interface/app/$libraryId/Search/AppliedFilters.tsx
@@ -148,9 +148,11 @@ export function FilterArg({ arg, onDelete }: { arg: SearchFilterArgs; onDelete?:
 								))}
 							</div>
 						)}
-						{activeOptions.length > 1
-							? `${activeOptions.length} ${pluralize(filter.name)}`
-							: activeOptions[0]?.name}
+						<span className="max-w-[150px] truncate">
+							{activeOptions.length > 1
+								? `${activeOptions.length} ${pluralize(filter.name)}`
+								: activeOptions[0]?.name}
+						</span>
 					</>
 				)}
 			</InteractiveSection>
diff --git a/interface/app/$libraryId/Search/Filters.tsx b/interface/app/$libraryId/Search/Filters.tsx
index fc31c933d..2532cb94a 100644
--- a/interface/app/$libraryId/Search/Filters.tsx
+++ b/interface/app/$libraryId/Search/Filters.tsx
@@ -64,7 +64,6 @@ export function useToggleOptionSelected({ search }: { search: UseSearch }) {
 	}) => {
 		search.updateDynamicFilters((dynamicFilters) => {
 			const key = getKey({ ...option, type: filter.name });
-
 			if (search.fixedFiltersKeys?.has(key)) return dynamicFilters;
 
 			const rawArg = dynamicFilters.find((arg) => filter.extract(arg));
@@ -134,7 +133,12 @@ const FilterOptionList = ({
 const FilterOptionText = ({ filter, search }: { filter: SearchFilterCRUD; search: UseSearch }) => {
 	const [value, setValue] = useState('');
 
-	const { fixedFiltersKeys } = search;
+	const { allFiltersKeys } = search;
+	const key = getKey({
+		type: filter.name,
+		name: value,
+		value
+	});
 
 	return (
 		<SearchOptionSubMenu className="!p-1.5" name={filter.name} icon={filter.icon}>
@@ -143,13 +147,7 @@ const FilterOptionText = ({ filter, search }: { filter: SearchFilterCRUD; search
 				onSubmit={(e) => {
 					e.preventDefault();
 					search.updateDynamicFilters((dynamicFilters) => {
-						const key = getKey({
-							type: filter.name,
-							name: value,
-							value
-						});
-
-						if (fixedFiltersKeys?.has(key)) return dynamicFilters;
+						if (allFiltersKeys.has(key)) return dynamicFilters;
 
 						const arg = filter.create(value);
 						dynamicFilters.push(arg);
@@ -165,7 +163,7 @@ const FilterOptionText = ({ filter, search }: { filter: SearchFilterCRUD; search
 					onChange={(e) => setValue(e.target.value)}
 				/>
 				<Button
-					disabled={value.length === 0}
+					disabled={value.length === 0 || allFiltersKeys.has(key)}
 					variant="accent"
 					className="w-full"
 					type="submit"
diff --git a/interface/app/$libraryId/Search/index.tsx b/interface/app/$libraryId/Search/index.tsx
index daa9923f1..5aa9c6d78 100644
--- a/interface/app/$libraryId/Search/index.tsx
+++ b/interface/app/$libraryId/Search/index.tsx
@@ -32,7 +32,6 @@ export * from './context';
 
 // const Label = tw.span`text-ink-dull mr-2 text-xs`;
 export const OptionContainer = tw.div`flex flex-row items-center`;
-const FiltersOverflowShade = tw.div`from-app-darkerBox/80 absolute w-10 bg-gradient-to-l to-transparent h-6`;
 
 interface SearchOptionItemProps extends PropsWithChildren {
 	selected?: boolean;
@@ -47,7 +46,7 @@ const SearchOptionItemInternals = (props: SearchOptionItemProps) => {
 		<div className="flex w-full items-center justify-between gap-1.5">
 			<div className="flex items-center gap-1.5">
 				<RenderIcon icon={props.icon} />
-				{props.children}
+				<span className="w-fit max-w-[150px] truncate">{props.children}</span>
 			</div>
 			{props.selected !== undefined && <RadixCheckbox checked={props.selected} />}
 		</div>
@@ -250,7 +249,23 @@ function SaveSearchButton() {
 				</Button>
 			}
 		>
-			<div className="mx-1.5 my-1 flex flex-row items-center overflow-hidden">
+			<form
+				className="mx-1.5 my-1 flex flex-row items-center overflow-hidden"
+				onSubmit={(e) => {
+					e.preventDefault();
+					if (!name) return;
+
+					saveSearch.mutate({
+						name,
+						search: search.search,
+						filters: JSON.stringify(search.mergedFilters.map((f) => f.arg)),
+						description: null,
+						icon: null
+					});
+					setName('');
+					popover.setOpen(false);
+				}}
+			>
 				<Input
 					value={name}
 					onChange={(e) => setName(e.target.value)}
@@ -260,25 +275,14 @@ function SaveSearchButton() {
 					className="w-[130px]"
 				/>
 				<Button
-					onClick={() => {
-						if (!name) return;
-
-						saveSearch.mutate({
-							name,
-							search: search.search,
-							filters: JSON.stringify(search.mergedFilters.map((f) => f.arg)),
-							description: null,
-							icon: null
-						});
-
-						setName('');
-					}}
+					disabled={name.length === 0}
+					type="submit"
 					className="ml-2"
 					variant="accent"
 				>
 					Save
 				</Button>
-			</div>
+			</form>
 		</Popover>
 	);
 }