Fix saved filter UI bugs (#4394)

* Fix missing intl strings
* Fix saved filter list z-index
* Fix saved filter list double scrollbar
* Display error inside filter list
* Filter out nonexistent saved filter rows in FrontPageConfig

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

@@ -43,7 +43,7 @@ export const PhashFilter: React.FC<IPhashFilterProps> = ({
           className="btn-secondary"
           onChange={valueChanged}
           value={value ? value.value : ""}
-          placeholder={intl.formatMessage({ id: "phash" })}
+          placeholder={intl.formatMessage({ id: "media_info.phash" })}
         />
       </Form.Group>
       {criterion.modifier !== CriterionModifier.IsNull &&

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
 import {
   Button,
   ButtonGroup,
@@ -39,7 +39,6 @@ export const SavedFilterList: React.FC<ISavedFilterListProps> = ({
   const intl = useIntl();
 
   const { data, error, loading, refetch } = useFindSavedFilters(filter.mode);
-  const oldError = useRef(error);
 
   const [filterName, setFilterName] = useState("");
   const [saving, setSaving] = useState(false);
@@ -56,14 +55,6 @@ export const SavedFilterList: React.FC<ISavedFilterListProps> = ({
 
   const savedFilters = data?.findSavedFilters ?? [];
 
-  useEffect(() => {
-    if (error && error !== oldError.current) {
-      Toast.error(error);
-    }
-
-    oldError.current = error;
-  }, [error, Toast, oldError]);
-
   async function onSaveFilter(name: string, id?: string) {
     const filterCopy = filter.clone();
 
@@ -285,6 +276,8 @@ export const SavedFilterList: React.FC<ISavedFilterListProps> = ({
   }
 
   function renderSavedFilters() {
+    if (error) return <h6 className="text-center">{error.message}</h6>;
+
     if (loading || saving) {
       return (
         <div className="loading">
@@ -311,20 +304,22 @@ export const SavedFilterList: React.FC<ISavedFilterListProps> = ({
   function maybeRenderSetDefaultButton() {
     if (persistState === PersistanceLevel.ALL) {
       return (
-        <Button
-          className="set-as-default-button"
-          variant="secondary"
-          size="sm"
-          onClick={() => onSetDefaultFilter()}
-        >
-          {intl.formatMessage({ id: "actions.set_as_default" })}
-        </Button>
+        <div className="mt-1">
+          <Button
+            className="set-as-default-button"
+            variant="secondary"
+            size="sm"
+            onClick={() => onSetDefaultFilter()}
+          >
+            {intl.formatMessage({ id: "actions.set_as_default" })}
+          </Button>
+        </div>
       );
     }
   }
 
   return (
-    <div>
+    <>
       {maybeRenderDeleteAlert()}
       {maybeRenderOverwriteAlert()}
       <InputGroup>
@@ -359,6 +354,6 @@ export const SavedFilterList: React.FC<ISavedFilterListProps> = ({
       </InputGroup>
       {renderSavedFilters()}
       {maybeRenderSetDefaultButton()}
-    </div>
+    </>
   );
 };

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

@@ -65,8 +65,14 @@ input[type="range"].zoom-slider {
 .saved-filter-list-menu {
   width: 300px;
 
+  &.dropdown-menu.show {
+    display: flex;
+    flex-direction: column;
+  }
+
   .set-as-default-button {
     float: right;
+    margin-right: 0.5rem;
   }
 
   .LoadingIndicator {
@@ -94,12 +100,17 @@ input[type="range"].zoom-slider {
       align-items: center;
       display: inline;
       overflow-x: hidden;
+      padding-left: 1.25rem;
       padding-right: 0.25rem;
       text-overflow: ellipsis;
     }
 
     .btn-group {
       margin-left: auto;
+
+      .btn {
+        border-radius: 0;
+      }
     }
 
     .delete-button {