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/FrontPage/FrontPageConfig.tsx

@@ -3,11 +3,7 @@ import { FormattedMessage, IntlShape, useIntl } from "react-intl";
 import { useFindSavedFilters } from "src/core/StashService";
 import { LoadingIndicator } from "../Shared/LoadingIndicator";
 import { Button, Form, Modal } from "react-bootstrap";
-import {
+import * as GQL from "src/core/generated-graphql";
-  FilterMode,
-  FindSavedFiltersQuery,
-  SavedFilter,
-} from "src/core/generated-graphql";
 import { ConfigurationContext } from "src/hooks/Config";
 import {
   IUIConfig,
@@ -21,24 +17,25 @@ import {
 interface IAddSavedFilterModalProps {
   onClose: (content?: FrontPageContent) => void;
   existingSavedFilterIDs: string[];
-  candidates: FindSavedFiltersQuery;
+  candidates: GQL.FindSavedFiltersQuery;
 }
 
 const FilterModeToMessageID = {
-  [FilterMode.Galleries]: "galleries",
+  [GQL.FilterMode.Galleries]: "galleries",
-  [FilterMode.Images]: "images",
+  [GQL.FilterMode.Images]: "images",
-  [FilterMode.Movies]: "movies",
+  [GQL.FilterMode.Movies]: "movies",
-  [FilterMode.Performers]: "performers",
+  [GQL.FilterMode.Performers]: "performers",
-  [FilterMode.SceneMarkers]: "markers",
+  [GQL.FilterMode.SceneMarkers]: "markers",
-  [FilterMode.Scenes]: "scenes",
+  [GQL.FilterMode.Scenes]: "scenes",
-  [FilterMode.Studios]: "studios",
+  [GQL.FilterMode.Studios]: "studios",
-  [FilterMode.Tags]: "tags",
+  [GQL.FilterMode.Tags]: "tags",
 };
 
-function filterTitle(intl: IntlShape, f: Pick<SavedFilter, "mode" | "name">) {
+type SavedFilter = Pick<GQL.SavedFilter, "id" | "mode" | "name">;
-  return `${intl.formatMessage({ id: FilterModeToMessageID[f.mode] })}: ${
+
-    f.name
+function filterTitle(intl: IntlShape, f: SavedFilter) {
-  }`;
+  const typeMessage = intl.formatMessage({ id: FilterModeToMessageID[f.mode] });
+  return `${typeMessage}: ${f.name}`;
 }
 
 const AddContentModal: React.FC<IAddSavedFilterModalProps> = ({
@@ -98,7 +95,7 @@ const AddContentModal: React.FC<IAddSavedFilterModalProps> = ({
         .filter((f) => {
           // markers not currently supported
           return (
-            f.mode !== FilterMode.SceneMarkers &&
+            f.mode !== GQL.FilterMode.SceneMarkers &&
             !existingSavedFilterIDs.includes(f.id)
           );
         })
@@ -232,7 +229,7 @@ const AddContentModal: React.FC<IAddSavedFilterModalProps> = ({
 
 interface IFilterRowProps {
   content: FrontPageContent;
-  allSavedFilters: Pick<SavedFilter, "id" | "mode" | "name">[];
+  allSavedFilters: SavedFilter[];
   onDelete: () => void;
 }
 
@@ -242,10 +239,9 @@ const ContentRow: React.FC<IFilterRowProps> = (props: IFilterRowProps) => {
   function title() {
     switch (props.content.__typename) {
       case "SavedFilter":
+        const savedFilterId = String(props.content.savedFilterId);
         const savedFilter = props.allSavedFilters.find(
-          (f) =>
+          (f) => f.id === savedFilterId
-            f.id ===
-            (props.content as ISavedFilterRow).savedFilterId?.toString()
         );
         if (!savedFilter) return "";
         return filterTitle(intl, savedFilter);
@@ -302,7 +298,18 @@ export const FrontPageConfig: React.FC<IFrontPageConfigProps> = ({
 
     const frontPageContent = getFrontPageContent(ui);
     if (frontPageContent) {
-      setCurrentContent(frontPageContent);
+      setCurrentContent(
+        // filter out rows where the saved filter no longer exists
+        frontPageContent.filter((r) => {
+          if (r.__typename === "SavedFilter") {
+            const savedFilterId = String(r.savedFilterId);
+            return allFilters.findSavedFilters.some(
+              (f) => f.id === savedFilterId
+            );
+          }
+          return true;
+        })
+      );
     }
   }, [allFilters, ui]);
 

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
+        <div className="mt-1">
-          className="set-as-default-button"
+          <Button
-          variant="secondary"
+            className="set-as-default-button"
-          size="sm"
+            variant="secondary"
-          onClick={() => onSetDefaultFilter()}
+            size="sm"
-        >
+            onClick={() => onSetDefaultFilter()}
-          {intl.formatMessage({ id: "actions.set_as_default" })}
+          >
-        </Button>
+            {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 {

ui/v2.5/src/index.scss

@@ -660,7 +660,6 @@ div.react-select__menu,
 div.dropdown-menu {
   background-color: $secondary;
   color: $text-color;
-  z-index: 1600;
 
   .react-select__option,
   .dropdown-item {

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

@@ -921,6 +921,7 @@
     "unknown": "Unknown",
     "wall": "Wall"
   },
+  "distance": "Distance",
   "donate": "Donate",
   "dupe_check": {
     "description": "Levels below 'Exact' can take longer to calculate. False positives might also be returned on lower accuracy levels.",