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	ReportIssueProps	Object that can optionally contain debounceTime and templateBuilder properties.

**Returns:**

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>;