Merge pull request #27828 from dejanbelusic/scaffolder-links

Scaffolder - open links in descriptions in a new tab

.changeset/warm-pumpkins-bathe.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Open links in the scaffolder entity and step descriptions in a new tab, to ensure consistency and improve user experience

packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx

@@ -120,6 +120,23 @@ describe('<MarkdownContent />', () => {
     );
   });
 
+  it('render MarkdownContent component with link target set to _blank', async () => {
+    await renderInTestApp(
+      <MarkdownContent
+        content="Take a look at the [README](https://github.com/backstage/backstage/blob/master/README.md) file."
+        linkTarget="_blank"
+      />,
+    );
+    const readme = screen.getByText('README', {
+      selector: 'a',
+    });
+    expect(readme).toBeInTheDocument();
+    expect(readme.getAttribute('href')).toEqual(
+      'https://github.com/backstage/backstage/blob/master/README.md',
+    );
+    expect(readme.getAttribute('target')).toEqual('_blank');
+  });
+
   it('render MarkdownContent component with headings given proper ids', async () => {
     await renderInTestApp(
       <MarkdownContent

plugins/scaffolder-react/src/next/components/Form/DescriptionFieldTemplate.tsx

@@ -56,6 +56,7 @@ export const DescriptionFieldTemplate = <
       return (
         <MarkdownContent
           content={description}
+          linkTarget="_blank"
           className={classes.markdownDescription}
         />
       );

plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx

@@ -121,6 +121,7 @@ export const Workflow = (workflowProps: WorkflowProps): JSX.Element | null => {
           subheader={
             <MarkdownContent
               className={styles.markdown}
+              linkTarget="_blank"
               content={
                 description ?? sortedManifest.description ?? 'No description'
               }