From 06b8206edd1ac07a4256da47ab53bb828a565c45 Mon Sep 17 00:00:00 2001
From: Diana Farkas-Deregi <deregidia@gmail.com>
Date: Fri, 30 Aug 2024 15:10:17 +0200
Subject: [PATCH] core-components: Add titleComponent prop to SignInPage to
 allow title customization with ReactNode

Signed-off-by: Diana Farkas-Deregi <deregidia@gmail.com>
---
 .changeset/odd-goats-kiss.md                         |  5 +++++
 .../src/layout/SignInPage/SignInPage.tsx             | 12 ++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/odd-goats-kiss.md

diff --git a/.changeset/odd-goats-kiss.md b/.changeset/odd-goats-kiss.md
new file mode 100644
index 0000000000..0f199c1a1e
--- /dev/null
+++ b/.changeset/odd-goats-kiss.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added `titleComponent` prop to `SignInPage` component to allow further customization of the title using `ReactNode`
diff --git a/packages/core-components/src/layout/SignInPage/SignInPage.tsx b/packages/core-components/src/layout/SignInPage/SignInPage.tsx
index 95d96b701a..fb8f804d5e 100644
--- a/packages/core-components/src/layout/SignInPage/SignInPage.tsx
+++ b/packages/core-components/src/layout/SignInPage/SignInPage.tsx
@@ -24,7 +24,7 @@ import { UserIdentity } from './UserIdentity';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { useMountEffect } from '@react-hookz/web';
 import { Progress } from '../../components/Progress';
 import { Content } from '../Content/Content';
@@ -41,6 +41,7 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 type MultiSignInPageProps = SignInPageProps & {
   providers: IdentityProviders;
   title?: string;
+  titleComponent?: ReactNode;
   align?: 'center' | 'left';
 };
 
@@ -55,6 +56,7 @@ export const MultiSignInPage = ({
   onSignInSuccess,
   providers = [],
   title,
+  titleComponent,
   align = 'left',
 }: MultiSignInPageProps) => {
   const configApi = useApi(configApiRef);
@@ -74,7 +76,13 @@ export const MultiSignInPage = ({
     <Page themeId="home">
       <Header title={configApi.getString('app.title')} />
       <Content>
-        {title && <ContentHeader title={title} textAlign={align} />}
+        {(title || titleComponent) && (
+          <ContentHeader
+            title={title}
+            titleComponent={titleComponent}
+            textAlign={align}
+          />
+        )}
         <Grid
           container
           justifyContent={align === 'center' ? align : 'flex-start'}