` block with `white-space: pre-wrap` or `white-space: pre`
*
* @remarks
*
* Default: false (`white-space: pre`)
*/
wrapLongLines?: boolean;
/**
* Custom styles applied to code
*
* @remarks
*
* Passed to {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}
*/
customStyle?: any;
}
/**
* Thin wrapper on top of {@link https://react-syntax-highlighter.github.io/react-syntax-highlighter/ | react-syntax-highlighter}
* providing consistent theming and copy code button
*
* @public
*/
declare function CodeSnippet(props: CodeSnippetProps): react_jsx_runtime.JSX.Element;
/**
* Properties for {@link CopyTextButton}
*
* @public
*/
interface CopyTextButtonProps {
/**
* The text to be copied
*/
text: string;
/**
* Number of milliseconds that the tooltip is shown
*
* @remarks
*
* Default: 1000
*/
tooltipDelay?: number;
/**
* Text to show in the tooltip when user has clicked the button
*
* @remarks
*
* Default: "Text copied to clipboard"
*/
tooltipText?: string;
/**
* Text to use as aria-label prop on the button
*
* @remarks
*
* Default: "Copy text"
*/
'aria-label'?: string;
}
/**
* Copy text button with visual feedback
*
* @public
* @remarks
*
* Visual feedback takes form of:
* - a hover color
* - click ripple
* - Tooltip shown when user has clicked
*
* @example
*
* ```
* >;
/**
* Responsive Button giving consistent UX for creation of different things
*
* @public
*/
declare function CreateButton(props: CreateButtonProps): react_jsx_runtime.JSX.Element | null;
/**
* Types used to customize and provide data to {@link DependencyGraph}
*
* @packageDocumentation
*/
/**
* Types for the {@link DependencyGraph} component.
*
* @public
*/
declare namespace DependencyGraphTypes {
/**
* Edge of {@link DependencyGraph}
*
* @public
*/
type DependencyEdge = T & {
/**
* ID of {@link DependencyNode} from where the Edge start
*/
from: string;
/**
* ID of {@link DependencyNode} to where the Edge goes to
*/
to: string;
/**
* Label assigned and rendered with the Edge
*/
label?: string;
/**
* Distance to a root entity
*/
distance?: number;
};
/**
* Properties of {@link DependencyGraphTypes.RenderLabelFunction} for {@link DependencyGraphTypes.DependencyEdge}
*
* @public
*/
type RenderLabelProps = {
edge: DependencyEdge;
};
/**
* Custom React component for edge labels
*
* @public
*/
type RenderLabelFunction = (props: RenderLabelProps) => ReactNode;
/**
* Node of {@link DependencyGraph}
*
* @public
*/
type DependencyNode = T & {
id: string;
};
/**
* Properties of {@link DependencyGraphTypes.RenderNodeFunction} for {@link DependencyGraphTypes.DependencyNode}
*
* @public
*/
type RenderNodeProps = {
node: DependencyNode;
};
/**
* Custom React component for graph {@link DependencyGraphTypes.DependencyNode}
*
* @public
*/
type RenderNodeFunction = (props: RenderNodeProps) => ReactNode;
/**
* Properties of {@link DependencyGraphTypes.RenderEdgeFunction} for {@link DependencyGraphTypes.DependencyEdge}
*
* @public
*/
type RenderEdgeProps = {
edge: T & {
points: {
x: number;
y: number;
}[];
label?: string;
labeloffset?: number;
labelpos?: string;
width?: number;
height?: number;
weight?: number;
minlen?: number;
showArrowHeads?: boolean;
from?: string;
to?: string;
relations?: string[];
};
id: {
v: string;
w: string;
name?: string | undefined;
};
};
/**
* Custom React component for graph {@link DependencyGraphTypes.DependencyEdge}
*
* @public
*/
type RenderEdgeFunction = (props: RenderEdgeProps) => ReactNode;
/**
* Graph direction
*
* @public
*/
const Direction: {
/**
* Top to Bottom
*/
readonly TOP_BOTTOM: "TB";
/**
* Bottom to Top
*/
readonly BOTTOM_TOP: "BT";
/**
* Left to Right
*/
readonly LEFT_RIGHT: "LR";
/**
* Right to Left
*/
readonly RIGHT_LEFT: "RL";
};
/**
* @public
*/
type Direction = (typeof Direction)[keyof typeof Direction];
/**
* @public
*/
namespace Direction {
type TOP_BOTTOM = typeof Direction.TOP_BOTTOM;
type BOTTOM_TOP = typeof Direction.BOTTOM_TOP;
type LEFT_RIGHT = typeof Direction.LEFT_RIGHT;
type RIGHT_LEFT = typeof Direction.RIGHT_LEFT;
}
/**
* Node alignment
*
* @public
*/
const Alignment: {
/**
* Up Left
*/
readonly UP_LEFT: "UL";
/**
* Up Right
*/
readonly UP_RIGHT: "UR";
/**
* Down Left
*/
readonly DOWN_LEFT: "DL";
/**
* Down Right
*/
readonly DOWN_RIGHT: "DR";
};
/**
* @public
*/
type Alignment = (typeof Alignment)[keyof typeof Alignment];
/**
* @public
*/
namespace Alignment {
type UP_LEFT = typeof Alignment.UP_LEFT;
type UP_RIGHT = typeof Alignment.UP_RIGHT;
type DOWN_LEFT = typeof Alignment.DOWN_LEFT;
type DOWN_RIGHT = typeof Alignment.DOWN_RIGHT;
}
/**
* Algorithm used to rand nodes in graph
*
* @public
*/
const Ranker: {
/**
* {@link https://en.wikipedia.org/wiki/Network_simplex_algorithm | Network Simplex} algorithm
*/
readonly NETWORK_SIMPLEX: "network-simplex";
/**
* Tight Tree algorithm
*/
readonly TIGHT_TREE: "tight-tree";
/**
* Longest path algorithm
*
* @remarks
*
* Simplest and fastest
*/
readonly LONGEST_PATH: "longest-path";
};
/**
* @public
*/
type Ranker = (typeof Ranker)[keyof typeof Ranker];
/**
* @public
*/
namespace Ranker {
type NETWORK_SIMPLEX = typeof Ranker.NETWORK_SIMPLEX;
type TIGHT_TREE = typeof Ranker.TIGHT_TREE;
type LONGEST_PATH = typeof Ranker.LONGEST_PATH;
}
/**
* Position of label in relation to the edge
*
* @public
*/
const LabelPosition: {
readonly LEFT: "l";
readonly RIGHT: "r";
readonly CENTER: "c";
};
/**
* @public
*/
type LabelPosition = (typeof LabelPosition)[keyof typeof LabelPosition];
/**
* @public
*/
namespace LabelPosition {
type LEFT = typeof LabelPosition.LEFT;
type RIGHT = typeof LabelPosition.RIGHT;
type CENTER = typeof LabelPosition.CENTER;
}
}
/**
* Properties of {@link DependencyGraph}
*
* @public
* @remarks
* `` and `` are useful when rendering custom or edge labels
*/
interface DependencyGraphProps extends SVGProps {
/**
* Edges of graph
*/
edges: DependencyGraphTypes.DependencyEdge[];
/**
* Nodes of Graph
*/
nodes: DependencyGraphTypes.DependencyNode[];
/**
* Graph {@link DependencyGraphTypes.(Direction:namespace) | direction}
*
* @remarks
*
* Default: `DependencyGraphTypes.Direction.TOP_BOTTOM`
*/
direction?: DependencyGraphTypes.Direction;
/**
* Node {@link DependencyGraphTypes.(Alignment:namespace) | alignment}
*/
align?: DependencyGraphTypes.Alignment;
/**
* Margin between nodes on each rank
*
* @remarks
*
* Default: 50
*/
nodeMargin?: number;
/**
* Margin between edges
*
* @remarks
*
* Default: 10
*/
edgeMargin?: number;
/**
* Margin between each rank
*
* @remarks
*
* Default: 50
*/
rankMargin?: number;
/**
* Margin on left and right of whole graph
*
* @remarks
*
* Default: 0
*/
paddingX?: number;
/**
* Margin on top and bottom of whole graph
*
* @remarks
*
* Default: 0
*/
paddingY?: number;
/**
* Heuristic used to find set of edges that will make graph acyclic
*/
acyclicer?: 'greedy';
/**
* {@link DependencyGraphTypes.(Ranker:namespace) | Algorithm} used to rank nodes
*
* @remarks
*
* Default: `DependencyGraphTypes.Ranker.NETWORK_SIMPLEX`
*/
ranker?: DependencyGraphTypes.Ranker;
/**
* {@link DependencyGraphTypes.(LabelPosition:namespace) | Position} of label in relation to edge
*
* @remarks
*
* Default: `DependencyGraphTypes.LabelPosition.RIGHT`
*/
labelPosition?: DependencyGraphTypes.LabelPosition;
/**
* How much to move label away from edge
*
* @remarks
*
* Applies only when {@link DependencyGraphProps.labelPosition} is `DependencyGraphTypes.LabelPosition.LEFT` or
* `DependencyGraphTypes.LabelPosition.RIGHT`
*/
labelOffset?: number;
/**
* Minimum number of ranks to keep between connected nodes
*/
edgeRanks?: number;
/**
* Weight applied to edges in graph
*/
edgeWeight?: number;
/**
* Custom edge rendering component
*/
renderEdge?: DependencyGraphTypes.RenderEdgeFunction;
/**
* Custom node rendering component
*/
renderNode?: DependencyGraphTypes.RenderNodeFunction;
/**
* Custom label rendering component
*/
renderLabel?: DependencyGraphTypes.RenderLabelFunction;
/**
* {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs | Defs} shared by rendered SVG to be used by
* {@link DependencyGraphProps.renderNode} and/or {@link DependencyGraphProps.renderLabel}
*/
defs?: JSX.Element | JSX.Element[];
/**
* Controls zoom behavior of graph
*
* @remarks
*
* Default: `enabled`
*/
zoom?: 'enabled' | 'disabled' | 'enable-on-click';
/**
* A factory for curve generators addressing both lines and areas.
*
* @remarks
*
* Default: 'curveMonotoneX'
*/
curve?: 'curveStepBefore' | 'curveMonotoneX';
/**
* Controls if the arrow heads should be rendered or not.
*
* Default: false
*/
showArrowHeads?: boolean;
/**
* Controls if the graph should be contained or grow
*
* @remarks
*
* Default: 'grow'
*/
fit?: 'grow' | 'contain';
/**
* Controls if user can toggle fullscreen mode
*
* @remarks
*
* Default: true
*/
allowFullscreen?: boolean;
}
/**
* Graph component used to visualize relations between entities
*
* @public
*/
declare function DependencyGraph(props: DependencyGraphProps): react_jsx_runtime.JSX.Element;
/** @public */
type DependencyGraphDefaultLabelClassKey = 'text';
/** @public */
type DependencyGraphDefaultNodeClassKey = 'node' | 'text';
/** @public */
type DependencyGraphEdgeClassKey = 'path' | 'label';
/** @public */
type DependencyGraphNodeClassKey = 'node';
/** @public */
type DismissableBannerClassKey = 'root' | 'topPosition' | 'icon' | 'content' | 'message' | 'info' | 'error';
/**
* @public
* @deprecated This type contained a typo, please use DismissableBannerClassKey instead
*/
type DismissbleBannerClassKey = DismissableBannerClassKey;
type Props$h = {
variant: 'info' | 'error' | 'warning';
message: ReactNode;
id: string;
fixed?: boolean;
};
/** @public */
declare const DismissableBanner: (props: Props$h) => react_jsx_runtime.JSX.Element;
/** @public */
type EmptyStateClassKey = 'root' | 'action' | 'imageContainer';
type Props$g = {
title: string;
description?: string | JSX.Element;
missing: 'field' | 'info' | 'content' | 'data' | {
customImage: JSX.Element;
};
action?: JSX.Element;
};
/**
* Various placeholder views for empty state pages
*
* @public
*
*/
declare function EmptyState(props: Props$g): react_jsx_runtime.JSX.Element;
/** @public */
type EmptyStateImageClassKey = 'generalImg';
type Props$f = {
annotation: string | string[];
readMoreUrl?: string;
};
/**
* @public
* @deprecated This component is deprecated, please use {@link @backstage/plugin-catalog-react#MissingAnnotationEmptyState} instead
*/
declare function MissingAnnotationEmptyState(props: Props$f): react_jsx_runtime.JSX.Element;
/** @public */
type ErrorPanelClassKey = 'text' | 'divider';
/** @public */
type ErrorPanelProps = {
error: Error;
defaultExpanded?: boolean;
titleFormat?: string;
title?: string;
};
/**
* Renders a warning panel as the effect of an error.
*
* @public
*/
declare function ErrorPanel(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
/**
* @public
*/
type FavoriteToggleIconClassKey = 'icon' | 'iconBorder';
/**
* Icon used in FavoriteToggle component.
*
* Can be used independently, useful when used as {@link @material-table/core#MaterialTableProps.actions} in {@link @material-table/core#MaterialTable}
*
* @public
*/
declare function FavoriteToggleIcon(props: {
isFavorite: boolean;
}): react_jsx_runtime.JSX.Element;
/**
* Props for the {@link FavoriteToggle} component.
*
* @public
*/
type FavoriteToggleProps = ComponentProps & {
id: string;
title: string;
isFavorite: boolean;
onToggle: (value: boolean) => void;
};
/**
* Toggle encapsulating logic for marking something as favorite,
* primarily used in various instances of entity lists and cards but can be used elsewhere.
*
* This component can only be used in as a controlled toggle and does not keep internal state.
*
* @public
*/
declare function FavoriteToggle(props: FavoriteToggleProps): react_jsx_runtime.JSX.Element;
type ResponseErrorPanelClassKey = 'text' | 'divider';
/**
* Renders a warning panel as the effect of a failed server request.
*
* @remarks
* Has special treatment for ResponseError errors, to display rich
* server-provided information about what happened.
*/
declare function ResponseErrorPanel(props: ErrorPanelProps): react_jsx_runtime.JSX.Element;
/** @public */
type FeatureCalloutCircleClassKey = '@keyframes pulsateSlightly' | '@keyframes pulsateAndFade' | 'featureWrapper' | 'backdrop' | 'dot' | 'pulseCircle' | 'text';
type Props$e = {
featureId: string;
title: string;
description: string;
};
/**
* One-time, round 'telescope' animation showing new feature.
*
* @public
*
*/
declare function FeatureCalloutCircular(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
type IconLinkVerticalProps = {
color?: 'primary' | 'secondary';
disabled?: boolean;
href?: string;
icon?: ReactNode;
label: string;
onClick?: MouseEventHandler;
title?: string;
};
/** @public */
type IconLinkVerticalClassKey = 'link' | 'disabled' | 'primary' | 'secondary' | 'label';
/** @public */
declare function IconLinkVertical({ color, disabled, href, icon, label, onClick, title, }: IconLinkVerticalProps): react_jsx_runtime.JSX.Element;
/** @public */
type HeaderIconLinkRowClassKey = 'links';
type Props$d = {
links: IconLinkVerticalProps[];
};
/**
* HTML nav tag with links mapped inside
*
* @public
*
*/
declare function HeaderIconLinkRow(props: Props$d): react_jsx_runtime.JSX.Element;
type Props$c = {
scrollStep?: number;
scrollSpeed?: number;
minScrollDistance?: number;
};
/** @public */
type HorizontalScrollGridClassKey = 'root' | 'container' | 'fade' | 'fadeLeft' | 'fadeRight' | 'fadeHidden' | 'button' | 'buttonLeft' | 'buttonRight';
/**
* Horizontal scrollable component with arrows to navigate
*
* @public
*
*/
declare function HorizontalScrollGrid(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
type Props$b = CSS.Properties & {
shorthand?: boolean;
alpha?: boolean;
};
type LifecycleClassKey = 'alpha' | 'beta';
declare function Lifecycle(props: Props$b): react_jsx_runtime.JSX.Element;
/**
* The properties for the LogViewer component.
*
* @public
*/
interface LogViewerProps {
/**
* Callback function to handle the download log action, and show the download button.
*/
onDownloadLog?: () => void;
/**
* The text of the logs to display.
*
* The LogViewer component is optimized for appending content at the end of the text.
*/
text: string;
/**
* Determines if the overflow text should be wrapped or shown via a single line in a horizontal scrollbar.
*/
textWrap?: boolean;
/**
* Styling overrides for classes within the LogViewer component.
*/
classes?: {
root?: string;
};
}
/**
* A component that displays logs in a scrollable text area.
*
* @remarks
* The LogViewer has support for search and filtering, as well as displaying
* text content with ANSI color escape codes.
*
* Since the LogViewer uses windowing to avoid rendering all contents at once, the
* log is sized automatically to fill the available vertical space. This means
* it may often be needed to wrap the LogViewer in a container that provides it
* with a fixed amount of space.
*
* @public
*/
declare function LogViewer(props: LogViewerProps): react_jsx_runtime.JSX.Element;
/** @public Class keys for overriding LogViewer styles */
type LogViewerClassKey = 'root' | 'header' | 'log' | 'line' | 'lineSelected' | 'lineCopyButton' | 'lineNumber' | 'textHighlight' | 'textSelectedHighlight' | 'modifierBold' | 'modifierItalic' | 'modifierUnderline' | 'modifierForegroundBlack' | 'modifierForegroundRed' | 'modifierForegroundGreen' | 'modifierForegroundYellow' | 'modifierForegroundBlue' | 'modifierForegroundMagenta' | 'modifierForegroundCyan' | 'modifierForegroundWhite' | 'modifierForegroundGrey' | 'modifierBackgroundBlack' | 'modifierBackgroundRed' | 'modifierBackgroundGreen' | 'modifierBackgroundYellow' | 'modifierBackgroundBlue' | 'modifierBackgroundMagenta' | 'modifierBackgroundCyan' | 'modifierBackgroundWhite' | 'modifierBackgroundGrey';
type MarkdownContentClassKey = 'markdown';
type Props$a = {
content: string;
dialect?: 'gfm' | 'common-mark';
linkTarget?: Options['linkTarget'];
transformLinkUri?: (href: string) => string;
transformImageUri?: (href: string) => string;
className?: string;
};
/**
* Renders markdown with the default dialect {@link https://github.github.com/gfm/ | gfm - GitHub flavored Markdown} to backstage theme styled HTML.
*
* @remarks
* If you just want to render to plain {@link https://commonmark.org/ | CommonMark}, set the dialect to `'common-mark'`
*/
declare function MarkdownContent(props: Props$a): react_jsx_runtime.JSX.Element;
type OAuthRequestDialogClassKey = 'dialog' | 'title' | 'contentList' | 'actionButtons';
declare function OAuthRequestDialog(_props: {}): react_jsx_runtime.JSX.Element;
type LoginRequestListItemClassKey = 'root';
type Props$9 = {
text?: string | undefined;
title?: TooltipProps['title'];
line?: number | undefined;
placement?: TooltipProps['placement'];
tooltipClasses?: TooltipProps['classes'];
};
type OverflowTooltipClassKey = 'container';
declare function OverflowTooltip(props: Props$9): react_jsx_runtime.JSX.Element;
declare function Progress(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
/** @public */
type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow';
/** @public */
type BottomLinkProps = {
link: string;
title: string;
onClick?: (event: MouseEvent) => void;
};
/**
* Footer with link used in {@link InfoCard } and {@link TabbedCard}
*
* @public
*
*/
declare function BottomLink(props: BottomLinkProps): react_jsx_runtime.JSX.Element;
type SlackChannel = {
name: string;
href?: string;
};
/** @public */
type ErrorBoundaryProps = PropsWithChildren<{
slackChannel?: string | SlackChannel;
onError?: (error: Error, errorInfo: string) => null;
}>;
type State = {
error?: Error;
errorInfo?: ErrorInfo;
};
/** @public */
declare const ErrorBoundary: ComponentClass;
/** @public */
type InfoCardClassKey = 'noPadding' | 'header' | 'headerTitle' | 'headerSubheader' | 'headerAvatar' | 'headerAction' | 'headerContent';
/** @public */
type CardActionsTopRightClassKey = 'root';
/** @public */
type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
/**
* InfoCard is used to display a paper-styled block on the screen, similar to a panel.
*
* You can custom style an InfoCard with the 'className' (outer container) and 'cardClassName' (inner container)
* props. This is typically used with the material-ui makeStyles mechanism.
*
* The InfoCard serves as an error boundary. As a result, if you provide an 'errorBoundaryProps' property this
* specifies the extra information to display in the error component that is displayed if an error occurs
* in any descendent components.
*
* By default the InfoCard has no custom layout of its children, but is treated as a block element. A
* couple common variants are provided and can be specified via the variant property:
*
* When the InfoCard is displayed as a grid item within a grid, you may want items to have the same height for all items.
* Set to the 'gridItem' variant to display the InfoCard with full height suitable for Grid:
*
* `... `
*/
type Props$8 = {
title?: ReactNode;
subheader?: ReactNode;
divider?: boolean;
deepLink?: BottomLinkProps;
/** @deprecated Use errorBoundaryProps instead */
slackChannel?: string;
errorBoundaryProps?: ErrorBoundaryProps;
variant?: InfoCardVariants;
alignContent?: 'normal' | 'bottom';
children?: ReactNode;
headerStyle?: object;
headerProps?: CardHeaderProps;
icon?: ReactNode;
action?: ReactNode;
actionsClassName?: string;
actions?: ReactNode;
cardClassName?: string;
actionsTopRight?: ReactNode;
className?: string;
noPadding?: boolean;
titleTypographyProps?: object;
subheaderTypographyProps?: object;
};
/**
* Material-ui card with header , content and actions footer
*
* @public
*
*/
declare function InfoCard(props: Props$8): JSX.Element;
/** @public */
type GaugeClassKey = 'root' | 'overlay' | 'description' | 'circle' | 'colorUnknown';
/** @public */
type GaugeProps = {
value: number;
fractional?: boolean;
inverse?: boolean;
unit?: string;
max?: number;
size?: 'normal' | 'small';
description?: ReactNode;
getColor?: GaugePropsGetColor;
relativeToMax?: boolean;
decimalDigits?: number;
};
/** @public */
type GaugePropsGetColorOptions = {
palette: BackstagePalette;
value: number;
inverse?: boolean;
max?: number;
};
/** @public */
type GaugePropsGetColor = (args: GaugePropsGetColorOptions) => string;
/**
* Circular Progress Bar
*
* @public
*
*/
declare function Gauge(props: GaugeProps): react_jsx_runtime.JSX.Element;
type Props$7 = {
title: string;
subheader?: string;
variant?: InfoCardVariants;
/** Progress in % specified as decimal, e.g. "0.23" */
progress: number;
alignGauge?: 'normal' | 'bottom';
size?: 'normal' | 'small';
description?: ReactNode;
icon?: ReactNode;
inverse?: boolean;
deepLink?: BottomLinkProps;
getColor?: GaugePropsGetColor;
};
/** @public */
type GaugeCardClassKey = 'root';
/**
* {@link Gauge} with header, subheader and footer
*
* @public
*
*/
declare function GaugeCard(props: Props$7): react_jsx_runtime.JSX.Element;
type Props$6 = {
/**
* Progress value between 0.0 - 1.0.
*/
value: number;
width?: 'thick' | 'thin';
getColor?: GaugePropsGetColor;
};
declare function LinearGauge(props: Props$6): react_jsx_runtime.JSX.Element | null;
/** @public */
type SelectInputBaseClassKey = 'root' | 'input';
/** @public */
type SelectClassKey = 'formControl' | 'label' | 'chips' | 'chip' | 'checkbox' | 'root';
/** @public */
type SelectItem = {
label: string;
value: string | number;
};
/** @public */
type SelectedItems = string | string[] | number | number[];
type SelectProps = {
multiple?: boolean;
items: SelectItem[];
label: string;
placeholder?: string;
selected?: SelectedItems;
onChange: (arg: SelectedItems) => void;
triggerReset?: boolean;
native?: boolean;
disabled?: boolean;
margin?: 'dense' | 'none';
'data-testid'?: string;
};
/** @public */
declare function SelectComponent(props: SelectProps): react_jsx_runtime.JSX.Element;
/** @public */
type ClosedDropdownClassKey = 'icon';
type OpenedDropdownClassKey = 'icon';
interface StepperProps {
elevated?: boolean;
onStepChange?: (prevIndex: number, nextIndex: number) => void;
activeStep?: number;
}
declare function SimpleStepper(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
type StepActions = {
showNext?: boolean;
canNext?: () => boolean;
onNext?: () => void;
nextStep?: (current: number, last: number) => number;
nextText?: string;
showBack?: boolean;
backText?: string;
onBack?: () => void;
showRestart?: boolean;
canRestart?: () => boolean;
onRestart?: () => void;
restartText?: string;
showSkip?: boolean;
canSkip?: () => boolean;
onSkip?: () => void;
skipText?: string;
};
type StepProps = {
title: string;
children: ReactElement;
end?: boolean;
actions?: StepActions;
};
type SimpleStepperFooterClassKey = 'root';
type SimpleStepperStepClassKey = 'end';
declare function SimpleStepperStep(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
type StatusClassKey = 'status' | 'ok' | 'warning' | 'error' | 'pending' | 'running' | 'aborted';
declare function StatusOK(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusWarning(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusError(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusPending(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusRunning(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare function StatusAborted(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
type MetadataTableTitleCellClassKey = 'root';
type MetadataTableCellClassKey = 'root';
type MetadataTableListClassKey = 'root';
type MetadataTableListItemClassKey = 'root' | 'random';
type StructuredMetadataTableListClassKey = 'root';
type StructuredMetadataTableNestedListClassKey = 'root';
/** @public */
interface StructuredMetadataTableProps {
metadata: {
[key: string]: any;
};
dense?: boolean;
options?: {
/**
* Function to format the keys from the `metadata` object. Defaults to
* startCase from the lodash library.
* @param key - A key within the `metadata`
* @returns Formatted key
*/
titleFormat?: (key: string) => string;
nestedValuesAsYaml?: boolean;
};
}
/** @public */
declare function StructuredMetadataTable(props: StructuredMetadataTableProps): react_jsx_runtime.JSX.Element;
type SetQueryParams = (params: T) => void;
declare function useQueryParamState(stateName: string,
/** @deprecated Don't configure a custom debounceTime */
debounceTime?: number): [T | undefined, SetQueryParams];
type SupportItemLink = {
url: string;
title: string;
};
type SupportItem = {
title: string;
icon?: string;
links: SupportItemLink[];
};
type SupportConfig = {
url: string;
items: SupportItem[];
};
declare function useSupportConfig(): SupportConfig;
type SupportButtonProps = {
title?: string;
items?: SupportItem[];
children?: ReactNode;
};
type SupportButtonClassKey = 'popoverList';
declare function SupportButton(props: SupportButtonProps): react_jsx_runtime.JSX.Element | null;
type SubRoute$1 = {
path: string;
title: string;
children: JSX.Element;
tabProps?: TabProps;
};
/**
* TabbedLayout is a compound component, which allows you to define a layout for
* pages using a sub-navigation mechanism.
*
* @remarks
* Consists of two parts: TabbedLayout and TabbedLayout.Route
*
* @example
* ```jsx
*
*
* This is rendered under /example/anything-here route
*
*
* ```
*/
declare function TabbedLayout(props: PropsWithChildren<{}>): react_jsx_runtime.JSX.Element;
declare namespace TabbedLayout {
var Route: (props: SubRoute$1) => null;
}
type SubRoute = {
path: string;
title: string;
children: JSX.Element;
tabProps?: TabProps;
};
declare function RoutedTabs(props: {
routes: SubRoute[];
}): react_jsx_runtime.JSX.Element;
type TableFiltersClassKey = 'root' | 'value' | 'heder' | 'filters';
type SelectedFilters = {
[key: string]: string | string[];
};
type SubvalueCellClassKey = 'value' | 'subvalue';
type SubvalueCellProps = {
value: ReactNode;
subvalue: ReactNode;
};
declare function SubvalueCell(props: SubvalueCellProps): react_jsx_runtime.JSX.Element;
type TableHeaderClassKey = 'header';
type TableToolbarClassKey = 'root' | 'title' | 'searchField';
/** @public */
type FiltersContainerClassKey = 'root' | 'filterControls' | 'title';
type TableClassKey = 'root';
interface TableColumn extends Column {
highlight?: boolean;
width?: string;
}
type TableFilter = {
column: string;
type: 'select' | 'multiple-select';
};
type TableState = {
search?: string;
filtersOpen?: boolean;
filters?: SelectedFilters;
};
interface TableProps extends MaterialTableProps {
columns: TableColumn[];
subtitle?: string;
filters?: TableFilter[];
initialState?: TableState;
emptyContent?: ReactNode;
isLoading?: boolean;
onStateChange?: (state: TableState) => any;
}
interface TableOptions extends Options$1 {
}
/**
* @public
*/
declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
declare namespace Table {
var icons: Readonly;
}
declare function TrendLine(props: SparklinesProps & Pick & {
title?: string;
}): react_jsx_runtime.JSX.Element | null;
type WarningPanelClassKey = 'panel' | 'summary' | 'summaryText' | 'message' | 'details';
type WarningProps = {
title?: string;
severity?: 'warning' | 'error' | 'info';
titleFormat?: string;
message?: ReactNode;
defaultExpanded?: boolean;
children?: ReactNode;
};
/**
* Show a user friendly error message to a user similar to
* ErrorPanel except that the warning panel only shows the warning message to
* the user.
*
* @param severity - Ability to change the severity of the alert. Default value
* "warning"
* @param title - A title for the warning. If not supplied, "Warning" will be
* used.
* @param message - Optional more detailed user-friendly message elaborating on
* the cause of the error.
* @param children - Objects to provide context, such as a stack trace or detailed
* error reporting. Will be available inside an unfolded accordion.
*/
declare function WarningPanel(props: WarningProps): react_jsx_runtime.JSX.Element;
/**
* @public
* Props for the {@link @backstage/core-plugin-api#IconComponent} component.
*/
type IconComponentProps = ComponentProps;
/**
* @public
* Props for the {@link AppIcon} component.
*/
type AppIconProps = IconComponentProps & {
id: string;
Fallback?: IconComponent;
};
/**
* @public
* A component that renders a system icon by its id.
*/
declare function AppIcon(props: AppIconProps): react_jsx_runtime.JSX.Element;
/**
* Broken Image Icon
* @public
*/
declare function BrokenImageIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function CatalogIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function ChatIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function DashboardIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function DocsIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function EmailIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function GitHubIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function GroupIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function HelpIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function UserIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function WarningIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function StarIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
declare function UnstarredIcon(props: IconComponentProps): react_jsx_runtime.JSX.Element;
/** @public */
type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
type Props$5 = {
stretch?: boolean;
noPadding?: boolean;
className?: string;
};
/**
* The main content part inside a {@link Page}.
*
* @public
*
*/
declare function Content(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
/**
* TODO: favoriteable capability
*/
/** @public */
type ContentHeaderClassKey = 'container' | 'leftItemsBox' | 'rightItemsBox' | 'description' | 'title';
type ContentHeaderTitleProps = {
title?: string;
className?: string;
};
type ContentHeaderDescriptionProps = {
description?: string;
className?: string;
};
type ContentHeaderProps = {
title?: ContentHeaderTitleProps['title'];
titleComponent?: ReactNode;
description?: ContentHeaderDescriptionProps['description'];
descriptionComponent?: ReactNode;
textAlign?: 'left' | 'right' | 'center';
};
/**
* A header at the top inside a {@link Content}.
*
* @public
*
*/
declare function ContentHeader(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
interface IErrorPageProps {
status?: string;
statusMessage: string;
additionalInfo?: ReactNode;
supportUrl?: string;
stack?: string;
}
/** @public */
type ErrorPageClassKey = 'container' | 'title' | 'subtitle';
/**
* Error page with status and description
*
* @public
*
*/
declare function ErrorPage(props: IErrorPageProps): react_jsx_runtime.JSX.Element;
type MicDropClassKey = 'micDrop';
/** @public */
type StackDetailsClassKey = 'title';
/** @public */
type HeaderClassKey = 'header' | 'leftItemsBox' | 'rightItemsBox' | 'title' | 'subtitle' | 'type' | 'breadcrumb' | 'breadcrumbType' | 'breadcrumbTitle';
type Props$4 = {
component?: ReactNode;
pageTitleOverride?: string;
style?: CSSProperties;
subtitle?: ReactNode;
title: ReactNode;
tooltip?: string;
type?: string;
typeLink?: string;
};
/**
* Backstage main header with abstract color background in multiple variants
*
* @public
*
*/
declare function Header(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
/**
* @public
*/
type HeaderActionMenuItem = {
label?: ListItemTextProps['primary'];
secondaryLabel?: ListItemTextProps['secondary'];
icon?: ReactElement;
disabled?: boolean;
onClick?: (event: MouseEvent) => void;
};
/**
* @public
*/
type HeaderActionMenuProps = {
actionItems: HeaderActionMenuItem[];
};
/**
* @public
*/
declare function HeaderActionMenu(props: HeaderActionMenuProps): react_jsx_runtime.JSX.Element;
/** @public */
type HeaderLabelClassKey = 'root' | 'label' | 'value';
type HeaderLabelContentProps = PropsWithChildren<{
value: ReactNode;
className: string;
typographyRootComponent?: keyof JSX.IntrinsicElements;
}>;
type HeaderLabelProps = {
label: string;
value?: HeaderLabelContentProps['value'];
contentTypograpyRootComponent?: HeaderLabelContentProps['typographyRootComponent'];
url?: string;
};
/**
* Additional label to main {@link Header}
*
* @public
*
*/
declare function HeaderLabel(props: HeaderLabelProps): react_jsx_runtime.JSX.Element;
/** @public */
type HeaderTabsClassKey = 'tabsWrapper' | 'defaultTab' | 'selected' | 'tabRoot';
type Tab = {
id: string;
label: string;
tabProps?: TabProps;
};
type HeaderTabsProps = {
tabs: Tab[];
onChange?: (index: number) => void;
selectedIndex?: number;
};
/**
* Horizontal Tabs component
*
* @public
*
*/
declare function HeaderTabs(props: HeaderTabsProps): react_jsx_runtime.JSX.Element;
type ItemCardProps = {
description?: string;
tags?: string[];
title: string;
/** @deprecated Use subtitle instead */
type?: string;
subtitle?: ReactNode;
label: string;
onClick?: () => void;
href?: string;
};
/**
* This card type has been deprecated. Instead use plain Material UI Card and helpers
* where appropriate.
*
* @example
* ```
*
*
*
*
* Some text
*
*
*
*
*
* ```
*
* @deprecated Use plain Material UI `` and composable helpers instead.
* @see https://v4.mui.com/components/cards/
*/
declare function ItemCard(props: ItemCardProps): react_jsx_runtime.JSX.Element;
/** @public */
type ItemCardGridClassKey = 'root';
declare const styles$1: (theme: Theme) => _material_ui_styles.StyleRules<{}, "root">;
/** @public */
type ItemCardGridProps = Partial> & {
/**
* The Card items of the grid.
*/
children?: ReactNode;
};
/**
* A default grid to use when arranging "item cards" - cards that let users
* select among several options.
*
* @remarks
* The immediate children are expected to be Material UI Card components.
*
* Styles for the grid can be overridden using the `classes` prop, e.g.:
*
* `> & {
/**
* A large title to show in the header, providing the main heading.
*
* Use this if you want to have the default styling and placement of a title.
*/
title?: ReactNode;
/**
* A slightly smaller title to show in the header, providing additional
* details.
*
* Use this if you want to have the default styling and placement of a
* subtitle.
*/
subtitle?: ReactNode;
/**
* Custom children to draw in the header.
*
* If the title and/or subtitle were specified, the children are drawn below
* those.
*/
children?: ReactNode;
};
/**
* A simple card header, rendering a default look for "item cards" - cards that
* are arranged in a grid for users to select among several options.
*
* @remarks
* This component expects to be placed within a Material UI ``.
*
* Styles for the header can be overridden using the `classes` prop, e.g.:
*
* ` & {
themeId: string;
};
declare function PageWithHeader(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
/**
* Props for {@link ProxiedSignInPage}.
*
* @public
*/
type ProxiedSignInPageProps = SignInPageProps & {
/**
* The provider to use, e.g. "gcpIap" or "awsalb". This must correspond to
* a properly configured auth provider ID in the auth backend.
*/
provider: string;
/**
* Optional headers which are passed along with the request to the
* underlying provider
*/
headers?: HeadersInit | (() => HeadersInit) | (() => Promise);
/**
* Error component to be rendered instead of the default error panel in case
* sign in fails.
*/
ErrorComponent?: ComponentType<{
error?: Error;
}>;
};
/**
* 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) => react_jsx_runtime.JSX.Element | null;
/** @public */
type SidebarOptions = {
drawerWidthClosed?: number;
drawerWidthOpen?: number;
};
/** @public */
type SubmenuOptions = {
drawerWidthClosed?: number;
drawerWidthOpen?: number;
};
declare const sidebarConfig: {
drawerWidthClosed: number;
drawerWidthOpen: number;
defaultOpenDelayMs: number;
defaultCloseDelayMs: number;
defaultFadeDuration: number;
logoHeight: number;
iconContainerWidth: number;
iconSize: number;
iconPadding: number;
selectedIndicatorWidth: number;
userBadgePadding: number;
userBadgeDiameter: number;
mobileSidebarHeight: number;
};
declare const SIDEBAR_INTRO_LOCAL_STORAGE = "@backstage/core/sidebar-intro-dismissed";
/** @public */
type SidebarClassKey = 'drawer' | 'drawerOpen';
/** @public */
type SidebarProps = {
openDelayMs?: number;
closeDelayMs?: number;
sidebarOptions?: SidebarOptions;
submenuOptions?: SubmenuOptions;
disableExpandOnHover?: boolean;
children?: ReactNode;
};
/**
* Passing children into the desktop or mobile sidebar depending on the context
*
* @public
*/
declare const Sidebar: (props: SidebarProps) => react_jsx_runtime.JSX.Element;
/**
* Props of MobileSidebar
*
* @public
*/
type MobileSidebarProps = {
children?: ReactNode;
};
/**
* A navigation component for mobile screens, which sticks to the bottom.
*
* @remarks
* It alternates the normal sidebar by grouping the `SidebarItems` based on provided `SidebarGroup`s
* either rendering them as a link or an overlay menu.
* If no `SidebarGroup`s are provided the sidebar content is wrapped in an default overlay menu.
*
* @public
*/
declare const MobileSidebar: (props: MobileSidebarProps) => react_jsx_runtime.JSX.Element | null;
/**
* Props for the `SidebarGroup`
*
* @public
*/
interface SidebarGroupProps extends BottomNavigationActionProps {
/**
* If the `SidebarGroup` should be a `Link`, `to` should be a pathname to that location
*/
to?: string;
/**
* If the `SidebarGroup`s should be in a different order than in the normal `Sidebar`, you can provide
* each `SidebarGroup` it's own priority to reorder them.
*/
priority?: number;
/**
* React children
*/
children?: ReactNode;
}
/**
* Groups items of the `Sidebar` together.
*
* @remarks
* On bigger screens, this won't have any effect at the moment.
* On small screens, it will add an action to the bottom navigation - either triggering an overlay menu or acting as a link
*
* @public
*/
declare const SidebarGroup: (props: SidebarGroupProps) => react_jsx_runtime.JSX.Element;
/** @public */
type SidebarSubmenuItemClassKey = 'item' | 'itemContainer' | 'selected' | 'label' | 'subtitle' | 'dropdownArrow' | 'dropdown' | 'dropdownItem' | 'textContent';
/**
* Clickable item displayed when submenu item is clicked.
* title: Text content of item
* to: Path to navigate to when item is clicked
*
* @public
*/
type SidebarSubmenuItemDropdownItem = {
title: string;
to: string;
};
/**
* Holds submenu item content.
*
* @remarks
* title: Text content of submenu item
* subtitle: A subtitle displayed under the main title
* to: Path to navigate to when item is clicked
* icon: Icon displayed on the left of text content
* dropdownItems: Optional array of dropdown items displayed when submenu item is clicked.
*
* @public
*/
type SidebarSubmenuItemProps = {
title: string;
subtitle?: string;
to?: string;
icon?: IconComponent;
dropdownItems?: SidebarSubmenuItemDropdownItem[];
exact?: boolean;
initialShowDropdown?: boolean;
};
/**
* Item used inside a submenu within the sidebar.
*
* @public
*/
declare const SidebarSubmenuItem: (props: SidebarSubmenuItemProps) => react_jsx_runtime.JSX.Element;
/** @public */
type SidebarSubmenuClassKey = 'root' | 'drawer' | 'drawerOpen' | 'title';
/**
* Holds a title for text Header of a sidebar submenu and children
* components to be rendered inside SidebarSubmenu
*
* @public
*/
type SidebarSubmenuProps = {
title?: string;
children: ReactNode;
};
/**
* Used inside SidebarItem to display an expandable Submenu
*
* @public
*/
declare const SidebarSubmenu: (props: SidebarSubmenuProps) => react_jsx_runtime.JSX.Element;
type SidebarPageClassKey = 'root';
/**
* Props for SidebarPage
*
* @public
*/
type SidebarPageProps = {
children?: ReactNode;
};
declare function SidebarPage(props: SidebarPageProps): react_jsx_runtime.JSX.Element;
/**
* This hook provides a react ref to the main content.
* Allows to set an element as the main content and focus on that component.
*
* *Note: If `contentRef` is not set `focusContent` is noop. `Content` component sets this ref automatically*
*
* @public
* @example
* Focus current content
* ```tsx
* const { focusContent} = useContent();
* ...
*
* ```
* @example
* Set the reference to an Html element
* ```
* const { contentRef } = useContent();
* ...
* Main Content
* ```
*/
declare function useContent(): {
focusContent: () => void;
contentRef: MutableRefObject | undefined;
};
/** @public */
type SidebarItemClassKey = 'root' | 'buttonItem' | 'closed' | 'open' | 'highlightable' | 'highlighted' | 'label' | 'iconContainer' | 'searchRoot' | 'searchField' | 'searchFieldHTMLInput' | 'searchContainer' | 'secondaryAction' | 'closedItemIcon' | 'submenuArrow' | 'expandButton' | 'arrows' | 'selected';
type SidebarItemBaseProps = {
icon: IconComponent;
text?: string;
hasNotifications?: boolean;
hasSubmenu?: boolean;
disableHighlight?: boolean;
className?: string;
noTrack?: boolean;
onClick?: (ev: MouseEvent) => void;
};
type SidebarItemButtonProps = SidebarItemBaseProps & {
onClick: (ev: MouseEvent) => void;
children?: ReactNode;
};
type SidebarItemLinkProps = SidebarItemBaseProps & {
to: string;
onClick?: (ev: MouseEvent) => void;
} & NavLinkProps;
type SidebarItemWithSubmenuProps = SidebarItemBaseProps & {
to?: string;
onClick?: (ev: MouseEvent) => void;
children: ReactNode;
};
/**
* SidebarItem with 'to' property will be a clickable link.
* SidebarItem with 'onClick' property and without 'to' property will be a clickable button.
* SidebarItem which wraps a SidebarSubmenu will be a clickable button which opens a submenu.
*/
type SidebarItemProps = SidebarItemLinkProps | SidebarItemButtonProps | SidebarItemWithSubmenuProps;
/**
* Creates a `SidebarItem`
*
* @remarks
* If children contain a `SidebarSubmenu` component the `SidebarItem` will have a expandable submenu
*/
declare const SidebarItem: (props: SidebarItemProps) => JSX.Element;
type SidebarSearchFieldProps = {
onSearch: (input: string) => void;
to?: string;
icon?: IconComponent;
};
declare function SidebarSearchField(props: SidebarSearchFieldProps): react_jsx_runtime.JSX.Element;
type SidebarSpaceClassKey = 'root';
declare const SidebarSpace: ComponentType & StyledComponentProps<"root">>;
type SidebarSpacerClassKey = 'root';
declare const SidebarSpacer: ComponentType & StyledComponentProps<"root">>;
type SidebarDividerClassKey = 'root';
declare const SidebarDivider: ComponentType & StyledComponentProps<"root">>;
declare const SidebarScrollWrapper: ComponentType & StyledComponentProps<"root">>;
/**
* A button which allows you to expand the sidebar when clicked.
*
* @remarks
* Use optionally to replace sidebar's expand-on-hover feature with expand-on-click.
*
* If you are using this you might want to set the `disableExpandOnHover` of the `Sidebar` to `true`.
*
* @public
*/
declare const SidebarExpandButton: () => react_jsx_runtime.JSX.Element | null;
/**
* Types for the `SidebarContext`
*
* @public @deprecated
* Use `SidebarOpenState` instead.
*/
type SidebarContextType = {
isOpen: boolean;
setOpen: (open: boolean) => void;
};
/**
* The open state of the sidebar.
*
* @public
*/
type SidebarOpenState = {
/**
* Whether or not the sidebar is open and full-width. When `false`, the
* sidebar is "closed" and typically only shows icons with no text.
*/
isOpen: boolean;
/**
* A function to set whether or not the sidebar is open. Pass `true` to open
* the sidebar. Pass `false` to close it.
*/
setOpen: (open: boolean) => void;
};
/**
* Context whether the `Sidebar` is open
*
* @public @deprecated
* Use `` + `useSidebarOpenState()` instead.
*/
declare const LegacySidebarContext: react.Context;
/**
* Provides context for reading and updating sidebar state.
*
* @public
*/
declare function SidebarOpenStateProvider(props: {
children: ReactNode;
value: SidebarOpenState;
}): react_jsx_runtime.JSX.Element;
/**
* Hook to read and update the sidebar's open state, which controls whether or
* not the sidebar is open and full-width, or closed and only displaying icons.
*
* @public
*/
declare const useSidebarOpenState: () => SidebarOpenState;
/**
* Type of `SidebarPinStateContext`
*
* @public
* @deprecated Use `SidebarPinState` instead.
*/
type SidebarPinStateContextType = {
isPinned: boolean;
toggleSidebarPinState: () => any;
isMobile?: boolean;
};
/**
* The pin state of the sidebar.
*
* @public
*/
type SidebarPinState = {
/**
* Whether or not the sidebar is pinned to the `open` state. When `isPinned`
* is `false`, the sidebar opens and closes on hover. When `true`, the
* sidebar is permanently opened, regardless of user interaction.
*/
isPinned: boolean;
/**
* A function to toggle the pin state of the sidebar.
*/
toggleSidebarPinState: () => any;
/**
* Whether or not the sidebar is or should be rendered in a mobile-optimized
* way.
*/
isMobile?: boolean;
};
/**
* Contains the state on how the `Sidebar` is rendered
*
* @public @deprecated
* Use `` + `useSidebarPinState()` instead.
*/
declare const LegacySidebarPinStateContext: react.Context;
/**
* Provides state for how the `Sidebar` is rendered
*
* @public
*/
declare function SidebarPinStateProvider(props: {
children: ReactNode;
value: SidebarPinStateContextType;
}): react_jsx_runtime.JSX.Element;
/**
* Hook to read and update sidebar pin state, which controls whether or not the
* sidebar is pinned open.
*
* @public
*/
declare const useSidebarPinState: () => SidebarPinState;
type SignInProviderConfig = {
id: string;
title: string;
message: string;
apiRef: ApiRef;
};
/** @public */
type IdentityProviders = ('guest' | 'custom' | SignInProviderConfig)[];
type CommonSignInPageProps = SignInPageProps & {
/**
* Error component to be rendered instead of the default error panel in case
* sign in fails.
*/
ErrorComponent?: ComponentType<{
error?: Error;
}>;
};
type MultiSignInPageProps = CommonSignInPageProps & {
providers: IdentityProviders;
title?: string;
titleComponent?: ReactNode;
align?: 'center' | 'left';
};
type SingleSignInPageProps = CommonSignInPageProps & {
provider: SignInProviderConfig;
auto?: boolean;
};
type Props$2 = MultiSignInPageProps | SingleSignInPageProps;
declare function SignInPage(props: Props$2): react_jsx_runtime.JSX.Element;
type SignInPageClassKey = 'container' | 'item';
/** @public */
type CustomProviderClassKey = 'form' | 'button';
/**
* An implementation of the IdentityApi that is constructed using
* various backstage user identity representations.
*
* @public
*/
declare class UserIdentity implements IdentityApi {
private profilePromise?;
/**
* Creates a new IdentityApi that acts as a Guest User.
*
* @public
*/
static createGuest(): IdentityApi;
/**
* Creates a new IdentityApi using a legacy SignInResult object.
*
* @public
*/
static fromLegacy(result: {
/**
* User ID that will be returned by the IdentityApi
*/
userId: string;
profile: ProfileInfo;
/**
* Function used to retrieve an ID token for the signed in user.
*/
getIdToken?: () => Promise;
/**
* Sign out handler that will be called if the user requests to sign out.
*/
signOut?: () => Promise;
}): IdentityApi;
/**
* Creates a new IdentityApi implementation using a user identity
* and an auth API that will be used to request backstage tokens.
*
* @public
*/
static create(options: {
identity: BackstageUserIdentity;
authApi: ProfileInfoApi & BackstageIdentityApi & SessionApi;
/**
* Passing a profile synchronously allows the deprecated `getProfile` method to be
* called by consumers of the {@link @backstage/core-plugin-api#IdentityApi}. If you
* do not have any consumers of that method then this is safe to leave out.
*
* @deprecated Only provide this if you have plugins that call the synchronous `getProfile` method, which is also deprecated.
*/
profile?: ProfileInfo;
}): IdentityApi;
private readonly identity;
private readonly authApi;
private readonly profile?;
private constructor();
/** {@inheritdoc @backstage/core-plugin-api#IdentityApi.getUserId} */
getUserId(): string;
/** {@inheritdoc @backstage/core-plugin-api#IdentityApi.getIdToken} */
getIdToken(): Promise;
/** {@inheritdoc @backstage/core-plugin-api#IdentityApi.getProfile} */
getProfile(): ProfileInfo;
/** {@inheritdoc @backstage/core-plugin-api#IdentityApi.getProfileInfo} */
getProfileInfo(): Promise;
/** {@inheritdoc @backstage/core-plugin-api#IdentityApi.getBackstageIdentity} */
getBackstageIdentity(): Promise;
/** {@inheritdoc @backstage/core-plugin-api#IdentityApi.getCredentials} */
getCredentials(): Promise<{
token?: string | undefined;
}>;
/** {@inheritdoc @backstage/core-plugin-api#IdentityApi.signOut} */
signOut(): Promise;
}
type TabbedCardClassKey = 'root' | 'indicator';
/** @public */
type BoldHeaderClassKey = 'root' | 'title' | 'subheader';
type Props$1 = {
/** @deprecated Use errorBoundaryProps instead */
slackChannel?: string;
errorBoundaryProps?: ErrorBoundaryProps;
children?: ReactElement[];
onChange?: (event: ChangeEvent<{}>, value: number | string) => void;
title?: string;
value?: number | string;
deepLink?: BottomLinkProps;
};
declare function TabbedCard(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
/** @public */
type CardTabClassKey = 'root' | 'selected';
type CardTabProps = TabProps & {
children: ReactNode;
};
/**
* Card tab component used in {@link TabbedCard}
*
* @public
*
*/
declare function CardTab(props: PropsWithChildren): react_jsx_runtime.JSX.Element;
type Props = ComponentProps;
/** @public */
type BreadcrumbsClickableTextClassKey = 'root';
/** @public */
type BreadcrumbsStyledBoxClassKey = 'root';
/** @public */
type BreadcrumbsCurrentPageClassKey = 'root';
/**
* Breadcrumbs component to show navigation hierarchical structure
*
* @public
*
*/
declare function Breadcrumbs(props: Props): react_jsx_runtime.JSX.Element;
type BackstageComponentsNameToClassKey = {
BackstageAvatar: AvatarClassKey;
BackstageDependencyGraphDefaultLabel: DependencyGraphDefaultLabelClassKey;
BackstageDependencyGraphDefaultNode: DependencyGraphDefaultNodeClassKey;
BackstageDependencyGraphEdge: DependencyGraphEdgeClassKey;
BackstageDependencyGraphNode: DependencyGraphNodeClassKey;
BackstageDismissableBanner: DismissableBannerClassKey;
BackstageEmptyState: EmptyStateClassKey;
BackstageEmptyStateImage: EmptyStateImageClassKey;
BackstageErrorPanel: ErrorPanelClassKey;
BackstageFeatureCalloutCircular: FeatureCalloutCircleClassKey;
BackstageHeaderIconLinkRow: HeaderIconLinkRowClassKey;
BackstageIconLinkVertical: IconLinkVerticalClassKey;
BackstageHorizontalScrollGrid: HorizontalScrollGridClassKey;
BackstageLifecycle: LifecycleClassKey;
BackstageMarkdownContent: MarkdownContentClassKey;
BackstageLoginRequestListItem: LoginRequestListItemClassKey;
BackstageLogViewer: LogViewerClassKey;
BackstageOAuthRequestDialog: OAuthRequestDialogClassKey;
BackstageOverflowTooltip: OverflowTooltipClassKey;
BackstageGauge: GaugeClassKey;
BackstageGaugeCard: GaugeCardClassKey;
BackstageResponseErrorPanel: ResponseErrorPanelClassKey;
BackstageSelectInputBase: SelectInputBaseClassKey;
BackstageSelect: SelectClassKey;
BackstageClosedDropdown: ClosedDropdownClassKey;
BackstageOpenedDropdown: OpenedDropdownClassKey;
BackstageSimpleStepperFooter: SimpleStepperFooterClassKey;
SimpleStepperStep: SimpleStepperStepClassKey;
BackstageStatus: StatusClassKey;
BackstageMetadataTableTitleCell: MetadataTableTitleCellClassKey;
BackstageMetadataTableCell: MetadataTableCellClassKey;
BackstageMetadataTableList: MetadataTableListClassKey;
BackstageMetadataTableListItem: MetadataTableListItemClassKey;
BackstageStructuredMetadataTableList: StructuredMetadataTableListClassKey;
BackstageStructuredMetadataTableNestedList: StructuredMetadataTableNestedListClassKey;
BackstageSupportButton: SupportButtonClassKey;
BackstageTableFilters: TableFiltersClassKey;
BackstageSubvalueCell: SubvalueCellClassKey;
BackstageTableHeader: TableHeaderClassKey;
BackstageTableToolbar: TableToolbarClassKey;
BackstageTableFiltersContainer: FiltersContainerClassKey;
BackstageTable: TableClassKey;
BackstageWarningPanel: WarningPanelClassKey;
BackstageBottomLink: BottomLinkClassKey;
BackstageBreadcrumbsClickableText: BreadcrumbsClickableTextClassKey;
BackstageBreadcrumbsStyledBox: BreadcrumbsStyledBoxClassKey;
BreadcrumbsCurrentPage: BreadcrumbsCurrentPageClassKey;
BackstageContent: BackstageContentClassKey;
BackstageContentHeader: ContentHeaderClassKey;
BackstageErrorPage: ErrorPageClassKey;
BackstageErrorPageMicDrop: MicDropClassKey;
BackstageErrorPageStackDetails: StackDetailsClassKey;
BackstageHeader: HeaderClassKey;
BackstageHeaderLabel: HeaderLabelClassKey;
BackstageHeaderTabs: HeaderTabsClassKey;
BackstageInfoCard: InfoCardClassKey;
BackstageInfoCardCardActionsTopRight: CardActionsTopRightClassKey;
BackstageItemCardGrid: ItemCardGridClassKey;
BackstageItemCardHeader: ItemCardHeaderClassKey;
BackstagePage: PageClassKey;
BackstageSidebar: SidebarClassKey;
BackstageSidebarSpace: SidebarSpaceClassKey;
BackstageSidebarSpacer: SidebarSpacerClassKey;
BackstageSidebarDivider: SidebarDividerClassKey;
BackstageSidebarItem: SidebarItemClassKey;
BackstageSidebarSubmenu: SidebarSubmenuClassKey;
BackstageSidebarSubmenuItem: SidebarSubmenuItemClassKey;
BackstageSidebarPage: SidebarPageClassKey;
BackstageCustomProvider: CustomProviderClassKey;
BackstageSignInPage: SignInPageClassKey;
BackstageTabbedCard: TabbedCardClassKey;
BackstageTabbedCardBoldHeader: BoldHeaderClassKey;
BackstageCardTab: CardTabClassKey;
BackstageLink: LinkClassKey;
BackstageFavoriteToggleIcon: FavoriteToggleIconClassKey;
};
/** @public */
type BackstageOverrides = Overrides & {
[Name in keyof BackstageComponentsNameToClassKey]?: Partial>;
};
declare module '@backstage/theme' {
interface OverrideComponentNameToClassKeys extends BackstageComponentsNameToClassKey {
}
}
/** @public */
declare const coreComponentsTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"core-components", {
readonly "table.filter.title": "Filters";
readonly "table.filter.placeholder": "All results";
readonly "table.filter.clearAll": "Clear all";
readonly "table.body.emptyDataSourceMessage": "No records to display";
readonly "table.header.actions": "Actions";
readonly "table.toolbar.search": "Filter";
readonly "table.pagination.labelDisplayedRows": "{from}-{to} of {count}";
readonly "table.pagination.firstTooltip": "First Page";
readonly "table.pagination.labelRowsSelect": "rows";
readonly "table.pagination.lastTooltip": "Last Page";
readonly "table.pagination.nextTooltip": "Next Page";
readonly "table.pagination.previousTooltip": "Previous Page";
readonly "emptyState.missingAnnotation.title": "Missing Annotation";
readonly "emptyState.missingAnnotation.actionTitle": "Add the annotation to your component YAML as shown in the highlighted example below:";
readonly "emptyState.missingAnnotation.readMore": "Read more";
readonly "signIn.title": "Sign In";
readonly "signIn.loginFailed": "Login failed";
readonly "signIn.customProvider.title": "Custom User";
readonly "signIn.customProvider.continue": "Continue";
readonly "signIn.customProvider.subtitle": "Enter your own User ID and credentials.\n This selection will not be stored.";
readonly "signIn.customProvider.userId": "User ID";
readonly "signIn.customProvider.tokenInvalid": "Token is not a valid OpenID Connect JWT Token";
readonly "signIn.customProvider.idToken": "ID Token (optional)";
readonly "signIn.guestProvider.title": "Guest";
readonly "signIn.guestProvider.enter": "Enter";
readonly "signIn.guestProvider.subtitle": "Enter as a Guest User.\n You will not have a verified identity, meaning some features might be unavailable.";
readonly skipToContent: "Skip to content";
readonly "copyTextButton.tooltipText": "Text copied to clipboard";
readonly "simpleStepper.finish": "Finish";
readonly "simpleStepper.reset": "Reset";
readonly "simpleStepper.next": "Next";
readonly "simpleStepper.skip": "Skip";
readonly "simpleStepper.back": "Back";
readonly "errorPage.title": "Looks like someone dropped the mic!";
readonly "errorPage.subtitle": "ERROR {{status}}: {{statusMessage}}";
readonly "errorPage.goBack": "Go back";
readonly "errorPage.showMoreDetails": "Show more details";
readonly "errorPage.showLessDetails": "Show less details";
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";
readonly "oauthRequestDialog.rejectAll": "Reject All";
readonly "supportButton.title": "Support";
readonly "supportButton.close": "Close";
readonly "alertDisplay.message_one": "({{ count }} newer message)";
readonly "alertDisplay.message_other": "({{ count }} newer messages)";
readonly "autoLogout.stillTherePrompt.title": "Logging out due to inactivity";
readonly "autoLogout.stillTherePrompt.buttonText": "Yes! Don't log me out";
readonly "dependencyGraph.fullscreenTooltip": "Toggle fullscreen";
readonly "proxiedSignInPage.title": "You do not appear to be signed in. Please try reloading the browser page.";
readonly "logViewer.searchField.placeholder": "Search";
readonly "logViewer.downloadBtn.tooltip": "Download logs";
}>;
export { AlertDisplay, AppIcon, AutoLogout, Avatar, BottomLink, Breadcrumbs, BrokenImageIcon, Button, CardTab, CatalogIcon, ChatIcon, CodeSnippet, Content, ContentHeader, CopyTextButton, CreateButton, DashboardIcon, DependencyGraph, DependencyGraphTypes, DismissableBanner, DocsIcon, EmailIcon, EmptyState, ErrorBoundary, ErrorPage, ErrorPanel, FavoriteToggle, FavoriteToggleIcon, FeatureCalloutCircular, Gauge, GaugeCard, GitHubIcon, GroupIcon, Header, HeaderActionMenu, HeaderIconLinkRow, HeaderLabel, HeaderTabs, HelpIcon, HorizontalScrollGrid, IconLinkVertical, InfoCard, ItemCard, ItemCardGrid, ItemCardHeader, Lifecycle, LinearGauge, Link, LinkButton, LogViewer, MarkdownContent, MissingAnnotationEmptyState, MobileSidebar, OAuthRequestDialog, OverflowTooltip, Page, PageWithHeader, Progress, ProxiedSignInPage, ResponseErrorPanel, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, Sidebar, LegacySidebarContext as SidebarContext, SidebarDivider, SidebarExpandButton, SidebarGroup, SidebarItem, SidebarOpenStateProvider, SidebarPage, LegacySidebarPinStateContext as SidebarPinStateContext, SidebarPinStateProvider, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpacer, SidebarSubmenu, SidebarSubmenuItem, SignInPage, SimpleStepper, SimpleStepperStep, StarIcon, StatusAborted, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, SubvalueCell, SupportButton, TabbedCard, TabbedLayout, Table, TrendLine, UnstarredIcon, UserIcon, UserIdentity, WarningIcon, WarningPanel, coreComponentsTranslationRef, sidebarConfig, useContent, useQueryParamState, useSidebarOpenState, useSidebarPinState, useSupportConfig };
export type { AlertDisplayProps, AppIconProps, AutoLogoutProps, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLinkClassKey, BottomLinkProps, BreadcrumbsClickableTextClassKey, BreadcrumbsCurrentPageClassKey, BreadcrumbsStyledBoxClassKey, ButtonProps, CardActionsTopRightClassKey, CardTabClassKey, ClosedDropdownClassKey, CodeSnippetProps, ContentHeaderClassKey, CopyTextButtonProps, CreateButtonProps, CustomProviderClassKey, DependencyGraphDefaultLabelClassKey, DependencyGraphDefaultNodeClassKey, DependencyGraphEdgeClassKey, DependencyGraphNodeClassKey, DependencyGraphProps, DismissableBannerClassKey, DismissbleBannerClassKey, EmptyStateClassKey, EmptyStateImageClassKey, ErrorBoundaryProps, ErrorPageClassKey, ErrorPanelClassKey, ErrorPanelProps, FavoriteToggleIconClassKey, FavoriteToggleProps, FeatureCalloutCircleClassKey, FiltersContainerClassKey, GaugeCardClassKey, GaugeClassKey, GaugeProps, GaugePropsGetColor, GaugePropsGetColorOptions, HeaderActionMenuItem, HeaderActionMenuProps, HeaderClassKey, HeaderIconLinkRowClassKey, HeaderLabelClassKey, HeaderTabsClassKey, HorizontalScrollGridClassKey, IconComponentProps, IconLinkVerticalClassKey, IconLinkVerticalProps, IdentityProviders, InfoCardClassKey, InfoCardVariants, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeaderClassKey, ItemCardHeaderProps, LifecycleClassKey, LinkButtonProps, LinkClassKey, LinkProps, LogViewerClassKey, LogViewerProps, LoginRequestListItemClassKey, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MobileSidebarProps, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltipClassKey, PageClassKey, ProxiedSignInPageProps, ResponseErrorPanelClassKey, SelectClassKey, SelectInputBaseClassKey, SelectItem, SelectedItems, SidebarClassKey, SidebarContextType, SidebarDividerClassKey, SidebarGroupProps, SidebarItemClassKey, SidebarOpenState, SidebarOptions, SidebarPageClassKey, SidebarPageProps, SidebarPinState, SidebarPinStateContextType, SidebarProps, SidebarSpaceClassKey, SidebarSpacerClassKey, SidebarSubmenuClassKey, SidebarSubmenuItemClassKey, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPageClassKey, SignInProviderConfig, SimpleStepperFooterClassKey, SimpleStepperStepClassKey, StackDetailsClassKey, StatusClassKey, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, StructuredMetadataTableProps, SubmenuOptions, SubvalueCellClassKey, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabbedCardClassKey, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableOptions, TableProps, TableState, TableToolbarClassKey, WarningPanelClassKey };