From a975c9ee73057b30d2c33fddbd846d868816eee7 Mon Sep 17 00:00:00 2001 From: Jelena Date: Fri, 24 Jul 2020 18:41:28 +0000 Subject: [PATCH] Better surfacing of invalid files in a release in the UI --- .../src/components/apps/AppVersionHistory.jsx | 60 ++++++++++++++----- .../components/modals/ShowDetailsModal.jsx | 55 +++++++++++++++++ kotsadm/web/src/images/main_spritesheet.svg | 20 ++++++- .../AppVersionHistory.scss} | 0 kotsadm/web/src/scss/utilities/icons.scss | 5 ++ 5 files changed, 121 insertions(+), 19 deletions(-) create mode 100644 kotsadm/web/src/components/modals/ShowDetailsModal.jsx rename kotsadm/web/src/scss/components/{watches/WatchVersionHistory.scss => apps/AppVersionHistory.scss} (100%) diff --git a/kotsadm/web/src/components/apps/AppVersionHistory.jsx b/kotsadm/web/src/components/apps/AppVersionHistory.jsx index dbce4458b3..38094edbd9 100644 --- a/kotsadm/web/src/components/apps/AppVersionHistory.jsx +++ b/kotsadm/web/src/components/apps/AppVersionHistory.jsx @@ -18,13 +18,14 @@ import MarkdownRenderer from "@src/components/shared/MarkdownRenderer"; import DownstreamWatchVersionDiff from "@src/components/watches/DownstreamWatchVersionDiff"; import AirgapUploadProgress from "@src/components/AirgapUploadProgress"; import UpdateCheckerModal from "@src/components/modals/UpdateCheckerModal"; +import ShowDetailsModal from "@src/components/modals/ShowDetailsModal"; import { getKotsDownstreamHistory, getKotsDownstreamOutput, getUpdateDownloadStatus } from "../../queries/AppsQueries"; import { Utilities, isAwaitingResults, secondsAgo, getPreflightResultState, getGitProviderDiffUrl, getCommitHashFromUrl } from "../../utilities/utilities"; import { Repeater } from "../../utilities/repeater"; import has from "lodash/has"; import get from "lodash/get"; -import "@src/scss/components/watches/WatchVersionHistory.scss"; +import "@src/scss/components/apps/AppVersionHistory.scss"; dayjs.extend(relativeTime); const COMMON_ERRORS = { @@ -57,7 +58,10 @@ class AppVersionHistory extends Component { updateChecker: new Repeater(), uploadTotal: 0, uploadSent: 0, - showUpdateCheckerModal: false + showUpdateCheckerModal: false, + displayShowDetailsModal: false, + yamlErrorDetails: [], + deployView: false } componentDidMount() { @@ -138,10 +142,9 @@ class AppVersionHistory extends Component { renderSourceAndDiff = version => { const { app } = this.props; - const downstream = app.downstreams[0]; + const downstream = app.downstreams?.length && app.downstreams[0]; const diffSummary = this.getVersionDiffSummary(version); - let hasYamlErrors = this.hasYamlErrors(downstream, version); - hasYamlErrors = false; + const yamlErrorsDetails = this.yamlErrorsDetails(downstream, version); return (
@@ -163,26 +166,26 @@ class AppVersionHistory extends Component { +{diffSummary.linesAdded} -{diffSummary.linesRemoved}
- : hasYamlErrors ? + : yamlErrorsDetails ?
No changes
- Contains invalid yaml - + {yamlErrorsDetails?.length} Invalid files + this.toggleShowDetailsModal(yamlErrorsDetails)}> See details
:
No changes
- ) : hasYamlErrors ? + ) : yamlErrorsDetails ?
- Contains invalid yaml - + {yamlErrorsDetails?.length} Invalid files + this.toggleShowDetailsModal(yamlErrorsDetails)}> See details
:  } @@ -387,7 +390,18 @@ class AppVersionHistory extends Component { if (!clusterSlug) { return; } + const downstream = app.downstreams?.length && app.downstreams[0]; + const yamlErrorDetails = this.yamlErrorsDetails(downstream, version); + + if (!force) { + if (yamlErrorDetails) { + this.setState({ + displayShowDetailsModal: !this.state.displayShowDetailsModal, + deployView: true, + yamlErrorDetails + }); + } if (version.status === "pending_preflight") { this.setState({ showSkipModal: true, @@ -417,7 +431,7 @@ class AppVersionHistory extends Component { } onForceDeployClick = () => { - this.setState({ showSkipModal: false, showDeployWarningModal: false }); + this.setState({ showSkipModal: false, showDeployWarningModal: false, displayShowDetailsModal: false }); const versionToDeploy = this.state.versionToDeploy; this.deployVersion(versionToDeploy, true); } @@ -745,21 +759,25 @@ class AppVersionHistory extends Component { } } - hasYamlErrors = (downstream, version) => { + yamlErrorsDetails = (downstream, version) => { const pendingVersion = downstream.pendingVersions?.find(v => v.title === version.title); const pastVersion = downstream.pastVersions?.find(v => v.title === version.title); if (downstream.currentVersion?.title === version.title) { - return downstream.currentVersion?.yamlErrors ? true : false; + return downstream.currentVersion?.yamlErrors ? downstream?.currentVersion?.yamlErrors : false; } else if (pendingVersion?.yamlErrors) { - return true; + return pendingVersion?.yamlErrors; } else if (pastVersion?.yamlErrors) { - return true; + return pastVersion?.yamlErrors; } else { return false; } } + toggleShowDetailsModal = (yamlErrorDetails) => { + this.setState({ displayShowDetailsModal: !this.state.displayShowDetailsModal, deployView:false, yamlErrorDetails }); + } + render() { const { app, @@ -1202,6 +1220,16 @@ class AppVersionHistory extends Component { }} /> } + {this.state.displayShowDetailsModal && + } ); } diff --git a/kotsadm/web/src/components/modals/ShowDetailsModal.jsx b/kotsadm/web/src/components/modals/ShowDetailsModal.jsx new file mode 100644 index 0000000000..762eb96345 --- /dev/null +++ b/kotsadm/web/src/components/modals/ShowDetailsModal.jsx @@ -0,0 +1,55 @@ +import React from "react"; +import Modal from "react-modal"; + +export default function ShowDetailsModal(props) { + const { displayShowDetailsModal, toggleShowDetailsModal, yamlErrorDetails, deployView, showDeployWarningModal, showSkipModal, forceDeploy } = props; + + return ( + { toggleShowDetailsModal({}); }} + ariaHideApp={false} + contentLabel="Modal" + className="Modal MediumSize" + > +
+
+

Invalid files in your application

+

+ Your application can be deployed, but the files with the errors will not be included.

+ +
+

The following files contain errors

+ {yamlErrorDetails?.map((err, i) => ( +
+
+ +
+
+ {err.path} + error: {err.error} +
+
+ ) + )} +
+ {deployView ? +
+ + +
+ : +
+ +
} +
+
+ + ); +} \ No newline at end of file diff --git a/kotsadm/web/src/images/main_spritesheet.svg b/kotsadm/web/src/images/main_spritesheet.svg index f38bc661e4..b85ad312c6 100644 --- a/kotsadm/web/src/images/main_spritesheet.svg +++ b/kotsadm/web/src/images/main_spritesheet.svg @@ -1241,13 +1241,13 @@ - + - +