ReportIssue()
Home > @backstage/plugin-techdocs-module-addons-contrib
> ReportIssue
TechDocs addon that lets you select text and open GitHub/Gitlab issues
Signature:
ReportIssue: (props: ReportIssueProps) => JSX.Element | null
Parameters
Parameter |
Type |
Description |
---|---|---|
props |
Object that can optionally contain |
JSX.Element | null
Remarks
Before using it, you should set up an edit_uri
for your pages as explained here and remember, it only works for Github or Gitlab.
Example 1
Here's a simple example:
import {
DefaultTechDocsHome,
TechDocsIndexPage,
TechDocsReaderPage,
} from '@backstage/plugin-techdocs';
import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
const AppRoutes = () => {
<FlatRoutes>
// other plugin routes
<Route path="/docs" element={<TechDocsIndexPage />}>
<DefaultTechDocsHome />
</Route>
<Route
path="/docs/:namespace/:kind/:name/*"
element={<TechDocsReaderPage />}
>
<TechDocsAddons>
<ReportIssue />
</TechDocsAddons>
</Route>
</FlatRoutes>;
};
Example 2
Here's an example with debounceTime
and templateBuilder
props:
import {
DefaultTechDocsHome,
TechDocsIndexPage,
TechDocsReaderPage,
} from '@backstage/plugin-techdocs';
import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
const templateBuilder = ({ selection }: ReportIssueTemplateBuilder) => (({
title: 'Custom issue title',
body: `Custom issue body: ${selection.toString()}`
}))
const AppRoutes = () => {
<FlatRoutes>
// other plugin routes
<Route path="/docs" element={<TechDocsIndexPage />}>
<DefaultTechDocsHome />
</Route>
<Route
path="/docs/:namespace/:kind/:name/*"
element={<TechDocsReaderPage />}
>
<TechDocsAddons>
<ReportIssue debounceTime={300} templateBuilder={templateBuilder} />
</TechDocsAddons>
</Route>
</FlatRoutes>;