feat(ui): add <NavigateToModelManagerButton /> to model comboboxes everywhere

psychedelicious · psychedelicious · commit 1591ecb5e8b7 · 2025-04-09T15:47:00.000+10:00
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapterModel.tsx
@@ -2,6 +2,7 @@ import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { selectBase } from 'features/controlLayers/store/paramsSlice';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useControlLayerModels } from 'services/api/hooks/modelsByType';
@@ -61,6 +62,7 @@ export const ControlLayerControlAdapterModel = memo(({ modelKey, onChange: onCha
           onChange={onChange}
           noOptionsMessage={noOptionsMessage}
         />
+        <NavigateToModelManagerButton />
       </FormControl>
     </Tooltip>
   );
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterSpandrel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/FilterSpandrel.tsx
@@ -13,6 +13,7 @@ import {
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
 import type { SpandrelFilterConfig } from 'features/controlLayers/store/filters';
 import { IMAGE_FILTERS } from 'features/controlLayers/store/filters';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import type { ChangeEvent } from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -118,6 +119,7 @@ export const FilterSpandrel = ({ onChange, config }: Props) => {
             />
           </Box>
         </Tooltip>
+        <NavigateToModelManagerButton />
       </FormControl>
     </>
   );
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/CLIPVisionModel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/CLIPVisionModel.tsx
@@ -4,6 +4,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { selectIsFLUX } from 'features/controlLayers/store/paramsSlice';
 import type { CLIPVisionModelV2 } from 'features/controlLayers/store/types';
 import { isCLIPVisionModelV2 } from 'features/controlLayers/store/types';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { assert } from 'tsafe';
@@ -54,6 +55,7 @@ export const CLIPVisionModel = memo(({ model, onChange }: Props) => {
         value={clipVisionModelValue}
         onChange={_onChangeCLIPVisionModel}
       />
+      <NavigateToModelManagerButton />
     </FormControl>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterModel.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterModel.tsx
@@ -2,6 +2,7 @@ import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { selectBase } from 'features/controlLayers/store/paramsSlice';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useIPAdapterOrFLUXReduxModels } from 'services/api/hooks/modelsByType';
@@ -66,6 +67,7 @@ export const IPAdapterModel = memo(({ isRegionalGuidance, modelKey, onChangeMode
           onChange={onChange}
           noOptionsMessage={noOptionsMessage}
         />
+        <NavigateToModelManagerButton />
       </FormControl>
     </Tooltip>
   );
diff --git a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
@@ -6,6 +6,7 @@ import { InformationalPopover } from 'common/components/InformationalPopover/Inf
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { loraAdded, selectLoRAsSlice } from 'features/controlLayers/store/lorasSlice';
 import { selectBase } from 'features/controlLayers/store/paramsSlice';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLoRAModels } from 'services/api/hooks/modelsByType';
@@ -58,7 +59,7 @@ const LoRASelect = () => {
   const noOptionsMessage = useCallback(() => t('models.noMatchingLoRAs'), [t]);
 
   return (
-    <FormControl isDisabled={!options.length}>
+    <FormControl isDisabled={!options.length} gap={2}>
       <InformationalPopover feature="lora">
         <FormLabel>{t('models.concepts')} </FormLabel>
       </InformationalPopover>
@@ -71,6 +72,7 @@ const LoRASelect = () => {
         data-testid="add-lora"
         sx={selectStyles}
       />
+      <NavigateToModelManagerButton />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ModelFieldCombobox.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ModelFieldCombobox.tsx
@@ -3,6 +3,7 @@ import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { typedMemo } from 'common/util/typedMemo';
 import type { ModelIdentifierField } from 'features/nodes/types/common';
 import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import type { AnyModelConfig } from 'services/api/types';
 
 type Props<T extends AnyModelConfig> = {
@@ -44,6 +45,7 @@ const _ModelFieldCombobox = <T extends AnyModelConfig>({
         onChange={onChange}
         noOptionsMessage={noOptionsMessage}
       />
+      <NavigateToModelManagerButton />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCLIPEmbedModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCLIPEmbedModelSelect.tsx
@@ -3,6 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
 import { clipEmbedModelSelected, selectCLIPEmbedModel } from 'features/controlLayers/store/paramsSlice';
 import { zModelIdentifierField } from 'features/nodes/types/common';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCLIPEmbedModels } from 'services/api/hooks/modelsByType';
@@ -31,9 +32,10 @@ const ParamCLIPEmbedModelSelect = () => {
   });
 
   return (
-    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1}>
+    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1} gap={2}>
       <FormLabel m={0}>{t('modelManager.clipEmbed')}</FormLabel>
       <Combobox value={value} options={options} onChange={onChange} noOptionsMessage={noOptionsMessage} />
+      <NavigateToModelManagerButton />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCLIPGEmbedModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCLIPGEmbedModelSelect.tsx
@@ -3,6 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
 import { clipGEmbedModelSelected, selectCLIPGEmbedModel } from 'features/controlLayers/store/paramsSlice';
 import { zModelIdentifierField } from 'features/nodes/types/common';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCLIPEmbedModels } from 'services/api/hooks/modelsByType';
@@ -32,9 +33,10 @@ const ParamCLIPEmbedModelSelect = () => {
   });
 
   return (
-    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1}>
+    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1} gap={2}>
       <FormLabel m={0}>{t('modelManager.clipGEmbed')}</FormLabel>
       <Combobox value={value} options={options} onChange={onChange} noOptionsMessage={noOptionsMessage} />
+      <NavigateToModelManagerButton />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCLIPLEmbedModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCLIPLEmbedModelSelect.tsx
@@ -3,6 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
 import { clipLEmbedModelSelected, selectCLIPLEmbedModel } from 'features/controlLayers/store/paramsSlice';
 import { zModelIdentifierField } from 'features/nodes/types/common';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCLIPEmbedModels } from 'services/api/hooks/modelsByType';
@@ -32,9 +33,10 @@ const ParamCLIPEmbedModelSelect = () => {
   });
 
   return (
-    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1}>
+    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1} gap={2}>
       <FormLabel m={0}>{t('modelManager.clipLEmbed')}</FormLabel>
       <Combobox value={value} options={options} onChange={onChange} noOptionsMessage={noOptionsMessage} />
+      <NavigateToModelManagerButton />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamT5EncoderModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamT5EncoderModelSelect.tsx
@@ -3,6 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
 import { selectT5EncoderModel, t5EncoderModelSelected } from 'features/controlLayers/store/paramsSlice';
 import { zModelIdentifierField } from 'features/nodes/types/common';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useT5EncoderModels } from 'services/api/hooks/modelsByType';
@@ -31,9 +32,10 @@ const ParamT5EncoderModelSelect = () => {
   });
 
   return (
-    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1}>
+    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1} gap={2}>
       <FormLabel m={0}>{t('modelManager.t5Encoder')}</FormLabel>
       <Combobox value={value} options={options} onChange={onChange} noOptionsMessage={noOptionsMessage} />
+      <NavigateToModelManagerButton />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx
@@ -1,9 +1,11 @@
-import { Box, Combobox, Flex, FormControl, FormLabel, Icon, Spacer, Tooltip } from '@invoke-ai/ui-library';
+import { Box, Combobox, Flex, FormControl, FormLabel, Icon, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { selectModelKey } from 'features/controlLayers/store/paramsSlice';
 import { zModelIdentifierField } from 'features/nodes/types/common';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
+import { UseDefaultSettingsButton } from 'features/parameters/components/MainModel/UseDefaultSettingsButton';
 import { modelSelected } from 'features/parameters/store/actions';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useCallback, useMemo } from 'react';
@@ -77,21 +79,17 @@ const ParamMainModelSelect = () => {
   }, [selectedModel]);
 
   return (
-    <FormControl isDisabled={!modelConfigs.length} isInvalid={!value || !modelConfigs.length}>
-      <Flex alignItems="center">
-        <InformationalPopover feature="paramModel">
-          <FormLabel>{t('modelManager.model')}</FormLabel>
+    <FormControl isDisabled={!modelConfigs.length} isInvalid={!value || !modelConfigs.length} 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>
-        {isFluxDevSelected ? (
-          <InformationalPopover feature="fluxDevLicense" hideDisable={true}>
-            <Flex justifyContent="flex-start">
-              <Icon as={MdMoneyOff} />
-            </Flex>
-          </InformationalPopover>
-        ) : (
-          <Spacer />
-        )}
-      </Flex>
+      )}
       <Tooltip label={tooltipLabel}>
         <Box w="full" minW={0}>
           <Combobox
@@ -104,6 +102,8 @@ const ParamMainModelSelect = () => {
           />
         </Box>
       </Tooltip>
+      <NavigateToModelManagerButton />
+      <UseDefaultSettingsButton />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/PostProcessing/ParamPostProcessingModel.tsx b/invokeai/frontend/web/src/features/parameters/components/PostProcessing/ParamPostProcessingModel.tsx
@@ -1,6 +1,7 @@
-import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
+import { Box, Combobox, Flex, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { postProcessingModelChanged, selectPostProcessingModel } from 'features/parameters/store/upscaleSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -38,18 +39,21 @@ const ParamPostProcessingModel = () => {
   return (
     <FormControl orientation="vertical">
       <FormLabel>{t('upscaling.postProcessingModel')}</FormLabel>
-      <Tooltip label={tooltipLabel}>
-        <Box w="full">
-          <Combobox
-            value={value}
-            placeholder={placeholder}
-            options={options}
-            onChange={onChange}
-            noOptionsMessage={noOptionsMessage}
-            isDisabled={options.length === 0}
-          />
-        </Box>
-      </Tooltip>
+      <Flex w="full" alignItems="center" gap={2}>
+        <Tooltip label={tooltipLabel}>
+          <Box w="full">
+            <Combobox
+              value={value}
+              placeholder={placeholder}
+              options={options}
+              onChange={onChange}
+              noOptionsMessage={noOptionsMessage}
+              isDisabled={options.length === 0}
+            />
+          </Box>
+        </Tooltip>
+        <NavigateToModelManagerButton />
+      </Flex>
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamSpandrelModel.tsx
@@ -1,7 +1,8 @@
-import { Box, Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
+import { Box, Combobox, Flex, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useModelCombobox } from 'common/hooks/useModelCombobox';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { selectUpscaleModel, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -41,18 +42,21 @@ const ParamSpandrelModel = () => {
       <InformationalPopover feature="upscaleModel">
         <FormLabel>{t('upscaling.upscaleModel')}</FormLabel>
       </InformationalPopover>
-      <Tooltip label={tooltipLabel}>
-        <Box w="full">
-          <Combobox
-            value={value}
-            placeholder={placeholder}
-            options={options}
-            onChange={onChange}
-            noOptionsMessage={noOptionsMessage}
-            isDisabled={options.length === 0}
-          />
-        </Box>
-      </Tooltip>
+      <Flex w="full" alignItems="center" gap={2}>
+        <Tooltip label={tooltipLabel}>
+          <Box w="full">
+            <Combobox
+              value={value}
+              placeholder={placeholder}
+              options={options}
+              onChange={onChange}
+              noOptionsMessage={noOptionsMessage}
+              isDisabled={options.length === 0}
+            />
+          </Box>
+        </Tooltip>
+        <NavigateToModelManagerButton />
+      </Flex>
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamFLUXVAEModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamFLUXVAEModelSelect.tsx
@@ -4,6 +4,7 @@ import { InformationalPopover } from 'common/components/InformationalPopover/Inf
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { fluxVAESelected, selectFLUXVAE } from 'features/controlLayers/store/paramsSlice';
 import { zModelIdentifierField } from 'features/nodes/types/common';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFluxVAEModels } from 'services/api/hooks/modelsByType';
@@ -32,11 +33,12 @@ const ParamFLUXVAEModelSelect = () => {
   });
 
   return (
-    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1}>
+    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1} gap={2}>
       <InformationalPopover feature="paramVAE">
         <FormLabel m={0}>{t('modelManager.vae')}</FormLabel>
       </InformationalPopover>
       <Combobox value={value} options={options} onChange={onChange} noOptionsMessage={noOptionsMessage} />
+      <NavigateToModelManagerButton />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/VAEModel/ParamVAEModelSelect.tsx
@@ -4,6 +4,7 @@ import { InformationalPopover } from 'common/components/InformationalPopover/Inf
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { selectBase, selectVAE, vaeSelected } from 'features/controlLayers/store/paramsSlice';
 import { zModelIdentifierField } from 'features/nodes/types/common';
+import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useVAEModels } from 'services/api/hooks/modelsByType';
@@ -38,7 +39,7 @@ const ParamVAEModelSelect = () => {
   });
 
   return (
-    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1}>
+    <FormControl isDisabled={!options.length} isInvalid={!options.length} minW={0} flexGrow={1} gap={2}>
       <InformationalPopover feature="paramVAE">
         <FormLabel m={0}>{t('modelManager.vae')}</FormLabel>
       </InformationalPopover>
@@ -50,6 +51,7 @@ const ParamVAEModelSelect = () => {
         onChange={onChange}
         noOptionsMessage={noOptionsMessage}
       />
+      <NavigateToModelManagerButton />
     </FormControl>
   );
 };
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
