diff --git a/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.css b/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.css index 030da96fb..7c0dbc2aa 100644 --- a/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.css +++ b/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.css @@ -30,3 +30,9 @@ .importButtonIcon { margin-right: 8px; } + +.addErrorAlert { + composes: alert from '~Components/Alert.css'; + + margin: 20px 0; +} diff --git a/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js b/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js index d2086f4a1..e88bd345e 100644 --- a/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js +++ b/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { icons, kinds, sizes } from 'Helpers/Props'; import Button from 'Components/Link/Button'; +import Alert from 'Components/Alert'; import Icon from 'Components/Icon'; import FieldSet from 'Components/FieldSet'; import LoadingIndicator from 'Components/Loading/LoadingIndicator'; @@ -47,21 +48,27 @@ class ImportSeriesSelectFolder extends Component { isWindows, isFetching, isPopulated, + isSaving, error, + saveError, items } = this.props; + const hasRootFolders = items.length > 0; + return ( { - isFetching && !isPopulated && - + isFetching && !isPopulated ? + : + null } { - !isFetching && !!error && -
Unable to load root folders
+ !isFetching && error ? +
Unable to load root folders
: + null } { @@ -87,7 +94,7 @@ class ImportSeriesSelectFolder extends Component { { - items.length > 0 ? + hasRootFolders ?
- -
: - -
- -
+ null } + { + !isSaving && saveError ? + + Unable to add root folder + +
    + { + saveError.responseJSON.map((e, index) => { + return ( +
  • + {e.errorMessage} +
  • + ); + }) + } +
+
: + null + } + +
+ +
+