feat(ui): use query to populate infill methods dropdown

- available infill methods is server state - remove it from client state, use the query to populate the dropdown
- add listener to ensure the selected infill method is an available one

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx

@@ -1,25 +1,21 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIMantineSelect from 'common/components/IAIMantineSelect';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setInfillMethod } from 'features/parameters/store/generationSlice';
-import { systemSelector } from 'features/system/store/systemSelectors';
 
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useGetAppConfigQuery } from '../../../../../../services/api/endpoints/appInfo';
-import { setAvailableInfillMethods } from '../../../../../system/store/systemSlice';
+import { useGetAppConfigQuery } from 'services/api/endpoints/appInfo';
 
 const selector = createSelector(
-  [generationSelector, systemSelector],
-  (parameters, system) => {
-    const { infillMethod } = parameters;
-    const { infillMethods } = system;
+  [stateSelector],
+  ({ generation }) => {
+    const { infillMethod } = generation;
 
     return {
       infillMethod,
-      infillMethods,
     };
   },
   defaultSelectorOptions
@@ -27,9 +23,11 @@ const selector = createSelector(
 
 const ParamInfillMethod = () => {
   const dispatch = useAppDispatch();
-  const { infillMethod, infillMethods } = useAppSelector(selector);
+  const { infillMethod } = useAppSelector(selector);
 
-  const { data: appConfigData } = useGetAppConfigQuery();
+  const { data: appConfigData, isLoading } = useGetAppConfigQuery();
+
+  const infill_methods = appConfigData?.infill_methods;
 
   const { t } = useTranslation();
 
@@ -40,24 +38,13 @@ const ParamInfillMethod = () => {
     [dispatch]
   );
 
-  useEffect(() => {
-    if (!appConfigData) return;
-    if (!appConfigData.patchmatch_enabled) {
-      const filteredMethods = infillMethods.filter(
-        (method) => method !== 'patchmatch'
-      );
-      dispatch(setAvailableInfillMethods(filteredMethods));
-      dispatch(setInfillMethod(filteredMethods[0]));
-    } else {
-      dispatch(setInfillMethod('patchmatch'));
-    }
-  }, [appConfigData, infillMethods, dispatch]);
-
   return (
     <IAIMantineSelect
+      disabled={infill_methods?.length === 0}
+      placeholder={isLoading ? 'Loading...' : undefined}
       label={t('parameters.infillMethod')}
       value={infillMethod}
-      data={infillMethods}
+      data={infill_methods ?? []}
       onChange={handleChange}
     />
   );