Fix issue tracker error message being too narrow and remove duplicati…

…on between ErrorMessage and WarningMessage components. No GitHub issue because this issue was not released yet.
ICTU · Jan 23, 2025 · dd7ae20 · dd7ae20
1 parent 881aed1
commit dd7ae20
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 39 deletions.
diff --git 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
@@ -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
diff --git 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,
 }