Merge pull request #16405 from bogdan-cehash/fix-techdocs-open-issue-link

Fix techdocs open issue link when repository is in a Gitlab subgroup

.changeset/unlucky-sloths-explain.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs-module-addons-contrib': patch
+---
+
+Fixed bug in IssueLink component where the URL was not generated properly when the repository was located inside a Gitlab subgroup

plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.test.tsx

@@ -26,7 +26,7 @@ import {
 
 import { IssueLink } from './IssueLink';
 
-const defaultProps = {
+const defaultGithubProps = {
   repository: {
     type: 'github',
     name: 'backstage',
@@ -40,14 +40,28 @@ const defaultProps = {
   },
 };
 
+const defaultGitlabProps = {
+  repository: {
+    type: 'gitlab',
+    name: 'backstageSubgroup/backstage',
+    owner: 'backstage',
+    protocol: 'https',
+    resource: 'gitlab.com',
+  },
+  template: {
+    title: 'Documentation feedback',
+    body: '## Documentation Feedback 📝',
+  },
+};
+
 describe('FeedbackLink', () => {
   const apiSpy = new MockAnalyticsApi();
 
-  it('Should open new issue tab', () => {
+  it('Should open new Github issue tab', () => {
     render(
       wrapInTestApp(
         <TestApiProvider apis={[[analyticsApiRef, apiSpy]]}>
-          <IssueLink {...defaultProps} />
+          <IssueLink {...defaultGithubProps} />
         </TestApiProvider>,
       ),
     );
@@ -55,19 +69,39 @@ describe('FeedbackLink', () => {
     const link = screen.getByText(/Open new Github issue/);
     expect(link).toBeInTheDocument();
     expect(link).toHaveAttribute('target', '_blank');
-    const encodedTitle = encodeURIComponent(defaultProps.template.title);
-    const encodedBody = encodeURIComponent(defaultProps.template.body);
+    const encodedTitle = encodeURIComponent(defaultGithubProps.template.title);
+    const encodedBody = encodeURIComponent(defaultGithubProps.template.body);
     expect(link).toHaveAttribute(
       'href',
       `https://github.com/backstage/backstage/issues/new?title=${encodedTitle}&body=${encodedBody}`,
     );
   });
 
+  it('Should open new Gitlab issue tab', () => {
+    render(
+      wrapInTestApp(
+        <TestApiProvider apis={[[analyticsApiRef, apiSpy]]}>
+          <IssueLink {...defaultGitlabProps} />
+        </TestApiProvider>,
+      ),
+    );
+
+    const link = screen.getByText(/Open new Gitlab issue/);
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('target', '_blank');
+    const encodedTitle = encodeURIComponent(defaultGithubProps.template.title);
+    const encodedBody = encodeURIComponent(defaultGithubProps.template.body);
+    expect(link).toHaveAttribute(
+      'href',
+      `https://gitlab.com/backstage/backstageSubgroup/backstage/issues/new?issue[title]=${encodedTitle}&issue[description]=${encodedBody}`,
+    );
+  });
+
   it('Should track click events', async () => {
     render(
       wrapInTestApp(
         <TestApiProvider apis={[[analyticsApiRef, apiSpy]]}>
-          <IssueLink {...defaultProps} />
+          <IssueLink {...defaultGithubProps} />
         </TestApiProvider>,
       ),
     );

plugins/techdocs-module-addons-contrib/src/ReportIssue/IssueLink.tsx

@@ -59,14 +59,13 @@ const getUrl = (repository: Repository, template: ReportIssueTemplate) => {
   const encodedTitle = encodeURIComponent(title);
   const encodedBody = encodeURIComponent(body);
   const { protocol, resource, owner, name, type } = repository;
-  const encodedOwner = encodeURIComponent(owner);
-  const encodedName = encodeURIComponent(name);
 
-  const url = `${protocol}://${resource}/${encodedOwner}/${encodedName}`;
+  const url = `${protocol}://${resource}/${owner}/${name}`;
+  const encodedUrl = encodeURI(url);
   if (type === 'github') {
-    return `${url}/issues/new?title=${encodedTitle}&body=${encodedBody}`;
+    return `${encodedUrl}/issues/new?title=${encodedTitle}&body=${encodedBody}`;
   }
-  return `${url}/issues/new?issue[title]=${encodedTitle}&issue[description]=${encodedBody}`;
+  return `${encodedUrl}/issues/new?issue[title]=${encodedTitle}&issue[description]=${encodedBody}`;
 };
 
 export const IssueLink = ({ template, repository }: IssueLinkProps) => {