From 700f208b6e6c738be0aa56d3a2ae6e8a17973088 Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Thu, 1 May 2025 13:39:50 +0200
Subject: [PATCH] Plugins: Add sponsorship link to plugin details panel
 (#104687)

Add sponsorship link to plugin details panel
---
 public/app/features/plugins/admin/api.ts      |  1 +
 .../components/PluginDetailsPanel.test.tsx    |  6 +++++-
 .../admin/components/PluginDetailsPanel.tsx   | 19 ++++++++++++++++++-
 public/app/features/plugins/admin/types.ts    |  2 ++
 public/locales/en-US/grafana.json             |  1 +
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/public/app/features/plugins/admin/api.ts b/public/app/features/plugins/admin/api.ts
index 120bdf3a66e..a6bbf4625ec 100644
--- a/public/app/features/plugins/admin/api.ts
+++ b/public/app/features/plugins/admin/api.ts
@@ -39,6 +39,7 @@ export async function getPluginDetails(id: string): Promise<CatalogPluginDetails
     changelog: remote?.changelog || localChangelog,
     licenseUrl: remote?.licenseUrl,
     documentationUrl: remote?.documentationUrl,
+    sponsorshipUrl: remote?.sponsorshipUrl,
     raiseAnIssueUrl: remote?.raiseAnIssueUrl,
     signatureType: local?.signatureType || (remote?.signatureType !== '' ? remote?.signatureType : undefined),
     signature: local?.signature,
diff --git a/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx b/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx
index 9bfec128241..43e9021fd4e 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx
@@ -74,6 +74,7 @@ const mockPlugin: CatalogPlugin = {
     raiseAnIssueUrl: 'https://github.com/grafana/test-plugin/issues/new',
     documentationUrl: 'https://test-plugin.com/docs',
     licenseUrl: 'https://github.com/grafana/test-plugin/blob/main/LICENSE',
+    sponsorshipUrl: 'https://github.com/sponsors/grafana',
     grafanaDependency: '>=9.0.0',
     statusContext: 'stable',
   },
@@ -139,12 +140,13 @@ describe('PluginDetailsPanel', () => {
     expect(panel).toHaveStyle({ width: '300px' });
   });
 
-  it('should render license, documentation, repository, raise issue links', () => {
+  it('should render license, documentation, repository, raise issue, sponsorship links', () => {
     render(<PluginDetailsPanel plugin={mockPlugin} pluginExtentionsInfo={mockInfo} />);
     const repositoryLink = screen.getByTestId('plugin-details-repository-link');
     const licenseLink = screen.getByTestId('plugin-details-license-link');
     const documentationLink = screen.getByTestId('plugin-details-documentation-link');
     const raiseIssueLink = screen.getByTestId('plugin-details-raise-issue-link');
+    const sponsorshipLink = screen.getByTestId('plugin-details-sponsorship-link');
 
     expect(repositoryLink).toBeInTheDocument();
     expect(repositoryLink).toHaveAttribute('href', 'https://github.com/grafana/test-plugin');
@@ -154,6 +156,8 @@ describe('PluginDetailsPanel', () => {
     expect(documentationLink).toHaveAttribute('href', 'https://test-plugin.com/docs');
     expect(raiseIssueLink).toBeInTheDocument();
     expect(raiseIssueLink).toHaveAttribute('href', 'https://github.com/grafana/test-plugin/issues/new');
+    expect(sponsorshipLink).toBeInTheDocument();
+    expect(sponsorshipLink).toHaveAttribute('href', 'https://github.com/sponsors/grafana');
   });
 
   it('should not render license, documentation, repository, raise issue links in custom links', () => {
diff --git a/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx b/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx
index 1d88ea3ece8..2305f49f7d1 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx
@@ -40,13 +40,18 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
       plugin.details?.licenseUrl,
       plugin.details?.documentationUrl,
       plugin.details?.raiseAnIssueUrl,
+      plugin.details?.sponsorshipUrl,
     ]
       .map(normalizeURL)
       .includes(normalizeURL(link.url));
     return customLinksFiltered;
   });
   const shouldRenderLinks =
-    plugin.url || plugin.details?.licenseUrl || plugin.details?.documentationUrl || plugin.details?.raiseAnIssueUrl;
+    plugin.url ||
+    plugin.details?.licenseUrl ||
+    plugin.details?.documentationUrl ||
+    plugin.details?.raiseAnIssueUrl ||
+    plugin.details?.sponsorshipUrl;
 
   const styles = useStyles2(getStyles);
 
@@ -148,6 +153,18 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
                     <Trans i18nKey="plugins.details.labels.documentation">Documentation</Trans>
                   </LinkButton>
                 )}
+                {plugin.details?.sponsorshipUrl && (
+                  <LinkButton
+                    href={plugin.details?.sponsorshipUrl}
+                    variant="secondary"
+                    fill="solid"
+                    icon={'heart'}
+                    target="_blank"
+                    data-testid="plugin-details-sponsorship-link"
+                  >
+                    <Trans i18nKey="plugins.details.labels.sponsorDeveloper">Sponsor this developer</Trans>
+                  </LinkButton>
+                )}
               </Stack>
             </Box>
           </>
diff --git a/public/app/features/plugins/admin/types.ts b/public/app/features/plugins/admin/types.ts
index 06ed5de7787..00fd9e85d19 100644
--- a/public/app/features/plugins/admin/types.ts
+++ b/public/app/features/plugins/admin/types.ts
@@ -85,6 +85,7 @@ export interface CatalogPluginDetails {
   lastCommitDate?: string;
   licenseUrl?: string;
   documentationUrl?: string;
+  sponsorshipUrl?: string;
   raiseAnIssueUrl?: string;
   signatureType?: PluginSignatureType;
   signature?: PluginSignatureStatus;
@@ -154,6 +155,7 @@ export type RemotePlugin = {
   lastCommitDate?: string;
   licenseUrl?: string;
   documentationUrl?: string;
+  sponsorshipUrl?: string;
   raiseAnIssueUrl?: string;
 };
 
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 724c3e565fa..57ff9764163 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -7083,6 +7083,7 @@
         "reportAbuseTooltip": "Report issues related to malicious or harmful plugins directly to Grafana Labs.",
         "repository": "Repository",
         "signature": "Signature",
+        "sponsorDeveloper": "Sponsor this developer",
         "status": "Status"
       },
       "modal": {