From 3a55316adad51b677b09b236759b765e10dce649 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Fri, 18 Apr 2025 12:11:55 +0300
Subject: [PATCH] Improve typings for select options

---
 frontend/src/Collection/CollectionFooter.js   | 36 ++++++++++---------
 frontend/src/Components/Form/SelectInput.tsx  | 27 ++++++--------
 .../src/DiscoverMovie/DiscoverMovieFooter.js  | 19 +++++-----
 .../InteractiveImportModalContent.tsx         |  6 ++--
 4 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/frontend/src/Collection/CollectionFooter.js b/frontend/src/Collection/CollectionFooter.js
index a510c8bf1e..89e9cff054 100644
--- a/frontend/src/Collection/CollectionFooter.js
+++ b/frontend/src/Collection/CollectionFooter.js
@@ -1,13 +1,10 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import AvailabilitySelectInput from 'Components/Form/Select/AvailabilitySelectInput';
-import QualityProfileSelectInput from 'Components/Form/Select/QualityProfileSelectInput';
-import RootFolderSelectInput from 'Components/Form/Select/RootFolderSelectInput';
-import SelectInput from 'Components/Form/SelectInput';
+import FormInputGroup from 'Components/Form/FormInputGroup';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import PageContentFooter from 'Components/Page/PageContentFooter';
-import { kinds } from 'Helpers/Props';
+import { inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import CollectionFooterLabel from './CollectionFooterLabel';
 import styles from './CollectionFooter.css';
@@ -19,8 +16,7 @@ const monitoredOptions = [
     key: NO_CHANGE,
     get value() {
       return translate('NoChange');
-    },
-    isDisabled: true
+    }
   },
   {
     key: 'monitored',
@@ -41,8 +37,7 @@ const searchOnAddOptions = [
     key: NO_CHANGE,
     get value() {
       return translate('NoChange');
-    },
-    isDisabled: true
+    }
   },
   {
     key: 'yes',
@@ -173,7 +168,8 @@ class CollectionFooter extends Component {
             isSaving={isSaving && monitored !== NO_CHANGE}
           />
 
-          <SelectInput
+          <FormInputGroup
+            type={inputTypes.SELECT}
             name="monitored"
             value={monitored}
             values={monitoredOptions}
@@ -188,7 +184,8 @@ class CollectionFooter extends Component {
             isSaving={isSaving && monitor !== NO_CHANGE}
           />
 
-          <SelectInput
+          <FormInputGroup
+            type={inputTypes.SELECT}
             name="monitor"
             value={monitor}
             values={monitoredOptions}
@@ -203,10 +200,12 @@ class CollectionFooter extends Component {
             isSaving={isSaving && qualityProfileId !== NO_CHANGE}
           />
 
-          <QualityProfileSelectInput
+          <FormInputGroup
+            type={inputTypes.QUALITY_PROFILE_SELECT}
             name="qualityProfileId"
             value={qualityProfileId}
             includeNoChange={true}
+            includeNoChangeDisabled={false}
             isDisabled={!selectedCount}
             onChange={this.onInputChange}
           />
@@ -218,10 +217,12 @@ class CollectionFooter extends Component {
             isSaving={isSaving && minimumAvailability !== NO_CHANGE}
           />
 
-          <AvailabilitySelectInput
+          <FormInputGroup
+            type={inputTypes.AVAILABILITY_SELECT}
             name="minimumAvailability"
             value={minimumAvailability}
             includeNoChange={true}
+            includeNoChangeDisabled={false}
             isDisabled={!selectedCount}
             onChange={this.onInputChange}
           />
@@ -233,12 +234,14 @@ class CollectionFooter extends Component {
             isSaving={isSaving && rootFolderPath !== NO_CHANGE}
           />
 
-          <RootFolderSelectInput
+          <FormInputGroup
+            type={inputTypes.ROOT_FOLDER_SELECT}
             name="rootFolderPath"
             value={rootFolderPath}
             includeNoChange={true}
-            isDisabled={!selectedCount}
+            includeNoChangeDisabled={false}
             selectedValueOptions={{ includeFreeSpace: false }}
+            isDisabled={!selectedCount}
             onChange={this.onInputChange}
           />
         </div>
@@ -249,7 +252,8 @@ class CollectionFooter extends Component {
             isSaving={isSaving && searchOnAdd !== NO_CHANGE}
           />
 
-          <SelectInput
+          <FormInputGroup
+            type={inputTypes.SELECT}
             name="searchOnAdd"
             value={searchOnAdd}
             values={searchOnAddOptions}
diff --git a/frontend/src/Components/Form/SelectInput.tsx b/frontend/src/Components/Form/SelectInput.tsx
index 36a16d353e..c3a1240769 100644
--- a/frontend/src/Components/Form/SelectInput.tsx
+++ b/frontend/src/Components/Form/SelectInput.tsx
@@ -1,12 +1,17 @@
 import classNames from 'classnames';
-import React, { ChangeEvent, SyntheticEvent, useCallback } from 'react';
+import React, {
+  ChangeEvent,
+  ComponentProps,
+  SyntheticEvent,
+  useCallback,
+} from 'react';
 import { InputChanged } from 'typings/inputs';
 import styles from './SelectInput.css';
 
-interface SelectInputOption {
-  key: string;
+export interface SelectInputOption
+  extends Pick<ComponentProps<'option'>, 'disabled'> {
+  key: string | number;
   value: string | number | (() => string | number);
-  isDisabled?: boolean;
 }
 
 interface SelectInputProps<T> {
@@ -62,20 +67,10 @@ function SelectInput<T>({
       onBlur={onBlur}
     >
       {values.map((option) => {
-        const {
-          key,
-          value: optionValue,
-          isDisabled: optionIsDisabled = false,
-          ...otherOptionProps
-        } = option;
+        const { key, value: optionValue, ...otherOptionProps } = option;
 
         return (
-          <option
-            key={key}
-            value={key}
-            disabled={optionIsDisabled}
-            {...otherOptionProps}
-          >
+          <option key={key} value={key} {...otherOptionProps}>
             {typeof optionValue === 'function' ? optionValue() : optionValue}
           </option>
         );
diff --git a/frontend/src/DiscoverMovie/DiscoverMovieFooter.js b/frontend/src/DiscoverMovie/DiscoverMovieFooter.js
index 2eda9128bb..ffbf92ca90 100644
--- a/frontend/src/DiscoverMovie/DiscoverMovieFooter.js
+++ b/frontend/src/DiscoverMovie/DiscoverMovieFooter.js
@@ -2,13 +2,10 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import CheckInput from 'Components/Form/CheckInput';
-import AvailabilitySelectInput from 'Components/Form/Select/AvailabilitySelectInput';
-import QualityProfileSelectInput from 'Components/Form/Select/QualityProfileSelectInput';
-import RootFolderSelectInput from 'Components/Form/Select/RootFolderSelectInput';
-import SelectInput from 'Components/Form/SelectInput';
+import FormInputGroup from 'Components/Form/FormInputGroup';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import PageContentFooter from 'Components/Page/PageContentFooter';
-import { kinds } from 'Helpers/Props';
+import { inputTypes, kinds } from 'Helpers/Props';
 import monitorOptions from 'Utilities/Movie/monitorOptions';
 import translate from 'Utilities/String/translate';
 import DiscoverMovieFooterLabel from './DiscoverMovieFooterLabel';
@@ -146,7 +143,8 @@ class DiscoverMovieFooter extends Component {
             isSaving={isAdding}
           />
 
-          <SelectInput
+          <FormInputGroup
+            type={inputTypes.SELECT}
             name="monitor"
             value={monitor}
             values={monitorOptions}
@@ -161,7 +159,8 @@ class DiscoverMovieFooter extends Component {
             isSaving={isAdding}
           />
 
-          <QualityProfileSelectInput
+          <FormInputGroup
+            type={inputTypes.QUALITY_PROFILE_SELECT}
             name="qualityProfileId"
             value={qualityProfileId}
             isDisabled={!selectedCount}
@@ -175,7 +174,8 @@ class DiscoverMovieFooter extends Component {
             isSaving={isAdding}
           />
 
-          <AvailabilitySelectInput
+          <FormInputGroup
+            type={inputTypes.AVAILABILITY_SELECT}
             name="minimumAvailability"
             value={minimumAvailability}
             isDisabled={!selectedCount}
@@ -189,7 +189,8 @@ class DiscoverMovieFooter extends Component {
             isSaving={isAdding}
           />
 
-          <RootFolderSelectInput
+          <FormInputGroup
+            type={inputTypes.ROOT_FOLDER_SELECT}
             name="rootFolderPath"
             value={rootFolderPath}
             isDisabled={!selectedCount}
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx
index 8a014fbca8..60ea1381c7 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 import AppState from 'App/State/AppState';
 import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
 import * as commandNames from 'Commands/commandNames';
-import SelectInput from 'Components/Form/SelectInput';
+import SelectInput, { SelectInputOption } from 'Components/Form/SelectInput';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
@@ -141,7 +141,7 @@ const COLUMNS = [
   },
 ];
 
-const importModeOptions = [
+const importModeOptions: SelectInputOption[] = [
   {
     key: 'chooseImportMode',
     value: () => translate('ChooseImportMode'),
@@ -289,7 +289,7 @@ function InteractiveImportModalContent(
   }, [selectedState]);
 
   const bulkSelectOptions = useMemo(() => {
-    const options = [
+    const options: SelectInputOption[] = [
       {
         key: 'select',
         value: translate('SelectDropdown'),