Improve typings for select options

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 FormInputGroup from 'Components/Form/FormInputGroup';
-import QualityProfileSelectInput from 'Components/Form/Select/QualityProfileSelectInput';
-import RootFolderSelectInput from 'Components/Form/Select/RootFolderSelectInput';
-import SelectInput from 'Components/Form/SelectInput';
 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}

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 {
+export interface SelectInputOption
-  key: string;
+  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 {
+        const { key, value: optionValue, ...otherOptionProps } = option;
-          key,
-          value: optionValue,
-          isDisabled: optionIsDisabled = false,
-          ...otherOptionProps
-        } = option;
 
         return (
-          <option
+          <option key={key} value={key} {...otherOptionProps}>
-            key={key}
-            value={key}
-            disabled={optionIsDisabled}
-            {...otherOptionProps}
-          >
             {typeof optionValue === 'function' ? optionValue() : optionValue}
           </option>
         );

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 FormInputGroup from 'Components/Form/FormInputGroup';
-import QualityProfileSelectInput from 'Components/Form/Select/QualityProfileSelectInput';
-import RootFolderSelectInput from 'Components/Form/Select/RootFolderSelectInput';
-import SelectInput from 'Components/Form/SelectInput';
 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}

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'),