From 18cb469e4f7c752473e7fe76d7d40e40eb8baa31 Mon Sep 17 00:00:00 2001
From: jkozol <jacobdkozol@gmail.com>
Date: Thu, 23 Feb 2023 13:45:00 +0100
Subject: [PATCH] Notifications: display entire error message when image
 compose fails

---
 .../Notifications/Notifications.css           |  3 ---
 src/components/Notifications/Notifications.js | 18 ++++---------
 src/slices/alertsSlice.js                     |  7 +++++
 src/slices/imagesSlice.js                     | 27 +++++++++++--------
 translations/en.json                          |  2 +-
 5 files changed, 29 insertions(+), 28 deletions(-)
 delete mode 100644 src/components/Notifications/Notifications.css

diff --git a/src/components/Notifications/Notifications.css b/src/components/Notifications/Notifications.css
deleted file mode 100644
index bc8a2dcfb..000000000
--- a/src/components/Notifications/Notifications.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.pf-c-alert__title {
-  font-size: 14px;
-}
diff --git a/src/components/Notifications/Notifications.js b/src/components/Notifications/Notifications.js
index 75052e0b5..20868d8d0 100644
--- a/src/components/Notifications/Notifications.js
+++ b/src/components/Notifications/Notifications.js
@@ -10,8 +10,6 @@ import {
 } from "@patternfly/react-core";
 import { selectAllAlerts, removeAlert } from "../../slices/alertsSlice";
 
-import "./Notifications.css";
-
 const Notifications = () => {
   const dispatch = useDispatch();
   const getAlerts = () => useSelector(selectAllAlerts);
@@ -24,7 +22,6 @@ const Notifications = () => {
           case "composeQueued": {
             return (
               <Alert
-                id="alertComposeQueued"
                 key={alert.id}
                 variant="info"
                 title={
@@ -47,7 +44,6 @@ const Notifications = () => {
           case "composeStarted": {
             return (
               <Alert
-                id="alertComposeStarted"
                 key={alert.id}
                 variant="info"
                 title={
@@ -74,7 +70,6 @@ const Notifications = () => {
           case "composeSucceeded": {
             return (
               <Alert
-                id="alertComposeSucceeded"
                 key={alert.id}
                 variant="success"
                 title={
@@ -101,23 +96,20 @@ const Notifications = () => {
           case "composeFailed": {
             return (
               <Alert
-                id="alertComposeFailed"
+                isExpandable
                 key={alert.id}
                 variant="danger"
                 title={
-                  <FormattedMessage
-                    defaultMessage="{blueprint} Image creation failed."
-                    values={{
-                      blueprint: <strong>{alert.blueprintName}:</strong>,
-                    }}
-                  />
+                  <FormattedMessage defaultMessage="Image creation failed." />
                 }
                 actionClose={
                   <AlertActionCloseButton
                     onClose={() => dispatch(removeAlert(alert.id))}
                   />
                 }
-              ></Alert>
+              >
+                <p>{alert.error}</p>
+              </Alert>
             );
           }
           default:
diff --git a/src/slices/alertsSlice.js b/src/slices/alertsSlice.js
index 1de3b4c2b..5a4fcfb35 100644
--- a/src/slices/alertsSlice.js
+++ b/src/slices/alertsSlice.js
@@ -20,6 +20,13 @@ const alertsSlice = createSlice({
         blueprintName: action.payload,
       });
     });
+    builder.addCase("images/create/rejected", (state, action) => {
+      alertsAdapter.addOne(state, {
+        id: uuidv4(),
+        type: "composeFailed",
+        error: action.payload,
+      });
+    });
   },
 });
 
diff --git a/src/slices/imagesSlice.js b/src/slices/imagesSlice.js
index cf40c0f02..8d7537c68 100644
--- a/src/slices/imagesSlice.js
+++ b/src/slices/imagesSlice.js
@@ -30,19 +30,24 @@ export const fetchAllImages = createAsyncThunk("images/fetchAll", async () => {
 
 export const createImage = createAsyncThunk(
   "images/create",
-  async (args, { dispatch }) => {
+  async (args, { dispatch, rejectWithValue }) => {
     const { blueprintName, type, size, ostree, upload } = args;
     const sizeBytes = size * 1024 * 1024 * 1024;
-    const response = await api.createImage(
-      blueprintName,
-      type,
-      sizeBytes,
-      ostree,
-      upload
-    );
-    const imageId = response.build_id;
-    dispatch(fetchImage(imageId));
-    return blueprintName;
+    try {
+      const response = await api.createImage(
+        blueprintName,
+        type,
+        sizeBytes,
+        ostree,
+        upload
+      );
+      const imageId = response.build_id;
+      dispatch(fetchImage(imageId));
+      return blueprintName;
+    } catch (error) {
+      const msg = error?.body?.errors[0]?.msg;
+      return rejectWithValue(msg);
+    }
   }
 );
 
diff --git a/translations/en.json b/translations/en.json
index aa046e4b7..2a1d31411 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -165,6 +165,7 @@
   "hzmswI": "Groups",
   "i0ngz5": "OpenSCAP",
   "idJaPS": "AWS region",
+  "jCoHMn": "Image creation failed.",
   "jPcnu+": "OCI bucket",
   "jvo0vs": "Save",
   "kPQ+0U": "A source with this name already exists.",
@@ -207,7 +208,6 @@
   "uRdfZs": "Upload to GCP",
   "vAPLDS": "Toggle which package list to show",
   "vXCeIi": "Failed",
-  "vr2saa": "{blueprint} Image creation failed.",
   "w2BSgE": "Ignition",
   "wV8yqy": "Stop build",
   "wcW8tX": "Bucket namespace",