@nospt/plugin-dev-ai-hub 0.2.4 → 0.3.0

package/src/pluginLegacy.ts

@@ -1,42 +0,0 @@
-/**
- * Legacy Backstage frontend system support.
- *
- * For New Frontend System (NFS) use `devAiHubPlugin` from `./plugin` instead.
- */
-import type { ComponentType } from 'react';
-import {
-  createPlugin,
-  createRoutableExtension,
-  createRouteRef,
-  createApiFactory,
-  discoveryApiRef,
-  fetchApiRef,
-} from '@backstage/core-plugin-api';
-import { devAiHubApiRef, DevAiHubClient } from './api/DevAiHubClient';
-
-const rootRouteRef = createRouteRef({ id: 'dev-ai-hub' });
-
-const devAiHubLegacyPlugin = createPlugin({
-  id: 'dev-ai-hub',
-  routes: {
-    root: rootRouteRef,
-  },
-  apis: [
-    createApiFactory({
-      api: devAiHubApiRef,
-      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },
-      factory: ({ discoveryApi, fetchApi }) =>
-        new DevAiHubClient(discoveryApi, fetchApi),
-    }),
-  ],
-});
-
-/** Routable page extension for the legacy frontend system. */
-export const DevAiHubPage: ComponentType = devAiHubLegacyPlugin.provide(
-  createRoutableExtension({
-    name: 'DevAiHubPage',
-    component: () =>
-      import('./components/DevAiHubPage').then(m => m.DevAiHubPage),
-    mountPoint: rootRouteRef,
-  }),
-);

package/src/routes.ts

@@ -1,4 +0,0 @@
-import { createRouteRef } from '@backstage/frontend-plugin-api';
-
-export const rootRouteRef = createRouteRef();
-export const mcpConfigRouteRef = createRouteRef();

package/tests/e2e/.auth.json

@@ -1,14 +0,0 @@
-{
-  "cookies": [],
-  "origins": [
-    {
-      "origin": "http://localhost:3000",
-      "localStorage": [
-        {
-          "name": "language",
-          "value": "en"
-        }
-      ]
-    }
-  ]
-}

package/tests/e2e/asset-detail.spec.ts

@@ -1,90 +0,0 @@
-import { test, expect } from './fixtures/base';
-import { DEV_ASSETS } from './fixtures/mock-api';
-
-const PAGE_URL = '/dev-ai-hub';
-
-// First mock asset: TypeScript Best Practices (instruction, claude-code + github-copilot)
-const ASSET = DEV_ASSETS[0];
-
-test.describe('Asset Detail Panel', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(PAGE_URL);
-    await expect(page.getByText(ASSET.name)).toBeVisible();
-    await page.getByRole('button', { name: 'View details' }).first().click();
-  });
-
-  test('sets assetId query param in the URL', async ({ page }) => {
-    await expect(page).toHaveURL(/assetId=/);
-  });
-
-  test('panel header shows the asset name', async ({ page }) => {
-    // Scope to the drawer; use first() because the name also appears in the Preview tab <h1>
-    const panel = page.locator('[role="presentation"] + div');
-    await expect(panel.getByText(ASSET.name).first()).toBeVisible();
-  });
-
-  test('panel header shows the asset type tag', async ({ page }) => {
-    const panel = page.locator('[role="presentation"] + div');
-    await expect(panel.getByText(ASSET.type)).toBeVisible();
-  });
-
-  test('panel shows description', async ({ page }) => {
-    const panel = page.locator('[role="presentation"] + div');
-    await expect(
-      panel.getByText('Coding standards and best practices for TypeScript projects.'),
-    ).toBeVisible();
-  });
-
-  test('renders Preview, Metadata, and Raw YAML tabs', async ({ page }) => {
-    for (const name of ['Preview', 'Metadata', 'Raw YAML']) {
-      await expect(page.getByRole('tab', { name })).toBeVisible();
-    }
-  });
-
-  test('Preview tab renders the markdown as HTML', async ({ page }) => {
-    // dev mock content starts with "# TypeScript Best Practices"
-    await expect(page.getByRole('heading', { name: 'TypeScript Best Practices' })).toBeVisible();
-  });
-
-  test('Metadata tab shows author, version, branch', async ({ page }) => {
-    const panel = page.locator('[role="presentation"] + div');
-    await page.getByRole('tab', { name: 'Metadata' }).click();
-    await expect(panel.getByText('Author:')).toBeVisible();
-    await expect(panel.getByText('Platform Team')).toBeVisible();
-    await expect(panel.getByText('Version:')).toBeVisible();
-    await expect(panel.getByText('1.0.0')).toBeVisible();
-    await expect(panel.getByText('Branch:')).toBeVisible();
-    await expect(panel.getByText('main')).toBeVisible();
-  });
-
-  test('Metadata tab shows compatible tools as tags', async ({ page }) => {
-    await page.getByRole('tab', { name: 'Metadata' }).click();
-    await expect(page.getByText('Compatible tools')).toBeVisible();
-    await expect(page.getByText('claude-code')).toBeVisible();
-    await expect(page.getByText('github-copilot')).toBeVisible();
-  });
-
-  test('Raw YAML tab shows YAML source', async ({ page }) => {
-    await page.getByRole('tab', { name: 'Raw YAML' }).click();
-    await expect(page.getByText(/name: TypeScript Best Practices/)).toBeVisible();
-  });
-
-  test('"Copy Markdown" button is visible in the actions footer', async ({ page }) => {
-    await expect(page.getByRole('button', { name: 'Copy Markdown' })).toBeVisible();
-  });
-
-  test('"Open in Repo" button is visible in the actions footer', async ({ page }) => {
-    await expect(page.getByRole('button', { name: 'Open in Repo' })).toBeVisible();
-  });
-
-  test('Close button (×) removes assetId from the URL', async ({ page }) => {
-    await page.getByRole('button', { name: 'Close' }).click();
-    await expect(page).not.toHaveURL(/assetId=/);
-  });
-
-  test('clicking the overlay removes assetId from the URL', async ({ page }) => {
-    // Overlay has role="presentation"; click dispatches onClose
-    await page.locator('[role="presentation"]').click({ position: { x: 5, y: 5 } });
-    await expect(page).not.toHaveURL(/assetId=/);
-  });
-});

package/tests/e2e/asset-filtering.spec.ts

@@ -1,145 +0,0 @@
-import { test, expect } from './fixtures/base';
-import { DEV_ASSETS } from './fixtures/mock-api';
-
-const PAGE_URL = '/dev-ai-hub';
-
-test.describe('Asset Filters', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(PAGE_URL);
-    await expect(page.getByText(DEV_ASSETS[0].name)).toBeVisible();
-  });
-
-  // ── Search ────────────────────────────────────────────────────────────────
-
-  test('SearchField has the correct placeholder text', async ({ page }) => {
-    await expect(
-      page.getByRole('searchbox', { name: 'Search assets' }),
-    ).toHaveAttribute('placeholder', 'Search assets by name, description or content…');
-  });
-
-  test('searching by partial name filters the grid', async ({ page }) => {
-    await page.getByRole('searchbox', { name: 'Search assets' }).fill('typescript');
-    await expect(page.getByText('TypeScript Best Practices')).toBeVisible();
-    await expect(page.getByText('Code Review Agent')).not.toBeVisible();
-  });
-
-  test('search is case-insensitive', async ({ page }) => {
-    await page.getByRole('searchbox', { name: 'Search assets' }).fill('GIT COMMIT');
-    await expect(page.getByText('Git Commit', { exact: true })).toBeVisible();
-  });
-
-  test('search by description matches partial words', async ({ page }) => {
-    await page.getByRole('searchbox', { name: 'Search assets' }).fill('conventional git commit');
-    await expect(page.getByText('Git Commit', { exact: true })).toBeVisible();
-  });
-
-  test('empty search restores all results', async ({ page }) => {
-    const search = page.getByRole('searchbox', { name: 'Search assets' });
-    await search.fill('typescript');
-    await expect(page.getByText('TypeScript Best Practices')).toBeVisible();
-
-    await search.clear();
-    for (const asset of DEV_ASSETS) {
-      await expect(page.getByText(asset.name, { exact: true })).toBeVisible();
-    }
-  });
-
-  test('no-match search shows empty state', async ({ page }) => {
-    await page.getByRole('searchbox', { name: 'Search assets' }).fill('xyznotfound');
-    await expect(page.getByText('No assets found')).toBeVisible();
-  });
-
-  // ── Type filter ───────────────────────────────────────────────────────────
-
-  test('all type-filter buttons are rendered', async ({ page }) => {
-    for (const label of ['All', 'Instructions', 'Agents', 'Skills', 'Workflows']) {
-      await expect(page.getByRole('button', { name: label }).first()).toBeVisible();
-    }
-  });
-
-  test('"Instructions" button filters to instruction assets only', async ({ page }) => {
-    await page.getByRole('button', { name: 'Instructions', exact: true }).click();
-    // 2 instruction assets in the mock
-    await expect(page.getByText('2 assets found')).toBeVisible();
-    await expect(page.getByText('TypeScript Best Practices')).toBeVisible();
-    await expect(page.getByText('Security Guidelines')).toBeVisible();
-    await expect(page.getByText('Code Review Agent')).not.toBeVisible();
-  });
-
-  test('"Skills" button filters to skill assets only', async ({ page }) => {
-    await page.getByRole('button', { name: 'Skills', exact: true }).click();
-    await expect(page.getByText('1 asset found')).toBeVisible();
-    await expect(page.getByText('Git Commit', { exact: true })).toBeVisible();
-  });
-
-  test('"Workflows" button filters to workflow assets only', async ({ page }) => {
-    await page.getByRole('button', { name: 'Workflows', exact: true }).click();
-    await expect(page.getByText('1 asset found')).toBeVisible();
-    await expect(page.getByText('Feature Development Workflow')).toBeVisible();
-  });
-
-  test('"All" button clears the type filter', async ({ page }) => {
-    await page.getByRole('button', { name: 'Skills', exact: true }).click();
-    await expect(page.getByText('1 asset found')).toBeVisible();
-
-    await page.getByRole('button', { name: 'All', exact: true }).click();
-    await expect(page.getByText(`${DEV_ASSETS.length} assets found`)).toBeVisible();
-  });
-
-  // ── AI Tool filter ────────────────────────────────────────────────────────
-
-  test('all AI-tool filter buttons are rendered', async ({ page }) => {
-    for (const label of ['All Tools', 'Claude Code', 'GitHub Copilot', 'Google Gemini', 'Cursor']) {
-      await expect(page.getByRole('button', { name: label }).first()).toBeVisible();
-    }
-  });
-
-  test('"Claude Code" tool filter shows only claude-code-compatible assets', async ({ page }) => {
-    await page.getByRole('button', { name: 'Claude Code' }).first().click();
-    // claude-code: mock-1, mock-2, mock-3 (all), mock-5
-    await expect(page.getByText('TypeScript Best Practices')).toBeVisible();
-    await expect(page.getByText('Code Review Agent')).toBeVisible();
-    await expect(page.getByText('Git Commit', { exact: true })).toBeVisible(); // tools: ['all']
-    await expect(page.getByText('Security Guidelines')).toBeVisible();
-    await expect(page.getByText('Product Manager')).not.toBeVisible(); // github-copilot only
-  });
-
-  test('"Cursor" tool filter shows only cursor-compatible assets', async ({ page }) => {
-    await page.getByRole('button', { name: 'Cursor' }).first().click();
-    // cursor: mock-4 (github-copilot, cursor), mock-3 (all)
-    await expect(page.getByText('Feature Development Workflow')).toBeVisible();
-    await expect(page.getByText('Git Commit', { exact: true })).toBeVisible(); // tools: ['all']
-  });
-
-  // ── Tags ──────────────────────────────────────────────────────────────────
-
-  test('tag chips are rendered for the current result set', async ({ page }) => {
-    // 'typescript' tag is present in mock-1
-    await expect(page.getByRole('button', { name: '#typescript' }).first()).toBeVisible();
-  });
-
-  test('clicking a tag chip filters by that tag', async ({ page }) => {
-    await page.getByRole('button', { name: '#git' }).first().click();
-    // mock-3 has ['git', 'commits', 'conventional-commits']
-    await expect(page.getByText('Git Commit', { exact: true })).toBeVisible();
-    await expect(page.getByText('TypeScript Best Practices')).not.toBeVisible();
-  });
-
-  test('clicking a second tag chip adds an AND condition', async ({ page }) => {
-    await page.getByRole('button', { name: '#typescript' }).first().click();
-    await page.getByRole('button', { name: '#best-practices' }).first().click();
-    // Only mock-1 has both 'typescript' AND 'best-practices'
-    await expect(page.getByText('TypeScript Best Practices')).toBeVisible();
-    await expect(page.getByText('Security Guidelines')).not.toBeVisible();
-  });
-
-  test('clicking an active tag chip deselects it', async ({ page }) => {
-    const tagBtn = page.getByRole('button', { name: '#typescript' }).first();
-    await tagBtn.click();
-    await expect(page.getByText('TypeScript Best Practices')).toBeVisible();
-    await expect(page.getByText('Code Review Agent')).not.toBeVisible();
-
-    await tagBtn.click(); // deselect
-    await expect(page.getByText('Code Review Agent')).toBeVisible();
-  });
-});

package/tests/e2e/asset-installation.spec.ts

@@ -1,74 +0,0 @@
-import { test, expect } from './fixtures/base';
-import { DEV_ASSETS } from './fixtures/mock-api';
-
-const PAGE_URL = '/dev-ai-hub';
-
-// First mock asset: TypeScript Best Practices (claude-code + github-copilot)
-const ASSET = DEV_ASSETS[0];
-
-test.describe('Asset Install Dialog', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(PAGE_URL);
-    await expect(page.getByText(ASSET.name)).toBeVisible();
-    await page.getByRole('button', { name: 'Install in editor' }).first().click();
-  });
-
-  test('sets installId query param in the URL', async ({ page }) => {
-    await expect(page).toHaveURL(/installId=/);
-  });
-
-  test('dialog header shows "Install: <asset-name>"', async ({ page }) => {
-    // AssetInstallDialog renders "Install: {asset.name}" in DialogHeader
-    await expect(page.getByText(`Install: ${ASSET.name}`)).toBeVisible();
-  });
-
-  test('subtitle explains the workflow', async ({ page }) => {
-    await expect(
-      page.getByText('Copy the content and place the file at the path shown for your tool.'),
-    ).toBeVisible();
-  });
-
-  test('shows a section for each compatible tool', async ({ page }) => {
-    // ASSET.tools = ['claude-code', 'github-copilot'] — scope to dialog to avoid filter button ambiguity
-    const dialog = page.getByRole('dialog');
-    await expect(dialog.getByText('Claude Code', { exact: true })).toBeVisible();
-    await expect(dialog.getByText('GitHub Copilot', { exact: true })).toBeVisible();
-  });
-
-  test('each tool section shows an "Install path" label', async ({ page }) => {
-    const labels = page.getByText('Install path');
-    await expect(labels.first()).toBeVisible();
-  });
-
-  test('"Copy Content" button is present', async ({ page }) => {
-    await expect(page.getByRole('button', { name: 'Copy Content' }).first()).toBeVisible();
-  });
-
-  test('"Download" button is present', async ({ page }) => {
-    await expect(page.getByRole('button', { name: 'Download' }).first()).toBeVisible();
-  });
-
-  test('"Copy Content" button label changes to "Copied!" after click', async ({ page }) => {
-    await page.getByRole('button', { name: 'Copy Content' }).first().click();
-    await expect(page.getByRole('button', { name: 'Copied!' }).first()).toBeVisible();
-  });
-
-  test('"Close" button dismisses the dialog and clears installId', async ({ page }) => {
-    // Dialog has an X icon button (aria-label="Close") and a footer "Close" text button — use last()
-    await page.getByRole('button', { name: 'Close' }).last().click();
-    await expect(page).not.toHaveURL(/installId=/);
-  });
-
-  // ── Skill asset (tools: all) — verify universal install paths appear ──────
-
-  test('skill asset (tools: all) shows install path for Claude Code', async ({ page }) => {
-    // Close this dialog and open Git Commit (skill, tools: ['all'])
-    await page.getByRole('button', { name: 'Close' }).last().click();
-
-    // Git Commit is the 3rd card (index 2) in the mock data order
-    await page.getByRole('button', { name: 'Install in editor' }).nth(2).click();
-
-    await expect(page.getByText('Install: Git Commit')).toBeVisible();
-    await expect(page.getByRole('dialog').getByText('Claude Code', { exact: true })).toBeVisible();
-  });
-});

package/tests/e2e/dev-ai-hub-page.spec.ts

@@ -1,89 +0,0 @@
-import { test, expect } from './fixtures/base';
-import { DEV_ASSETS, DEV_STATS } from './fixtures/mock-api';
-
-const PAGE_URL = '/dev-ai-hub';
-
-test.describe('Dev AI Hub — main page', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(PAGE_URL);
-    // Wait for the asset grid to finish loading
-    await expect(page.getByText(DEV_ASSETS[0].name)).toBeVisible();
-  });
-
-  test('renders the four stats cards', async ({ page }) => {
-    for (const label of ['Instructions', 'Agents', 'Skills', 'Workflows']) {
-      await expect(page.getByText(label).first()).toBeVisible();
-    }
-  });
-
-  test('stats cards display correct counts from mock data', async ({ page }) => {
-    // The mock has 2 instructions, 2 agents, 1 skill, 1 workflow
-    const byType = DEV_STATS.byType;
-    await expect(page.getByText(String(byType.instruction)).first()).toBeVisible();
-    await expect(page.getByText(String(byType.agent)).first()).toBeVisible();
-    await expect(page.getByText(String(byType.skill)).first()).toBeVisible();
-    await expect(page.getByText(String(byType.workflow)).first()).toBeVisible();
-  });
-
-  test('clicking a stats card filters assets by type', async ({ page }) => {
-    // Stats cards are plain div[role="button"] (not ToggleButton); they come first in DOM order
-    await page.getByRole('button', { name: /Skills/i }).first().click();
-    await expect(page.getByText('1 asset found')).toBeVisible();
-    await expect(page.getByText('Git Commit', { exact: true })).toBeVisible();
-  });
-
-  test('clicking an active stats card removes the type filter', async ({ page }) => {
-    await page.getByRole('button', { name: /Skills/i }).first().click();
-    await expect(page.getByText('1 asset found')).toBeVisible();
-
-    // Click it again to deselect
-    await page.getByRole('button', { name: /Skills/i }).first().click();
-    await expect(page.getByText(`${DEV_STATS.total} assets found`)).toBeVisible();
-  });
-
-  test('renders all mock assets', async ({ page }) => {
-    for (const asset of DEV_ASSETS) {
-      await expect(page.getByText(asset.name, { exact: true })).toBeVisible();
-    }
-  });
-
-  test('cards display type labels', async ({ page }) => {
-    await expect(page.getByText('Instruction').first()).toBeVisible();
-    await expect(page.getByText('Agent').first()).toBeVisible();
-    await expect(page.getByText('Skill').first()).toBeVisible();
-    await expect(page.getByText('Workflow').first()).toBeVisible();
-  });
-
-  test('popular assets (≥5 installs) show 🔥 icon', async ({ page }) => {
-    // TypeScript Best Practices (14), Code Review Agent (8), Git Commit (22), Feature Development Workflow (5) are popular
-    const fireEmojis = page.getByText('🔥');
-    await expect(fireEmojis.first()).toBeVisible();
-  });
-
-  test('assets with 0 installs do not show an install count', async ({ page }) => {
-    // Product Manager has installCount: 0 — the count row is entirely omitted
-    const card = page.locator('text=Product Manager').locator('..');
-    await expect(card).not.toContainText('0');
-  });
-
-  test('"View details" button updates the URL with assetId', async ({ page }) => {
-    await page.getByRole('button', { name: 'View details' }).first().click();
-    await expect(page).toHaveURL(/assetId=/);
-  });
-
-  test('"Install in editor" button updates the URL with installId', async ({ page }) => {
-    await page.getByRole('button', { name: 'Install in editor' }).first().click();
-    await expect(page).toHaveURL(/installId=/);
-  });
-
-  test('shows empty state when no assets match the search', async ({ page }) => {
-    await page.getByRole('searchbox', { name: 'Search assets' }).fill('zzznoresultszzz');
-    await expect(page.getByText('No assets found')).toBeVisible();
-    await expect(page.getByText('Try adjusting your filters or search terms.')).toBeVisible();
-  });
-
-  test('pagination is hidden when all assets fit one page (PAGE_SIZE=24)', async ({ page }) => {
-    // 6 mock assets vs PAGE_SIZE=24 — TablePagination is not rendered
-    await expect(page.getByRole('button', { name: /next/i })).not.toBeVisible();
-  });
-});

package/tests/e2e/fixtures/base.ts

@@ -1,61 +0,0 @@
-/**
- * Pre-seed Backstage's guest-auth localStorage keys so every page load
- * auto-signs in as Guest (legacy token path) without a running auth backend.
- *
- * Keys come from @backstage/core-components SignInPage/providers internals:
- *   PROVIDER_STORAGE_KEY  → '@backstage/core:SignInPage:provider'
- *   enableLegacyGuestToken (guestProvider.tsx)
- *
- * API calls to the backend are intercepted via page.route() and served with
- * the canonical mock data from mock-api.ts, keeping tests predictable and
- * independent of a running backend.
- */
-import { test as base, expect } from '@playwright/test';
-import {
-  MOCK_ASSETS_FULL,
-  MOCK_PROVIDER,
-  MOCK_STATS,
-  buildListResponse,
-} from './mock-api';
-
-export const test = base.extend<object>({
-  page: async ({ page }, use) => {
-    await page.addInitScript(() => {
-      localStorage.setItem('@backstage/core:SignInPage:provider', 'guest');
-      localStorage.setItem('enableLegacyGuestToken', 'true');
-      // Mock clipboard so Copy buttons work without browser permissions
-      Object.defineProperty(navigator, 'clipboard', {
-        value: { writeText: async () => {} },
-        configurable: true,
-      });
-    });
-
-    await page.route('**/api/dev-ai-hub/**', async route => {
-      const url = new URL(route.request().url());
-      const path = url.pathname.replace(/^.*\/api\/dev-ai-hub/, '');
-      const method = route.request().method();
-
-      if (method === 'GET' && path === '/assets') {
-        await route.fulfill({ json: buildListResponse(url.searchParams) });
-      } else if (method === 'GET' && /^\/assets\/[^/]+$/.test(path)) {
-        const id = decodeURIComponent(path.split('/')[2]);
-        const asset = MOCK_ASSETS_FULL.find(a => a.id === id);
-        if (asset) await route.fulfill({ json: asset });
-        else await route.fulfill({ status: 404, json: { error: 'Not found' } });
-      } else if (method === 'GET' && path === '/stats') {
-        await route.fulfill({ json: MOCK_STATS });
-      } else if (method === 'GET' && path === '/providers') {
-        await route.fulfill({ json: [MOCK_PROVIDER] });
-      } else if (method === 'POST' && path.endsWith('/track-install')) {
-        await route.fulfill({ status: 204, body: '' });
-      } else {
-        await route.continue();
-      }
-    });
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    await use(page);
-  },
-});
-
-export { expect };