Revert "Search term filter tag on scene list (#5991)" (#6003)

This reverts commit 21ee88b149.

ui/v2.5/src/components/List/FilterTags.tsx

@@ -9,37 +9,31 @@ import { Badge, BadgeProps, Button, Overlay, Popover } from "react-bootstrap";
 import { Criterion } from "src/models/list-filter/criteria/criterion";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Icon } from "../Shared/Icon";
-import { faMagnifyingGlass, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { BsPrefixProps, ReplaceProps } from "react-bootstrap/esm/helpers";
 import { CustomFieldsCriterion } from "src/models/list-filter/criteria/custom-fields";
 import { useDebounce } from "src/hooks/debounce";
-import cx from "classnames";
 
 type TagItemProps = PropsWithChildren<
   ReplaceProps<"span", BsPrefixProps<"span"> & BadgeProps>
 >;
 
 export const TagItem: React.FC<TagItemProps> = (props) => {
-  const { className, children, ...others } = props;
+  const { children } = props;
   return (
-    <Badge
-      className={cx("tag-item", className)}
-      variant="secondary"
-      {...others}
-    >
+    <Badge className="tag-item" variant="secondary" {...props}>
       {children}
     </Badge>
   );
 };
 
 export const FilterTag: React.FC<{
-  className?: string;
   label: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLSpanElement>;
   onRemove: React.MouseEventHandler<HTMLElement>;
-}> = ({ className, label, onClick, onRemove }) => {
+}> = ({ label, onClick, onRemove }) => {
   return (
-    <TagItem className={className} onClick={onClick}>
+    <TagItem onClick={onClick}>
       {label}
       <Button
         variant="secondary"
@@ -102,24 +96,18 @@ const MoreFilterTags: React.FC<{
 };
 
 interface IFilterTagsProps {
-  searchTerm?: string;
   criteria: Criterion[];
-  onEditSearchTerm?: () => void;
   onEditCriterion: (c: Criterion) => void;
   onRemoveCriterion: (c: Criterion, valueIndex?: number) => void;
   onRemoveAll: () => void;
-  onRemoveSearchTerm?: () => void;
   truncateOnOverflow?: boolean;
 }
 
 export const FilterTags: React.FC<IFilterTagsProps> = ({
-  searchTerm,
   criteria,
   onEditCriterion,
   onRemoveCriterion,
   onRemoveAll,
-  onEditSearchTerm,
-  onRemoveSearchTerm,
   truncateOnOverflow = false,
 }) => {
   const intl = useIntl();
@@ -277,7 +265,7 @@ export const FilterTags: React.FC<IFilterTagsProps> = ({
     );
   }
 
-  if (criteria.length === 0 && !searchTerm) {
+  if (criteria.length === 0) {
     return null;
   }
 
@@ -285,31 +273,31 @@ export const FilterTags: React.FC<IFilterTagsProps> = ({
 
   const filterTags = criteria.map((c) => getFilterTags(c)).flat();
 
-  if (searchTerm && searchTerm.length > 0) {
-    filterTags.unshift(
-      <FilterTag
-        key="search-term"
-        className="search-term-filter-tag"
-        label={
-          <span className="search-term">
-            <Icon icon={faMagnifyingGlass} />
-            {searchTerm}
-          </span>
-        }
-        onClick={() => onEditSearchTerm?.()}
-        onRemove={() => onRemoveSearchTerm?.()}
-      />
+  if (cutoff && filterTags.length > cutoff) {
+    const visibleCriteria = filterTags.slice(0, cutoff);
+    const hiddenCriteria = filterTags.slice(cutoff);
+
+    return (
+      <div className={className} ref={ref}>
+        {visibleCriteria}
+        <MoreFilterTags tags={hiddenCriteria} />
+        {criteria.length >= 3 && (
+          <Button
+            variant="minimal"
+            className="clear-all-button"
+            onClick={() => onRemoveAll()}
+          >
+            <FormattedMessage id="actions.clear" />
+          </Button>
+        )}
+      </div>
     );
   }
 
-  const visibleCriteria = cutoff ? filterTags.slice(0, cutoff) : filterTags;
-  const hiddenCriteria = cutoff ? filterTags.slice(cutoff) : [];
-
   return (
     <div className={className} ref={ref}>
-      {visibleCriteria}
-      <MoreFilterTags tags={hiddenCriteria} />
-      {filterTags.length >= 3 && (
+      {filterTags}
+      {criteria.length >= 3 && (
         <Button
           variant="minimal"
           className="clear-all-button"

ui/v2.5/src/components/List/Filters/FilterSidebar.tsx

@@ -16,17 +16,8 @@ export const FilteredSidebarHeader: React.FC<{
   filter: ListFilterModel;
   setFilter: (filter: ListFilterModel) => void;
   view?: View;
-  focus?: ReturnType<typeof useFocus>;
-}> = ({
-  sidebarOpen,
-  showEditFilter,
-  filter,
-  setFilter,
-  view,
-  focus: providedFocus,
-}) => {
-  const localFocus = useFocus();
-  const focus = providedFocus ?? localFocus;
+}> = ({ sidebarOpen, showEditFilter, filter, setFilter, view }) => {
+  const focus = useFocus();
   const [, setFocus] = focus;
 
   // Set the focus on the input field when the sidebar is opened

ui/v2.5/src/components/List/util.ts

@@ -196,12 +196,9 @@ export function useFilterOperations(props: {
     [setFilter]
   );
 
-  const clearAllCriteria = useCallback(
-    (includeSearchTerm = false) => {
-      setFilter((cv) => cv.clearCriteria(includeSearchTerm));
-    },
-    [setFilter]
-  );
+  const clearAllCriteria = useCallback(() => {
+    setFilter((cv) => cv.clearCriteria());
+  }, [setFilter]);
 
   return {
     setPage,

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

@@ -63,7 +63,6 @@ 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;
@@ -242,7 +241,6 @@ const SidebarContent: React.FC<{
   onClose?: () => void;
   showEditFilter: (editingCriterion?: string) => void;
   count?: number;
-  focus?: ReturnType<typeof useFocus>;
 }> = ({
   filter,
   setFilter,
@@ -252,7 +250,6 @@ const SidebarContent: React.FC<{
   sidebarOpen,
   onClose,
   count,
-  focus,
 }) => {
   const showResultsId =
     count !== undefined ? "actions.show_count_results" : "actions.show_results";
@@ -267,7 +264,6 @@ const SidebarContent: React.FC<{
         filter={filter}
         setFilter={setFilter}
         view={view}
-        focus={focus}
       />
 
       <ScenesFilterSidebarSections>
@@ -330,7 +326,6 @@ interface IOperations {
 }
 
 const ListToolbarContent: React.FC<{
-  searchTerm: string;
   criteria: Criterion[];
   items: GQL.SlimSceneDataFragment[];
   selectedIds: Set<string>;
@@ -339,8 +334,6 @@ 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;
@@ -348,7 +341,6 @@ const ListToolbarContent: React.FC<{
   onPlay: () => void;
   onCreateNew: () => void;
 }> = ({
-  searchTerm,
   criteria,
   items,
   selectedIds,
@@ -357,8 +349,6 @@ const ListToolbarContent: React.FC<{
   onEditCriterion,
   onRemoveCriterion,
   onRemoveAllCriterion,
-  onEditSearchTerm,
-  onRemoveSearchTerm,
   onSelectAll,
   onSelectNone,
   onEdit,
@@ -380,13 +370,10 @@ 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>
@@ -533,9 +520,6 @@ 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
@@ -790,7 +774,6 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
               sidebarOpen={showSidebar}
               onClose={() => setShowSidebar(false)}
               count={cachedResult.loading ? undefined : totalCount}
-              focus={searchFocus}
             />
           </Sidebar>
           <div>
@@ -800,7 +783,6 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
               })}
             >
               <ListToolbarContent
-                searchTerm={filter.searchTerm}
                 criteria={filter.criteria}
                 items={items}
                 selectedIds={selectedIds}
@@ -808,12 +790,7 @@ export const FilteredSceneList = (props: IFilteredScenes) => {
                 onToggleSidebar={() => setShowSidebar(!showSidebar)}
                 onEditCriterion={(c) => showEditFilter(c.criterionOption.type)}
                 onRemoveCriterion={removeCriterion}
-                onRemoveAllCriterion={() => clearAllCriteria(true)}
-                onEditSearchTerm={() => {
-                  setShowSidebar(true);
-                  setSearchFocus(true);
-                }}
-                onRemoveSearchTerm={() => setFilter(filter.clearSearchTerm())}
+                onRemoveAllCriterion={() => clearAllCriteria()}
                 onSelectAll={() => onSelectAll()}
                 onSelectNone={() => onSelectNone()}
                 onEdit={onEdit}

ui/v2.5/src/index.scss

@@ -698,10 +698,8 @@ div.dropdown-menu {
 }
 
 .tag-item {
-  align-items: center;
   background-color: $muted-gray;
   color: $dark-text;
-  display: flex;
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
@@ -712,20 +710,17 @@ div.dropdown-menu {
     cursor: pointer;
   }
 
-  .search-term svg {
-    margin-left: 0;
-  }
-
   .btn {
     background: none;
     border: none;
     bottom: 2px;
     color: $dark-text;
     font-size: 12px;
-    line-height: 16px;
+    line-height: 1rem;
     margin-right: -0.5rem;
     opacity: 0.5;
     padding: 0 0.5rem;
+    position: relative;
 
     &:active,
     &:hover {

ui/v2.5/src/models/list-filter/filter.ts

@@ -476,23 +476,13 @@ export class ListFilterModel {
     return this.setCriteria(criteria);
   }
 
-  public clearCriteria(clearSearchTerm = false) {
+  public clearCriteria() {
     const ret = this.clone();
-    if (clearSearchTerm) {
-      ret.searchTerm = "";
-    }
     ret.criteria = [];
     ret.currentPage = 1;
     return ret;
   }
 
-  public clearSearchTerm() {
-    const ret = this.clone();
-    ret.searchTerm = "";
-    ret.currentPage = 1; // reset to first page
-    return ret;
-  }
-
   public setCriteria(criteria: Criterion[]) {
     const ret = this.clone();
     ret.criteria = criteria;

ui/v2.5/src/utils/focus.ts

@@ -2,14 +2,10 @@ import { useRef, useEffect, useCallback } from "react";
 
 const useFocus = () => {
   const htmlElRef = useRef<HTMLInputElement | null>(null);
-  const setFocus = useCallback((selectAll?: boolean) => {
+  const setFocus = useCallback(() => {
     const currentEl = htmlElRef.current;
     if (currentEl) {
-      if (selectAll) {
-        currentEl.select();
-      } else {
-        currentEl.focus();
-      }
+      currentEl.focus();
     }
   }, []);