Add optional message field for auth providers in OAuth request dialog

Signed-off-by: Stephen Glass <stephen@stephen.glass>

.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.

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';

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>
   );
 };

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',

packages/core-plugin-api/report.api.md

@@ -197,6 +197,7 @@ export type AuthProviderInfo = {
   id: string;
   title: string;
   icon: IconComponent;
+  message?: string;
 };
 
 // @public

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;
 };
 
 /**