Polish error feedback row (vercel#74880)

### Updates 1. **Hide "Was it helpful" component for errors without codes** Errors without specific codes (e.g., from third-party libraries) will no longer display the "Was it helpful" component. 2. **Improved footer styling** Enhanced layout for long footer messages to improve readability and consistency. | **Before** | **After** | |----------------------------------------------------------------------------|----------------------------------------------------------------------------| | ![Before](https://github.com/user-attachments/assets/3f72ba33-8eee-4815-ac33-0f91c42b2747) | ![After](https://github.com/user-attachments/assets/e493c6b4-3d2e-46e0-815d-e694bbe6b333) |
sanity-io · Jan 15, 2025 · cf492c2 · cf492c2
1 parent 7999f96
commit cf492c2
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 9 deletions.
diff --git a/...imental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx b/...imental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx
@@ -71,8 +71,8 @@ export function ErrorFeedback({ errorCode }: ErrorFeedbackProps) {
 export const styles = css`
   .error-feedback {
     display: flex;
-    align-items: center;
     gap: var(--size-gap);
+    white-space: nowrap;
   }
 
   .error-feedback-thanks {

diff --git a/...ay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx b/...ay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx
@@ -3,8 +3,8 @@ import { styles as feedbackStyles } from './error-feedback/error-feedback'
 import { noop as css } from '../../../helpers/noop-template'
 
 export type ErrorOverlayFooterProps = {
-  errorCode: string
-  footerMessage?: string
+  errorCode: string | undefined
+  footerMessage: string | undefined
 }
 
 export function ErrorOverlayFooter({
@@ -13,17 +13,21 @@ export function ErrorOverlayFooter({
 }: ErrorOverlayFooterProps) {
   return (
     <footer className="error-overlay-footer">
-      <p className="error-overlay-footer-message">{footerMessage}</p>
-      <ErrorFeedback errorCode={errorCode} />
+      {footerMessage ? (
+        <p className="error-overlay-footer-message">{footerMessage}</p>
+      ) : null}
+      {errorCode ? <ErrorFeedback errorCode={errorCode} /> : null}
     </footer>
   )
 }
 
 export const styles = css`
   .error-overlay-footer {
     display: flex;
-    align-items: center;
+    flex-direction: row;
     justify-content: space-between;
+
+    gap: var(--size-gap);
     padding: var(--size-3);
     background: var(--color-background-200);
     border-top: 1px solid var(--color-gray-400);

diff --git a/...rimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.stories.tsx b/...rimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.stories.tsx
@@ -22,7 +22,11 @@ export const Default: Story = {
       installed: '15.0.0',
       staleness: 'fresh',
     },
-    children: "Module not found: Cannot find module './missing-module'",
+    children: (
+      <div style={{ margin: '1rem' }}>
+        Module not found: Cannot find module './missing-module'
+      </div>
+    ),
   },
 }
 
@@ -32,3 +36,25 @@ export const Turbopack: Story = {
     isTurbopack: true,
   },
 }
+
+export const NoErrorCode: Story = {
+  args: {
+    ...Default.args,
+    errorCode: undefined,
+  },
+}
+
+export const WithLongFooterMessage: Story = {
+  args: {
+    ...Default.args,
+    footerMessage:
+      'This is a very long footer message that demonstrates how the footer handles lengthy text. It could contain important information about the error or additional context for debugging.',
+  },
+}
+
+export const WithShortFooterMessage: Story = {
+  args: {
+    ...Default.args,
+    footerMessage: 'A brief error description.',
+  },
+}
diff --git a/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
@@ -95,10 +95,9 @@ export function ErrorOverlayLayout({
           <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
 
           <DialogFooter>
-            {/* TODO: errorCode should not be undefined whatsoever */}
             <ErrorOverlayFooter
               footerMessage={footerMessage}
-              errorCode={errorCode!}
+              errorCode={errorCode}
             />
             <ErrorOverlayBottomStacks
               errorsCount={readyErrors?.length ?? 0}