Plugins: Filter out raise issue link from custom links in plugin details (#102591)

add raise issue link to be filtered from custom links for plugin details
This commit is contained in:
Yulia Shanyrova
2025-03-25 14:34:04 +01:00
committed by GitHub
parent f641ca9284
commit f607f68920
2 changed files with 55 additions and 9 deletions
@@ -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(<PluginDetailsPanel plugin={mockPlugin} pluginExtentionsInfo={mockInfo} />);
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(<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 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);
});
});
@@ -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 {
</Box>
{shouldRenderLinks && (
<>
<Box padding={2} borderColor="medium" borderStyle="solid">
<Box padding={2} borderColor="medium" borderStyle="solid" data-testid="plugin-details-regular-links">
<Stack direction="column" gap={2}>
{plugin.url && (
<LinkButton href={plugin.url} variant="secondary" fill="solid" icon="code-branch" target="_blank">
<LinkButton
href={plugin.url}
variant="secondary"
fill="solid"
icon="code-branch"
target="_blank"
data-testid="plugin-details-repository-link"
>
<Trans i18nKey="plugins.details.labels.repository">Repository</Trans>
</LinkButton>
)}
@@ -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"
>
<Trans i18nKey="plugins.details.labels.raiseAnIssue">Raise an issue</Trans>
</LinkButton>
@@ -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"
>
<Trans i18nKey="plugins.details.labels.license">License</Trans>
</LinkButton>
@@ -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"
>
<Trans i18nKey="plugins.details.labels.documentation">Documentation</Trans>
</LinkButton>
@@ -137,7 +153,7 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
</>
)}
{customLinks && customLinks?.length > 0 && (
<Box padding={2} borderColor="medium" borderStyle="solid">
<Box padding={2} borderColor="medium" borderStyle="solid" data-testid="plugin-details-custom-links">
<CollapsableSection
isOpen={true}
label={