New: Custom Formats

Co-Authored-By: ta264 <ta264@users.noreply.github.com>

frontend/src/Settings/CustomFormats/CustomFormatSettingsConnector.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import CustomFormatsConnector from './CustomFormats/CustomFormatsConnector';
+
+class CustomFormatSettingsConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    return (
+      <PageContent title="Custom Format Settings">
+        <SettingsToolbarConnector
+          showSave={false}
+        />
+
+        <PageContentBody>
+          <DndProvider backend={HTML5Backend}>
+            <CustomFormatsConnector />
+          </DndProvider>
+        </PageContentBody>
+      </PageContent>
+    );
+  }
+}
+
+export default CustomFormatSettingsConnector;
+

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.css

@@ -0,0 +1,49 @@
+.customFormat {
+  composes: card from '~Components/Card.css';
+
+  width: 300px;
+}
+
+.nameContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.name {
+  @add-mixin truncate;
+
+  margin-bottom: 20px;
+  font-weight: 300;
+  font-size: 24px;
+}
+
+.buttons {
+  flex: 0 0 auto;
+}
+
+.cloneButton {
+  composes: button from '~Components/Link/IconButton.css';
+
+  height: 36px;
+}
+
+.formats {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 5px;
+  pointer-events: all;
+}
+
+.tooltipLabel {
+  composes: label from '~Components/Label.css';
+
+  margin: 0;
+  border: none;
+}
+
+.label {
+  @add-mixin truncate;
+  composes: label from '~Components/Label.css';
+
+  max-width: 100%;
+}

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormat.js

@@ -0,0 +1,174 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import { icons, kinds } from 'Helpers/Props';
+import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
+import ExportCustomFormatModal from './ExportCustomFormatModal';
+import styles from './CustomFormat.css';
+
+class CustomFormat extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditCustomFormatModalOpen: false,
+      isExportCustomFormatModalOpen: false,
+      isDeleteCustomFormatModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditCustomFormatPress = () => {
+    this.setState({ isEditCustomFormatModalOpen: true });
+  };
+
+  onEditCustomFormatModalClose = () => {
+    this.setState({ isEditCustomFormatModalOpen: false });
+  };
+
+  onExportCustomFormatPress = () => {
+    this.setState({ isExportCustomFormatModalOpen: true });
+  };
+
+  onExportCustomFormatModalClose = () => {
+    this.setState({ isExportCustomFormatModalOpen: false });
+  };
+
+  onDeleteCustomFormatPress = () => {
+    this.setState({
+      isEditCustomFormatModalOpen: false,
+      isDeleteCustomFormatModalOpen: true
+    });
+  };
+
+  onDeleteCustomFormatModalClose = () => {
+    this.setState({ isDeleteCustomFormatModalOpen: false });
+  };
+
+  onConfirmDeleteCustomFormat = () => {
+    this.props.onConfirmDeleteCustomFormat(this.props.id);
+  };
+
+  onCloneCustomFormatPress = () => {
+    const {
+      id,
+      onCloneCustomFormatPress
+    } = this.props;
+
+    onCloneCustomFormatPress(id);
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      name,
+      specifications,
+      isDeleting
+    } = this.props;
+
+    return (
+      <Card
+        className={styles.customFormat}
+        overlayContent={true}
+        onPress={this.onEditCustomFormatPress}
+      >
+        <div className={styles.nameContainer}>
+          <div className={styles.name}>
+            {name}
+          </div>
+
+          <div className={styles.buttons}>
+            <IconButton
+              className={styles.cloneButton}
+              title="Clone Custom Format"
+              name={icons.CLONE}
+              onPress={this.onCloneCustomFormatPress}
+            />
+
+            <IconButton
+              className={styles.cloneButton}
+              title="Export Custom Format"
+              name={icons.EXPORT}
+              onPress={this.onExportCustomFormatPress}
+            />
+          </div>
+        </div>
+
+        <div>
+          {
+            specifications.map((item, index) => {
+              if (!item) {
+                return null;
+              }
+
+              let kind = kinds.DEFAULT;
+              if (item.required) {
+                kind = kinds.SUCCESS;
+              }
+              if (item.negate) {
+                kind = kinds.DANGER;
+              }
+
+              return (
+                <Label
+                  className={styles.label}
+                  key={index}
+                  kind={kind}
+                >
+                  {item.name}
+                </Label>
+              );
+            })
+          }
+        </div>
+
+        <EditCustomFormatModalConnector
+          id={id}
+          isOpen={this.state.isEditCustomFormatModalOpen}
+          onModalClose={this.onEditCustomFormatModalClose}
+          onDeleteCustomFormatPress={this.onDeleteCustomFormatPress}
+        />
+
+        <ExportCustomFormatModal
+          id={id}
+          isOpen={this.state.isExportCustomFormatModalOpen}
+          onModalClose={this.onExportCustomFormatModalClose}
+        />
+
+        <ConfirmModal
+          isOpen={this.state.isDeleteCustomFormatModalOpen}
+          kind={kinds.DANGER}
+          title="Delete Custom Format"
+          message={`Are you sure you want to delete the custom format '${name}'?`}
+          confirmLabel="Delete"
+          isSpinning={isDeleting}
+          onConfirm={this.onConfirmDeleteCustomFormat}
+          onCancel={this.onDeleteCustomFormatModalClose}
+        />
+      </Card>
+    );
+  }
+}
+
+CustomFormat.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  specifications: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isDeleting: PropTypes.bool.isRequired,
+  onConfirmDeleteCustomFormat: PropTypes.func.isRequired,
+  onCloneCustomFormatPress: PropTypes.func.isRequired
+};
+
+export default CustomFormat;

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.css

@@ -0,0 +1,21 @@
+.customFormats {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.addCustomFormat {
+  composes: customFormat from '~./CustomFormat.css';
+
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
+  text-align: center;
+  font-size: 45px;
+}
+
+.center {
+  display: inline-block;
+  padding: 5px 20px 0;
+  border: 1px solid var(--borderColor);
+  border-radius: 4px;
+  background-color: var(--cardCenterBackgroundColor);
+}

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormats.js

@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { icons } from 'Helpers/Props';
+import CustomFormat from './CustomFormat';
+import EditCustomFormatModalConnector from './EditCustomFormatModalConnector';
+import styles from './CustomFormats.css';
+
+class CustomFormats extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isCustomFormatModalOpen: false,
+      tagsFromId: undefined
+    };
+  }
+
+  //
+  // Listeners
+
+  onCloneCustomFormatPress = (id) => {
+    this.props.onCloneCustomFormatPress(id);
+    this.setState({
+      isCustomFormatModalOpen: true,
+      tagsFromId: id
+    });
+  };
+
+  onEditCustomFormatPress = () => {
+    this.setState({ isCustomFormatModalOpen: true });
+  };
+
+  onModalClose = () => {
+    this.setState({
+      isCustomFormatModalOpen: false,
+      tagsFromId: undefined
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      isDeleting,
+      onConfirmDeleteCustomFormat,
+      onCloneCustomFormatPress,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <FieldSet legend="Custom Formats">
+        <PageSectionContent
+          errorMessage="Unable to load custom formats"
+          {...otherProps}c={true}
+        >
+          <div className={styles.customFormats}>
+            {
+              items.map((item) => {
+                return (
+                  <CustomFormat
+                    key={item.id}
+                    {...item}
+                    isDeleting={isDeleting}
+                    onConfirmDeleteCustomFormat={onConfirmDeleteCustomFormat}
+                    onCloneCustomFormatPress={this.onCloneCustomFormatPress}
+                  />
+                );
+              })
+            }
+
+            <Card
+              className={styles.addCustomFormat}
+              onPress={this.onEditCustomFormatPress}
+            >
+              <div className={styles.center}>
+                <Icon
+                  name={icons.ADD}
+                  size={45}
+                />
+              </div>
+            </Card>
+          </div>
+
+          <EditCustomFormatModalConnector
+            isOpen={this.state.isCustomFormatModalOpen}
+            tagsFromId={this.state.tagsFromId}
+            onModalClose={this.onModalClose}
+          />
+
+        </PageSectionContent>
+      </FieldSet>
+    );
+  }
+}
+
+CustomFormats.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isDeleting: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onConfirmDeleteCustomFormat: PropTypes.func.isRequired,
+  onCloneCustomFormatPress: PropTypes.func.isRequired
+};
+
+export default CustomFormats;

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormatsConnector.js

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { cloneCustomFormat, deleteCustomFormat, fetchCustomFormats } from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByName from 'Utilities/Array/sortByName';
+import CustomFormats from './CustomFormats';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSortedSectionSelector('settings.customFormats', sortByName),
+    (customFormats) => customFormats
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchFetchCustomFormats: fetchCustomFormats,
+  dispatchDeleteCustomFormat: deleteCustomFormat,
+  dispatchCloneCustomFormat: cloneCustomFormat
+};
+
+class CustomFormatsConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.dispatchFetchCustomFormats();
+  }
+
+  //
+  // Listeners
+
+  onConfirmDeleteCustomFormat = (id) => {
+    this.props.dispatchDeleteCustomFormat({ id });
+  };
+
+  onCloneCustomFormatPress = (id) => {
+    this.props.dispatchCloneCustomFormat({ id });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <CustomFormats
+        onConfirmDeleteCustomFormat={this.onConfirmDeleteCustomFormat}
+        onCloneCustomFormatPress={this.onCloneCustomFormatPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+CustomFormatsConnector.propTypes = {
+  dispatchFetchCustomFormats: PropTypes.func.isRequired,
+  dispatchDeleteCustomFormat: PropTypes.func.isRequired,
+  dispatchCloneCustomFormat: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(CustomFormatsConnector);

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModal.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import EditCustomFormatModalContentConnector from './EditCustomFormatModalContentConnector';
+
+class EditCustomFormatModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      height: 'auto'
+    };
+  }
+
+  //
+  // Listeners
+
+  onContentHeightChange = (height) => {
+    if (this.state.height === 'auto' || height > this.state.height) {
+      this.setState({ height });
+    }
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Modal
+        style={{ height: `${this.state.height}px` }}
+        isOpen={isOpen}
+        size={sizes.LARGE}
+        onModalClose={onModalClose}
+      >
+        <EditCustomFormatModalContentConnector
+          {...otherProps}
+          onContentHeightChange={this.onContentHeightChange}
+          onModalClose={onModalClose}
+        />
+      </Modal>
+    );
+  }
+}
+
+EditCustomFormatModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditCustomFormatModal;

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalConnector.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditCustomFormatModal from './EditCustomFormatModal';
+
+function mapStateToProps() {
+  return {};
+}
+
+const mapDispatchToProps = {
+  clearPendingChanges
+};
+
+class EditCustomFormatModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.clearPendingChanges({ section: 'settings.customFormats' });
+    this.props.onModalClose();
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditCustomFormatModal
+        {...this.props}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditCustomFormatModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  clearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EditCustomFormatModalConnector);

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.css

@@ -0,0 +1,27 @@
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: auto;
+}
+
+.rightButtons {
+  justify-content: flex-end;
+  margin-right: auto;
+}
+
+.addSpecification {
+  composes: customFormat from '~./CustomFormat.css';
+
+  background-color: var(--cardAlternateBackgroundColor);
+  color: var(--gray);
+  text-align: center;
+  font-size: 45px;
+}
+
+.center {
+  display: inline-block;
+  padding: 5px 20px 0;
+  border: 1px solid var(--borderColor);
+  border-radius: 4px;
+  background-color: var(--cardCenterBackgroundColor);
+}

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContent.js

@@ -0,0 +1,256 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { icons, inputTypes, kinds } from 'Helpers/Props';
+import ImportCustomFormatModal from './ImportCustomFormatModal';
+import AddSpecificationModal from './Specifications/AddSpecificationModal';
+import EditSpecificationModalConnector from './Specifications/EditSpecificationModalConnector';
+import Specification from './Specifications/Specification';
+import styles from './EditCustomFormatModalContent.css';
+
+class EditCustomFormatModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isAddSpecificationModalOpen: false,
+      isEditSpecificationModalOpen: false,
+      isImportCustomFormatModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onAddSpecificationPress = () => {
+    this.setState({ isAddSpecificationModalOpen: true });
+  };
+
+  onAddSpecificationModalClose = ({ specificationSelected = false } = {}) => {
+    this.setState({
+      isAddSpecificationModalOpen: false,
+      isEditSpecificationModalOpen: specificationSelected
+    });
+  };
+
+  onEditSpecificationModalClose = () => {
+    this.setState({ isEditSpecificationModalOpen: false });
+  };
+
+  onImportPress = () => {
+    this.setState({ isImportCustomFormatModalOpen: true });
+  };
+
+  onImportCustomFormatModalClose = () => {
+    this.setState({ isImportCustomFormatModalOpen: false });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      error,
+      isSaving,
+      saveError,
+      item,
+      specificationsPopulated,
+      specifications,
+      onInputChange,
+      onSavePress,
+      onModalClose,
+      onDeleteCustomFormatPress,
+      onCloneSpecificationPress,
+      onConfirmDeleteSpecification,
+      ...otherProps
+    } = this.props;
+
+    const {
+      isAddSpecificationModalOpen,
+      isEditSpecificationModalOpen,
+      isImportCustomFormatModalOpen
+    } = this.state;
+
+    const {
+      id,
+      name,
+      includeCustomFormatWhenRenaming
+    } = item;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+
+        <ModalHeader>
+          {id ? 'Edit Custom Format' : 'Add Custom Format'}
+        </ModalHeader>
+
+        <ModalBody>
+          <div>
+            {
+              isFetching &&
+                <LoadingIndicator />
+            }
+
+            {
+              !isFetching && !!error &&
+                <div>
+                  {'Unable to add a new custom format, please try again.'}
+                </div>
+            }
+
+            {
+              !isFetching && !error && specificationsPopulated &&
+                <div>
+                  <Form
+                    {...otherProps}
+                  >
+                    <FormGroup>
+                      <FormLabel>
+                        Name
+                      </FormLabel>
+
+                      <FormInputGroup
+                        type={inputTypes.TEXT}
+                        name="name"
+                        {...name}
+                        onChange={onInputChange}
+                      />
+                    </FormGroup>
+
+                    <FormGroup>
+                      <FormLabel>{'Include Custom Format when Renaming'}</FormLabel>
+
+                      <FormInputGroup
+                        type={inputTypes.CHECK}
+                        name="includeCustomFormatWhenRenaming"
+                        helpText={'Include in {Custom Formats} renaming format'}
+                        {...includeCustomFormatWhenRenaming}
+                        onChange={onInputChange}
+                      />
+                    </FormGroup>
+                  </Form>
+
+                  <FieldSet legend={'Conditions'}>
+                    <div className={styles.customFormats}>
+                      {
+                        specifications.map((tag) => {
+                          return (
+                            <Specification
+                              key={tag.id}
+                              {...tag}
+                              onCloneSpecificationPress={onCloneSpecificationPress}
+                              onConfirmDeleteSpecification={onConfirmDeleteSpecification}
+                            />
+                          );
+                        })
+                      }
+
+                      <Card
+                        className={styles.addSpecification}
+                        onPress={this.onAddSpecificationPress}
+                      >
+                        <div className={styles.center}>
+                          <Icon
+                            name={icons.ADD}
+                            size={45}
+                          />
+                        </div>
+                      </Card>
+                    </div>
+                  </FieldSet>
+
+                  <AddSpecificationModal
+                    isOpen={isAddSpecificationModalOpen}
+                    onModalClose={this.onAddSpecificationModalClose}
+                  />
+
+                  <EditSpecificationModalConnector
+                    isOpen={isEditSpecificationModalOpen}
+                    onModalClose={this.onEditSpecificationModalClose}
+                  />
+
+                  <ImportCustomFormatModal
+                    isOpen={isImportCustomFormatModalOpen}
+                    onModalClose={this.onImportCustomFormatModalClose}
+                  />
+
+                </div>
+            }
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <div className={styles.rightButtons}>
+            {
+              id &&
+                <Button
+                  className={styles.deleteButton}
+                  kind={kinds.DANGER}
+                  onPress={onDeleteCustomFormatPress}
+                >
+                  Delete
+                </Button>
+            }
+
+            <Button
+              className={styles.deleteButton}
+              onPress={this.onImportPress}
+            >
+              Import
+            </Button>
+          </div>
+
+          <Button
+            onPress={onModalClose}
+          >
+            Cancel
+          </Button>
+
+          <SpinnerErrorButton
+            isSpinning={isSaving}
+            error={saveError}
+            onPress={onSavePress}
+          >
+            Save
+          </SpinnerErrorButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+EditCustomFormatModalContent.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  specificationsPopulated: PropTypes.bool.isRequired,
+  specifications: PropTypes.arrayOf(PropTypes.object),
+  onInputChange: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onContentHeightChange: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onDeleteCustomFormatPress: PropTypes.func,
+  onCloneSpecificationPress: PropTypes.func.isRequired,
+  onConfirmDeleteSpecification: PropTypes.func.isRequired
+};
+
+export default EditCustomFormatModalContent;

frontend/src/Settings/CustomFormats/CustomFormats/EditCustomFormatModalContentConnector.js

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { cloneCustomFormatSpecification, deleteCustomFormatSpecification, fetchCustomFormatSpecifications, saveCustomFormat, setCustomFormatValue } from 'Store/Actions/settingsActions';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import EditCustomFormatModalContent from './EditCustomFormatModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    createProviderSettingsSelector('customFormats'),
+    (state) => state.settings.customFormatSpecifications,
+    (advancedSettings, customFormat, specifications) => {
+      return {
+        advancedSettings,
+        ...customFormat,
+        specificationsPopulated: specifications.isPopulated,
+        specifications: specifications.items
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setCustomFormatValue,
+  saveCustomFormat,
+  fetchCustomFormatSpecifications,
+  cloneCustomFormatSpecification,
+  deleteCustomFormatSpecification
+};
+
+class EditCustomFormatModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      id,
+      tagsFromId
+    } = this.props;
+    this.props.fetchCustomFormatSpecifications({ id: tagsFromId || id });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setCustomFormatValue({ name, value });
+  };
+
+  onSavePress = () => {
+    this.props.saveCustomFormat({ id: this.props.id });
+  };
+
+  onCloneSpecificationPress = (id) => {
+    this.props.cloneCustomFormatSpecification({ id });
+  };
+
+  onConfirmDeleteSpecification = (id) => {
+    this.props.deleteCustomFormatSpecification({ id });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditCustomFormatModalContent
+        {...this.props}
+        onSavePress={this.onSavePress}
+        onInputChange={this.onInputChange}
+        onCloneSpecificationPress={this.onCloneSpecificationPress}
+        onConfirmDeleteSpecification={this.onConfirmDeleteSpecification}
+      />
+    );
+  }
+}
+
+EditCustomFormatModalContentConnector.propTypes = {
+  id: PropTypes.number,
+  tagsFromId: PropTypes.number,
+  isFetching: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  setCustomFormatValue: PropTypes.func.isRequired,
+  saveCustomFormat: PropTypes.func.isRequired,
+  fetchCustomFormatSpecifications: PropTypes.func.isRequired,
+  cloneCustomFormatSpecification: PropTypes.func.isRequired,
+  deleteCustomFormatSpecification: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(EditCustomFormatModalContentConnector);

frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModal.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import ExportCustomFormatModalContentConnector from './ExportCustomFormatModalContentConnector';
+
+class ExportCustomFormatModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      height: 'auto'
+    };
+  }
+
+  //
+  // Listeners
+
+  onContentHeightChange = (height) => {
+    if (this.state.height === 'auto' || height > this.state.height) {
+      this.setState({ height });
+    }
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Modal
+        style={{ height: `${this.state.height}px` }}
+        isOpen={isOpen}
+        size={sizes.LARGE}
+        onModalClose={onModalClose}
+      >
+        <ExportCustomFormatModalContentConnector
+          {...otherProps}
+          onContentHeightChange={this.onContentHeightChange}
+          onModalClose={onModalClose}
+        />
+      </Modal>
+    );
+  }
+}
+
+ExportCustomFormatModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ExportCustomFormatModal;

frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.css

@@ -0,0 +1,5 @@
+.button {
+  composes: button from '~Components/Link/Button.css';
+
+  position: relative;
+}

frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContent.js

@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Button from 'Components/Link/Button';
+import ClipboardButton from 'Components/Link/ClipboardButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { kinds } from 'Helpers/Props';
+import styles from './ExportCustomFormatModalContent.css';
+
+class ExportCustomFormatModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      error,
+      json,
+      specificationsPopulated,
+      onModalClose
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+
+        <ModalHeader>
+          Export Custom Format
+        </ModalHeader>
+
+        <ModalBody>
+          <div>
+            {
+              isFetching &&
+                <LoadingIndicator />
+            }
+
+            {
+              !isFetching && !!error &&
+                <div>
+                  Unable to load custom formats
+                </div>
+            }
+
+            {
+              !isFetching && !error && specificationsPopulated &&
+                <div>
+                  <pre>
+                    {json}
+                  </pre>
+                </div>
+            }
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <ClipboardButton
+            className={styles.button}
+            value={json}
+            title="Copy to clipboard"
+            kind={kinds.DEFAULT}
+          />
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+ExportCustomFormatModalContent.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  json: PropTypes.string.isRequired,
+  specificationsPopulated: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ExportCustomFormatModalContent;

frontend/src/Settings/CustomFormats/CustomFormats/ExportCustomFormatModalContentConnector.js

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchCustomFormatSpecifications } from 'Store/Actions/settingsActions';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import ExportCustomFormatModalContent from './ExportCustomFormatModalContent';
+
+const omittedProperties = ['id', 'implementationName', 'infoLink'];
+
+function replacer(key, value) {
+  if (omittedProperties.includes(key)) {
+    return undefined;
+  }
+
+  // provider fields
+  if (key === 'fields') {
+    return value.reduce((acc, cur) => {
+      acc[cur.name] = cur.value;
+      return acc;
+    }, {});
+  }
+
+  // regular setting values
+  if (value.hasOwnProperty('value')) {
+    return value.value;
+  }
+
+  return value;
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    createProviderSettingsSelector('customFormats'),
+    (state) => state.settings.customFormatSpecifications,
+    (advancedSettings, customFormat, specifications) => {
+      const json = customFormat.item ? JSON.stringify(customFormat.item, replacer, 2) : '';
+      return {
+        advancedSettings,
+        ...customFormat,
+        json,
+        specificationsPopulated: specifications.isPopulated,
+        specifications: specifications.items
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchCustomFormatSpecifications
+};
+
+class ExportCustomFormatModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      id
+    } = this.props;
+    this.props.fetchCustomFormatSpecifications({ id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ExportCustomFormatModalContent
+        {...this.props}
+      />
+    );
+  }
+}
+
+ExportCustomFormatModalContentConnector.propTypes = {
+  id: PropTypes.number,
+  fetchCustomFormatSpecifications: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ExportCustomFormatModalContentConnector);

frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModal.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import ImportCustomFormatModalContentConnector from './ImportCustomFormatModalContentConnector';
+
+class ImportCustomFormatModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      height: 'auto'
+    };
+  }
+
+  //
+  // Listeners
+
+  onContentHeightChange = (height) => {
+    if (this.state.height === 'auto' || height > this.state.height) {
+      this.setState({ height });
+    }
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Modal
+        style={{ height: `${this.state.height}px` }}
+        isOpen={isOpen}
+        size={sizes.LARGE}
+        onModalClose={onModalClose}
+      >
+        <ImportCustomFormatModalContentConnector
+          {...otherProps}
+          onContentHeightChange={this.onContentHeightChange}
+          onModalClose={onModalClose}
+        />
+      </Modal>
+    );
+  }
+}
+
+ImportCustomFormatModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ImportCustomFormatModal;

frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContent.css

@@ -0,0 +1,5 @@
+.input {
+  composes: input from '~Components/Form/TextArea.css';
+
+  font-family: $monoSpaceFontFamily;
+}

frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContent.js

@@ -0,0 +1,151 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, sizes } from 'Helpers/Props';
+import styles from './ImportCustomFormatModalContent.css';
+
+class ImportCustomFormatModalContent extends Component {
+
+  //
+  // Lifecycle
+  constructor(props, context) {
+    super(props, context);
+
+    this._importTimeout = null;
+
+    this.state = {
+      json: '',
+      isSpinning: false,
+      parseError: null
+    };
+  }
+
+  componentWillUnmount() {
+    if (this._importTimeout) {
+      clearTimeout(this._importTimeout);
+    }
+  }
+
+  //
+  // Control
+
+  onChange = (event) => {
+    this.setState({ json: event.value });
+  };
+
+  onImportPress = () => {
+    this.setState({ isSpinning: true });
+    // this is a bodge as we need to register a isSpinning: true to get the spinner button to update
+    this._importTimeout = setTimeout(this.doImport, 250);
+  };
+
+  doImport = () => {
+    const parseError = this.props.onImportPress(this.state.json);
+    this.setState({
+      parseError,
+      isSpinning: false
+    });
+
+    if (!parseError) {
+      this.props.onModalClose();
+    }
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      error,
+      specificationsPopulated,
+      onModalClose
+    } = this.props;
+
+    const {
+      json,
+      isSpinning,
+      parseError
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+
+        <ModalHeader>
+          Import Custom Format
+        </ModalHeader>
+
+        <ModalBody>
+          <div>
+            {
+              isFetching &&
+                <LoadingIndicator />
+            }
+
+            {
+              !isFetching && !!error &&
+                <div>
+                  Unable to load custom formats
+                </div>
+            }
+
+            {
+              !isFetching && !error && specificationsPopulated &&
+                <Form>
+                  <FormGroup size={sizes.MEDIUM}>
+                    <FormLabel>
+                      Custom Format JSON
+                    </FormLabel>
+                    <FormInputGroup
+                      key={0}
+                      inputClassName={styles.input}
+                      type={inputTypes.TEXT_AREA}
+                      name="customFormatJson"
+                      value={json}
+                      onChange={this.onChange}
+                      placeholder={'{\n  "name": "Custom Format"\n}'}
+                      errors={parseError ? [parseError] : []}
+                    />
+                  </FormGroup>
+                </Form>
+            }
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Cancel
+          </Button>
+          <SpinnerErrorButton
+            onPress={this.onImportPress}
+            isSpinning={isSpinning}
+            error={parseError}
+          >
+            Import
+          </SpinnerErrorButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+ImportCustomFormatModalContent.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  specificationsPopulated: PropTypes.bool.isRequired,
+  onImportPress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default ImportCustomFormatModalContent;

frontend/src/Settings/CustomFormats/CustomFormats/ImportCustomFormatModalContentConnector.js

@@ -0,0 +1,145 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { clearCustomFormatSpecificationPending, deleteAllCustomFormatSpecification, fetchCustomFormatSpecificationSchema, saveCustomFormatSpecification, selectCustomFormatSpecificationSchema, setCustomFormatSpecificationFieldValue, setCustomFormatSpecificationValue, setCustomFormatValue } from 'Store/Actions/settingsActions';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import ImportCustomFormatModalContent from './ImportCustomFormatModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    createProviderSettingsSelector('customFormats'),
+    (state) => state.settings.customFormatSpecifications,
+    (advancedSettings, customFormat, specifications) => {
+      return {
+        advancedSettings,
+        ...customFormat,
+        specificationsPopulated: specifications.isPopulated,
+        specificationSchema: specifications.schema
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  deleteAllCustomFormatSpecification,
+  clearCustomFormatSpecificationPending,
+  clearPendingChanges,
+  saveCustomFormatSpecification,
+  selectCustomFormatSpecificationSchema,
+  setCustomFormatSpecificationFieldValue,
+  setCustomFormatSpecificationValue,
+  setCustomFormatValue,
+  fetchCustomFormatSpecificationSchema
+};
+
+class ImportCustomFormatModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchCustomFormatSpecificationSchema();
+  }
+
+  //
+  // Listeners
+
+  clearPending = () => {
+    this.props.clearPendingChanges({ section: 'settings.customFormats' });
+    this.props.clearCustomFormatSpecificationPending();
+    this.props.deleteAllCustomFormatSpecification();
+  };
+
+  onImportPress = (payload) => {
+
+    this.clearPending();
+
+    try {
+      const cf = JSON.parse(payload);
+      this.parseCf(cf);
+    } catch (err) {
+      this.clearPending();
+      return {
+        message: err.message,
+        detailedMessage: err.stack
+      };
+    }
+
+    return null;
+  };
+
+  parseCf = (cf) => {
+    for (const [key, value] of Object.entries(cf)) {
+      if (key === 'specifications') {
+        for (const spec of value) {
+          this.parseSpecification(spec);
+        }
+      } else if (key !== 'id') {
+        this.props.setCustomFormatValue({ name: key, value });
+      }
+    }
+  };
+
+  parseSpecification = (spec) => {
+    const selectedImplementation = _.find(this.props.specificationSchema, { implementation: spec.implementation });
+
+    if (!selectedImplementation) {
+      throw new Error(`Unknown Custom Format condition '${spec.implementation}'`);
+    }
+
+    this.props.selectCustomFormatSpecificationSchema({ implementation: spec.implementation });
+
+    for (const [key, value] of Object.entries(spec)) {
+      if (key === 'fields') {
+        this.parseFields(value, selectedImplementation);
+      } else if (key !== 'id') {
+        this.props.setCustomFormatSpecificationValue({ name: key, value });
+      }
+    }
+
+    this.props.saveCustomFormatSpecification();
+  };
+
+  parseFields = (fields, schema) => {
+    for (const [key, value] of Object.entries(fields)) {
+      const field = _.find(schema.fields, { name: key });
+      if (!field) {
+        throw new Error(`Unknown option '${key}' for condition '${schema.implementationName}'`);
+      }
+
+      this.props.setCustomFormatSpecificationFieldValue({ name: key, value });
+    }
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportCustomFormatModalContent
+        {...this.props}
+        onImportPress={this.onImportPress}
+      />
+    );
+  }
+}
+
+ImportCustomFormatModalContentConnector.propTypes = {
+  specificationSchema: PropTypes.arrayOf(PropTypes.object).isRequired,
+  clearPendingChanges: PropTypes.func.isRequired,
+  deleteAllCustomFormatSpecification: PropTypes.func.isRequired,
+  clearCustomFormatSpecificationPending: PropTypes.func.isRequired,
+  saveCustomFormatSpecification: PropTypes.func.isRequired,
+  fetchCustomFormatSpecificationSchema: PropTypes.func.isRequired,
+  selectCustomFormatSpecificationSchema: PropTypes.func.isRequired,
+  setCustomFormatSpecificationValue: PropTypes.func.isRequired,
+  setCustomFormatSpecificationFieldValue: PropTypes.func.isRequired,
+  setCustomFormatValue: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ImportCustomFormatModalContentConnector);

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationItem.css

@@ -0,0 +1,44 @@
+.specification {
+  composes: card from '~Components/Card.css';
+
+  position: relative;
+  width: 300px;
+  height: 100px;
+}
+
+.underlay {
+  @add-mixin cover;
+}
+
+.overlay {
+  @add-mixin linkOverlay;
+
+  padding: 10px;
+}
+
+.name {
+  text-align: center;
+  font-weight: lighter;
+  font-size: 24px;
+}
+
+.actions {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.presetsMenu {
+  composes: menu from '~Components/Menu/Menu.css';
+
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.presetsMenuButton {
+  composes: button from '~Components/Link/Button.css';
+
+  &::after {
+    margin-left: 5px;
+    content: '\25BE';
+  }
+}

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationItem.js

@@ -0,0 +1,110 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import Menu from 'Components/Menu/Menu';
+import MenuContent from 'Components/Menu/MenuContent';
+import { sizes } from 'Helpers/Props';
+import AddSpecificationPresetMenuItem from './AddSpecificationPresetMenuItem';
+import styles from './AddSpecificationItem.css';
+
+class AddSpecificationItem extends Component {
+
+  //
+  // Listeners
+
+  onSpecificationSelect = () => {
+    const {
+      implementation
+    } = this.props;
+
+    this.props.onSpecificationSelect({ implementation });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      implementation,
+      implementationName,
+      infoLink,
+      presets,
+      onSpecificationSelect
+    } = this.props;
+
+    const hasPresets = !!presets && !!presets.length;
+
+    return (
+      <div
+        className={styles.specification}
+      >
+        <Link
+          className={styles.underlay}
+          onPress={this.onSpecificationSelect}
+        />
+
+        <div className={styles.overlay}>
+          <div className={styles.name}>
+            {implementationName}
+          </div>
+
+          <div className={styles.actions}>
+            {
+              hasPresets &&
+                <span>
+                  <Button
+                    size={sizes.SMALL}
+                    onPress={this.onSpecificationSelect}
+                  >
+                    Custom
+                  </Button>
+
+                  <Menu className={styles.presetsMenu}>
+                    <Button
+                      className={styles.presetsMenuButton}
+                      size={sizes.SMALL}
+                    >
+                      Presets
+                    </Button>
+
+                    <MenuContent>
+                      {
+                        presets.map((preset, index) => {
+                          return (
+                            <AddSpecificationPresetMenuItem
+                              key={index}
+                              name={preset.name}
+                              implementation={implementation}
+                              onPress={onSpecificationSelect}
+                            />
+                          );
+                        })
+                      }
+                    </MenuContent>
+                  </Menu>
+                </span>
+            }
+
+            <Button
+              to={infoLink}
+              size={sizes.SMALL}
+            >
+              More Info
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+AddSpecificationItem.propTypes = {
+  implementation: PropTypes.string.isRequired,
+  implementationName: PropTypes.string.isRequired,
+  infoLink: PropTypes.string.isRequired,
+  presets: PropTypes.arrayOf(PropTypes.object),
+  onSpecificationSelect: PropTypes.func.isRequired
+};
+
+export default AddSpecificationItem;

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationModal.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AddSpecificationModalContentConnector from './AddSpecificationModalContentConnector';
+
+function AddSpecificationModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <AddSpecificationModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AddSpecificationModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddSpecificationModal;

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationModalContent.css

@@ -0,0 +1,5 @@
+.specifications {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationModalContent.js

@@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { kinds } from 'Helpers/Props';
+import AddSpecificationItem from './AddSpecificationItem';
+import styles from './AddSpecificationModalContent.css';
+
+class AddSpecificationModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isSchemaFetching,
+      isSchemaPopulated,
+      schemaError,
+      schema,
+      onSpecificationSelect,
+      onModalClose
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Add Condition
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            isSchemaFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isSchemaFetching && !!schemaError &&
+              <div>
+                {'Unable to add a new condition, please try again.'}
+              </div>
+          }
+
+          {
+            isSchemaPopulated && !schemaError &&
+              <div>
+
+                <Alert kind={kinds.INFO}>
+                  <div>
+                    {'Readarr supports custom conditions against the release properties below.'}
+                  </div>
+                  <div>
+                    {'Visit the wiki for more details: '}
+                    <Link to="https://wiki.servarr.com/readarr/settings#custom-formats-2">{'Wiki'}</Link>
+                  </div>
+                </Alert>
+
+                <div className={styles.specifications}>
+                  {
+                    schema.map((specification) => {
+                      return (
+                        <AddSpecificationItem
+                          key={specification.implementation}
+                          {...specification}
+                          onSpecificationSelect={onSpecificationSelect}
+                        />
+                      );
+                    })
+                  }
+                </div>
+
+              </div>
+          }
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddSpecificationModalContent.propTypes = {
+  isSchemaFetching: PropTypes.bool.isRequired,
+  isSchemaPopulated: PropTypes.bool.isRequired,
+  schemaError: PropTypes.object,
+  schema: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSpecificationSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddSpecificationModalContent;

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationModalContentConnector.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchCustomFormatSpecificationSchema, selectCustomFormatSpecificationSchema } from 'Store/Actions/settingsActions';
+import AddSpecificationModalContent from './AddSpecificationModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.customFormatSpecifications,
+    (specifications) => {
+      const {
+        isSchemaFetching,
+        isSchemaPopulated,
+        schemaError,
+        schema
+      } = specifications;
+
+      return {
+        isSchemaFetching,
+        isSchemaPopulated,
+        schemaError,
+        schema
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchCustomFormatSpecificationSchema,
+  selectCustomFormatSpecificationSchema
+};
+
+class AddSpecificationModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchCustomFormatSpecificationSchema();
+  }
+
+  //
+  // Listeners
+
+  onSpecificationSelect = ({ implementation, name }) => {
+    this.props.selectCustomFormatSpecificationSchema({ implementation, presetName: name });
+    this.props.onModalClose({ specificationSelected: true });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddSpecificationModalContent
+        {...this.props}
+        onSpecificationSelect={this.onSpecificationSelect}
+      />
+    );
+  }
+}
+
+AddSpecificationModalContentConnector.propTypes = {
+  fetchCustomFormatSpecificationSchema: PropTypes.func.isRequired,
+  selectCustomFormatSpecificationSchema: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddSpecificationModalContentConnector);

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/AddSpecificationPresetMenuItem.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import MenuItem from 'Components/Menu/MenuItem';
+
+class AddSpecificationPresetMenuItem extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    const {
+      name,
+      implementation
+    } = this.props;
+
+    this.props.onPress({
+      name,
+      implementation
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      name,
+      implementation,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <MenuItem
+        {...otherProps}
+        onPress={this.onPress}
+      >
+        {name}
+      </MenuItem>
+    );
+  }
+}
+
+AddSpecificationPresetMenuItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  implementation: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+};
+
+export default AddSpecificationPresetMenuItem;

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/EditSpecificationModal.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import EditSpecificationModalContentConnector from './EditSpecificationModalContentConnector';
+
+function EditSpecificationModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      size={sizes.MEDIUM}
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <EditSpecificationModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+EditSpecificationModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditSpecificationModal;

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/EditSpecificationModalConnector.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditSpecificationModal from './EditSpecificationModal';
+
+function createMapDispatchToProps(dispatch, props) {
+  const section = 'settings.customFormatSpecifications';
+
+  return {
+    dispatchClearPendingChanges() {
+      dispatch(clearPendingChanges({ section }));
+    }
+  };
+}
+
+class EditSpecificationModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.dispatchClearPendingChanges();
+    this.props.onModalClose();
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      dispatchClearPendingChanges,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <EditSpecificationModal
+        {...otherProps}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditSpecificationModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  dispatchClearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(null, createMapDispatchToProps)(EditSpecificationModalConnector);

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/EditSpecificationModalContent.css

@@ -0,0 +1,5 @@
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: auto;
+}

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/EditSpecificationModalContent.js

@@ -0,0 +1,160 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Alert from 'Components/Alert';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds } from 'Helpers/Props';
+import styles from './EditSpecificationModalContent.css';
+
+function EditSpecificationModalContent(props) {
+  const {
+    advancedSettings,
+    item,
+    onInputChange,
+    onFieldChange,
+    onCancelPress,
+    onSavePress,
+    onDeleteSpecificationPress,
+    ...otherProps
+  } = props;
+
+  const {
+    id,
+    implementationName,
+    name,
+    negate,
+    required,
+    fields
+  } = item;
+
+  return (
+    <ModalContent onModalClose={onCancelPress}>
+      <ModalHeader>
+        {`${id ? 'Edit' : 'Add'} Condition - ${implementationName}`}
+      </ModalHeader>
+
+      <ModalBody>
+        <Form
+          {...otherProps}
+        >
+          {
+            fields && fields.some((x) => x.label === 'Regular Expression') &&
+              <Alert kind={kinds.INFO}>
+                <div>
+                  <div dangerouslySetInnerHTML={{ __html: 'This condition matches using Regular Expressions. Note that the characters <code>\\^$.|?*+()[{</code> have special meanings and need escaping with a <code>\\</code>' }} />
+                  {'More details'} <Link to="https://www.regular-expressions.info/tutorial.html">{'Here'}</Link>
+                </div>
+                <div>
+                  {'Regular expressions can be tested '}
+                  <Link to="http://regexstorm.net/tester">Here</Link>
+                </div>
+              </Alert>
+          }
+
+          <FormGroup>
+            <FormLabel>
+              Name
+            </FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.TEXT}
+              name="name"
+              {...name}
+              onChange={onInputChange}
+            />
+          </FormGroup>
+
+          {
+            fields && fields.map((field) => {
+              return (
+                <ProviderFieldFormGroup
+                  key={field.name}
+                  advancedSettings={advancedSettings}
+                  provider="specifications"
+                  providerData={item}
+                  {...field}
+                  onChange={onFieldChange}
+                />
+              );
+            })
+          }
+
+          <FormGroup>
+            <FormLabel>
+              Negate
+            </FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="negate"
+              {...negate}
+              helpText={`If checked, the custom format will not apply if this ${implementationName} condition matches.`}
+              onChange={onInputChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>
+              Required
+            </FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="required"
+              {...required}
+              helpText={`This ${implementationName} condition must match for the custom format to apply.  Otherwise a single ${implementationName} match is sufficient.`}
+              onChange={onInputChange}
+            />
+          </FormGroup>
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        {
+          id &&
+            <Button
+              className={styles.deleteButton}
+              kind={kinds.DANGER}
+              onPress={onDeleteSpecificationPress}
+            >
+              Delete
+            </Button>
+        }
+
+        <Button
+          onPress={onCancelPress}
+        >
+          Cancel
+        </Button>
+
+        <SpinnerErrorButton
+          isSpinning={false}
+          onPress={onSavePress}
+        >
+          Save
+        </SpinnerErrorButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+EditSpecificationModalContent.propTypes = {
+  advancedSettings: PropTypes.bool.isRequired,
+  item: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onFieldChange: PropTypes.func.isRequired,
+  onCancelPress: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onDeleteSpecificationPress: PropTypes.func
+};
+
+export default EditSpecificationModalContent;

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/EditSpecificationModalContentConnector.js

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearCustomFormatSpecificationPending, saveCustomFormatSpecification, setCustomFormatSpecificationFieldValue, setCustomFormatSpecificationValue } from 'Store/Actions/settingsActions';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import EditSpecificationModalContent from './EditSpecificationModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    createProviderSettingsSelector('customFormatSpecifications'),
+    (advancedSettings, specification) => {
+      return {
+        advancedSettings,
+        ...specification
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setCustomFormatSpecificationValue,
+  setCustomFormatSpecificationFieldValue,
+  saveCustomFormatSpecification,
+  clearCustomFormatSpecificationPending
+};
+
+class EditSpecificationModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setCustomFormatSpecificationValue({ name, value });
+  };
+
+  onFieldChange = ({ name, value }) => {
+    this.props.setCustomFormatSpecificationFieldValue({ name, value });
+  };
+
+  onCancelPress = () => {
+    this.props.clearCustomFormatSpecificationPending();
+    this.props.onModalClose();
+  };
+
+  onSavePress = () => {
+    this.props.saveCustomFormatSpecification({ id: this.props.id });
+    this.props.onModalClose();
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditSpecificationModalContent
+        {...this.props}
+        onCancelPress={this.onCancelPress}
+        onSavePress={this.onSavePress}
+        onInputChange={this.onInputChange}
+        onFieldChange={this.onFieldChange}
+      />
+    );
+  }
+}
+
+EditSpecificationModalContentConnector.propTypes = {
+  id: PropTypes.number,
+  item: PropTypes.object.isRequired,
+  setCustomFormatSpecificationValue: PropTypes.func.isRequired,
+  setCustomFormatSpecificationFieldValue: PropTypes.func.isRequired,
+  clearCustomFormatSpecificationPending: PropTypes.func.isRequired,
+  saveCustomFormatSpecification: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(EditSpecificationModalContentConnector);

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/Specification.css

@@ -0,0 +1,38 @@
+.customFormat {
+  composes: card from '~Components/Card.css';
+
+  width: 300px;
+}
+
+.nameContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.name {
+  @add-mixin truncate;
+
+  margin-bottom: 20px;
+  font-weight: 300;
+  font-size: 24px;
+}
+
+.cloneButton {
+  composes: button from '~Components/Link/IconButton.css';
+
+  height: 36px;
+}
+
+.labels {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 5px;
+  pointer-events: all;
+}
+
+.tooltipLabel {
+  composes: label from '~Components/Label.css';
+
+  margin: 0;
+  border: none;
+}

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/Specification.js

@@ -0,0 +1,139 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import { icons, kinds } from 'Helpers/Props';
+import EditSpecificationModalConnector from './EditSpecificationModal';
+import styles from './Specification.css';
+
+class Specification extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditSpecificationModalOpen: false,
+      isDeleteSpecificationModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditSpecificationPress = () => {
+    this.setState({ isEditSpecificationModalOpen: true });
+  };
+
+  onEditSpecificationModalClose = () => {
+    this.setState({ isEditSpecificationModalOpen: false });
+  };
+
+  onDeleteSpecificationPress = () => {
+    this.setState({
+      isEditSpecificationModalOpen: false,
+      isDeleteSpecificationModalOpen: true
+    });
+  };
+
+  onDeleteSpecificationModalClose = () => {
+    this.setState({ isDeleteSpecificationModalOpen: false });
+  };
+
+  onCloneSpecificationPress = () => {
+    this.props.onCloneSpecificationPress(this.props.id);
+  };
+
+  onConfirmDeleteSpecification = () => {
+    this.props.onConfirmDeleteSpecification(this.props.id);
+  };
+
+  //
+  // Lifecycle
+
+  render() {
+    const {
+      id,
+      implementationName,
+      name,
+      required,
+      negate
+    } = this.props;
+
+    return (
+      <Card
+        className={styles.customFormat}
+        overlayContent={true}
+        onPress={this.onEditSpecificationPress}
+      >
+        <div className={styles.nameContainer}>
+          <div className={styles.name}>
+            {name}
+          </div>
+
+          <IconButton
+            className={styles.cloneButton}
+            title="Clone"
+            name={icons.CLONE}
+            onPress={this.onCloneSpecificationPress}
+          />
+        </div>
+
+        <div className={styles.labels}>
+          <Label kind={kinds.DEFAULT}>
+            {implementationName}
+          </Label>
+
+          {
+            negate &&
+              <Label kind={kinds.DANGER}>
+                Negated
+              </Label>
+          }
+
+          {
+            required &&
+              <Label kind={kinds.SUCCESS}>
+                Required
+              </Label>
+          }
+        </div>
+
+        <EditSpecificationModalConnector
+          id={id}
+          isOpen={this.state.isEditSpecificationModalOpen}
+          onModalClose={this.onEditSpecificationModalClose}
+          onDeleteSpecificationPress={this.onDeleteSpecificationPress}
+        />
+
+        <ConfirmModal
+          isOpen={this.state.isDeleteSpecificationModalOpen}
+          kind={kinds.DANGER}
+          title="Delete Format"
+          message={`Are you sure you want to delete format tag ${name} ?`}
+          confirmLabel="Delete"
+          onConfirm={this.onConfirmDeleteSpecification}
+          onCancel={this.onDeleteSpecificationModalClose}
+        />
+      </Card>
+    );
+  }
+}
+
+Specification.propTypes = {
+  id: PropTypes.number.isRequired,
+  implementation: PropTypes.string.isRequired,
+  implementationName: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  negate: PropTypes.bool.isRequired,
+  required: PropTypes.bool.isRequired,
+  fields: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onConfirmDeleteSpecification: PropTypes.func.isRequired,
+  onCloneSpecificationPress: PropTypes.func.isRequired
+};
+
+export default Specification;