Plugins: Improve the info box for enterprise plugins (#106630)

* Refine the enterprise plugin info box * Update wording * Update * Remove white space before punctuation * Update * fix test * Update
2025-06-25 09:48:30 +02:00
parent 580b410e8c
commit 249be02010
5 changed files with 43 additions and 13 deletions
@@ -2627,9 +2627,6 @@ exports[`better eslint`] = {
    "public/app/features/plugins/admin/components/GetStartedWithPlugin/index.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./GetStartedWithPlugin\`)", "0"]
    ],
-    "public/app/features/plugins/admin/components/InstallControls/InstallControlsWarning.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
    "public/app/features/plugins/admin/components/InstallControls/index.tsx:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./InstallControlsButton\`)", "0"],
      [0, 0, 0, "Do not re-export imported variable (\`./InstallControlsWarning\`)", "1"]
@@ -2,15 +2,16 @@ import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom-v5-compat';

 import { AppEvents } from '@grafana/data';
-import { t } from '@grafana/i18n';
+import { GrafanaEdition } from '@grafana/data/internal';
+import { t, Trans } from '@grafana/i18n';
 import { config, locationService, reportInteraction } from '@grafana/runtime';
-import { Button, ConfirmModal, Stack } from '@grafana/ui';
+import { Button, ConfirmModal, LinkButton, Stack } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { removePluginFromNavTree } from 'app/core/reducers/navBarTree';
 import { useDispatch } from 'app/types';

-import { isDisabledAngularPlugin } from '../../helpers';
+import { getExternalManageLink, isDisabledAngularPlugin } from '../../helpers';
 import {
  useInstallStatus,
  useUninstallStatus,
@@ -164,6 +165,22 @@ export function InstallControlsButton({
    );
  }

+  const isOpenSource = config.buildInfo.edition === GrafanaEdition.OpenSource;
+
+  // Show learn more button for an enterprise plugin if your on OSS
+  if (plugin.isEnterprise && isOpenSource) {
+    return (
+      <LinkButton
+        href={`${getExternalManageLink(plugin.id)}?utm_source=grafana_catalog_learn_more`}
+        target="_blank"
+        rel="noopener noreferrer"
+        icon="external-link-alt"
+      >
+        <Trans i18nKey="plugins.install-controls-warning.learn-more">Learn more</Trans>
+      </LinkButton>
+    );
+  }
+
  if (!plugin.isPublished || hasInstallWarning) {
    // Cannot be updated or installed
    return null;
@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';

 import { GrafanaTheme2, PluginType } from '@grafana/data';
+import { GrafanaEdition } from '@grafana/data/internal';
 import { Trans, t } from '@grafana/i18n';
 import { config, featureEnabled } from '@grafana/runtime';
-import { HorizontalGroup, LinkButton, useStyles2, Alert, TextLink } from '@grafana/ui';
+import { LinkButton, useStyles2, Alert, TextLink, Stack } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction } from 'app/types';

@@ -38,14 +39,26 @@ export const InstallControlsWarning = ({ plugin, pluginStatus, latestCompatibleV
    );
  }

+  const isOpenSource = config.buildInfo.edition === GrafanaEdition.OpenSource;
+  const isEnterprise = config.buildInfo.edition === GrafanaEdition.Enterprise;
+
  if (plugin.isEnterprise && !featureEnabled('enterprise.plugins')) {
+    const severity = isOpenSource ? 'info' : 'warning';
+
    return (
-      <Alert severity="warning" title="" className={styles.alert}>
-        <HorizontalGroup height="auto" align="center">
+      <Alert severity={severity} title="" className={styles.alert}>
+        <Stack direction="row" alignItems="center">
          <span>
-            <Trans i18nKey="plugins.install-controls-warning.no-valid-grafana-enterprise-license-detected">
-              No valid Grafana Enterprise license detected.
-            </Trans>
+            {isOpenSource && (
+              <Trans i18nKey="plugins.install-controls-warning.enterprise-plugin-info">
+                This plugin is only available in Grafana Cloud and Grafana Enterprise.
+              </Trans>
+            )}
+            {isEnterprise && (
+              <Trans i18nKey="plugins.install-controls-warning.no-valid-grafana-enterprise-license-detected">
+                No valid Grafana Enterprise license detected.
+              </Trans>
+            )}
          </span>
          <LinkButton
            href={`${getExternalManageLink(plugin.id)}?utm_source=grafana_catalog_learn_more`}
@@ -57,7 +70,7 @@ export const InstallControlsWarning = ({ plugin, pluginStatus, latestCompatibleV
          >
            <Trans i18nKey="plugins.install-controls-warning.learn-more">Learn more</Trans>
          </LinkButton>
-        </HorizontalGroup>
+        </Stack>
      </Alert>
    );
  }
@@ -9,6 +9,7 @@ import {
  dateTimeFormatTimeAgo,
  WithAccessControlMetadata,
 } from '@grafana/data';
+import { GrafanaEdition } from '@grafana/data/internal';
 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
 import { configureStore } from 'app/store/configureStore';
@@ -354,6 +355,7 @@ describe('Plugin details page', () => {

    it('should not display install button for enterprise plugins if license is invalid (but allow uninstall)', async () => {
      config.licenseInfo.enabledFeatures = {};
+      config.buildInfo.edition = GrafanaEdition.Enterprise;

      const { queryByRole, queryByText } = renderPluginDetails({ id, isInstalled: true, isEnterprise: true });

@@ -9607,6 +9607,7 @@
    },
    "install-controls-warning": {
      "body-not-published": "This plugin is not published to <2>grafana.com/plugins</2> and can't be managed via the catalog.",
+      "enterprise-plugin-info": "This plugin is only available in Grafana Cloud and Grafana Enterprise.",
      "learn-more": "Learn more",
      "no-valid-grafana-enterprise-license-detected": "No valid Grafana Enterprise license detected.",
      "title-dev-alert": "This is a development build of the plugin and can't be uninstalled.",