Catalog: Display badges for Angular plugins and disable install if Angular is disabled (#69084)

* Angular deprecation: Add Angular badge in plugin catalog page * Angular deprecation: Add alert in plugin details page * Angular deprecation: Disable install button if for Angular plugins * removed extra console.log * Add tests for Angular badge * Add tests for PluginDetailsAngularDeprecation * Add tests for InstallControlsButton * Add tests for ExternallyManagedButton * Table tests * Catalog: Update angular deprecation message * PR review feedback * Update tests * Update copy for angular tooltip and alert * Update tests * Fix test warnings * Fix angularDetected not being set for remote catalog plugins * Dynamic alert text based on grafana config * Moved deprecation message to a separate function * Removed unused Props in PluginAngularBadge
2025-08-06 04:09:17 +08:00 · 2023-06-28 09:58:45 +02:00
parent ebe5e9c2e6
commit dde4a03544
15 changed files with 301 additions and 20 deletions
--- a/public/app/features/plugins/admin/components/PluginDetailsPage.test.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsPage.test.tsx
@ -0,0 +1,64 @@
+import { render, screen, act } from '@testing-library/react';
+import React from 'react';
+import { TestProvider } from 'test/helpers/TestProvider';
+
+import { PluginSignatureStatus } from '@grafana/data';
+
+import { PluginDetailsPage } from './PluginDetailsPage';
+
+jest.mock('../state/hooks', () => ({
+  __esModule: true,
+  ...jest.requireActual('../state/hooks'),
+  useGetSingle: jest.fn().mockImplementation((id: string) => {
+    return {
+      description: 'The test plugin',
+      downloads: 5,
+      id: 'test-plugin',
+      info: {
+        logos: { small: '', large: '' },
+      },
+      name: 'Testing Plugin',
+      orgName: 'Test',
+      popularity: 0,
+      signature: PluginSignatureStatus.valid,
+      publishedAt: '2020-09-01',
+      updatedAt: '2021-06-28',
+      hasUpdate: false,
+      isInstalled: false,
+      isCore: false,
+      isDev: false,
+      isEnterprise: false,
+      isDisabled: false,
+      isPublished: true,
+      angularDetected: id === 'angular',
+    };
+  }),
+}));
+
+describe('PluginDetailsAngularDeprecation', () => {
+  afterAll(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders the component for angular plugins', async () => {
+    await act(async () =>
+      render(
+        <TestProvider>
+          <PluginDetailsPage pluginId="angular" />
+        </TestProvider>
+      )
+    );
+    expect(screen.getByText(/angular plugin/i)).toBeVisible();
+  });
+
+  it('does not render the component for non-angular plugins', async () => {
+    await act(async () =>
+      render(
+        <TestProvider>
+          <PluginDetailsPage pluginId="not-angular" />
+        </TestProvider>
+      )
+    );
+    expect(screen.queryByText(/angular plugin/i)).toBeNull();
+  });
+});