Merge pull request #20359 from mozilla/missing-signin_token_code-title

fix(settings): missing signin token code title

Author: toufali

packages/fxa-settings/src/components/CardHeader/index.test.tsx

@@ -87,6 +87,15 @@ describe('CardHeader', () => {
     ).toBeInTheDocument();
   });
 
+  it('falls back to default heading when cmsHeadline is null (Strapi unset field)', () => {
+    renderWithLocalizationProvider(
+      <CardHeader headingText={MOCK_HEADING} cmsHeadline={null} />
+    );
+    expect(
+      screen.getByRole('heading', { name: MOCK_HEADING })
+    ).toBeInTheDocument();
+  });
+
   it('falls back to default heading when only description is provided (no headline)', () => {
     renderWithLocalizationProvider(
       <CardHeader
@@ -113,7 +122,9 @@ describe('CardHeader', () => {
     expect(
       screen.getByRole('heading', { name: MOCK_HEADING })
     ).toBeInTheDocument();
-    expect(screen.queryByAltText(MOCK_CMS_LOGO_ALT_TEXT)).not.toBeInTheDocument();
+    expect(
+      screen.queryByAltText(MOCK_CMS_LOGO_ALT_TEXT)
+    ).not.toBeInTheDocument();
   });
 
   it('renders CMS header with default font size', () => {

packages/fxa-settings/src/components/CardHeader/index.tsx

@@ -51,7 +51,7 @@ interface CardHeaderBasicWithDefaultSubheadingProps
 interface CardHeaderCmsProps extends CardHeaderRequiredProps {
   cmsLogoUrl?: string;
   cmsLogoAltText?: string;
-  cmsHeadline?: string;
+  cmsHeadline?: string | null;
   cmsDescription?: string;
   cmsHeadlineFontSize?: HeadlineFontSize | string | null;
   cmsHeadlineTextColor?: string | null;
@@ -111,7 +111,7 @@ function isDefaultService(
 }
 
 function isCmsHeader(props: CardHeaderProps): props is CardHeaderCmsProps {
-  return (props as CardHeaderCmsProps).cmsHeadline !== undefined;
+  return !!(props as CardHeaderCmsProps).cmsHeadline;
 }
 
 function isBasicWithCustomSubheading(
@@ -215,9 +215,7 @@ const CardHeader = (props: CardHeaderProps) => {
         >
           {cmsHeadline}
         </h1>
-        {cmsDescription && (
-          <p className="card-subheader">{cmsDescription}</p>
-        )}
+        {cmsDescription && <p className="card-subheader">{cmsDescription}</p>}
       </>
     );
   }