fix(ui): restore flux dev & disabled model warnings

Author: psychedelicious

invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx

@@ -17,6 +17,7 @@ import ParamCFGScale from 'features/parameters/components/Core/ParamCFGScale';
 import ParamGuidance from 'features/parameters/components/Core/ParamGuidance';
 import ParamScheduler from 'features/parameters/components/Core/ParamScheduler';
 import ParamSteps from 'features/parameters/components/Core/ParamSteps';
+import { DisabledModelWarning } from 'features/parameters/components/MainModel/DisabledModelWarning';
 import ParamUpscaleCFGScale from 'features/parameters/components/Upscale/ParamUpscaleCFGScale';
 import ParamUpscaleScheduler from 'features/parameters/components/Upscale/ParamUpscaleScheduler';
 import { MainModelPicker } from 'features/settingsAccordions/components/GenerationSettingsAccordion/MainModelPicker';
@@ -83,6 +84,7 @@ export const GenerationSettingsAccordion = memo(() => {
     >
       <Box px={4} pt={4} data-testid="generation-accordion">
         <Flex gap={4} flexDir="column" pb={isApiModel ? 4 : 0}>
+          <DisabledModelWarning />
           <MainModelPicker />
           {!isApiModel && <LoRASelect />}
           {!isApiModel && <LoRAList />}

invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/MainModelPicker.tsx

@@ -1,14 +1,15 @@
-import { Flex, FormLabel } from '@invoke-ai/ui-library';
+import { Flex, FormLabel, Icon } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { UseDefaultSettingsButton } from 'features/parameters/components/MainModel/UseDefaultSettingsButton';
 import { ModelPicker } from 'features/parameters/components/ModelPicker';
 import { modelSelected } from 'features/parameters/store/actions';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { MdMoneyOff } from 'react-icons/md';
 import { useMainModels } from 'services/api/hooks/modelsByType';
 import { useSelectedModelConfig } from 'services/api/hooks/useSelectedModelConfig';
-import type { AnyModelConfig } from 'services/api/types';
+import { type AnyModelConfig, isCheckpointMainModelConfig } from 'services/api/types';
 
 export const MainModelPicker = memo(() => {
   const { t } = useTranslation();
@@ -22,11 +23,26 @@ export const MainModelPicker = memo(() => {
     [dispatch]
   );
 
+  const isFluxDevSelected = useMemo(
+    () =>
+      selectedModelConfig &&
+      isCheckpointMainModelConfig(selectedModelConfig) &&
+      selectedModelConfig.config_path === 'flux-dev',
+    [selectedModelConfig]
+  );
+
   return (
     <Flex alignItems="center" gap={2}>
       <InformationalPopover feature="paramModel">
         <FormLabel>{t('modelManager.model')}</FormLabel>
       </InformationalPopover>
+      {isFluxDevSelected && (
+        <InformationalPopover feature="fluxDevLicense" hideDisable={true}>
+          <Flex justifyContent="flex-start">
+            <Icon as={MdMoneyOff} />
+          </Flex>
+        </InformationalPopover>
+      )}
       <ModelPicker
         modelConfigs={modelConfigs}
         selectedModelConfig={selectedModelConfig}