From 718cf91286c18df883f1e619d53749db1d802a28 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 22 Mar 2023 13:56:28 +0100
Subject: [PATCH 1/2] chore(website): correct design issues in error viewer

---
 .../src/components/ErrorsViewer.module.css    |  8 +++
 .../website/src/components/ErrorsViewer.tsx   | 55 +++++++------------
 .../src/components/layout/AlertBlock.tsx      | 16 ++++++
 3 files changed, 43 insertions(+), 36 deletions(-)
 create mode 100644 packages/website/src/components/layout/AlertBlock.tsx

diff --git a/packages/website/src/components/ErrorsViewer.module.css b/packages/website/src/components/ErrorsViewer.module.css
index 0c227bbb4c82..4cfc2e15d18c 100644
--- a/packages/website/src/components/ErrorsViewer.module.css
+++ b/packages/website/src/components/ErrorsViewer.module.css
@@ -22,3 +22,11 @@
 .fixer {
   margin: 0.5rem 0 0.5rem 1.5rem;
 }
+
+.errorPre {
+  background: transparent;
+  margin: 0;
+  padding: 0;
+  white-space: break-spaces;
+  word-wrap: break-word;
+}
diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
index b60d2dd97118..a0fd4e315db6 100644
--- a/packages/website/src/components/ErrorsViewer.tsx
+++ b/packages/website/src/components/ErrorsViewer.tsx
@@ -5,6 +5,8 @@ import type Monaco from 'monaco-editor';
 import React, { useEffect, useState } from 'react';
 
 import styles from './ErrorsViewer.module.css';
+import type { AlertBlockProps } from './layout/AlertBlock';
+import AlertBlock from './layout/AlertBlock';
 import type { ErrorGroup, ErrorItem } from './types';
 
 export interface ErrorsViewerProps {
@@ -17,13 +19,7 @@ export interface ErrorViewerProps {
   readonly type: AlertBlockProps['type'];
 }
 
-interface AlertBlockProps {
-  readonly type: 'danger' | 'warning' | 'note' | 'info' | 'success';
-  readonly children: React.ReactNode;
-  readonly fixer?: boolean;
-}
-
-interface ErrorBlockProps {
+export interface ErrorBlockProps {
   readonly item: ErrorItem;
   readonly setIsLocked: (value: boolean) => void;
   readonly isLocked: boolean;
@@ -64,14 +60,6 @@ function FixButton(props: FixButtonProps): JSX.Element {
   );
 }
 
-function AlertBlock(props: AlertBlockProps): JSX.Element {
-  return (
-    <div className={`admonition alert alert--${props.type}`}>
-      <div className="admonition-content">{props.children}</div>
-    </div>
-  );
-}
-
 function ErrorBlock({
   item,
   setIsLocked,
@@ -80,9 +68,9 @@ function ErrorBlock({
   return (
     <AlertBlock type={severityClass(item.severity)}>
       <div className={clsx(!!item.fixer && styles.fixerContainer)}>
-        <div>
+        <pre className={styles.errorPre}>
           {item.message} {item.location}
-        </div>
+        </pre>
         {item.fixer && (
           <FixButton
             disabled={isLocked}
@@ -95,7 +83,7 @@ function ErrorBlock({
         <div>
           {item.suggestions.map((fixer, index) => (
             <div
-              key={index}
+              key={String(index)}
               className={clsx(styles.fixerContainer, styles.fixer)}
             >
               <span>&gt; {fixer.message}</span>
@@ -112,16 +100,6 @@ function ErrorBlock({
   );
 }
 
-function SuccessBlock(): JSX.Element {
-  return (
-    <AlertBlock type="success">
-      <div className={styles.fixerContainer}>
-        <div>All is ok!</div>
-      </div>
-    </AlertBlock>
-  );
-}
-
 export function ErrorViewer({
   value,
   title,
@@ -134,7 +112,9 @@ export function ErrorViewer({
           <div className={styles.fixerContainer}>
             <h4>{title}</h4>
           </div>
-          {type === 'danger' ? value.stack : value.message}
+          <pre className={styles.errorPre}>
+            {type === 'danger' ? value?.stack : value.message}
+          </pre>
         </AlertBlock>
       </div>
     </div>
@@ -170,19 +150,22 @@ export function ErrorsViewer({ value }: ErrorsViewerProps): JSX.Element {
                 )}
               </h4>
               {items.map((item, index) => (
-                <ErrorBlock
-                  isLocked={isLocked}
-                  setIsLocked={setIsLocked}
-                  item={item}
-                  key={index}
-                />
+                <div className="margin-bottom--sm" key={String(index)}>
+                  <ErrorBlock
+                    isLocked={isLocked}
+                    setIsLocked={setIsLocked}
+                    item={item}
+                  />
+                </div>
               ))}
             </div>
           );
         })
       ) : (
         <div className="margin-top--md">
-          <SuccessBlock />
+          <AlertBlock type="success">
+            <div>All is ok!</div>
+          </AlertBlock>
         </div>
       )}
     </div>
diff --git a/packages/website/src/components/layout/AlertBlock.tsx b/packages/website/src/components/layout/AlertBlock.tsx
new file mode 100644
index 000000000000..adfa071acdd8
--- /dev/null
+++ b/packages/website/src/components/layout/AlertBlock.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export interface AlertBlockProps {
+  readonly type: 'success' | 'info' | 'note' | 'warning' | 'danger';
+  readonly children: React.ReactNode;
+}
+
+function AlertBlock(props: AlertBlockProps): JSX.Element {
+  return (
+    <div className={`admonition alert alert--${props.type}`}>
+      <div className="admonition-content">{props.children}</div>
+    </div>
+  );
+}
+
+export default AlertBlock;

From 613ff120d10150cc2882606053bcaebe778bf920 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 22 Mar 2023 19:43:34 +0100
Subject: [PATCH 2/2] fix: remove unnecessary string cast

---
 packages/website/src/components/ErrorsViewer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
index a0fd4e315db6..018bcd49abe2 100644
--- a/packages/website/src/components/ErrorsViewer.tsx
+++ b/packages/website/src/components/ErrorsViewer.tsx
@@ -83,7 +83,7 @@ function ErrorBlock({
         <div>
           {item.suggestions.map((fixer, index) => (
             <div
-              key={String(index)}
+              key={index}
               className={clsx(styles.fixerContainer, styles.fixer)}
             >
               <span>&gt; {fixer.message}</span>
@@ -150,7 +150,7 @@ export function ErrorsViewer({ value }: ErrorsViewerProps): JSX.Element {
                 )}
               </h4>
               {items.map((item, index) => (
-                <div className="margin-bottom--sm" key={String(index)}>
+                <div className="margin-bottom--sm" key={index}>
                   <ErrorBlock
                     isLocked={isLocked}
                     setIsLocked={setIsLocked}