hide controls for renderer plugins (#41895)

public/app/features/plugins/admin/components/Badges/PluginUpdateAvailableBadge.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, PluginType } from '@grafana/data';
 import { Tooltip, useStyles2 } from '@grafana/ui';
 import { CatalogPlugin } from '../../types';
 
@@ -11,7 +11,7 @@ type Props = {
 export function PluginUpdateAvailableBadge({ plugin }: Props): React.ReactElement | null {
   const styles = useStyles2(getStyles);
 
-  if (plugin.hasUpdate && !plugin.isCore) {
+  if (plugin.hasUpdate && !plugin.isCore && plugin.type !== PluginType.renderer) {
     return (
       <Tooltip content={plugin.version}>
         <p className={styles.hasUpdate}>Update available!</p>

public/app/features/plugins/admin/components/InstallControls/index.tsx

@@ -4,12 +4,12 @@ import { satisfies } from 'semver';
 
 import { config } from '@grafana/runtime';
 import { HorizontalGroup, Icon, LinkButton, useStyles2 } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, PluginType } from '@grafana/data';
 
 import { ExternallyManagedButton } from './ExternallyManagedButton';
 import { InstallControlsButton } from './InstallControlsButton';
 import { CatalogPlugin, PluginStatus } from '../../types';
-import { isGrafanaAdmin, getExternalManageLink } from '../../helpers';
+import { getExternalManageLink, isGrafanaAdmin } from '../../helpers';
 import { useIsRemotePluginsAvailable } from '../../state/hooks';
 
 interface Props {
@@ -38,6 +38,10 @@ export const InstallControls = ({ plugin }: Props) => {
     return null;
   }
 
+  if (plugin.type === PluginType.renderer) {
+    return <div className={styles.message}>Renderer plugins cannot be managed by the Plugin Catalog.</div>;
+  }
+
   if (plugin.isEnterprise && !config.licenseInfo?.hasValidLicense) {
     return (
       <HorizontalGroup height="auto" align="center">

public/app/features/plugins/admin/hooks/usePlugins.tsx

@@ -1,49 +0,0 @@
-import { useMemo } from 'react';
-import { useAsync } from 'react-use';
-import { CatalogPlugin, CatalogPluginsState } from '../types';
-import { api } from '../api';
-import { mapLocalToCatalog, mapRemoteToCatalog, mapToCatalogPlugin } from '../helpers';
-
-export function usePlugins(): CatalogPluginsState {
-  const { loading, value, error } = useAsync(async () => {
-    const remote = await api.getRemotePlugins();
-    const installed = await api.getInstalledPlugins();
-    return { remote, installed };
-  }, []);
-
-  const plugins = useMemo(() => {
-    const installed = value?.installed || [];
-    const remote = value?.remote || [];
-    const unique: Record<string, CatalogPlugin> = {};
-
-    for (const plugin of installed) {
-      unique[plugin.id] = mapLocalToCatalog(plugin);
-    }
-
-    for (const plugin of remote) {
-      if (plugin.typeCode === 'renderer') {
-        continue;
-      }
-
-      if (!Boolean(plugin.versionSignatureType)) {
-        continue;
-      }
-
-      if (unique[plugin.slug]) {
-        unique[plugin.slug] = mapToCatalogPlugin(
-          installed.find((installedPlugin) => installedPlugin.id === plugin.slug),
-          plugin
-        );
-      } else {
-        unique[plugin.slug] = mapRemoteToCatalog(plugin);
-      }
-    }
-    return Object.values(unique);
-  }, [value?.installed, value?.remote]);
-
-  return {
-    loading,
-    error,
-    plugins,
-  };
-}

public/app/features/plugins/admin/pages/PluginDetails.test.tsx

@@ -11,7 +11,7 @@ import { CatalogPlugin, PluginTabIds, RequestStatus, ReducerState } from '../typ
 import * as api from '../api';
 import { fetchRemotePlugins } from '../state/actions';
 import { mockPluginApis, getCatalogPluginMock, getPluginsStateMock } from '../__mocks__';
-import { PluginErrorCode, PluginSignatureStatus } from '@grafana/data';
+import { PluginErrorCode, PluginSignatureStatus, PluginType } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 jest.mock('@grafana/runtime', () => {
@@ -255,6 +255,13 @@ describe('Plugin details page', () => {
     await waitFor(() => expect(queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
   });
 
+  it('should not display install / uninstall buttons for renderer plugins', async () => {
+    const { queryByRole } = renderPluginDetails({ id, type: PluginType.renderer });
+
+    await waitFor(() => expect(queryByRole('button', { name: /update/i })).not.toBeInTheDocument());
+    await waitFor(() => expect(queryByRole('button', { name: /(un)?install/i })).not.toBeInTheDocument());
+  });
+
   it('should display install link with `config.pluginAdminExternalManageEnabled` set to true', async () => {
     config.pluginAdminExternalManageEnabled = true;