@backstage/core-components 0.12.5 → 0.12.6-next.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @backstage/core-components
 
+## 0.12.6-next.0
+
+### Patch Changes
+
+- 7908d72e033: Introduce a new global config parameter, `auth.enableExperimentalRedirectFlow`. When enabled, auth will happen with an in-window redirect flow rather than through a popup window.
+- 8e00acb28db: Small tweaks to remove warnings in the console during development (mainly focusing on techdocs)
+- 7245e744ab1: Fixed the font color on `BackstageHeaderLabel` to respect the active page theme.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.5.0
+  - @backstage/config@1.0.7
+  - @backstage/errors@1.1.5
+  - @backstage/theme@0.2.18
+  - @backstage/version-bridge@1.0.3
+
 ## 0.12.5
 
 ### Patch Changes

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import { Alert } from '@material-ui/lab';
 import pluralize from 'pluralize';
 import React, { useState, useEffect, useRef, useCallback, useLayoutEffect, lazy, Suspense, useMemo, Component as Component$3, Children, isValidElement, useContext, Fragment, createContext, forwardRef } from 'react';
 import MaterialAvatar from '@material-ui/core/Avatar';
-import { makeStyles, useTheme, darken, lighten, withStyles, createStyles, styled, ThemeProvider } from '@material-ui/core/styles';
+import { makeStyles, useTheme, darken, lighten, withStyles, createStyles, styled, alpha, ThemeProvider } from '@material-ui/core/styles';
 import Button$1 from '@material-ui/core/Button';
 import MaterialLink from '@material-ui/core/Link';
 import classNames from 'classnames';
@@ -2059,9 +2059,12 @@ const useStyles$A = makeStyles(
   { name: "OAuthRequestDialog" }
 );
 function OAuthRequestDialog(_props) {
+  var _a;
   const classes = useStyles$A();
   const [busy, setBusy] = useState(false);
   const oauthRequestApi = useApi(oauthRequestApiRef);
+  const configApi = useApi(configApiRef);
+  const authRedirect = (_a = configApi.getOptionalBoolean("enableExperimentalRedirectFlow")) != null ? _a : false;
   const requests = useObservable(
     useMemo(() => oauthRequestApi.authRequest$(), [oauthRequestApi]),
     []
@@ -2084,7 +2087,8 @@ function OAuthRequestDialog(_props) {
         classes: { root: classes.title },
         id: "oauth-req-dialog-title"
       },
-      /* @__PURE__ */ React.createElement(Typography, { className: classes.titleHeading, variant: "h1" }, "Login Required")
+      /* @__PURE__ */ React.createElement(Typography, { className: classes.titleHeading, variant: "h1" }, "Login Required"),
+      authRedirect ? /* @__PURE__ */ React.createElement(Typography, null, "This will trigger a http redirect to OAuth Login.") : null
     ), /* @__PURE__ */ React.createElement(DialogContent, { dividers: true, classes: { root: classes.contentList } }, /* @__PURE__ */ React.createElement(List, null, requests.map((request) => /* @__PURE__ */ React.createElement(
       LoginRequestListItem,
       {
@@ -6032,7 +6036,7 @@ const useStyles$4 = makeStyles(
       textAlign: "left"
     },
     label: {
-      color: theme.palette.common.white,
+      color: theme.page.fontColor,
       fontWeight: theme.typography.fontWeightBold,
       letterSpacing: 0,
       fontSize: theme.typography.fontSize,
@@ -6040,14 +6044,23 @@ const useStyles$4 = makeStyles(
       lineHeight: 1
     },
     value: {
-      color: "rgba(255, 255, 255, 0.8)",
+      color: alpha(theme.page.fontColor, 0.8),
       fontSize: theme.typography.fontSize,
       lineHeight: 1
     }
   }),
   { name: "BackstageHeaderLabel" }
 );
-const HeaderLabelContent = ({ value, className }) => /* @__PURE__ */ React.createElement(Typography, { className }, value);
+const HeaderLabelContent = ({ value, className }) => {
+  return /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      component: typeof value === "string" ? "p" : "span",
+      className
+    },
+    value
+  );
+};
 function HeaderLabel(props) {
   const { label, value, url } = props;
   const classes = useStyles$4();
@@ -6495,16 +6508,23 @@ const GridItem = ({ children }) => {
   return /* @__PURE__ */ React.createElement(Grid, { component: "li", item: true, classes }, children);
 };
 
-const Component$2 = ({ config, onSignInSuccess }) => {
+const Component$2 = ({
+  config,
+  onSignInStarted,
+  onSignInSuccess,
+  onSignInFailure
+}) => {
   const { apiRef, title, message } = config;
   const authApi = useApi(apiRef);
   const errorApi = useApi(errorApiRef);
   const handleLogin = async () => {
     try {
+      onSignInStarted();
       const identityResponse = await authApi.getBackstageIdentity({
         instantPopup: true
       });
       if (!identityResponse) {
+        onSignInFailure();
         throw new Error(
           `The ${title} provider is not configured to support sign-in`
         );
@@ -6518,6 +6538,7 @@ const Component$2 = ({ config, onSignInSuccess }) => {
         })
       );
     } catch (error) {
+      onSignInFailure();
       errorApi.post(new ForwardedError("Login failed", error));
     }
   };
@@ -6548,7 +6569,7 @@ const loader$2 = async (apis, apiRef) => {
 };
 const commonProvider = { Component: Component$2, loader: loader$2 };
 
-const Component$1 = ({ onSignInSuccess }) => /* @__PURE__ */ React.createElement(GridItem, null, /* @__PURE__ */ React.createElement(
+const Component$1 = ({ onSignInStarted, onSignInSuccess }) => /* @__PURE__ */ React.createElement(GridItem, null, /* @__PURE__ */ React.createElement(
   InfoCard,
   {
     title: "Guest",
@@ -6558,7 +6579,10 @@ const Component$1 = ({ onSignInSuccess }) => /* @__PURE__ */ React.createElement
       {
         color: "primary",
         variant: "outlined",
-        onClick: () => onSignInSuccess(new GuestUserIdentity())
+        onClick: () => {
+          onSignInStarted();
+          onSignInSuccess(new GuestUserIdentity());
+        }
       },
       "Enter"
     )
@@ -6591,13 +6615,14 @@ const asInputRef = (renderResult) => {
     ...rest
   };
 };
-const Component = ({ onSignInSuccess }) => {
+const Component = ({ onSignInStarted, onSignInSuccess }) => {
   const classes = useFormStyles();
   const { register, handleSubmit, formState } = useForm({
     mode: "onChange"
   });
   const { errors } = formState;
   const handleResult = ({ userId, idToken }) => {
+    onSignInStarted();
     onSignInSuccess(
       UserIdentity.fromLegacy({
         userId,
@@ -6752,6 +6777,7 @@ const useSignInProviders = (providers, onSignInSuccess) => {
     let didCancel = false;
     provider.components.loader(apiHolder, (_a = provider.config) == null ? void 0 : _a.apiRef).then((result) => {
       if (didCancel) {
+        localStorage.removeItem(PROVIDER_STORAGE_KEY);
         return;
       }
       if (result) {
@@ -6760,10 +6786,10 @@ const useSignInProviders = (providers, onSignInSuccess) => {
         setLoading(false);
       }
     }).catch((error) => {
+      localStorage.removeItem(PROVIDER_STORAGE_KEY);
       if (didCancel) {
         return;
       }
-      localStorage.removeItem(PROVIDER_STORAGE_KEY);
       errorApi.post(error);
       setLoading(false);
     });
@@ -6783,15 +6809,22 @@ const useSignInProviders = (providers, onSignInSuccess) => {
       const provider = providers[key];
       const { Component } = provider.components;
       const handleSignInSuccess = (result) => {
-        localStorage.setItem(PROVIDER_STORAGE_KEY, provider.id);
         handleWrappedResult(result);
       };
+      const handleSignInStarted = () => {
+        localStorage.setItem(PROVIDER_STORAGE_KEY, provider.config.id);
+      };
+      const handleSignInFailure = () => {
+        localStorage.removeItem(PROVIDER_STORAGE_KEY);
+      };
       return /* @__PURE__ */ React.createElement(
         Component,
         {
           key: provider.id,
           config: provider.config,
-          onSignInSuccess: handleSignInSuccess
+          onSignInStarted: handleSignInStarted,
+          onSignInSuccess: handleSignInSuccess,
+          onSignInFailure: handleSignInFailure
         }
       );
     }),