From e8e15185889b54502cca9c6ad349b7c5ba8e4e6e Mon Sep 17 00:00:00 2001
From: Svyatoslav Zaytsev <sviatsv@ya.ru>
Date: Tue, 25 Oct 2022 00:00:13 +0300
Subject: [PATCH 1/2] feat(website): Add a happy message to playground output
 pane when no errors or AST (#5868)

---
 .../website/src/components/ErrorsViewer.tsx   | 68 ++++++++++++-------
 1 file changed, 43 insertions(+), 25 deletions(-)

diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
index 3e0a890ee0a6..15ce17a37d42 100644
--- a/packages/website/src/components/ErrorsViewer.tsx
+++ b/packages/website/src/components/ErrorsViewer.tsx
@@ -91,6 +91,18 @@ function ErrorBlock({
   );
 }
 
+function SuccessBlock(): JSX.Element {
+  return (
+    <div className={`admonition alert alert--success`}>
+      <div className="admonition-content">
+        <div className={clsx(styles.fixerContainer)}>
+          <div>There are no errors</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function ErrorsViewer({
   value,
 }: ErrorsViewerProps): JSX.Element {
@@ -113,31 +125,37 @@ export default function ErrorsViewer({
 
   return (
     <div className={styles.list}>
-      {value?.map(({ group, uri, items }) => {
-        return (
-          <div className="margin-top--sm" key={group}>
-            <h4>
-              {group}
-              {uri && (
-                <>
-                  {' - '}
-                  <a href={uri} target="_blank">
-                    docs <IconExternalLink width={13.5} height={13.5} />
-                  </a>
-                </>
-              )}
-            </h4>
-            {items.map((item, index) => (
-              <ErrorBlock
-                isLocked={isLocked}
-                setIsLocked={setIsLocked}
-                item={item}
-                key={index}
-              />
-            ))}
-          </div>
-        );
-      })}
+      {value?.length ? (
+        value.map(({ group, uri, items }) => {
+          return (
+            <div className="margin-top--md" key={group}>
+              <h4>
+                {group}
+                {uri && (
+                  <>
+                    {' - '}
+                    <a href={uri} target="_blank">
+                      docs <IconExternalLink width={13.5} height={13.5} />
+                    </a>
+                  </>
+                )}
+              </h4>
+              {items.map((item, index) => (
+                <ErrorBlock
+                  isLocked={isLocked}
+                  setIsLocked={setIsLocked}
+                  item={item}
+                  key={index}
+                />
+              ))}
+            </div>
+          );
+        })
+      ) : (
+        <div className="margin-top--md">
+          <SuccessBlock />
+        </div>
+      )}
     </div>
   );
 }

From 771edfb9a907691321b6da1ff3c65370e3c0e398 Mon Sep 17 00:00:00 2001
From: Josh Goldberg <git@joshuakgoldberg.com>
Date: Tue, 25 Oct 2022 09:44:23 -0400
Subject: [PATCH 2/2] Apply suggestions from code review

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

diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
index 15ce17a37d42..0789b84d78c0 100644
--- a/packages/website/src/components/ErrorsViewer.tsx
+++ b/packages/website/src/components/ErrorsViewer.tsx
@@ -93,10 +93,10 @@ function ErrorBlock({
 
 function SuccessBlock(): JSX.Element {
   return (
-    <div className={`admonition alert alert--success`}>
+    <div className="admonition alert alert--success">
       <div className="admonition-content">
-        <div className={clsx(styles.fixerContainer)}>
-          <div>There are no errors</div>
+        <div className={styles.fixerContainer}>
+          <div>All is ok!</div>
         </div>
       </div>
     </div>