From 10eb646ae987bc0f8e7233d448c20d61cac17dd7 Mon Sep 17 00:00:00 2001
From: Frank Niessink <frank@niessink.com>
Date: Tue, 21 Jan 2025 15:59:23 +0100
Subject: [PATCH] Fix issue tracker error message being too narrow and remove
 duplication between ErrorMessage and WarningMessage components.

No GitHub issue because this issue was not released yet.
---
 components/frontend/src/issue/IssuesRows.js   | 24 +++++++++++--------
 components/frontend/src/source/Source.js      | 24 +++++++++++++++----
 .../frontend/src/widgets/ErrorMessage.js      | 23 ------------------
 .../frontend/src/widgets/WarningMessage.js    |  5 ++--
 4 files changed, 37 insertions(+), 39 deletions(-)
 delete mode 100644 components/frontend/src/widgets/ErrorMessage.js

diff --git a/components/frontend/src/issue/IssuesRows.js b/components/frontend/src/issue/IssuesRows.js
index 98250191a8..cf787a2414 100644
--- a/components/frontend/src/issue/IssuesRows.js
+++ b/components/frontend/src/issue/IssuesRows.js
@@ -9,9 +9,9 @@ import { MultipleChoiceField } from "../fields/MultipleChoiceField"
 import { metricPropType, reportPropType } from "../sharedPropTypes"
 import { getMetricIssueIds } from "../utils"
 import { ActionButton } from "../widgets/buttons/ActionButton"
-import { ErrorMessage } from "../widgets/ErrorMessage"
 import { AddItemIcon } from "../widgets/icons"
 import { showMessage } from "../widgets/toast"
+import { WarningMessage } from "../widgets/WarningMessage"
 
 function CreateIssueButton({ issueTrackerConfigured, issueTrackerInstruction, metric_uuid, target, reload }) {
     const permissions = useContext(Permissions)
@@ -106,7 +106,7 @@ export function IssuesRows({ metric, metric_uuid, reload, report, target }) {
     }
     return (
         <>
-            <Grid size={{ xs: 1, sm: 1, md: "auto" }}>
+            <Grid size={{ xs: 1, sm: "auto", md: "auto" }}>
                 <CreateIssueButton
                     issueTrackerConfigured={issueTrackerConfigured}
                     issueTrackerInstruction={issueTrackerInstruction}
@@ -115,34 +115,38 @@ export function IssuesRows({ metric, metric_uuid, reload, report, target }) {
                     reload={reload}
                 />
             </Grid>
-            <Grid size={{ xs: 1, sm: 2, md: "grow" }}>
+            <Grid size={{ xs: 1, sm: "grow", md: "grow" }}>
                 <IssueIdentifiers {...issueIdentifiersProps} />
             </Grid>
             {getMetricIssueIds(metric).length > 0 && !issueTrackerConfigured && (
                 <Grid size={{ xs: 1, sm: 3, md: 6 }}>
-                    <ErrorMessage title="No issue tracker configured" message={issueTrackerInstruction} />
+                    <WarningMessage title="No issue tracker configured">{issueTrackerInstruction}</WarningMessage>
                 </Grid>
             )}
             {(metric.issue_status ?? [])
                 .filter((issue_status) => issue_status.connection_error)
                 .map((issue_status) => (
                     <Grid key={issue_status.issue_id} size={{ xs: 1, sm: 3, md: 6 }}>
-                        <ErrorMessage
+                        <WarningMessage
                             key={issue_status.issue_id}
+                            pre
                             title={"Connection error while retrieving " + issue_status.issue_id}
-                            message={issue_status.connection_error}
-                        />
+                        >
+                            {issue_status.connection_error}
+                        </WarningMessage>
                     </Grid>
                 ))}
             {(metric.issue_status ?? [])
                 .filter((issue_status) => issue_status.parse_error)
                 .map((issue_status) => (
                     <Grid key={issue_status.issue_id} size={{ xs: 1, sm: 3, md: 6 }}>
-                        <ErrorMessage
+                        <WarningMessage
                             key={issue_status.issue_id}
+                            pre
                             title={"Parse error while processing " + issue_status.issue_id}
-                            message={issue_status.parse_error}
-                        />
+                        >
+                            {issue_status.parse_error}
+                        </WarningMessage>
                     </Grid>
                 ))}
         </>
diff --git a/components/frontend/src/source/Source.js b/components/frontend/src/source/Source.js
index 3f9e8c65a8..b1580d2d84 100644
--- a/components/frontend/src/source/Source.js
+++ b/components/frontend/src/source/Source.js
@@ -20,9 +20,9 @@ import { getMetricName, getSourceName, referenceDocumentationURL } from "../util
 import { ButtonRow } from "../widgets/ButtonRow"
 import { DeleteButton } from "../widgets/buttons/DeleteButton"
 import { ReorderButtonGroup } from "../widgets/buttons/ReorderButtonGroup"
-import { ErrorMessage } from "../widgets/ErrorMessage"
 import { HyperLink } from "../widgets/HyperLink"
 import { Tabs } from "../widgets/Tabs"
+import { WarningMessage } from "../widgets/WarningMessage"
 import { SourceParameters } from "./SourceParameters"
 import { SourceType } from "./SourceType"
 
@@ -104,9 +104,25 @@ function Parameters({
                     source_uuid={source_uuid}
                 />
             </Grid>
-            {connection_error && <ErrorMessage title="Connection error" message={connection_error} />}
-            {parse_error && <ErrorMessage title="Parse error" message={parse_error} />}
-            {config_error && <ErrorMessage title="Configuration error" message={config_error} formatAsText={true} />}
+            {connection_error && (
+                <Grid size={{ xs: 1, sm: 2, md: 2 }}>
+                    <WarningMessage pre title="Connection error">
+                        {connection_error}
+                    </WarningMessage>
+                </Grid>
+            )}
+            {parse_error && (
+                <Grid size={{ xs: 1, sm: 2, md: 2 }}>
+                    <WarningMessage pre title="Parse error">
+                        {parse_error}
+                    </WarningMessage>
+                </Grid>
+            )}
+            {config_error && (
+                <Grid size={{ xs: 1, sm: 2, md: 2 }}>
+                    <WarningMessage title="Configuration error">{config_error}</WarningMessage>
+                </Grid>
+            )}
         </Grid>
     )
 }
diff --git a/components/frontend/src/widgets/ErrorMessage.js b/components/frontend/src/widgets/ErrorMessage.js
deleted file mode 100644
index 02e03bc64a..0000000000
--- a/components/frontend/src/widgets/ErrorMessage.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Grid from "@mui/material/Grid2"
-import { bool, object, oneOfType, string } from "prop-types"
-
-import { WarningMessage } from "./WarningMessage"
-
-export function ErrorMessage({ formatAsText, message, title }) {
-    return (
-        <Grid size={{ xs: 1, sm: 2, md: 2 }}>
-            <WarningMessage title={title}>
-                {formatAsText ? (
-                    message
-                ) : (
-                    <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-all" }}>{message}</pre>
-                )}
-            </WarningMessage>
-        </Grid>
-    )
-}
-ErrorMessage.propTypes = {
-    formatAsText: bool,
-    message: oneOfType([object, string]),
-    title: string,
-}
diff --git a/components/frontend/src/widgets/WarningMessage.js b/components/frontend/src/widgets/WarningMessage.js
index 18de1cfe31..4520675be2 100644
--- a/components/frontend/src/widgets/WarningMessage.js
+++ b/components/frontend/src/widgets/WarningMessage.js
@@ -3,17 +3,18 @@ import { bool, string } from "prop-types"
 
 import { childrenPropType } from "../sharedPropTypes"
 
-export function WarningMessage({ children, title, showIf }) {
+export function WarningMessage({ children, pre, showIf, title }) {
     // Show a warning message if showIf is true or undefined
     return (showIf ?? true) ? (
         <Alert severity="warning">
             <AlertTitle>{title}</AlertTitle>
-            {children}
+            {pre ? <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-all" }}>{children}</pre> : children}
         </Alert>
     ) : null
 }
 WarningMessage.propTypes = {
     children: childrenPropType,
+    pre: bool,
     showIf: bool,
     title: string,
 }