feat: Improved consistency for http status (#2001)

Author: gabrielmfern

packages/react-email/src/components/toolbar/linter.tsx

@@ -92,6 +92,22 @@ export const Linter = ({ rows }: LinterProps) => {
           const failingCheck = row.result.checks.find(
             (check) => check.passed === false,
           )!;
+          const metadata: React.ReactNode[] = [];
+          for (const check of row.result.checks) {
+            if (
+              check.type === 'fetch_attempt' &&
+              check.metadata.fetchStatusCode
+            ) {
+              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
+            }
+          }
+          metadata.push(
+            <CodePreviewLineLink
+              line={row.result.codeLocation.line}
+              column={row.result.codeLocation.column}
+              type="html"
+            />,
+          );
           return (
             <Result status={row.result.status} key={i}>
               <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
@@ -102,20 +118,14 @@ export const Linter = ({ rows }: LinterProps) => {
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
-                failingCheck.metadata.fetchStatusCode < 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    There was a redirect, the content may have been moved
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode < 400
+                  ? 'There was a redirect, the content may have been moved'
+                  : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
-                failingCheck.metadata.fetchStatusCode >= 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    The link is broken
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The link is broken'
+                  : null}
                 {failingCheck.type === 'syntax'
                   ? 'The link is broken due to invalid syntax'
                   : null}
@@ -124,15 +134,7 @@ export const Linter = ({ rows }: LinterProps) => {
                   {row.result.link}
                 </span>
               </Result.Description>
-              <Result.Metadata>
-                {[
-                  <CodePreviewLineLink
-                    line={row.result.codeLocation.line}
-                    column={row.result.codeLocation.column}
-                    type="html"
-                  />,
-                ]}
-              </Result.Metadata>
+              <Result.Metadata>{metadata}</Result.Metadata>
             </Result>
           );
         }
@@ -146,6 +148,12 @@ export const Linter = ({ rows }: LinterProps) => {
             if (check.type === 'image_size' && check.metadata.byteCount) {
               metadata.push(prettyBytes(check.metadata.byteCount));
             }
+            if (
+              check.type === 'fetch_attempt' &&
+              check.metadata.fetchStatusCode
+            ) {
+              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
+            }
           }
           metadata.push(
             <CodePreviewLineLink
@@ -164,20 +172,14 @@ export const Linter = ({ rows }: LinterProps) => {
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
-                failingCheck.metadata.fetchStatusCode < 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    There was a redirect, the image may have been moved
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode < 400
+                  ? 'There was a redirect, the image may have been moved'
+                  : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
-                failingCheck.metadata.fetchStatusCode >= 400 ? (
-                  <>
-                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
-                    The image is broken
-                  </>
-                ) : null}
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The image is broken'
+                  : null}
                 {failingCheck.type === 'syntax'
                   ? 'The image is broken due to an invalid source'
                   : null}