tessl/npm-backstage--plugin-catalog-react

A frontend library that helps other Backstage plugins interact with the catalog through React components, hooks, and utilities.

—

Pending

Overview

Eval results

Files

Picker Components

Name: tessl/npm-backstage--plugin-catalog-react
Author: tessl

Interactive React components for selecting and filtering entities by various criteria. These components provide user interfaces for the filtering system and integrate with entity list contexts.

Capabilities

EntityKindPicker

Component for selecting entity kinds with a dropdown or autocomplete interface.

/**
 * Interactive component for selecting entity kinds
 * @returns Rendered kind picker component
 */
function EntityKindPicker(): JSX.Element;

Usage Examples:

import { EntityKindPicker, EntityListProvider } from '@backstage/plugin-catalog-react';

function CatalogPage() {
  return (
    <EntityListProvider>
      <div>
        <h3>Filter by Kind</h3>
        <EntityKindPicker />
        
        <EntityTable
          title="Filtered Entities"
          entities={entities}
          columns={defaultColumns}
        />
      </div>
    </EntityListProvider>
  );
}

EntityTypePicker

Component for selecting entity types with support for multiple selections.

/**
 * Interactive component for selecting entity types
 * @returns Rendered type picker component  
 */
function EntityTypePicker(): JSX.Element;

Usage Examples:

import { EntityTypePicker } from '@backstage/plugin-catalog-react';

// Used within EntityListProvider context
<div>
  <h3>Filter by Type</h3>
  <EntityTypePicker />
</div>

EntityOwnerPicker

Component for selecting entity owners with user and group support.

/**
 * Interactive component for selecting entity owners
 * @returns Rendered owner picker component
 */
function EntityOwnerPicker(): JSX.Element;

Usage Examples:

import { EntityOwnerPicker } from '@backstage/plugin-catalog-react';

// Allows filtering by user or group ownership
<div>
  <h3>Filter by Owner</h3>
  <EntityOwnerPicker />
</div>

EntityTagPicker

Component for selecting entity tags with autocomplete and multiple selection support.

/**
 * Interactive component for selecting entity tags
 * @returns Rendered tag picker component
 */
function EntityTagPicker(): JSX.Element;

Usage Examples:

import { EntityTagPicker } from '@backstage/plugin-catalog-react';

// Multi-select tag filtering
<div>
  <h3>Filter by Tags</h3>
  <EntityTagPicker />
</div>

EntityLifecyclePicker

Component for selecting entity lifecycle stages.

/**
 * Interactive component for selecting entity lifecycle stages
 * @returns Rendered lifecycle picker component
 */
function EntityLifecyclePicker(): JSX.Element;

Usage Examples:

import { EntityLifecyclePicker } from '@backstage/plugin-catalog-react';

// Filter by lifecycle stage (experimental, production, deprecated, etc.)
<div>
  <h3>Filter by Lifecycle</h3>
  <EntityLifecyclePicker />
</div>

EntityNamespacePicker

Component for selecting entity namespaces.

/**
 * Interactive component for selecting entity namespaces
 * @returns Rendered namespace picker component
 */
function EntityNamespacePicker(): JSX.Element;

Usage Examples:

import { EntityNamespacePicker } from '@backstage/plugin-catalog-react';

// Filter by namespace
<div>
  <h3>Filter by Namespace</h3>
  <EntityNamespacePicker />
</div>

EntityProcessingStatusPicker

Component for selecting entities by their processing status (errors, processing, etc.).

/**
 * Interactive component for selecting entity processing status
 * @returns Rendered processing status picker component
 */
function EntityProcessingStatusPicker(): JSX.Element;

Usage Examples:

import { EntityProcessingStatusPicker } from '@backstage/plugin-catalog-react';

// Filter by processing status to find problematic entities
<div>
  <h3>Filter by Status</h3>
  <EntityProcessingStatusPicker />
</div>

EntityAutocompletePicker

Generic autocomplete component for entity selection with customizable options.

/**
 * Generic autocomplete component for entity selection
 * @returns Rendered autocomplete picker component
 */
function EntityAutocompletePicker(): JSX.Element;

Usage Examples:

import { EntityAutocompletePicker } from '@backstage/plugin-catalog-react';

// Customizable autocomplete for entity selection
<EntityAutocompletePicker />

UserListPicker

Component for selecting user-based filters (owned, starred, all entities).

/**
 * Interactive component for user-based entity filtering
 * @returns Rendered user list picker component
 */
function UserListPicker(): JSX.Element;

Usage Examples:

import { UserListPicker } from '@backstage/plugin-catalog-react';

// Switch between owned, starred, and all entities
<div>
  <h3>My Entities</h3>
  <UserListPicker />
</div>

EntitySearchBar

Text-based search component for filtering entities by name, description, and tags.

/**
 * Search bar component for text-based entity filtering
 * @returns Rendered search bar component
 */
function EntitySearchBar(): JSX.Element;

Usage Examples:

import { EntitySearchBar } from '@backstage/plugin-catalog-react';

// Full-text search across entity metadata
<div>
  <EntitySearchBar />
  <EntityTable 
    title="Search Results"
    entities={filteredEntities}
    columns={columns}
  />
</div>

Layout Components

CatalogFilterLayout

Layout component that organizes multiple picker components in a consistent structure.

/**
 * Layout component for organizing catalog filter components
 * @returns Rendered filter layout component
 */
function CatalogFilterLayout(): JSX.Element;

Usage Examples:

import { 
  CatalogFilterLayout,
  EntityKindPicker,
  EntityTypePicker,
  EntityOwnerPicker,
  EntityTagPicker,
  EntitySearchBar,
  EntityListProvider
} from '@backstage/plugin-catalog-react';

function CatalogPage() {
  return (
    <EntityListProvider>
      <CatalogFilterLayout>
        <EntitySearchBar />
        <EntityKindPicker />
        <EntityTypePicker />
        <EntityOwnerPicker />
        <EntityTagPicker />
      </CatalogFilterLayout>
      
      <EntityTable
        title="Software Catalog"
        entities={entities}
        columns={defaultColumns}
      />
    </EntityListProvider>
  );
}

Integration with Entity List Context

All picker components automatically integrate with the useEntityList hook and EntityListProvider:

import { 
  EntityListProvider,
  useEntityList,
  EntityKindPicker,
  EntityTypePicker,
  EntityTable
} from '@backstage/plugin-catalog-react';

function CatalogWithFilters() {
  return (
    <EntityListProvider>
      <CatalogContent />
    </EntityListProvider>
  );
}

function CatalogContent() {
  const { entities, filters, loading } = useEntityList();
  
  return (
    <div>
      {/* Pickers automatically update filters */}
      <EntityKindPicker />
      <EntityTypePicker />
      
      {/* Table automatically shows filtered results */}
      <EntityTable
        title={`Entities (${entities.length})`}
        entities={entities}
        columns={defaultColumns}
      />
      
      {loading && <div>Loading...</div>}
    </div>
  );
}

Advanced Usage Patterns

Custom Filter Controls

import { useEntityList, EntityKindFilter } from '@backstage/plugin-catalog-react';

function CustomFilterControls() {
  const { filters, updateFilters } = useEntityList();
  
  const handleQuickFilter = (kind: string) => {
    updateFilters({
      kind: new EntityKindFilter(kind)
    });
  };
  
  return (
    <div>
      <h3>Quick Filters</h3>
      <button onClick={() => handleQuickFilter('component')}>
        Components
      </button>
      <button onClick={() => handleQuickFilter('api')}>
        APIs
      </button>
      <button onClick={() => handleQuickFilter('system')}>
        Systems
      </button>
      
      {/* Standard pickers */}
      <EntityOwnerPicker />
      <EntityTagPicker />
    </div>
  );
}

Filter State Monitoring

import { useEntityList } from '@backstage/plugin-catalog-react';

function FilterStatus() {
  const { filters, entities, backendEntities } = useEntityList();
  
  const activeFilterCount = Object.values(filters).filter(Boolean).length;
  const filteredCount = entities.length;
  const totalCount = backendEntities.length;
  
  return (
    <div>
      <p>
        Showing {filteredCount} of {totalCount} entities
        {activeFilterCount > 0 && ` (${activeFilterCount} filters active)`}
      </p>
      
      {activeFilterCount > 0 && (
        <button onClick={() => updateFilters({})}>
          Clear All Filters
        </button>
      )}
    </div>
  );
}

Install with Tessl CLI

npx tessl i tessl/npm-backstage--plugin-catalog-react

docs

tessl/npm-backstage--plugin-catalog-react