or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mddev-app.mdindex.md
tile.json

components.mddocs/

React Components

Pre-built React components for common Backstage plugin UI patterns, providing entity display, authentication controls, and internationalization features with full Backstage integration.

Capabilities

EntityGridItem

A Material-UI Grid item component that displays entities from the Backstage catalog with automatic entity context provisioning and name display styling.

/**
 * Grid item component with entity context and name display
 * @param props - Grid props with required entity and optional styling
 * @returns JSX.Element with EntityProvider context
 */
const EntityGridItem: (props: EntityGridItemProps) => JSX.Element;

interface EntityGridItemProps extends Omit<GridProps, 'item' | 'container'> {
  /** Backstage catalog entity to display */
  entity: Entity;
}

Usage Examples:

import { EntityGridItem } from "@backstage/dev-utils";
import { Entity } from "@backstage/catalog-model";

const entity: Entity = {
  apiVersion: 'backstage.io/v1alpha1',
  kind: 'Component',
  metadata: {
    name: 'my-service',
    description: 'A service component'
  }
};

// Basic usage
<EntityGridItem entity={entity} xs={12} md={6} />

// With custom styling
<EntityGridItem 
  entity={entity} 
  xs={12} 
  md={6}
  style={{ padding: 16 }}
/>

The component automatically:

  • Provides EntityProvider context for child components
  • Displays the entity name above the grid item
  • Applies Backstage theme styling
  • Excludes 'item' and 'container' Grid props to prevent conflicts

SidebarSignOutButton

A sidebar button component that provides user sign-out functionality with customizable icon and text.

/**
 * Sidebar button component for user sign-out
 * @param props - Optional icon and text customization
 * @returns JSX.Element sidebar button
 */
const SidebarSignOutButton: (props: SidebarSignOutButtonProps) => JSX.Element;

interface SidebarSignOutButtonProps {
  /** Custom icon component, defaults to LockIcon */
  icon?: IconComponent;
  /** Button text, defaults to "Sign Out" */
  text?: string;
}

Usage Examples:

import { SidebarSignOutButton } from "@backstage/dev-utils";
import ExitToAppIcon from "@material-ui/icons/ExitToApp";

// Default usage
<SidebarSignOutButton />

// With custom icon and text
<SidebarSignOutButton 
  icon={ExitToAppIcon}
  text="Log Out"
/>

The component automatically:

  • Uses Backstage's identityApiRef for sign-out functionality
  • Integrates with the SidebarItem component
  • Handles authentication state management
  • Applies consistent Backstage sidebar styling

SidebarLanguageSwitcher

A sidebar component that provides a dropdown menu for switching application languages using Backstage's internationalization system.

/**
 * Sidebar component for switching application language
 * @returns JSX.Element language switcher or null if ≤1 languages available
 */
const SidebarLanguageSwitcher: () => JSX.Element | null;

Usage Examples:

import { SidebarLanguageSwitcher } from "@backstage/dev-utils";

// Simple usage - component handles all language detection
<SidebarLanguageSwitcher />

The component automatically:

  • Returns null if one or fewer languages are available
  • Uses Backstage's appLanguageApiRef for language management
  • Displays language names using Intl.DisplayNames when possible
  • Provides accessible ARIA attributes for screen readers
  • Handles language switching and state management
  • Integrates with Material-UI Menu and MenuItem components

Behavior:

  • Shows "Language" text with a translate icon in the sidebar
  • Opens a dropdown menu when clicked showing available languages
  • Highlights the currently selected language
  • Falls back to language codes if display names are unavailable
  • Automatically hides if only one language is configured

Required Dependencies

These components require the following peer dependencies to be installed in your project:

{
  "@backstage/catalog-model": "workspace:^",
  "@backstage/core-components": "workspace:^", 
  "@backstage/core-plugin-api": "workspace:^",
  "@backstage/plugin-catalog-react": "workspace:^",
  "@material-ui/core": "^4.12.2",
  "@material-ui/icons": "^4.9.1",
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
}

Types

import { Entity } from '@backstage/catalog-model';
import { GridProps } from '@material-ui/core/Grid';
import { IconComponent } from '@backstage/core-plugin-api';

// Backstage catalog entity interface
interface Entity {
  apiVersion: string;
  kind: string;
  metadata: {
    name: string;
    namespace?: string;
    description?: string;
    labels?: Record<string, string>;
    annotations?: Record<string, string>;
  };
  spec?: Record<string, any>;
}

// Material-UI Grid component props (subset used)
interface GridProps {
  xs?: boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  sm?: boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  md?: boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  lg?: boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  xl?: boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  style?: React.CSSProperties;
  className?: string;
}

// Backstage icon component type
type IconComponent = React.ComponentType<{
  fontSize?: 'inherit' | 'default' | 'small' | 'large';
  color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'disabled' | 'error';
}>;