Plugins: Disable version install when angular version is not supported (#97189)

public/app/features/plugins/admin/api.ts

@@ -94,6 +94,7 @@ async function getPluginVersions(id: string, isPublished: boolean): Promise<Vers
       createdAt: v.createdAt,
       isCompatible: v.isCompatible,
       grafanaDependency: v.grafanaDependency,
+      angularDetected: v.angularDetected,
     }));
   } catch (error) {
     if (isFetchError(error)) {

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

@@ -20,6 +20,7 @@ interface Props {
   latestCompatibleVersion?: string;
   installedVersion?: string;
   disabled: boolean;
+  tooltip?: string;
   onConfirmInstallation: () => void;
 }
 
@@ -29,6 +30,7 @@ export const VersionInstallButton = ({
   latestCompatibleVersion,
   installedVersion,
   disabled,
+  tooltip,
   onConfirmInstallation,
 }: Props) => {
   const install = useInstall();
@@ -119,6 +121,8 @@ export const VersionInstallButton = ({
         onClick={onInstallClick}
         className={styles.button}
         hidden={hidden}
+        tooltip={tooltip}
+        tooltipPlacement="bottom-start"
       >
         {label} {isInstalling ? <Spinner className={styles.spinner} inline size="sm" /> : getIcon(label)}
       </Button>

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

@@ -1,6 +1,5 @@
 import { css } from '@emotion/css';
 import { useEffect, useState } from 'react';
-import { satisfies } from 'semver';
 
 import { dateTimeFormatTimeAgo, GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
@@ -23,8 +22,6 @@ export const VersionList = ({ pluginId, versions = [], installedVersion }: Props
 
   const [isInstalling, setIsInstalling] = useState(false);
 
-  const grafanaVersion = config.buildInfo.version;
-
   useEffect(() => {
     setIsInstalling(false);
   }, [installedVersion]);
@@ -49,10 +46,17 @@ export const VersionList = ({ pluginId, versions = [], installedVersion }: Props
       </thead>
       <tbody>
         {versions.map((version) => {
+          let tooltip: string | undefined = undefined;
           const isInstalledVersion = installedVersion === version.version;
-          const versionIsIncompatible = version.grafanaDependency
-            ? !satisfies(grafanaVersion, version.grafanaDependency, { includePrerelease: true })
-            : false;
+          const canInstall = version.angularDetected ? config.angularSupportEnabled : true;
+
+          if (!canInstall) {
+            tooltip = 'This plugin version is AngularJS type which is not supported';
+          }
+
+          if (!version.isCompatible) {
+            tooltip = 'This plugin version is not compatible with the current Grafana version';
+          }
 
           return (
             <tr key={version.version}>
@@ -73,7 +77,8 @@ export const VersionList = ({ pluginId, versions = [], installedVersion }: Props
                   latestCompatibleVersion={latestCompatibleVersion?.version}
                   installedVersion={installedVersion}
                   onConfirmInstallation={onInstallClick}
-                  disabled={isInstalledVersion || isInstalling || versionIsIncompatible}
+                  disabled={isInstalledVersion || isInstalling || !canInstall || !version.isCompatible || !canInstall}
+                  tooltip={tooltip}
                 />
               </td>
 

public/app/features/plugins/admin/types.ts

@@ -216,6 +216,7 @@ export interface Version {
   createdAt: string;
   isCompatible: boolean;
   grafanaDependency: string | null;
+  angularDetected?: boolean;
 }
 
 export interface PluginDetails {
@@ -319,6 +320,7 @@ export type PluginVersion = {
   links: Array<{ rel: string; href: string }>;
   isCompatible: boolean;
   grafanaDependency: string | null;
+  angularDetected?: boolean;
 };
 
 export type InstancePlugin = {