Show save error in UI

frontend/src/Settings/Quality/Definition/QualityDefinitions.css

@@ -1,3 +1,7 @@
+.saveError {
+  margin-bottom: 20px;
+}
+
 .header {
   display: flex;
   font-weight: bold;

frontend/src/Settings/Quality/Definition/QualityDefinitions.css.d.ts

@@ -5,6 +5,7 @@ interface CssExports {
   'header': string;
   'megabytesPerMinute': string;
   'quality': string;
+  'saveError': string;
   'sizeLimit': string;
   'sizeLimitHelpText': string;
   'sizeLimitHelpTextContainer': string;

frontend/src/Settings/Quality/Definition/QualityDefinitions.js

@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import PageSectionContent from 'Components/Page/PageSectionContent';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import QualityDefinitionConnector from './QualityDefinitionConnector';
 import styles from './QualityDefinitions.css';
@@ -15,15 +17,44 @@ class QualityDefinitions extends Component {
     const {
       items,
       advancedSettings,
+      saveError,
       ...otherProps
     } = this.props;
 
+    console.log(saveError);
+
     return (
       <FieldSet legend={translate('QualityDefinitions')}>
         <PageSectionContent
           errorMessage={translate('QualityDefinitionsLoadError')}
           {...otherProps}
         >
+          {
+            saveError ?
+              <div className={styles.saveError}>
+                <Alert kind={kinds.DANGER}>
+                  {translate('QualityDefinitionsSaveError')}
+                  <ul>
+                    {
+                      Array.isArray(saveError.responseJSON) ?
+                        saveError.responseJSON.map((error, index) => {
+                          return (
+                            <li key={index}>
+                              {error.errorMessage}
+                            </li>
+                          );
+                        }) :
+                        <li>
+                          {
+                            JSON.stringify(saveError.responseJSON)
+                          }
+                        </li>
+                    }
+                  </ul>
+                </Alert>
+              </div> : null
+          }
+
           <div className={styles.header}>
             <div className={styles.quality}>
               {translate('Quality')}
@@ -72,6 +103,7 @@ class QualityDefinitions extends Component {
 QualityDefinitions.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
+  saveError: PropTypes.object,
   defaultProfile: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   advancedSettings: PropTypes.bool.isRequired

src/NzbDrone.Core/Localization/Core/en.json

@@ -1591,6 +1591,7 @@
   "QualityCutoffNotMet": "Quality cutoff has not been met",
   "QualityDefinitions": "Quality Definitions",
   "QualityDefinitionsLoadError": "Unable to load Quality Definitions",
+  "QualityDefinitionsSaveError": "Unable to save Quality Definitions",
   "QualityLimitsSeriesRuntimeHelpText": "Limits are automatically adjusted for the series runtime and number of episodes in the file.",
   "QualityProfile": "Quality Profile",
   "QualityProfileInUseSeriesListCollection": "Can't delete a quality profile that is attached to a series, list, or collection",