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:
@@ -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={
|
||||
|
||||
Reference in New Issue
Block a user