Accept incorrectly insensitivised frontpage config keys (#4237)

ui/v2.5/src/components/FrontPage/Control.tsx

@@ -1,10 +1,6 @@
 import React, { useContext, useMemo } from "react";
 import { useIntl } from "react-intl";
-import {
+import { FrontPageContent, ICustomFilter } from "src/core/config";
-  FrontPageContent,
-  ICustomFilter,
-  ISavedFilterRow,
-} from "src/core/config";
 import * as GQL from "src/core/generated-graphql";
 import { useFindSavedFilter } from "src/core/StashService";
 import { ConfigurationContext } from "src/hooks/Config";
@@ -167,17 +163,15 @@ interface IProps {
 export const Control: React.FC<IProps> = ({ content }) => {
   switch (content.__typename) {
     case "SavedFilter":
-      if (!(content as ISavedFilterRow).savedFilterId) {
+      if (!content.savedFilterId) {
         return <div>Error: missing savedFilterId</div>;
       }
 
       return (
-        <SavedFilterResults
+        <SavedFilterResults savedFilterID={content.savedFilterId.toString()} />
-          savedFilterID={(content as ISavedFilterRow).savedFilterId.toString()}
-        />
       );
     case "CustomFilter":
-      return <CustomFilterResults customFilter={content as ICustomFilter} />;
+      return <CustomFilterResults customFilter={content} />;
     default:
       return <></>;
   }

ui/v2.5/src/components/FrontPage/FrontPage.tsx

@@ -10,6 +10,7 @@ import { ConfigurationContext } from "src/hooks/Config";
 import {
   FrontPageContent,
   generateDefaultFrontPageContent,
+  getFrontPageContent,
   IUIConfig,
 } from "src/core/config";
 import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
@@ -65,12 +66,12 @@ const FrontPage: React.FC = () => {
     onUpdateConfig(defaultContent);
   }
 
-  const { frontPageContent } = ui;
+  const frontPageContent = getFrontPageContent(ui);
 
   return (
     <div className="recommendations-container">
       <div>
-        {frontPageContent?.map((content: FrontPageContent, i) => (
+        {frontPageContent?.map((content, i) => (
           <Control key={i} content={content} />
         ))}
       </div>

ui/v2.5/src/components/FrontPage/FrontPageConfig.tsx

@@ -15,6 +15,7 @@ import {
   ICustomFilter,
   FrontPageContent,
   generatePremadeFrontPageContent,
+  getFrontPageContent,
 } from "src/core/config";
 
 interface IAddSavedFilterModalProps {
@@ -299,8 +300,9 @@ export const FrontPageConfig: React.FC<IFrontPageConfigProps> = ({
       return;
     }
 
-    if (ui?.frontPageContent) {
+    const frontPageContent = getFrontPageContent(ui);
-      setCurrentContent(ui.frontPageContent);
+    if (frontPageContent) {
+      setCurrentContent(frontPageContent);
     }
   }, [allFilters, ui]);
 

ui/v2.5/src/core/config.ts

@@ -33,7 +33,8 @@ export type FrontPageContent = ISavedFilterRow | ICustomFilter;
 export const defaultMaxOptionsShown = 200;
 
 export interface IUIConfig {
-  frontPageContent?: FrontPageContent[];
+  // unknown to prevent direct access - use getFrontPageContent
+  frontPageContent?: unknown;
 
   showChildTagContent?: boolean;
   showChildStudioContent?: boolean;
@@ -81,6 +82,48 @@ export interface IUIConfig {
   pinnedFilters?: PinnedFilters;
 }
 
+interface ISavedFilterRowBroken extends ISavedFilterRow {
+  savedfilterid?: number;
+}
+
+interface ICustomFilterBroken extends ICustomFilter {
+  sortby?: string;
+}
+
+type FrontPageContentBroken = ISavedFilterRowBroken | ICustomFilterBroken;
+
+// #4128: deal with incorrectly insensitivised keys (sortBy and savedFilterId)
+export function getFrontPageContent(
+  ui: IUIConfig
+): FrontPageContent[] | undefined {
+  return (ui.frontPageContent as FrontPageContentBroken[] | undefined)?.map(
+    (content) => {
+      switch (content.__typename) {
+        case "SavedFilter":
+          if (content.savedfilterid) {
+            return {
+              ...content,
+              savedFilterId: content.savedFilterId ?? content.savedfilterid,
+              savedfilterid: undefined,
+            };
+          }
+          return content;
+        case "CustomFilter":
+          if (content.sortby) {
+            return {
+              ...content,
+              sortBy: content.sortBy ?? content.sortby,
+              sortby: undefined,
+            };
+          }
+          return content;
+        default:
+          return content;
+      }
+    }
+  );
+}
+
 function recentlyReleased(
   intl: IntlShape,
   mode: FilterMode,