Plugin history: Hide downgrade or upgrade buttons for preinstalled plugins (#96332)

public/app/features/plugins/admin/components/VersionInstallButton.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 
+import { config } from '@grafana/runtime';
 import { configureStore } from 'app/store/configureStore';
 
 import { Version } from '../types';
@@ -8,6 +9,13 @@ import { Version } from '../types';
 import { VersionInstallButton } from './VersionInstallButton';
 
 describe('VersionInstallButton', () => {
+  const originalConfig = { ...config };
+  afterEach(() => {
+    config.featureToggles = {
+      ...originalConfig.featureToggles,
+    };
+    config.pluginCatalogPreinstalledPlugins = originalConfig.pluginCatalogPreinstalledPlugins;
+  });
   it('should show install when no version is installed', () => {
     const version: Version = {
       version: '',
@@ -103,6 +111,72 @@ describe('VersionInstallButton', () => {
     const el = screen.getByText('Installed');
     expect(el).toBeVisible();
   });
+
+  it('should hide the upgrade button if preinstalled and pinned', () => {
+    const version: Version = {
+      version: '1.0.1',
+      createdAt: '',
+      isCompatible: false,
+      grafanaDependency: null,
+    };
+    const installedVersion = '1.0.0';
+    config.featureToggles.preinstallAutoUpdate = true;
+    config.pluginCatalogPreinstalledPlugins = [{ id: 'test', version: '1.0.0' }];
+    renderWithStore(
+      <VersionInstallButton
+        installedVersion={installedVersion}
+        pluginId={'test'}
+        version={version}
+        disabled={false}
+        onConfirmInstallation={() => {}}
+      />
+    );
+    expect(screen.getByText('Upgrade')).not.toBeVisible();
+  });
+
+  it('should hide the downgrade button if preinstalled and pinned', () => {
+    const version: Version = {
+      version: '1.0.0',
+      createdAt: '',
+      isCompatible: false,
+      grafanaDependency: null,
+    };
+    const installedVersion = '1.0.1';
+    config.featureToggles.preinstallAutoUpdate = true;
+    config.pluginCatalogPreinstalledPlugins = [{ id: 'test', version: '1.0.1' }];
+    renderWithStore(
+      <VersionInstallButton
+        installedVersion={installedVersion}
+        pluginId={'test'}
+        version={version}
+        disabled={false}
+        onConfirmInstallation={() => {}}
+      />
+    );
+    expect(screen.getByText('Downgrade')).not.toBeVisible();
+  });
+
+  it('should hide the downgrade button if preinstalled', () => {
+    const version: Version = {
+      version: '1.0.0',
+      createdAt: '',
+      isCompatible: false,
+      grafanaDependency: null,
+    };
+    const installedVersion = '1.0.1';
+    config.featureToggles.preinstallAutoUpdate = true;
+    config.pluginCatalogPreinstalledPlugins = [{ id: 'test', version: '' }];
+    renderWithStore(
+      <VersionInstallButton
+        installedVersion={installedVersion}
+        pluginId={'test'}
+        version={version}
+        disabled={false}
+        onConfirmInstallation={() => {}}
+      />
+    );
+    expect(screen.getByText('Downgrade')).not.toBeVisible();
+  });
 });
 
 function renderWithStore(component: JSX.Element) {

public/app/features/plugins/admin/components/VersionInstallButton.tsx

@@ -3,10 +3,11 @@ import { useEffect, useState } from 'react';
 import { gt } from 'semver';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { Badge, Button, ConfirmModal, Icon, Spinner, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
+import { isPreinstalledPlugin } from '../helpers';
 import { useInstall } from '../state/hooks';
 import { Version } from '../types';
 
@@ -89,11 +90,22 @@ export const VersionInstallButton = ({
   };
 
   let label = 'Downgrade';
+  let hidden = false;
+  const isPreinstalled = isPreinstalledPlugin(pluginId);
 
   if (!installedVersion) {
     label = 'Install';
   } else if (gt(version.version, installedVersion)) {
     label = 'Upgrade';
+    if (isPreinstalled.withVersion) {
+      // Hide button if the plugin is preinstalled with a specific version
+      hidden = true;
+    }
+  } else {
+    if (isPreinstalled.found && Boolean(config.featureToggles.preinstallAutoUpdate)) {
+      // Hide the downgrade button if the plugin is preinstalled since it will be auto-updated
+      hidden = true;
+    }
   }
 
   return (
@@ -106,6 +118,7 @@ export const VersionInstallButton = ({
         variant={latestCompatibleVersion === version.version ? 'primary' : 'secondary'}
         onClick={onInstallClick}
         className={styles.button}
+        hidden={hidden}
       >
         {label} {isInstalling ? <Spinner className={styles.spinner} inline size="sm" /> : getIcon(label)}
       </Button>