docs(techdocs): report issue examples

Signed-off-by: Camila Belo <camilaibs@gmail.com>
2022-04-28 09:18:45 +02:00
parent 9add676fbb
commit a35dfab736
1 changed files with 66 additions and 1 deletions
@@ -82,9 +82,74 @@ export const ExpandableNavigation = techdocsModuleAddonsContribPlugin.provide(
 /**
 * TechDocs addon that lets you select text and open GitHub/Gitlab issues
 *
+ * @remarks
+ * Before using it, you should set up an `edit_uri` for your pages as explained {@link https://backstage.io/docs/features/techdocs/faqs#is-it-possible-for-users-to-suggest-changes-or-provide-feedback-on-a-techdocs-page | here} and remember, it only works for Github or Gitlab.
+ *
+ * @example
+ * Here's a simple example:
+ * ```
+ * import {
+ *   DefaultTechDocsHome,
+ *   TechDocsIndexPage,
+ *   TechDocsReaderPage,
+ * } from '@backstage/plugin-techdocs';
+ * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha';
+ * 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
+ * Here's an example with `debounceTime` and `templateBuilder` props:
+ * ```
+ * import {
+ *   DefaultTechDocsHome,
+ *   TechDocsIndexPage,
+ *   TechDocsReaderPage,
+ * } from '@backstage/plugin-techdocs';
+ * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha';
+ * 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>;
+ * ```
+ * @param props - Object that can optionally contain `debounceTime` and `templateBuilder` properties.
 * @public
 */
-
 export const ReportIssue = techdocsModuleAddonsContribPlugin.provide(
  createTechDocsAddonExtension<ReportIssueProps>({
    name: 'ReportIssue',