Search term filter tag on scene list (#5991)

* Add search term to filter tags on scene list page

Clicking on the tag selects all on the search term input. Clicking on the x erases it.

* Ensure clear criteria maintains consistent behaviour on other pages

ui/v2.5/src/components/Scenes/SceneList.tsx

@@ -63,6 +63,7 @@ import { Icon } from "../Shared/Icon";
 import { ListViewOptions } from "../List/ListViewOptions";
 import { PageSizeSelector, SortBySelect } from "../List/ListFilter";
 import { Criterion } from "src/models/list-filter/criteria/criterion";
+import useFocus from "src/utils/focus";
 
 function renderMetadataByline(result: GQL.FindScenesQueryResult) {
   const duration = result?.data?.findScenes?.duration;
@@ -241,6 +242,7 @@ const SidebarContent: React.FC<{
   onClose?: () => void;
   showEditFilter: (editingCriterion?: string) => void;
   count?: number;
+  focus?: ReturnType<typeof useFocus>;
 }> = ({
   filter,
   setFilter,
@@ -250,6 +252,7 @@ const SidebarContent: React.FC<{
   sidebarOpen,
   onClose,
   count,
+  focus,
 }) => {
   const showResultsId =
     count !== undefined ? "actions.show_count_results" : "actions.show_results";
@@ -264,6 +267,7 @@ const SidebarContent: React.FC<{
         filter={filter}
         setFilter={setFilter}
         view={view}
+        focus={focus}
       />
 
       <ScenesFilterSidebarSections>
@@ -326,6 +330,7 @@ interface IOperations {
 }
 
 const ListToolbarContent: React.FC<{
+  searchTerm: string;
   criteria: Criterion[];
   items: GQL.SlimSceneDataFragment[];
   selectedIds: Set<string>;
@@ -334,6 +339,8 @@ const ListToolbarContent: React.FC<{
   onEditCriterion: (c: Criterion) => void;
   onRemoveCriterion: (criterion: Criterion, valueIndex?: number) => void;
   onRemoveAllCriterion: () => void;
+  onEditSearchTerm: () => void;
+  onRemoveSearchTerm: () => void;
   onSelectAll: () => void;
   onSelectNone: () => void;
   onEdit: () => void;
@@ -341,6 +348,7 @@ const ListToolbarContent: React.FC<{
   onPlay: () => void;
   onCreateNew: () => void;
 }> = ({
+  searchTerm,
   criteria,
   items,
   selectedIds,
@@ -349,6 +357,8 @@ const ListToolbarContent: React.FC<{
   onEditCriterion,
   onRemoveCriterion,
   onRemoveAllCriterion,
+  onEditSearchTerm,
+  onRemoveSearchTerm,
   onSelectAll,
   onSelectNone,
   onEdit,
@@ -370,10 +380,13 @@ const ListToolbarContent: React.FC<{
             title={intl.formatMessage({ id: "actions.sidebar.toggle" })}
           />
           <FilterTags
+            searchTerm={searchTerm}
             criteria={criteria}
             onEditCriterion={onEditCriterion}
             onRemoveCriterion={onRemoveCriterion}
             onRemoveAll={onRemoveAllCriterion}
+            onEditSearchTerm={onEditSearchTerm}
+            onRemoveSearchTerm={onRemoveSearchTerm}
             truncateOnOverflow
           />
         </div>
@@ -520,6 +533,9 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
   const intl = useIntl();
   const history = useHistory();
 
+  const searchFocus = useFocus();
+  const [, setSearchFocus] = searchFocus;
+
   const { filterHook, defaultSort, view, alterQuery, fromGroupId } = props;
 
   // States
@@ -774,6 +790,7 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
               sidebarOpen={showSidebar}
               onClose={() => setShowSidebar(false)}
               count={cachedResult.loading ? undefined : totalCount}
+              focus={searchFocus}
             />
           </Sidebar>
           <div>
@@ -783,6 +800,7 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
               })}
             >
               <ListToolbarContent
+                searchTerm={filter.searchTerm}
                 criteria={filter.criteria}
                 items={items}
                 selectedIds={selectedIds}
@@ -790,7 +808,12 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
                 onToggleSidebar={() => setShowSidebar(!showSidebar)}
                 onEditCriterion={(c) => showEditFilter(c.criterionOption.type)}
                 onRemoveCriterion={removeCriterion}
-                onRemoveAllCriterion={() => clearAllCriteria()}
+                onRemoveAllCriterion={() => clearAllCriteria(true)}
+                onEditSearchTerm={() => {
+                  setShowSidebar(true);
+                  setSearchFocus(true);
+                }}
+                onRemoveSearchTerm={() => setFilter(filter.clearSearchTerm())}
                 onSelectAll={() => onSelectAll()}
                 onSelectNone={() => onSelectNone()}
                 onEdit={onEdit}