diff --git a/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx b/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx index 37c484caf1c..9bfec128241 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsPanel.test.tsx @@ -71,12 +71,16 @@ const mockPlugin: CatalogPlugin = { url: 'https://github.com/grafana/test-plugin/issues/new', }, ], + 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', grafanaDependency: '>=9.0.0', statusContext: 'stable', }, angularDetected: false, isFullyInstalled: true, accessControl: {}, + url: 'https://github.com/grafana/test-plugin', }; const mockInfo = [ @@ -137,10 +141,11 @@ describe('PluginDetailsPanel', () => { it('should render license, documentation, repository, raise issue links', () => { render(); - const repositoryLink = screen.getByText('Repository'); - const licenseLink = screen.getByText('License'); - const documentationLink = screen.getByText('Documentation'); - const raiseIssueLink = screen.getByText('Raise issue'); + 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'); + expect(repositoryLink).toBeInTheDocument(); expect(repositoryLink).toHaveAttribute('href', 'https://github.com/grafana/test-plugin'); expect(licenseLink).toBeInTheDocument(); @@ -150,4 +155,29 @@ describe('PluginDetailsPanel', () => { expect(raiseIssueLink).toBeInTheDocument(); expect(raiseIssueLink).toHaveAttribute('href', 'https://github.com/grafana/test-plugin/issues/new'); }); + + it('should not render license, documentation, repository, raise issue links in custom links', () => { + render(); + 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 websiteLink = screen.getByText('Website'); + + const customLinks = screen.getByTestId('plugin-details-custom-links'); + + expect(customLinks).not.toContainElement(repositoryLink); + expect(customLinks).not.toContainElement(licenseLink); + expect(customLinks).not.toContainElement(documentationLink); + expect(customLinks).not.toContainElement(raiseIssueLink); + expect(customLinks).toContainElement(websiteLink); + + const regularLinks = screen.getByTestId('plugin-details-regular-links'); + + expect(regularLinks).toContainElement(repositoryLink); + expect(regularLinks).toContainElement(licenseLink); + expect(regularLinks).toContainElement(documentationLink); + expect(regularLinks).toContainElement(raiseIssueLink); + expect(regularLinks).not.toContainElement(websiteLink); + }); }); diff --git a/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx b/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx index 8440b37c76d..1421245d721 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx @@ -35,12 +35,18 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null { const normalizeURL = (url: string | undefined) => url?.replace(/\/$/, ''); const customLinks = plugin.details?.links?.filter((link) => { - const customLinksFiltered = ![plugin.url, plugin.details?.licenseUrl, plugin.details?.documentationUrl] + const customLinksFiltered = ![ + plugin.url, + plugin.details?.licenseUrl, + plugin.details?.documentationUrl, + plugin.details?.raiseAnIssueUrl, + ] .map(normalizeURL) .includes(normalizeURL(link.url)); return customLinksFiltered; }); - const shouldRenderLinks = plugin.url || plugin.details?.licenseUrl || plugin.details?.documentationUrl; + const shouldRenderLinks = + plugin.url || plugin.details?.licenseUrl || plugin.details?.documentationUrl || plugin.details?.raiseAnIssueUrl; const styles = useStyles2(getStyles); @@ -92,10 +98,17 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null { {shouldRenderLinks && ( <> - + {plugin.url && ( - + Repository )} @@ -106,6 +119,7 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null { fill="solid" icon="bug" target="_blank" + data-testid="plugin-details-raise-issue-link" > Raise an issue @@ -117,6 +131,7 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null { fill="solid" icon={'document-info'} target="_blank" + data-testid="plugin-details-license-link" > License @@ -128,6 +143,7 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null { fill="solid" icon={'list-ui-alt'} target="_blank" + data-testid="plugin-details-documentation-link" > Documentation @@ -137,7 +153,7 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null { )} {customLinks && customLinks?.length > 0 && ( - +