feat(scaffolder/next): Markdown text output

[voximity]

Hey, I just made a Pull Request!

This PR adds support for text outputs on templates in scaffolder/next. Addresses #17596.

output:
  text:
    - title: Test Text
      content: |
        Hello, world! This is some markdown!

        ```
        console.log("Hello, world!");
        ```

They appear like link outputs, but can be clicked to reveal a box that renders their content as Markdown.

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or updated documentation
• Tests for new functionality and regression tests for bug fixes
  • No tests are done on existing scaffolder output, so this was skipped
• Screenshots attached (for UI changes)
• All your commits have a Signed-off-by line in the message. (more info)

[backstage-goalie]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage/plugin-scaffolder-common	plugins/scaffolder-common	minor	v1.2.7
@backstage/plugin-scaffolder-react	plugins/scaffolder-react	minor	v1.3.1-next.1

[github-actions]

Uffizzi Preview deployment-24272 was deleted.

[benjdlambert]

Nice! thanks for this! Looking great. Just a few comments here!

[benjdlambert]

I wonder if we can get some tests for this too?

[voximity]

I'm working on writing some tests, but I'm having trouble with the call to useRouteRef(entityRouteRef); in LinkOutputs.tsx:

Are there some Jest features or some parent component to render around DefaultTemplateOutputs that will solve this problem?

[benjdlambert]

You could try using renderInTestApp instead, and look for some examples with having entityRouteRef being used in mountedRoutes i think it is.

Something like this should work:

backstage/packages/app/src/components/home/templates/DefaultTemplate.stories.tsx

Lines 111 to 138 in 7eaf2e0

	wrapInTestApp(
	<>
	<TestApiProvider
	apis={[
	[stackOverflowApiRef, mockStackOverflowApi],
	[catalogApiRef, mockCatalogApi],
	[starredEntitiesApiRef, starredEntitiesApi],
	[searchApiRef, { query: () => Promise.resolve({ results: [] }) }],
	[
	configApiRef,
	new ConfigReader({
	stackoverflow: {
	baseUrl: 'https://api.stackexchange.com/2.2',
	},
	}),
	],
	]}
	>
	<Story />
	</TestApiProvider>
	</>,
	{
	mountedRoutes: {
	'/hello-company': searchPlugin.routes.root,
	'/catalog/:namespace/:kind/:name': entityRouteRef,
	},
	},
	),

The mountedRoutes part is important with the entityRouteRef.

[voximity]

Thanks, this works! I've written a small test for DefaultTemplateOutputs. Let me know what you think! I couldn't think of an intuitive way to dynamically test the body of text outputs because of Markdown -- we could fix this by hard-coding test cases instead of reading from the output object.

[benjdlambert]

Just a comment about what to do with the build failure.

[benjdlambert]

Hmm I think that this example isn't compatible with our tooling which checks that all links are valid. Might be a little bug there. I wonder if we can just do simpler example here for now so we can get this in the release and we can take a look at that bug which is making this fail at a later date.

[benjdlambert]

Nice thanks!

[github-actions]

Thank you for contributing to Backstage! The changes in this pull request will be part of the 1.14.0 release, scheduled for Tue, 16 May 2023.