feat: Extract BaseModel and ModelVariant Select's

For reusability

invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx

@@ -9,7 +9,7 @@ export type IAISelectDataType = {
   tooltip?: string;
 };
 
-type IAISelectProps = Omit<SelectProps, 'label'> & {
+export type IAISelectProps = Omit<SelectProps, 'label'> & {
   tooltip?: string;
   inputRef?: RefObject<HTMLInputElement>;
   label?: string;

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx

@@ -4,7 +4,6 @@ import { makeToast } from 'app/components/Toaster';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineTextInput from 'common/components/IAIMantineInput';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { addToast } from 'features/system/store/systemSlice';
@@ -15,19 +14,10 @@ import {
   useUpdateMainModelsMutation,
 } from 'services/api/endpoints/models';
 import { CheckpointModelConfig } from 'services/api/types';
+import BaseModelSelect from '../shared/BaseModelSelect';
+import ModelVariantSelect from '../shared/ModelVariantSelect';
 import ModelConvert from './ModelConvert';
 
-const baseModelSelectData = [
-  { value: 'sd-1', label: MODEL_TYPE_MAP['sd-1'] },
-  { value: 'sd-2', label: MODEL_TYPE_MAP['sd-2'] },
-];
-
-const variantSelectData = [
-  { value: 'normal', label: 'Normal' },
-  { value: 'inpaint', label: 'Inpaint' },
-  { value: 'depth', label: 'Depth' },
-];
-
 type CheckpointModelEditProps = {
   model: CheckpointModelConfigEntity;
 };
@@ -80,7 +70,7 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
             )
           );
         })
-        .catch((error) => {
+        .catch((_) => {
           checkpointEditForm.reset();
           dispatch(
             addToast(
@@ -132,14 +122,10 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
               label={t('modelManager.description')}
               {...checkpointEditForm.getInputProps('description')}
             />
-            <IAIMantineSelect
+            <BaseModelSelect
-              label={t('modelManager.baseModel')}
-              data={baseModelSelectData}
               {...checkpointEditForm.getInputProps('base_model')}
             />
-            <IAIMantineSelect
+            <ModelVariantSelect
-              label={t('modelManager.variant')}
-              data={variantSelectData}
               {...checkpointEditForm.getInputProps('variant')}
             />
             <IAIMantineTextInput

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx

@@ -4,7 +4,6 @@ import { makeToast } from 'app/components/Toaster';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIMantineTextInput from 'common/components/IAIMantineInput';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { addToast } from 'features/system/store/systemSlice';
@@ -15,22 +14,13 @@ import {
   useUpdateMainModelsMutation,
 } from 'services/api/endpoints/models';
 import { DiffusersModelConfig } from 'services/api/types';
+import BaseModelSelect from '../shared/BaseModelSelect';
+import ModelVariantSelect from '../shared/ModelVariantSelect';
 
 type DiffusersModelEditProps = {
   model: DiffusersModelConfigEntity;
 };
 
-const baseModelSelectData = [
-  { value: 'sd-1', label: MODEL_TYPE_MAP['sd-1'] },
-  { value: 'sd-2', label: MODEL_TYPE_MAP['sd-2'] },
-];
-
-const variantSelectData = [
-  { value: 'normal', label: 'Normal' },
-  { value: 'inpaint', label: 'Inpaint' },
-  { value: 'depth', label: 'Depth' },
-];
-
 export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
   const isBusy = useAppSelector(selectIsBusy);
 
@@ -78,7 +68,7 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
             )
           );
         })
-        .catch((error) => {
+        .catch((_) => {
           diffusersEditForm.reset();
           dispatch(
             addToast(
@@ -122,16 +112,8 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
             label={t('modelManager.description')}
             {...diffusersEditForm.getInputProps('description')}
           />
-          <IAIMantineSelect
+          <BaseModelSelect {...diffusersEditForm.getInputProps('base_model')} />
-            label={t('modelManager.baseModel')}
+          <ModelVariantSelect {...diffusersEditForm.getInputProps('variant')} />
-            data={baseModelSelectData}
-            {...diffusersEditForm.getInputProps('base_model')}
-          />
-          <IAIMantineSelect
-            label={t('modelManager.variant')}
-            data={variantSelectData}
-            {...diffusersEditForm.getInputProps('variant')}
-          />
           <IAIMantineTextInput
             label={t('modelManager.modelLocation')}
             {...diffusersEditForm.getInputProps('path')}

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/shared/BaseModelSelect.tsx

@@ -0,0 +1,26 @@
+import IAIMantineSelect, {
+  IAISelectDataType,
+  IAISelectProps,
+} from 'common/components/IAIMantineSelect';
+import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
+import { useTranslation } from 'react-i18next';
+
+const baseModelSelectData: IAISelectDataType[] = [
+  { value: 'sd-1', label: MODEL_TYPE_MAP['sd-1'] },
+  { value: 'sd-2', label: MODEL_TYPE_MAP['sd-2'] },
+];
+
+type BaseModelSelectProps = Omit<IAISelectProps, 'data'>;
+
+export default function BaseModelSelect(props: BaseModelSelectProps) {
+  const { ...rest } = props;
+  const { t } = useTranslation();
+
+  return (
+    <IAIMantineSelect
+      label={t('modelManager.baseModel')}
+      data={baseModelSelectData}
+      {...rest}
+    />
+  );
+}

invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/shared/ModelVariantSelect.tsx

@@ -0,0 +1,26 @@
+import IAIMantineSelect, {
+  IAISelectDataType,
+  IAISelectProps,
+} from 'common/components/IAIMantineSelect';
+import { useTranslation } from 'react-i18next';
+
+const variantSelectData: IAISelectDataType[] = [
+  { value: 'normal', label: 'Normal' },
+  { value: 'inpaint', label: 'Inpaint' },
+  { value: 'depth', label: 'Depth' },
+];
+
+type VariantSelectProps = Omit<IAISelectProps, 'data'>;
+
+export default function ModelVariantSelect(props: VariantSelectProps) {
+  const { ...rest } = props;
+  const { t } = useTranslation();
+
+  return (
+    <IAIMantineSelect
+      label={t('modelManager.variant')}
+      data={variantSelectData}
+      {...rest}
+    />
+  );
+}