New: Redo Notification Triggers UI (From Lidarr)

frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js

@@ -15,6 +15,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
+import NotificationEventItems from './NotificationEventItems';
 import styles from './EditNotificationModalContent.css';
 
 function EditNotificationModalContent(props) {
@@ -39,17 +40,6 @@ function EditNotificationModalContent(props) {
     id,
     implementationName,
     name,
-    onGrab,
-    onDownload,
-    onUpgrade,
-    onRename,
-    onHealthIssue,
-    supportsOnGrab,
-    supportsOnDownload,
-    supportsOnUpgrade,
-    supportsOnRename,
-    supportsOnHealthIssue,
-    includeHealthWarnings,
     tags,
     fields,
     message
@@ -96,89 +86,10 @@ function EditNotificationModalContent(props) {
                 />
               </FormGroup>
 
-              <FormGroup>
+              <NotificationEventItems
-                <FormLabel>On Grab</FormLabel>
+                item={item}
-
+                onInputChange={onInputChange}
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="onGrab"
-                  helpText="Be notified when movies are available for download and has been sent to a download client"
-                  isDisabled={!supportsOnGrab.value}
-                  {...onGrab}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>On Import</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="onDownload"
-                  helpText="Be notified when movies are successfully imported"
-                  isDisabled={!supportsOnDownload.value}
-                  {...onDownload}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              {
-                onDownload.value &&
-                  <FormGroup>
-                    <FormLabel>On Upgrade</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.CHECK}
-                      name="onUpgrade"
-                      helpText="Be notified when movies are upgraded to a better quality"
-                      isDisabled={!supportsOnUpgrade.value}
-                      {...onUpgrade}
-                      onChange={onInputChange}
-                    />
-                  </FormGroup>
-              }
-
-              <FormGroup>
-                <FormLabel>On Rename</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="onRename"
-                  helpText="Be notified when movies are renamed"
-                  isDisabled={!supportsOnRename.value}
-                  {...onRename}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>On Health Issue</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="onHealthIssue"
-                  helpText="Be notified on health check failures"
-                  isDisabled={!supportsOnHealthIssue.value}
-                  {...onHealthIssue}
-                  onChange={onInputChange}
               />
-              </FormGroup>
-
-              {
-                onHealthIssue.value &&
-                  <FormGroup>
-                    <FormLabel>Include Health Warnings</FormLabel>
-
-                    <FormInputGroup
-                      type={inputTypes.CHECK}
-                      name="includeHealthWarnings"
-                      helpText="Be notified on health warnings in addition to errors"
-                      isDisabled={!supportsOnHealthIssue.value}
-                      {...includeHealthWarnings}
-                      onChange={onInputChange}
-                    />
-                  </FormGroup>
-              }
 
               <FormGroup>
                 <FormLabel>Tags</FormLabel>

frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css

@@ -0,0 +1,4 @@
+.events {
+  margin-top: 10px;
+  user-select: none;
+}

frontend/src/Settings/Notifications/Notifications/NotificationEventItems.js

@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormInputHelpText from 'Components/Form/FormInputHelpText';
+import FormLabel from 'Components/Form/FormLabel';
+import { inputTypes } from 'Helpers/Props';
+import styles from './NotificationEventItems.css';
+
+function NotificationEventItems(props) {
+  const {
+    item,
+    onInputChange
+  } = props;
+
+  const {
+    onGrab,
+    onDownload,
+    onUpgrade,
+    onRename,
+    onHealthIssue,
+    supportsOnGrab,
+    supportsOnDownload,
+    supportsOnUpgrade,
+    supportsOnRename,
+    supportsOnHealthIssue,
+    includeHealthWarnings
+  } = item;
+
+  return (
+    <FormGroup>
+      <FormLabel>Notification Triggers</FormLabel>
+      <div>
+        <FormInputHelpText
+          text="Select which events should trigger this notification"
+          link="https://github.com/Radarr/Radarr/wiki/Connections"
+        />
+        <div className={styles.events}>
+          <div>
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="onGrab"
+              helpText="On Grab"
+              isDisabled={!supportsOnGrab.value}
+              {...onGrab}
+              onChange={onInputChange}
+            />
+          </div>
+
+          <div>
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="onDownload"
+              helpText="Be notified when movies are successfully imported"
+              isDisabled={!supportsOnDownload.value}
+              {...onDownload}
+              onChange={onInputChange}
+            />
+          </div>
+
+          {
+            onDownload.value &&
+              <div>
+                <FormInputGroup
+                  type={inputTypes.CHECK}
+                  name="onUpgrade"
+                  helpText="Be notified when movies are upgraded to a better quality"
+                  isDisabled={!supportsOnUpgrade.value}
+                  {...onUpgrade}
+                  onChange={onInputChange}
+                />
+              </div>
+          }
+
+          <div>
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="onRename"
+              helpText="On Rename"
+              isDisabled={!supportsOnRename.value}
+              {...onRename}
+              onChange={onInputChange}
+            />
+          </div>
+
+          <div>
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="onHealthIssue"
+              helpText="On Health Issue"
+              isDisabled={!supportsOnHealthIssue.value}
+              {...onHealthIssue}
+              onChange={onInputChange}
+            />
+          </div>
+
+          {
+            onHealthIssue.value &&
+              <div>
+                <FormInputGroup
+                  type={inputTypes.CHECK}
+                  name="includeHealthWarnings"
+                  helpText="Include Health Warnings"
+                  isDisabled={!supportsOnHealthIssue.value}
+                  {...includeHealthWarnings}
+                  onChange={onInputChange}
+                />
+              </div>
+          }
+        </div>
+      </div>
+    </FormGroup>
+  );
+}
+
+NotificationEventItems.propTypes = {
+  item: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired
+};
+
+export default NotificationEventItems;