Add search term filter tag to scene list filter tags (#6095)

* 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
* Hide search term tag when input is visible

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

@@ -67,6 +67,7 @@ import {
   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;
@@ -251,6 +252,7 @@ const SidebarContent: React.FC<{
   onClose?: () => void;
   showEditFilter: (editingCriterion?: string) => void;
   count?: number;
+  focus?: ReturnType<typeof useFocus>;
 }> = ({
   filter,
   setFilter,
@@ -260,6 +262,7 @@ const SidebarContent: React.FC<{
   sidebarOpen,
   onClose,
   count,
+  focus,
 }) => {
   const showResultsId =
     count !== undefined ? "actions.show_count_results" : "actions.show_results";
@@ -274,6 +277,7 @@ const SidebarContent: React.FC<{
         filter={filter}
         setFilter={setFilter}
         view={view}
+        focus={focus}
       />
 
       <ScenesFilterSidebarSections>
@@ -345,6 +349,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;
@@ -361,6 +367,8 @@ const ListToolbarContent: React.FC<{
   onEditCriterion,
   onRemoveCriterion,
   onRemoveAllCriterion,
+  onEditSearchTerm,
+  onRemoveSearchTerm,
   onSelectAll,
   onSelectNone,
   onEdit,
@@ -370,7 +378,7 @@ const ListToolbarContent: React.FC<{
 }) => {
   const intl = useIntl();
 
-  const { criteria } = filter;
+  const { criteria, searchTerm } = filter;
   const hasSelection = selectedIds.size > 0;
 
   return (
@@ -387,10 +395,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>
@@ -538,6 +549,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
@@ -792,6 +806,7 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
               sidebarOpen={showSidebar}
               onClose={() => setShowSidebar(false)}
               count={cachedResult.loading ? undefined : totalCount}
+              focus={searchFocus}
             />
           </Sidebar>
           <div>
@@ -809,7 +824,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}