New: Ability to select Plex Media Server from plex.tv

(cherry picked from commit 4c622fd41289cd293a68a6a9f6b8da2a086edecb)

Closes #10110

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -271,26 +271,32 @@ class EnhancedSelectInput extends Component {
     this.setState({ isOpen: !this.state.isOpen });
   };
 
-  onSelect = (value) => {
-    if (Array.isArray(this.props.value)) {
-      let newValue = null;
-      const index = this.props.value.indexOf(value);
+  onSelect = (newValue) => {
+    const { name, value, values, onChange } = this.props;
+    const additionalProperties = values.find((v) => v.key === newValue)?.additionalProperties;
+
+    if (Array.isArray(value)) {
+      let arrayValue = null;
+      const index = value.indexOf(newValue);
+
       if (index === -1) {
-        newValue = this.props.values.map((v) => v.key).filter((v) => (v === value) || this.props.value.includes(v));
+        arrayValue = values.map((v) => v.key).filter((v) => (v === newValue) || value.includes(v));
       } else {
-        newValue = [...this.props.value];
-        newValue.splice(index, 1);
+        arrayValue = [...value];
+        arrayValue.splice(index, 1);
       }
-      this.props.onChange({
-        name: this.props.name,
-        value: newValue
+      onChange({
+        name,
+        value: arrayValue,
+        additionalProperties
       });
     } else {
       this.setState({ isOpen: false });
 
-      this.props.onChange({
-        name: this.props.name,
-        value
+      onChange({
+        name,
+        value: newValue,
+        additionalProperties
       });
     }
   };
@@ -485,7 +491,7 @@ class EnhancedSelectInput extends Component {
                             values.map((v, index) => {
                               const hasParent = v.parentKey !== undefined;
                               const depth = hasParent ? 1 : 0;
-                              const parentSelected = hasParent && value.includes(v.parentKey);
+                              const parentSelected = hasParent && Array.isArray(value) && value.includes(v.parentKey);
                               return (
                                 <OptionComponent
                                   key={v.key}

frontend/src/Components/Form/EnhancedSelectInputConnector.js

@@ -9,7 +9,8 @@ import EnhancedSelectInput from './EnhancedSelectInput';
 const importantFieldNames = [
   'baseUrl',
   'apiPath',
-  'apiKey'
+  'apiKey',
+  'authToken'
 ];
 
 function getProviderDataKey(providerData) {
@@ -34,7 +35,9 @@ function getSelectOptions(items) {
       key: option.value,
       value: option.name,
       hint: option.hint,
-      parentKey: option.parentValue
+      parentKey: option.parentValue,
+      isDisabled: option.isDisabled,
+      additionalProperties: option.additionalProperties
     };
   });
 }
@@ -147,7 +150,7 @@ EnhancedSelectInputConnector.propTypes = {
   provider: PropTypes.string.isRequired,
   providerData: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   selectOptionsProviderAction: PropTypes.string,
   onChange: PropTypes.func.isRequired,

frontend/src/Settings/Notifications/Notifications/EditNotificationModalContentConnector.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import {
   saveNotification,
-  setNotificationFieldValue,
+  setNotificationFieldValues,
   setNotificationValue,
   testNotification,
   toggleAdvancedSettings
@@ -27,7 +27,7 @@ function createMapStateToProps() {
 
 const mapDispatchToProps = {
   setNotificationValue,
-  setNotificationFieldValue,
+  setNotificationFieldValues,
   saveNotification,
   testNotification,
   toggleAdvancedSettings
@@ -51,8 +51,8 @@ class EditNotificationModalContentConnector extends Component {
     this.props.setNotificationValue({ name, value });
   };
 
-  onFieldChange = ({ name, value }) => {
-    this.props.setNotificationFieldValue({ name, value });
+  onFieldChange = ({ name, value, additionalProperties = {} }) => {
+    this.props.setNotificationFieldValues({ properties: { ...additionalProperties, [name]: value } });
   };
 
   onSavePress = () => {
@@ -91,7 +91,7 @@ EditNotificationModalContentConnector.propTypes = {
   saveError: PropTypes.object,
   item: PropTypes.object.isRequired,
   setNotificationValue: PropTypes.func.isRequired,
-  setNotificationFieldValue: PropTypes.func.isRequired,
+  setNotificationFieldValues: PropTypes.func.isRequired,
   saveNotification: PropTypes.func.isRequired,
   testNotification: PropTypes.func.isRequired,
   toggleAdvancedSettings: PropTypes.func.isRequired,

frontend/src/Store/Actions/Creators/Reducers/createSetProviderFieldValuesReducer.js

@@ -0,0 +1,25 @@
+import getSectionState from 'Utilities/State/getSectionState';
+import updateSectionState from 'Utilities/State/updateSectionState';
+
+function createSetProviderFieldValuesReducer(section) {
+  return (state, { payload }) => {
+    if (section === payload.section) {
+      const { properties } = payload;
+      const newState = getSectionState(state, section);
+      newState.pendingChanges = Object.assign({}, newState.pendingChanges);
+      const fields = Object.assign({}, newState.pendingChanges.fields || {});
+
+      Object.keys(properties).forEach((name) => {
+        fields[name] = properties[name];
+      });
+
+      newState.pendingChanges.fields = fields;
+
+      return updateSectionState(state, section, newState);
+    }
+
+    return state;
+  };
+}
+
+export default createSetProviderFieldValuesReducer;

frontend/src/Store/Actions/Settings/notifications.js

@@ -5,6 +5,7 @@ import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHand
 import createSaveProviderHandler, { createCancelSaveProviderHandler } from 'Store/Actions/Creators/createSaveProviderHandler';
 import createTestProviderHandler, { createCancelTestProviderHandler } from 'Store/Actions/Creators/createTestProviderHandler';
 import createSetProviderFieldValueReducer from 'Store/Actions/Creators/Reducers/createSetProviderFieldValueReducer';
+import createSetProviderFieldValuesReducer from 'Store/Actions/Creators/Reducers/createSetProviderFieldValuesReducer';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
 import { createThunk } from 'Store/thunks';
 import selectProviderSchema from 'Utilities/State/selectProviderSchema';
@@ -22,6 +23,7 @@ export const FETCH_NOTIFICATION_SCHEMA = 'settings/notifications/fetchNotificati
 export const SELECT_NOTIFICATION_SCHEMA = 'settings/notifications/selectNotificationSchema';
 export const SET_NOTIFICATION_VALUE = 'settings/notifications/setNotificationValue';
 export const SET_NOTIFICATION_FIELD_VALUE = 'settings/notifications/setNotificationFieldValue';
+export const SET_NOTIFICATION_FIELD_VALUES = 'settings/notifications/setNotificationFieldValues';
 export const SAVE_NOTIFICATION = 'settings/notifications/saveNotification';
 export const CANCEL_SAVE_NOTIFICATION = 'settings/notifications/cancelSaveNotification';
 export const DELETE_NOTIFICATION = 'settings/notifications/deleteNotification';
@@ -55,6 +57,13 @@ export const setNotificationFieldValue = createAction(SET_NOTIFICATION_FIELD_VAL
   };
 });
 
+export const setNotificationFieldValues = createAction(SET_NOTIFICATION_FIELD_VALUES, (payload) => {
+  return {
+    section,
+    ...payload
+  };
+});
+
 //
 // Details
 
@@ -99,6 +108,7 @@ export default {
   reducers: {
     [SET_NOTIFICATION_VALUE]: createSetSettingValueReducer(section),
     [SET_NOTIFICATION_FIELD_VALUE]: createSetProviderFieldValueReducer(section),
+    [SET_NOTIFICATION_FIELD_VALUES]: createSetProviderFieldValuesReducer(section),
 
     [SELECT_NOTIFICATION_SCHEMA]: (state, { payload }) => {
       return selectProviderSchema(state, section, payload, (selectedSchema) => {