Add search term input to edit filter dialog (#6082)

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

@@ -34,6 +34,7 @@ import { FilterMode } from "src/core/generated-graphql";
 import { useFocusOnce } from "src/utils/focus";
 import Mousetrap from "mousetrap";
 import ScreenUtils from "src/utils/screen";
+import { SearchTermInput } from "./ListFilter";
 
 interface ICriterionList {
   criteria: string[];
@@ -453,6 +454,15 @@ export const EditFilterDialog: React.FC<IEditFilterProps> = ({
               "criterion-selected": !!criterion,
             })}
           >
+            <div className="search-term-row">
+              <span>
+                <FormattedMessage id="search_filter.search_term" />
+              </span>
+              <SearchTermInput
+                filter={currentFilter}
+                onFilterUpdate={setCurrentFilter}
+              />
+            </div>
             <CriterionOptionList
               criteria={criteriaList}
               currentCriterion={criterion}

ui/v2.5/src/components/List/styles.scss

@@ -312,6 +312,32 @@ input[type="range"].zoom-slider {
     padding-right: 0;
   }
 
+  .search-term-row {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    margin-left: 1.5rem;
+    margin-right: 1rem;
+
+    .search-term-input {
+      flex-basis: 75%;
+    }
+
+    @include media-breakpoint-down(xs) {
+      flex-wrap: wrap;
+
+      > span {
+        width: 100%;
+      }
+
+      .search-term-input {
+        flex-basis: 100%;
+      }
+    }
+  }
+
   .filter-tags {
     border-top: 1px solid rgb(16 22 26 / 40%);
     padding: 1rem 1rem 0 1rem;

ui/v2.5/src/locales/en-GB.json

@@ -1317,6 +1317,7 @@
     "edit_filter": "Edit Filter",
     "name": "Filter",
     "saved_filters": "Saved filters",
+    "search_term": "Search term",
     "update_filter": "Update Filter",
     "more_filter_criteria": "+{count} more"
   },