From 9a77bd9140e9f4d3d8f032f59c39599020434dd9 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 13 Jun 2023 00:11:30 +1200
Subject: [PATCH] feat: Port IAISelect's to IAIMantineSelect's

Ported everything except Model Manager selects and the Canvas Layer Select (this needs tooltip support)
---
 invokeai/frontend/web/src/app/constants.ts    |  6 +--
 .../common/components/IAIMantineSelect.tsx    |  1 -
 .../src/features/canvas/store/canvasTypes.ts  |  6 +--
 .../parameters/ParamControlNetModel.tsx       | 34 +++++---------
 .../ParamControlNetProcessorSelect.tsx        | 46 +++++++++----------
 .../InfillAndScaling/ParamInfillMethod.tsx    | 12 ++---
 .../ParamScaleBeforeProcessing.tsx            | 16 +++----
 .../FaceRestore/FaceRestoreType.tsx           | 11 ++---
 .../Parameters/Upscale/UpscaleScale.tsx       | 17 ++++---
 .../SettingsModal/SettingsModal.tsx           | 22 ++++-----
 10 files changed, 75 insertions(+), 96 deletions(-)

diff --git a/invokeai/frontend/web/src/app/constants.ts b/invokeai/frontend/web/src/app/constants.ts
index 6700a732b3..c2e525ad7d 100644
--- a/invokeai/frontend/web/src/app/constants.ts
+++ b/invokeai/frontend/web/src/app/constants.ts
@@ -22,9 +22,9 @@ export const SCHEDULERS = [
 export type Scheduler = (typeof SCHEDULERS)[number];
 
 // Valid upscaling levels
-export const UPSCALING_LEVELS: Array<{ key: string; value: number }> = [
-  { key: '2x', value: 2 },
-  { key: '4x', value: 4 },
+export const UPSCALING_LEVELS: Array<{ label: string; value: string }> = [
+  { label: '2x', value: '2' },
+  { label: '4x', value: '4' },
 ];
 export const NUMPY_RAND_MIN = 0;
 
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
index 82b1042029..5b5659080e 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -9,7 +9,6 @@ const IAIMantineSelect = (props: IAISelectProps) => {
     <Select
       searchable={searchable}
       styles={() => ({
-        root: {},
         label: {
           color: 'var(--invokeai-colors-base-300)',
           fontWeight: 'normal',
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
index 804e06f88f..9143b69d55 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
@@ -13,9 +13,9 @@ export const LAYER_NAMES = ['base', 'mask'] as const;
 export type CanvasLayer = (typeof LAYER_NAMES)[number];
 
 export const BOUNDING_BOX_SCALES_DICT = [
-  { key: 'Auto', value: 'auto' },
-  { key: 'Manual', value: 'manual' },
-  { key: 'None', value: 'none' },
+  { label: 'Auto', value: 'auto' },
+  { label: 'Manual', value: 'manual' },
+  { label: 'None', value: 'none' },
 ];
 
 export const BOUNDING_BOX_SCALES = ['none', 'auto', 'manual'] as const;
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
index cbdd727b42..e5543cc2eb 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
@@ -5,6 +5,7 @@ import IAICustomSelect, {
 } from 'common/components/IAICustomSelect';
 import IAISelect from 'common/components/IAISelect';
 import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import {
   CONTROLNET_MODELS,
   ControlNetModelName,
@@ -26,11 +27,11 @@ const selector = createSelector(configSelector, (config) => {
   })).filter((d) => !config.sd.disabledControlNetModels.includes(d.value));
 });
 
-// const DATA: IAICustomSelectOption[] = map(CONTROLNET_MODELS, (m) => ({
-//   value: m.type,
-//   label: m.label,
-//   tooltip: m.type,
-// }));
+const DATA = map(CONTROLNET_MODELS, (m) => ({
+  value: m.type,
+  label: m.label,
+  tooltip: m.type,
+}));
 
 const ParamControlNetModel = (props: ParamControlNetModelProps) => {
   const { controlNetId, model } = props;
@@ -39,33 +40,20 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
   const isReady = useIsReadyToInvoke();
 
   const handleModelChanged = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
+    (val: string | null) => {
       // TODO: do not cast
-      const model = e.target.value as ControlNetModelName;
+      const model = val as ControlNetModelName;
       dispatch(controlNetModelChanged({ controlNetId, model }));
     },
     [controlNetId, dispatch]
   );
 
-  // const handleModelChanged = useCallback(
-  //   (val: string | null | undefined) => {
-  //     // TODO: do not cast
-  //     const model = val as ControlNetModelName;
-  //     dispatch(controlNetModelChanged({ controlNetId, model }));
-  //   },
-  //   [controlNetId, dispatch]
-  // );
-
   return (
-    <IAISelect
-      tooltip={model}
-      tooltipProps={{ placement: 'top', hasArrow: true }}
-      validValues={controlNetModels}
+    <IAIMantineSelect
+      data={DATA}
       value={model}
       onChange={handleModelChanged}
-      isDisabled={!isReady}
-      // ellipsisPosition="start"
-      // withCheckIcon
+      disabled={!isReady}
     />
   );
   // return (
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
index b48fa50188..88e5adbf37 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
@@ -1,17 +1,15 @@
-import IAICustomSelect, {
-  IAICustomSelectOption,
-} from 'common/components/IAICustomSelect';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { IAICustomSelectOption } from 'common/components/IAICustomSelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import { map } from 'lodash-es';
 import { ChangeEvent, memo, useCallback } from 'react';
+import { CONTROLNET_PROCESSORS } from '../../store/constants';
+import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
 import {
   ControlNetProcessorNode,
   ControlNetProcessorType,
 } from '../../store/types';
-import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { CONTROLNET_PROCESSORS } from '../../store/constants';
-import { map } from 'lodash-es';
 import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
-import IAISelect from 'common/components/IAISelect';
 import { createSelector } from '@reduxjs/toolkit';
 import { configSelector } from 'features/system/store/configSelectors';
 
@@ -68,36 +66,36 @@ const ParamControlNetProcessorSelect = (
   const isReady = useIsReadyToInvoke();
   const controlNetProcessors = useAppSelector(selector);
 
-  const handleProcessorTypeChanged = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      dispatch(
-        controlNetProcessorTypeChanged({
-          controlNetId,
-          processorType: e.target.value as ControlNetProcessorType,
-        })
-      );
-    },
-    [controlNetId, dispatch]
-  );
   // const handleProcessorTypeChanged = useCallback(
-  //   (v: string | null | undefined) => {
+  //   (e: ChangeEvent<HTMLSelectElement>) => {
   //     dispatch(
   //       controlNetProcessorTypeChanged({
   //         controlNetId,
-  //         processorType: v as ControlNetProcessorType,
+  //         processorType: e.target.value as ControlNetProcessorType,
   //       })
   //     );
   //   },
   //   [controlNetId, dispatch]
   // );
+  const handleProcessorTypeChanged = useCallback(
+    (v: string | null) => {
+      dispatch(
+        controlNetProcessorTypeChanged({
+          controlNetId,
+          processorType: v as ControlNetProcessorType,
+        })
+      );
+    },
+    [controlNetId, dispatch]
+  );
 
   return (
-    <IAISelect
+    <IAIMantineSelect
       label="Processor"
       value={processorNode.type ?? 'canny_image_processor'}
-      validValues={controlNetProcessors}
+      data={controlNetProcessors}
       onChange={handleProcessorTypeChanged}
-      isDisabled={!isReady}
+      disabled={!isReady}
     />
   );
   // return (
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx
index 00812f458a..d0f8545e14 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx
@@ -1,12 +1,12 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAISelect from 'common/components/IAISelect';
+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 { ChangeEvent, memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
@@ -30,17 +30,17 @@ const ParamInfillMethod = () => {
   const { t } = useTranslation();
 
   const handleChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      dispatch(setInfillMethod(e.target.value));
+    (v: string) => {
+      dispatch(setInfillMethod(v));
     },
     [dispatch]
   );
 
   return (
-    <IAISelect
+    <IAIMantineSelect
       label={t('parameters.infillMethod')}
       value={infillMethod}
-      validValues={infillMethods}
+      data={infillMethods}
       onChange={handleChange}
     />
   );
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
index 8164371b56..827fe77e0d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
@@ -1,15 +1,15 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAISelect from 'common/components/IAISelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice';
 import {
-  BoundingBoxScale,
   BOUNDING_BOX_SCALES_DICT,
+  BoundingBoxScale,
 } from 'features/canvas/store/canvasTypes';
 
-import { ChangeEvent, memo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
@@ -30,16 +30,14 @@ const ParamScaleBeforeProcessing = () => {
 
   const { t } = useTranslation();
 
-  const handleChangeBoundingBoxScaleMethod = (
-    e: ChangeEvent<HTMLSelectElement>
-  ) => {
-    dispatch(setBoundingBoxScaleMethod(e.target.value as BoundingBoxScale));
+  const handleChangeBoundingBoxScaleMethod = (v: string) => {
+    dispatch(setBoundingBoxScaleMethod(v as BoundingBoxScale));
   };
 
   return (
-    <IAISelect
+    <IAIMantineSelect
       label={t('parameters.scaleBeforeProcessing')}
-      validValues={BOUNDING_BOX_SCALES_DICT}
+      data={BOUNDING_BOX_SCALES_DICT}
       value={boundingBoxScale}
       onChange={handleChangeBoundingBoxScaleMethod}
     />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx
index aa4231eb4b..9246b3bd5c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx
@@ -1,12 +1,11 @@
 import { FACETOOL_TYPES } from 'app/constants';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAISelect from 'common/components/IAISelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import {
   FacetoolType,
   setFacetoolType,
 } from 'features/parameters/store/postprocessingSlice';
-import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export default function FaceRestoreType() {
@@ -17,13 +16,13 @@ export default function FaceRestoreType() {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const handleChangeFacetoolType = (e: ChangeEvent<HTMLSelectElement>) =>
-    dispatch(setFacetoolType(e.target.value as FacetoolType));
+  const handleChangeFacetoolType = (v: string) =>
+    dispatch(setFacetoolType(v as FacetoolType));
 
   return (
-    <IAISelect
+    <IAIMantineSelect
       label={t('parameters.type')}
-      validValues={FACETOOL_TYPES.concat()}
+      data={FACETOOL_TYPES.concat()}
       value={facetoolType}
       onChange={handleChangeFacetoolType}
     />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx
index 180b90f021..fadc8a7419 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx
@@ -1,12 +1,11 @@
 import { UPSCALING_LEVELS } from 'app/constants';
 import type { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAISelect from 'common/components/IAISelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import {
-  setUpscalingLevel,
   UpscalingLevel,
+  setUpscalingLevel,
 } from 'features/parameters/store/postprocessingSlice';
-import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export default function UpscaleScale() {
@@ -21,16 +20,16 @@ export default function UpscaleScale() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
-  const handleChangeLevel = (e: ChangeEvent<HTMLSelectElement>) =>
-    dispatch(setUpscalingLevel(Number(e.target.value) as UpscalingLevel));
+  const handleChangeLevel = (v: string) =>
+    dispatch(setUpscalingLevel(Number(v) as UpscalingLevel));
 
   return (
-    <IAISelect
-      isDisabled={!isESRGANAvailable}
+    <IAIMantineSelect
+      disabled={!isESRGANAvailable}
       label={t('parameters.scale')}
-      value={upscalingLevel}
+      value={String(upscalingLevel)}
       onChange={handleChangeLevel}
-      validValues={UPSCALING_LEVELS}
+      data={UPSCALING_LEVELS}
     />
   );
 }
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
index 4cfe35081b..dfba1da4ef 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@@ -13,19 +13,21 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
+import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
+import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
-import IAISelect from 'common/components/IAISelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import IAISwitch from 'common/components/IAISwitch';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import {
+  SystemState,
   consoleLogLevelChanged,
   setEnableImageDebugging,
   setShouldConfirmOnDelete,
   setShouldDisplayGuides,
   shouldAntialiasProgressImageChanged,
   shouldLogToConsoleChanged,
-  SystemState,
 } from 'features/system/store/systemSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import {
@@ -37,15 +39,13 @@ import { UIState } from 'features/ui/store/uiTypes';
 import { isEqual } from 'lodash-es';
 import {
   ChangeEvent,
-  cloneElement,
   ReactElement,
+  cloneElement,
   useCallback,
   useEffect,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
 import { LogLevelName } from 'roarr';
-import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
 import SettingsSchedulers from './SettingsSchedulers';
 
 const selector = createSelector(
@@ -157,8 +157,8 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
   }, [onSettingsModalClose, onRefreshModalOpen]);
 
   const handleLogLevelChanged = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      dispatch(consoleLogLevelChanged(e.target.value as LogLevelName));
+    (v: string) => {
+      dispatch(consoleLogLevelChanged(v as LogLevelName));
     },
     [dispatch]
   );
@@ -255,14 +255,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                     isChecked={shouldLogToConsole}
                     onChange={handleLogToConsoleChanged}
                   />
-                  <IAISelect
-                    horizontal
-                    spaceEvenly
-                    isDisabled={!shouldLogToConsole}
+                  <IAIMantineSelect
+                    disabled={!shouldLogToConsole}
                     label={t('settings.consoleLogLevel')}
                     onChange={handleLogLevelChanged}
                     value={consoleLogLevel}
-                    validValues={VALID_LOG_LEVELS.concat()}
+                    data={VALID_LOG_LEVELS.concat()}
                   />
                   <IAISwitch
                     label={t('settings.enableImageDebugging')}