feat(extensions): add catalog source filter and display to Extensions UI

workspaces/extensions/.changeset/catalog-source-filter-ui.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-extensions': minor
+---
+
+Add catalog source filter and display to Extensions UI

workspaces/extensions/app-config.yaml

@@ -138,6 +138,15 @@ permission:
         - name: user:development/guest
 
 extensions:
+  catalogSources:
+    primary:
+      label: Red Hat
+      description: Plugins provided and supported by Red Hat
+      badge: Red Hat
+    community:
+      label: Community
+      description: Community-maintained plugins
+      badge: Community
   # YAML files are in the examples directory
   directory: ../../examples
 

workspaces/extensions/plugins/extensions/config.d.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface Config {
+  extensions?: {
+    /**
+     * Metadata for catalog sources used to label and filter plugins by origin.
+     * Keys correspond to the `extensions.backstage.io/catalog-source` annotation value.
+     * @visibility frontend
+     */
+    catalogSources?: {
+      [sourceKey: string]: {
+        /**
+         * Display label for this catalog source.
+         * @visibility frontend
+         */
+        label: string;
+
+        /**
+         * Optional description shown as a tooltip.
+         * @visibility frontend
+         */
+        description?: string;
+
+        /**
+         * Optional badge text shown on the plugin card in list view.
+         * @visibility frontend
+         */
+        badge?: string;
+      };
+    };
+  };
+}

workspaces/extensions/plugins/extensions/dev/__data__/mockExtensions.ts

@@ -48,6 +48,9 @@ export const mockPlugins: ExtensionsPlugin[] = [
       name: 'techdocs',
       title: 'TechDocs',
       description: 'Documentation as code for your Backstage instance.',
+      annotations: {
+        'extensions.backstage.io/catalog-source': 'community',
+      },
     },
     spec: {
       categories: ['documentation'],
@@ -63,6 +66,9 @@ export const mockPlugins: ExtensionsPlugin[] = [
       name: 'catalog',
       title: 'Software Catalog',
       description: 'Manage your software ecosystem with a unified catalog.',
+      annotations: {
+        'extensions.backstage.io/catalog-source': 'primary',
+      },
     },
     spec: {
       categories: ['infrastructure'],
@@ -78,6 +84,9 @@ export const mockPlugins: ExtensionsPlugin[] = [
       name: 'scaffolder',
       title: 'Software Templates',
       description: 'Create new components and projects from templates.',
+      annotations: {
+        'extensions.backstage.io/catalog-source': 'primary',
+      },
     },
     spec: {
       categories: ['developer-tools'],

workspaces/extensions/plugins/extensions/package.json

@@ -21,6 +21,7 @@
       "@red-hat-developer-hub/backstage-plugin-extensions-common"
     ]
   },
+  "configSchema": "config.d.ts",
   "sideEffects": false,
   "exports": {
     ".": "./src/index.ts",
@@ -85,6 +86,7 @@
   },
   "files": [
     "app-config.dynamic.yaml",
+    "config.d.ts",
     "dist"
   ]
 }

workspaces/extensions/plugins/extensions/report-alpha.api.md

@@ -246,6 +246,7 @@ export const extensionsTranslationRef: TranslationRef<
     readonly 'metadata.about': string;
     readonly 'metadata.highlights': string;
     readonly 'metadata.category': string;
+    readonly 'metadata.catalogSource': string;
     readonly 'metadata.by': string;
     readonly 'metadata.comma': string;
     readonly 'metadata.versions': string;
@@ -365,6 +366,7 @@ export const extensionsTranslationRef: TranslationRef<
     readonly 'search.clearFilter': string;
     readonly 'search.category': string;
     readonly 'search.supportType': string;
+    readonly 'search.catalogSource': string;
     readonly 'search.noResults': string;
     readonly 'search.filterBy': string;
     readonly 'search.clearFilters': string;

workspaces/extensions/plugins/extensions/src/__fixtures__/mockPlugins.ts

@@ -27,6 +27,9 @@ export const mockPlugins: ExtensionsPlugin[] = [
     metadata: {
       namespace: 'default',
       name: 'plugin-1',
+      annotations: {
+        'extensions.backstage.io/catalog-source': 'primary',
+      },
     },
   },
   {
@@ -36,6 +39,9 @@ export const mockPlugins: ExtensionsPlugin[] = [
       namespace: 'default',
       name: 'plugin-2',
       title: 'Plugin 2',
+      annotations: {
+        'extensions.backstage.io/catalog-source': 'community',
+      },
     },
   },
 ];

workspaces/extensions/plugins/extensions/src/alpha/translations/de.ts

@@ -89,6 +89,7 @@ const extensionsTranslationDe = createTranslationMessages({
     'search.category': 'Kategorie',
     'search.author': 'Autor',
     'search.supportType': 'Typ der Unterstützung',
+    'search.catalogSource': 'Katalogquelle',
     'search.noResults': 'Keine Plugins entsprechen Ihren Suchkriterien',
     'search.filterBy': 'Filtern nach',
     'search.clearFilters': 'Filter löschen',
@@ -213,6 +214,7 @@ const extensionsTranslationDe = createTranslationMessages({
     'metadata.category': 'Kategorie',
     'metadata.versions': 'Versionen',
     'metadata.backstageCompatibility': 'Backstage-Kompatibilitätsversion',
+    'metadata.catalogSource': 'Katalogquelle',
     'supportTypes.verifiedBy': 'Verifiziert von {{value}} ({{count}})',
     'supportTypes.customPlugins': 'Benutzerdefinierte Plugins ({{count}})',
     'collection.kubernetes': 'Kubernetes',

workspaces/extensions/plugins/extensions/src/alpha/translations/es.ts

@@ -90,6 +90,7 @@ const extensionsTranslationEs = createTranslationMessages({
     'search.category': 'Categoría',
     'search.author': 'Autor',
     'search.supportType': 'Tipo de soporte',
+    'search.catalogSource': 'Fuente del catálogo',
     'search.noResults':
       'No hay ningún complemento que coincida con los criterios de búsqueda',
     'search.filterBy': 'Filtrar por',
@@ -215,6 +216,7 @@ const extensionsTranslationEs = createTranslationMessages({
     'metadata.category': 'Categoría',
     'metadata.versions': 'Versiones',
     'metadata.backstageCompatibility': 'Versión de compatibilidad de Backstage',
+    'metadata.catalogSource': 'Fuente del catálogo',
     'supportTypes.verifiedBy': 'Verificado por {{value}} ({{count}})',
     'supportTypes.customPlugins': 'Complementos personalizados ({{count}})',
     'collection.kubernetes': 'Kubernetes',

workspaces/extensions/plugins/extensions/src/alpha/translations/fr.ts

@@ -89,6 +89,7 @@ const extensionsTranslationFr = createTranslationMessages({
     'search.category': 'Catégorie',
     'search.author': 'Auteur',
     'search.supportType': 'Type de support',
+    'search.catalogSource': 'Source du catalogue',
     'search.noResults':
       'Aucun plugin ne correspond à vos critères de recherche',
     'search.filterBy': 'Filtrer par',
@@ -213,6 +214,7 @@ const extensionsTranslationFr = createTranslationMessages({
     'metadata.category': 'Catégorie',
     'metadata.versions': 'Versions',
     'metadata.backstageCompatibility': 'Version de compatibilité backstage',
+    'metadata.catalogSource': 'Source du catalogue',
     'supportTypes.verifiedBy': 'Vérifié par {{value}} ({{count}})',
     'supportTypes.customPlugins': 'Plugins personnalisés ({{count}})',
     'collection.kubernetes': 'Kubernetes',

workspaces/extensions/plugins/extensions/src/alpha/translations/it.ts

@@ -92,6 +92,7 @@ const extensionsTranslationIt = createTranslationMessages({
     'search.category': 'Categoria',
     'search.author': 'Autore',
     'search.supportType': 'Tipo di supporto',
+    'search.catalogSource': 'Fonte del catalogo',
     'search.noResults': 'Nessun plugin corrisponde ai criteri di ricerca',
     'search.filterBy': 'Filtra per',
     'search.clearFilters': 'Cancella filtri',
@@ -216,6 +217,7 @@ const extensionsTranslationIt = createTranslationMessages({
     'metadata.category': 'Categoria',
     'metadata.versions': 'Versioni',
     'metadata.backstageCompatibility': 'Versione compatibile con Backstage',
+    'metadata.catalogSource': 'Fonte del catalogo',
     'supportTypes.verifiedBy': 'Verificato da {{value}} ({{count}})',
     'supportTypes.customPlugins': 'Plugin personalizzati ({{count}})',
     'collection.kubernetes': 'Kubernetes',

workspaces/extensions/plugins/extensions/src/alpha/translations/ja.ts

@@ -92,6 +92,7 @@ const extensionsTranslationJa = createTranslationMessages({
     'search.category': 'カテゴリー',
     'search.author': '作成者',
     'search.supportType': 'サポートタイプ',
+    'search.catalogSource': 'カタログソース',
     'search.noResults': '検索条件に一致するプラグインがありません',
     'search.filterBy': 'フィルター',
     'search.clearFilters': 'フィルターをクリア',
@@ -214,6 +215,7 @@ const extensionsTranslationJa = createTranslationMessages({
     'metadata.category': 'カテゴリー',
     'metadata.versions': 'バージョン',
     'metadata.backstageCompatibility': 'Backstage 互換バージョン',
+    'metadata.catalogSource': 'カタログソース',
     'supportTypes.verifiedBy': '{{value}} により検証済み ({{count}})',
     'supportTypes.customPlugins': 'カスタムプラグイン ({{count}})',
     'collection.kubernetes': 'Kubernetes',

workspaces/extensions/plugins/extensions/src/alpha/translations/ref.ts

@@ -111,6 +111,7 @@ export const extensionsMessages = {
     category: 'Category',
     author: 'Author',
     supportType: 'Support type',
+    catalogSource: 'Catalog source',
     noResults: 'No plugins match your search criteria',
     filterBy: 'Filter by',
     clearFilters: 'Clear filters',
@@ -267,6 +268,7 @@ export const extensionsMessages = {
     category: 'Category',
     versions: 'Versions',
     backstageCompatibility: 'Backstage compatibility version',
+    catalogSource: 'Catalog source',
   },
 
   // Support type filters

workspaces/extensions/plugins/extensions/src/components/CatalogSourceBadge.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
+
+import type { ExtensionsPlugin } from '@red-hat-developer-hub/backstage-plugin-extensions-common';
+import { ExtensionsAnnotation } from '@red-hat-developer-hub/backstage-plugin-extensions-common';
+
+import {
+  useCatalogSourceConfig,
+  getCatalogSourceLabel,
+} from '../hooks/useCatalogSourceConfig';
+
+export const CatalogSourceBadge = ({
+  plugin,
+}: {
+  plugin: ExtensionsPlugin;
+}) => {
+  const sourcesConfig = useCatalogSourceConfig();
+  const sourceKey =
+    plugin.metadata?.annotations?.[ExtensionsAnnotation.CATALOG_SOURCE];
+
+  if (!sourceKey) return null;
+
+  const meta = sourcesConfig[sourceKey];
+  const badgeLabel =
+    meta?.badge ?? getCatalogSourceLabel(plugin, sourcesConfig);
+
+  const chip = (
+    <Chip
+      label={badgeLabel}
+      size="small"
+      sx={{
+        backgroundColor: 'action.hover',
+        fontWeight: 500,
+        fontSize: '0.75rem',
+      }}
+    />
+  );
+
+  if (meta?.description) {
+    return (
+      <Tooltip title={meta.description} placement="right" arrow>
+        {chip}
+      </Tooltip>
+    );
+  }
+
+  return chip;
+};