Plugins: Add sponsorship link to plugin details panel (#104687)

Add sponsorship link to plugin details panel

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,

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', () => {

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>
           </>

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;
 };
 

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": {