@backstage/core-components 0.0.0-nightly-202201323044 → 0.0.0-nightly-202201422556

package/CHANGELOG.md

@@ -1,17 +1,25 @@
 # @backstage/core-components
 
-## 0.0.0-nightly-202201323044
+## 0.0.0-nightly-202201422556
 
 ### Patch Changes
 
+- 306d879536: chore(deps): bump `react-syntax-highligher` and `swagger-ui-react`
+- Updated dependencies
+  - @backstage/config@0.0.0-nightly-202201422556
+
+## 0.8.4
+
+### Patch Changes
+
+- 6415189d99: Add a `ProxiedSignInPage` that can be used e.g. for GCP IAP and AWS ALB
 - de2396da24: Create a short delay when `<SidebarSubmenu/>` is opened
 - 5333451def: Cleaned up API exports
 - e2eb92c109: Updated `ResponseErrorPanel` to not use the deprecated `data` property of `ResponseError`.
 - Updated dependencies
-  - @backstage/config@0.0.0-nightly-202201323044
-  - @backstage/core-plugin-api@0.0.0-nightly-202201323044
-  - @backstage/errors@0.0.0-nightly-202201323044
-  - @backstage/theme@0.0.0-nightly-202201323044
+  - @backstage/config@0.1.12
+  - @backstage/core-plugin-api@0.5.0
+  - @backstage/errors@0.2.0
 
 ## 0.8.3
 

package/dist/index.d.ts

@@ -13,7 +13,7 @@ import { BackstagePalette, BackstageTheme } from '@backstage/theme';
 import { TabProps as TabProps$1 } from '@material-ui/core/Tab';
 import { Column, MaterialTableProps } from '@material-table/core';
 import { SparklinesProps, SparklinesLineProps } from 'react-sparklines';
-import { IconComponent, ApiRef, ProfileInfoApi, BackstageIdentityApi, SessionApi, SignInPageProps, IdentityApi, SignInResult, BackstageUserIdentity, ProfileInfo } from '@backstage/core-plugin-api';
+import { IconComponent, SignInPageProps, ApiRef, ProfileInfoApi, BackstageIdentityApi, SessionApi, IdentityApi, SignInResult, BackstageUserIdentity, ProfileInfo } from '@backstage/core-plugin-api';
 import * as _material_ui_styles from '@material-ui/styles';
 import * as _material_ui_core_styles from '@material-ui/core/styles';
 import { WithStyles, Theme } from '@material-ui/core/styles';
@@ -1339,6 +1339,35 @@ declare type PageWithHeaderProps = ComponentProps<typeof Header> & {
 };
 declare function PageWithHeader(props: PropsWithChildren<PageWithHeaderProps>): JSX.Element;
 
+/**
+ * Props for {@link ProxiedSignInPage}.
+ *
+ * @public
+ */
+declare type ProxiedSignInPageProps = SignInPageProps & {
+    /**
+     * The provider to use, e.g. "gcp-iap" or "aws-alb". This must correspond to
+     * a properly configured auth provider ID in the auth backend.
+     */
+    provider: string;
+};
+/**
+ * A sign-in page that has no user interface of its own. Instead, it relies on
+ * sign-in being performed by a reverse authenticating proxy that Backstage is
+ * deployed behind, and leverages its session handling.
+ *
+ * @remarks
+ *
+ * This sign-in page is useful when you are using products such as Google
+ * Identity-Aware Proxy or AWS Application Load Balancer or similar, to front
+ * your Backstage installation. This sign-in page implementation will silently
+ * and regularly punch through the proxy to the auth backend to refresh your
+ * frontend session information, without requiring user interaction.
+ *
+ * @public
+ */
+declare const ProxiedSignInPage: (props: ProxiedSignInPageProps) => JSX.Element | null;
+
 declare type SidebarClassKey = 'root' | 'drawer' | 'drawerOpen';
 declare type Props$3 = {
     openDelayMs?: number;
@@ -1705,4 +1734,4 @@ declare type BackstageOverrides = Overrides & {
     [Name in keyof BackstageComponentsNameToClassKey]?: Partial<StyleRules<BackstageComponentsNameToClassKey[Name]>>;
 };
 
-export { AlertDisplay, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, ActualButton as Button, ButtonProps, CardActionsTopRightClassKey, CardTab, CardTabClassKey, CatalogIcon, ChatIcon, ClosedDropdownClassKey, CodeSnippet, CodeSnippetProps, Content, ContentHeader, ContentHeaderClassKey, CopyTextButton, CopyTextButtonProps, CreateButton, CreateButtonProps, CustomProviderClassKey, DashboardIcon, DependencyGraph, DependencyGraphDefaultLabelClassKey, DependencyGraphDefaultNodeClassKey, DependencyGraphEdgeClassKey, DependencyGraphNodeClassKey, DependencyGraphProps, types_d as DependencyGraphTypes, DismissableBanner, DismissableBannerClassKey, DismissbleBannerClassKey, DocsIcon, EmailIcon, EmptyState, EmptyStateClassKey, EmptyStateImageClassKey, ErrorBoundary, ErrorBoundaryProps, ErrorPage, ErrorPageClassKey, ErrorPanel, ErrorPanelClassKey, ErrorPanelProps, FeatureCalloutCircleClassKey, FeatureCalloutCircular, FiltersContainerClassKey, Gauge, GaugeCard, GaugeCardClassKey, GaugeClassKey, GaugeProps, GaugePropsGetColor, GaugePropsGetColorOptions, GitHubIcon, GroupIcon, Header, HeaderClassKey, HeaderIconLinkRow, HeaderIconLinkRowClassKey, HeaderLabel, HeaderLabelClassKey, HeaderTabs, HeaderTabsClassKey, HelpIcon, HomepageTimer, HorizontalScrollGrid, HorizontalScrollGridClassKey, IconLinkVerticalClassKey, IconLinkVerticalProps, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, ActualLink as Link, LinkProps, LogViewer, LogViewerClassKey, LogViewerProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, SelectItem, SelectedItems, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarDividerClassKey, SidebarExpandButton, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarPage, SidebarPageClassKey, SidebarPinStateContext, SidebarPinStateContextType, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpaceClassKey, SidebarSpacer, SidebarSpacerClassKey, SidebarSubmenu, SidebarSubmenuItem, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useQueryParamState, useSupportConfig };
+export { AlertDisplay, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, ActualButton as Button, ButtonProps, CardActionsTopRightClassKey, CardTab, CardTabClassKey, CatalogIcon, ChatIcon, ClosedDropdownClassKey, CodeSnippet, CodeSnippetProps, Content, ContentHeader, ContentHeaderClassKey, CopyTextButton, CopyTextButtonProps, CreateButton, CreateButtonProps, CustomProviderClassKey, DashboardIcon, DependencyGraph, DependencyGraphDefaultLabelClassKey, DependencyGraphDefaultNodeClassKey, DependencyGraphEdgeClassKey, DependencyGraphNodeClassKey, DependencyGraphProps, types_d as DependencyGraphTypes, DismissableBanner, DismissableBannerClassKey, DismissbleBannerClassKey, DocsIcon, EmailIcon, EmptyState, EmptyStateClassKey, EmptyStateImageClassKey, ErrorBoundary, ErrorBoundaryProps, ErrorPage, ErrorPageClassKey, ErrorPanel, ErrorPanelClassKey, ErrorPanelProps, FeatureCalloutCircleClassKey, FeatureCalloutCircular, FiltersContainerClassKey, Gauge, GaugeCard, GaugeCardClassKey, GaugeClassKey, GaugeProps, GaugePropsGetColor, GaugePropsGetColorOptions, GitHubIcon, GroupIcon, Header, HeaderClassKey, HeaderIconLinkRow, HeaderIconLinkRowClassKey, HeaderLabel, HeaderLabelClassKey, HeaderTabs, HeaderTabsClassKey, HelpIcon, HomepageTimer, HorizontalScrollGrid, HorizontalScrollGridClassKey, IconLinkVerticalClassKey, IconLinkVerticalProps, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, ActualLink as Link, LinkProps, LogViewer, LogViewerClassKey, LogViewerProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ProxiedSignInPage, ProxiedSignInPageProps, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, SelectItem, SelectedItems, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarDividerClassKey, SidebarExpandButton, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarPage, SidebarPageClassKey, SidebarPinStateContext, SidebarPinStateContextType, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpaceClassKey, SidebarSpacer, SidebarSpacerClassKey, SidebarSubmenu, SidebarSubmenuItem, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useQueryParamState, useSupportConfig };

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import { Alert } from '@material-ui/lab';
-import { useApi, alertApiRef, useAnalytics, errorApiRef, storageApiRef, useApp, oauthRequestApiRef, configApiRef, attachComponentData, useElementFilter, useApiHolder } from '@backstage/core-plugin-api';
+import { useApi, alertApiRef, useAnalytics, errorApiRef, storageApiRef, useApp, oauthRequestApiRef, configApiRef, attachComponentData, discoveryApiRef, useElementFilter, useApiHolder } from '@backstage/core-plugin-api';
 import pluralize from 'pluralize';
 import { makeStyles, createStyles, useTheme, darken, lighten, withStyles, ThemeProvider, styled } from '@material-ui/core/styles';
 import MaterialAvatar from '@material-ui/core/Avatar';
@@ -56,7 +56,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import { isError, ForwardedError } from '@backstage/errors';
+import { isError, ResponseError, ForwardedError } from '@backstage/errors';
 import TextTruncate from 'react-text-truncate';
 import useMountedState from 'react-use/lib/useMountedState';
 import LinearProgress from '@material-ui/core/LinearProgress';
@@ -114,6 +114,8 @@ import { Sparklines, SparklinesLine } from 'react-sparklines';
 import MicDropSvgUrl from './layout/ErrorPage/mic-drop.svg';
 import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import CardMedia from '@material-ui/core/CardMedia';
+import useAsync from 'react-use/lib/useAsync';
+import { z } from 'zod';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
@@ -4269,6 +4271,153 @@ function PageWithHeader(props) {
   }), children);
 }
 
+const proxiedSessionSchema = z.object({
+  providerInfo: z.object({}).catchall(z.unknown()).optional(),
+  profile: z.object({
+    email: z.string().optional(),
+    displayName: z.string().optional(),
+    picture: z.string().optional()
+  }),
+  backstageIdentity: z.object({
+    token: z.string(),
+    identity: z.object({
+      type: z.literal("user"),
+      userEntityRef: z.string(),
+      ownershipEntityRefs: z.array(z.string())
+    })
+  })
+});
+
+const DEFAULTS = {
+  defaultTokenExpiryMillis: 5 * 60 * 1e3,
+  tokenExpiryMarginMillis: 5 * 60 * 1e3
+};
+function tokenToExpiry(jwtToken) {
+  const fallback = new Date(Date.now() + DEFAULTS.defaultTokenExpiryMillis);
+  if (!jwtToken) {
+    return fallback;
+  }
+  const [_header, rawPayload, _signature] = jwtToken.split(".");
+  const payload = JSON.parse(atob(rawPayload));
+  if (typeof payload.exp !== "number") {
+    return fallback;
+  }
+  return new Date(payload.exp * 1e3 - DEFAULTS.tokenExpiryMarginMillis);
+}
+class ProxiedSignInIdentity {
+  constructor(options) {
+    this.options = options;
+    this.abortController = new AbortController();
+    this.state = { type: "empty" };
+  }
+  async start() {
+    await this.getSessionAsync();
+  }
+  getUserId() {
+    const { backstageIdentity } = this.getSessionSync();
+    const ref = backstageIdentity.identity.userEntityRef;
+    const match = /^([^:/]+:)?([^:/]+\/)?([^:/]+)$/.exec(ref);
+    if (!match) {
+      throw new TypeError(`Invalid user entity reference "${ref}"`);
+    }
+    return match[3];
+  }
+  async getIdToken() {
+    const session = await this.getSessionAsync();
+    return session.backstageIdentity.token;
+  }
+  getProfile() {
+    const session = this.getSessionSync();
+    return session.profile;
+  }
+  async getProfileInfo() {
+    const session = await this.getSessionAsync();
+    return session.profile;
+  }
+  async getBackstageIdentity() {
+    const session = await this.getSessionAsync();
+    return session.backstageIdentity.identity;
+  }
+  async getCredentials() {
+    const session = await this.getSessionAsync();
+    return {
+      token: session.backstageIdentity.token
+    };
+  }
+  async signOut() {
+    this.abortController.abort();
+  }
+  getSessionSync() {
+    if (this.state.type === "active") {
+      return this.state.session;
+    } else if (this.state.type === "fetching" && this.state.previous) {
+      return this.state.previous;
+    }
+    throw new Error("No session available. Try reloading your browser page.");
+  }
+  async getSessionAsync() {
+    if (this.state.type === "fetching") {
+      return this.state.promise;
+    } else if (this.state.type === "active" && new Date() < this.state.expiresAt) {
+      return this.state.session;
+    }
+    const previous = this.state.type === "active" ? this.state.session : void 0;
+    const promise = this.fetchSession().then((session) => {
+      this.state = {
+        type: "active",
+        session,
+        expiresAt: tokenToExpiry(session.backstageIdentity.token)
+      };
+      return session;
+    }, (error) => {
+      this.state = {
+        type: "failed",
+        error
+      };
+      throw error;
+    });
+    this.state = {
+      type: "fetching",
+      promise,
+      previous
+    };
+    return promise;
+  }
+  async fetchSession() {
+    const baseUrl = await this.options.discoveryApi.getBaseUrl("auth");
+    const response = await fetch(`${baseUrl}/${this.options.provider}/refresh`, {
+      signal: this.abortController.signal,
+      headers: { "x-requested-with": "XMLHttpRequest" },
+      credentials: "include"
+    });
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    return proxiedSessionSchema.parse(await response.json());
+  }
+}
+
+const ProxiedSignInPage = (props) => {
+  const discoveryApi = useApi(discoveryApiRef);
+  const { loading, error } = useAsync(async () => {
+    const identity = new ProxiedSignInIdentity({
+      provider: props.provider,
+      discoveryApi
+    });
+    await identity.start();
+    props.onSignInSuccess(identity);
+  }, []);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  } else if (error) {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, {
+      title: "You do not appear to be signed in. Please try reloading the browser page.",
+      error
+    });
+  }
+  return null;
+};
+
 const drawerWidthClosed = 72;
 const iconPadding = 24;
 const userBadgePadding = 18;
@@ -5835,5 +5984,5 @@ function CardTab(props) {
   });
 }
 
-export { AlertDisplay, Avatar, BottomLink, Breadcrumbs, BrokenImageIcon, ActualButton as Button, CardTab, CatalogIcon, ChatIcon, CodeSnippet, Content, ContentHeader, CopyTextButton, CreateButton, DashboardIcon, DependencyGraph, types as DependencyGraphTypes, DismissableBanner, DocsIcon, EmailIcon, EmptyState, ErrorBoundary, ErrorPage, ErrorPanel, FeatureCalloutCircular, Gauge, GaugeCard, GitHubIcon, GroupIcon, Header, HeaderIconLinkRow, HeaderLabel, HeaderTabs, HelpIcon, HomepageTimer, HorizontalScrollGrid, InfoCard, IntroCard, ItemCard, ItemCardGrid, ItemCardHeader, Lifecycle, LinearGauge, ActualLink as Link, LogViewer, MarkdownContent, MissingAnnotationEmptyState, OAuthRequestDialog, OverflowTooltip, Page, PageWithHeader, Progress, ResponseErrorPanel, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, Sidebar, SidebarContext, SidebarDivider, SidebarExpandButton, SidebarIntro, SidebarItem, SidebarPage, SidebarPinStateContext, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpacer, SidebarSubmenu, SidebarSubmenuItem, SignInPage, SimpleStepper, SimpleStepperStep, StatusAborted, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, SubvalueCell, SupportButton, TabbedCard, TabbedLayout, Table, Tabs, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, sidebarConfig, useQueryParamState, useSupportConfig };
+export { AlertDisplay, Avatar, BottomLink, Breadcrumbs, BrokenImageIcon, ActualButton as Button, CardTab, CatalogIcon, ChatIcon, CodeSnippet, Content, ContentHeader, CopyTextButton, CreateButton, DashboardIcon, DependencyGraph, types as DependencyGraphTypes, DismissableBanner, DocsIcon, EmailIcon, EmptyState, ErrorBoundary, ErrorPage, ErrorPanel, FeatureCalloutCircular, Gauge, GaugeCard, GitHubIcon, GroupIcon, Header, HeaderIconLinkRow, HeaderLabel, HeaderTabs, HelpIcon, HomepageTimer, HorizontalScrollGrid, InfoCard, IntroCard, ItemCard, ItemCardGrid, ItemCardHeader, Lifecycle, LinearGauge, ActualLink as Link, LogViewer, MarkdownContent, MissingAnnotationEmptyState, OAuthRequestDialog, OverflowTooltip, Page, PageWithHeader, Progress, ProxiedSignInPage, ResponseErrorPanel, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, Sidebar, SidebarContext, SidebarDivider, SidebarExpandButton, SidebarIntro, SidebarItem, SidebarPage, SidebarPinStateContext, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpacer, SidebarSubmenu, SidebarSubmenuItem, SignInPage, SimpleStepper, SimpleStepperStep, StatusAborted, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, SubvalueCell, SupportButton, TabbedCard, TabbedLayout, Table, Tabs, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, sidebarConfig, useQueryParamState, useSupportConfig };
 //# sourceMappingURL=index.esm.js.map