From 95e11d4aa8f61c6531cf774e2b3bbc76dd33f89f Mon Sep 17 00:00:00 2001
From: 7dJx1qP <38586902+7dJx1qP@users.noreply.github.com>
Date: Thu, 14 Oct 2021 23:42:32 -0400
Subject: [PATCH] Add clear button to list filter search input (#1845)

* add clear button to list filter search input
---
 .../components/Changelog/versions/v0110.md    |  1 +
 ui/v2.5/src/components/List/ListFilter.tsx    | 24 ++++++++++++++++++-
 ui/v2.5/src/components/List/styles.scss       | 21 ++++++++++++++++
 ui/v2.5/src/locales/en-GB.json                |  1 +
 4 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/ui/v2.5/src/components/Changelog/versions/v0110.md b/ui/v2.5/src/components/Changelog/versions/v0110.md
index c1e69897d..c5ca7342e 100644
--- a/ui/v2.5/src/components/Changelog/versions/v0110.md
+++ b/ui/v2.5/src/components/Changelog/versions/v0110.md
@@ -4,6 +4,7 @@
 * Added interface options to disable creating performers/studios/tags from dropdown selectors. ([#1814](https://github.com/stashapp/stash/pull/1814))
 
 ### 🎨 Improvements
+* Added clear button to query text field. ([#1845](https://github.com/stashapp/stash/pull/1845))
 * Moved Performer rating stars from details/edit tabs to heading section of performer page. ([#1844](https://github.com/stashapp/stash/pull/1844))
 * Optimised scanning process. ([#1816](https://github.com/stashapp/stash/pull/1816))
 
diff --git a/ui/v2.5/src/components/List/ListFilter.tsx b/ui/v2.5/src/components/List/ListFilter.tsx
index 41bd5e15a..ef2aa7c7f 100644
--- a/ui/v2.5/src/components/List/ListFilter.tsx
+++ b/ui/v2.5/src/components/List/ListFilter.tsx
@@ -1,5 +1,6 @@
 import _, { debounce } from "lodash";
 import React, { HTMLAttributes, useEffect, useRef, useState } from "react";
+import cx from "classnames";
 import Mousetrap from "mousetrap";
 import { SortDirectionEnum } from "src/core/generated-graphql";
 import {
@@ -44,6 +45,9 @@ export const ListFilter: React.FC<IListFilterProps> = ({
 }) => {
   const [customPageSizeShowing, setCustomPageSizeShowing] = useState(false);
   const [queryRef, setQueryFocus] = useFocus();
+  const [queryClearShowing, setQueryClearShowing] = useState(
+    !!filter.searchTerm
+  );
   const perPageSelect = useRef(null);
   const [perPageInput, perPageFocus] = useFocus();
 
@@ -99,6 +103,14 @@ export const ListFilter: React.FC<IListFilterProps> = ({
 
   function onChangeQuery(event: React.FormEvent<HTMLInputElement>) {
     searchCallback(event.currentTarget.value);
+    setQueryClearShowing(!!event.currentTarget.value);
+  }
+
+  function onClearQuery() {
+    queryRef.current.value = "";
+    searchCallback("");
+    setQueryFocus();
+    setQueryClearShowing(false);
   }
 
   function onChangeSortDirection() {
@@ -217,7 +229,17 @@ export const ListFilter: React.FC<IListFilterProps> = ({
               onInput={onChangeQuery}
               className="query-text-field bg-secondary text-white border-secondary"
             />
-
+            <Button
+              variant="secondary"
+              onClick={onClearQuery}
+              title={intl.formatMessage({ id: "actions.clear" })}
+              className={cx(
+                "query-text-field-clear",
+                queryClearShowing ? "" : "d-none"
+              )}
+            >
+              <Icon icon="times" />
+            </Button>
             <InputGroup.Append>
               <OverlayTrigger
                 placement="top"
diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss
index 96e62392a..e035075a1 100644
--- a/ui/v2.5/src/components/List/styles.scss
+++ b/ui/v2.5/src/components/List/styles.scss
@@ -30,6 +30,27 @@ input[type="range"].zoom-slider {
   width: 50%;
 }
 
+.query-text-field-clear {
+  background-color: $secondary;
+  color: $text-muted;
+  font-size: $btn-font-size-sm;
+  margin: $btn-padding-y $btn-padding-x;
+  padding: 0;
+  position: absolute;
+  right: 3em;
+  z-index: 4;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled):active:focus {
+    background-color: $secondary;
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+
 .saved-filter-list-menu {
   width: 300px;
 
diff --git a/ui/v2.5/src/locales/en-GB.json b/ui/v2.5/src/locales/en-GB.json
index 0a53bda52..3e939095b 100644
--- a/ui/v2.5/src/locales/en-GB.json
+++ b/ui/v2.5/src/locales/en-GB.json
@@ -11,6 +11,7 @@
     "backup": "Backup",
     "cancel": "Cancel",
     "clean": "Clean",
+    "clear": "Clear",
     "clear_back_image": "Clear back image",
     "clear_front_image": "Clear front image",
     "clear_image": "Clear Image",