From f6ffea67e517023142eb54f04611b8ab65ecc48e Mon Sep 17 00:00:00 2001
From: Stephen Glass <stephen@stephen.glass>
Date: Mon, 26 May 2025 10:37:12 -0400
Subject: [PATCH] Add optional message field for auth providers in OAuth
 request dialog

Signed-off-by: Stephen Glass <stephen@stephen.glass>
---
 .changeset/silver-mice-smile.md               |  6 +++
 packages/core-components/report-alpha.api.md  |  1 +
 .../LoginRequestListItem.tsx                  | 51 +++++++++++++++----
 packages/core-components/src/translation.ts   |  2 +
 packages/core-plugin-api/report.api.md        |  1 +
 .../src/apis/definitions/auth.ts              |  5 ++
 6 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/silver-mice-smile.md

diff --git a/.changeset/silver-mice-smile.md b/.changeset/silver-mice-smile.md
new file mode 100644
index 0000000000..e876502811
--- /dev/null
+++ b/.changeset/silver-mice-smile.md
@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/core-plugin-api': patch
+---
+
+Add optional messaage field for auth providers. This is intended to be a user friendly message that displays in the OAuth request dialog. A default message will be displayed if one is not provided.
diff --git a/packages/core-components/report-alpha.api.md b/packages/core-components/report-alpha.api.md
index 73b4194266..82e6651272 100644
--- a/packages/core-components/report-alpha.api.md
+++ b/packages/core-components/report-alpha.api.md
@@ -49,6 +49,7 @@ export const coreComponentsTranslationRef: TranslationRef<
     readonly 'supportConfig.default.title': 'Support Not Configured';
     readonly 'supportConfig.default.linkTitle': 'Add `app.support` config key';
     readonly 'errorBoundary.title': 'Please contact {{slackChannel}} for help.';
+    readonly 'oauthRequestDialog.message': 'Sign-in to allow {{appTitle}} access to {{provider}} APIs and identities.';
     readonly 'oauthRequestDialog.title': 'Login Required';
     readonly 'oauthRequestDialog.authRedirectTitle': 'This will trigger a http redirect to OAuth Login.';
     readonly 'oauthRequestDialog.login': 'Log in';
diff --git a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
index 7c85b1608f..328ab50a34 100644
--- a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
+++ b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
@@ -22,16 +22,24 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import { useState } from 'react';
 import { isError } from '@backstage/errors';
-import { PendingOAuthRequest } from '@backstage/core-plugin-api';
+import {
+  configApiRef,
+  PendingOAuthRequest,
+  useApi,
+} from '@backstage/core-plugin-api';
 import { coreComponentsTranslationRef } from '../../translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import Box from '@material-ui/core/Box';
 
 export type LoginRequestListItemClassKey = 'root';
 
 const useItemStyles = makeStyles(
   theme => ({
     root: {
-      paddingLeft: theme.spacing(3),
+      paddingLeft: theme.spacing(2),
+    },
+    button: {
+      marginLeft: theme.spacing(2),
     },
   }),
   { name: 'BackstageLoginRequestListItem' },
@@ -47,6 +55,7 @@ const LoginRequestListItem = ({ request, busy, setBusy }: RowProps) => {
   const classes = useItemStyles();
   const [error, setError] = useState<string>();
   const { t } = useTranslationRef(coreComponentsTranslationRef);
+  const configApi = useApi(configApiRef);
 
   const handleContinue = async () => {
     setBusy(true);
@@ -60,19 +69,43 @@ const LoginRequestListItem = ({ request, busy, setBusy }: RowProps) => {
   };
 
   const IconComponent = request.provider.icon;
+  const message =
+    request.provider.message ??
+    t('oauthRequestDialog.message', {
+      appTitle: configApi.getString('app.title'),
+      provider: request.provider.title,
+    });
 
   return (
     <ListItem disabled={busy} classes={{ root: classes.root }}>
       <ListItemAvatar>
         <IconComponent fontSize="large" />
       </ListItemAvatar>
-      <ListItemText
-        primary={request.provider.title}
-        secondary={error && <Typography color="error">{error}</Typography>}
-      />
-      <Button color="primary" variant="contained" onClick={handleContinue}>
-        {t('oauthRequestDialog.login')}
-      </Button>
+      <Box display="flex" alignItems="center" flex={1}>
+        <Box flex={1}>
+          <ListItemText
+            primary={request.provider.title}
+            secondary={
+              <>
+                {message && (
+                  <Typography variant="subtitle2" color="textSecondary">
+                    {message}
+                  </Typography>
+                )}
+                {error && <Typography color="error">{error}</Typography>}
+              </>
+            }
+          />
+        </Box>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={handleContinue}
+          className={classes.button}
+        >
+          {t('oauthRequestDialog.login')}
+        </Button>
+      </Box>
     </ListItem>
   );
 };
diff --git a/packages/core-components/src/translation.ts b/packages/core-components/src/translation.ts
index 40b6e94798..9ec7105da4 100644
--- a/packages/core-components/src/translation.ts
+++ b/packages/core-components/src/translation.ts
@@ -79,6 +79,8 @@ export const coreComponentsTranslationRef = createTranslationRef({
       authRedirectTitle: 'This will trigger a http redirect to OAuth Login.',
       login: 'Log in',
       rejectAll: 'Reject All',
+      message:
+        'Sign-in to allow {{appTitle}} access to {{provider}} APIs and identities.',
     },
     supportButton: {
       title: 'Support',
diff --git a/packages/core-plugin-api/report.api.md b/packages/core-plugin-api/report.api.md
index d29c611abb..54bbfb94cf 100644
--- a/packages/core-plugin-api/report.api.md
+++ b/packages/core-plugin-api/report.api.md
@@ -197,6 +197,7 @@ export type AuthProviderInfo = {
   id: string;
   title: string;
   icon: IconComponent;
+  message?: string;
 };
 
 // @public
diff --git a/packages/core-plugin-api/src/apis/definitions/auth.ts b/packages/core-plugin-api/src/apis/definitions/auth.ts
index d89544cf68..9339a3e18a 100644
--- a/packages/core-plugin-api/src/apis/definitions/auth.ts
+++ b/packages/core-plugin-api/src/apis/definitions/auth.ts
@@ -54,6 +54,11 @@ export type AuthProviderInfo = {
    * Icon for the auth provider.
    */
   icon: IconComponent;
+
+  /**
+   * Optional user friendly messaage to display for the auth provider.
+   */
+  message?: string;
 };
 
 /**