refactor(techdocs): apply review suggestions

Signed-off-by: Camila Belo <camilaibs@gmail.com>

.changeset/lucky-masks-talk.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs-module-addons-contrib': patch
+---
+
+Improved inline/type documentation for the <ReportIssue /> addon.

.changeset/popular-buses-hang.md

@@ -1,6 +0,0 @@
----
-'@backstage/create-app': patch
-'@backstage/plugin-techdocs-module-addons-contrib': patch
----
-
-Integrates TechDocs add-ons with the app package so add-ons are configured when creating an app using the Backstage CLI

.changeset/spotty-papayas-shave.md

@@ -0,0 +1,37 @@
+---
+'@backstage/create-app': patch
+---
+
+Integrates TechDocs add-ons with the app package so add-ons are configured when creating an app using the Backstage CLI. To apply these changes to an existing application do the following:
+
+1. Add the `@backstage/plugin-techdocs-react` and `@backstage/plugin-techdocs-module-addons-contrib` packages to your app's dependencies;
+2. And then register the `<ReportIssue/ >` Addon in your `packages/app/src/App.tsx` file, there where you define a route to `<TechDocsReaderPage />`:
+
+```diff
+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>;
+};
+```

docs/features/techdocs/getting-started.md

@@ -54,18 +54,18 @@ const AppRoutes = () => {
 };
 ```
 
-It would be nice to decorate your pages with something else... Having a link that redirects you to a new issue page when you highlight text in your documentation would be really cool, right? Let's learn how to do this using the TechDocs Add-ons Framework!
+It would be nice to decorate your pages with something else... Having a link that redirects you to a new issue page when you highlight text in your documentation would be really cool, right? Let's learn how to do this using the TechDocs Addon Framework!
 
-With the [TechDocs plugin framework](https://backstage.io/docs/features/techdocs/addons#installing-and-using-addons), you can render React components in documentation pages and these add-ons can be provided by any Backstage plugin. The framework is exported by the [@backstage/plugin-techdocs-react](https://www.npmjs.com/package/@backstage/plugin-techdocs-react) package and there is a `<ReportIssue />` add-on in the [@backstage/plugin-techdocs-module-addons-contrib](https://www.npmjs.com/package/@backstage/plugin-techdocs-module-addons-contrib) package for you to use once you have these two dependencies installed:
+With the [TechDocs Addon framework](https://backstage.io/docs/features/techdocs/addons#installing-and-using-addons), you can render React components in documentation pages and these Addons can be provided by any Backstage plugin. The framework is exported by the [@backstage/plugin-techdocs-react](https://www.npmjs.com/package/@backstage/plugin-techdocs-react) package and there is a `<ReportIssue />` Addon in the [@backstage/plugin-techdocs-module-addons-contrib](https://www.npmjs.com/package/@backstage/plugin-techdocs-module-addons-contrib) package for you to use once you have these two dependencies installed:
 
-```tsx
+```diff
 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';
++ import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
++ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 
 // ...
 
@@ -79,19 +79,15 @@ const AppRoutes = () => {
       path="/docs/:namespace/:kind/:name/*"
       element={<TechDocsReaderPage />}
     >
-      <TechDocsAddons>
-        <ReportIssue />
-      </TechDocsAddons>
++     <TechDocsAddons>
++       <ReportIssue />
++     </TechDocsAddons>
     </Route>
   </FlatRoutes>;
 };
 ```
 
-In lines `6` and `7` we are importing respectively the TechDocs add-on framework and a `ReportIssue` add-on component. From lines `21` to `23` we are registering the `<ReportIssue/>` to be rendered in all TechDocs pages whenever some text is highlighted.
-
-The Report Issue addon can be customized with properties (see [here](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.reportissue)) and it takes one more step to be ready to use, so you should set up an `edit_uri` for your documentation pages as explained [here](https://backstage.io/docs/features/techdocs/faqs#is-it-possible-for-users-to-suggest-changes-or-provide-feedback-on-a-techdocs-page).
-
-That's all, now you can go ahead and configure your TechDocs Backend, but... I know, you're curious to see how it looks, aren't you? See the image below:
+I know, you're curious to see how it looks, aren't you? See the image below:
 
 <img data-zoomable src="../../assets/techdocs/report-issue-addon.png" alt="TechDocs Report Issue Add-on" />
 

packages/create-app/templates/default-app/packages/app/src/App.tsx

@@ -19,7 +19,7 @@ import {
   techdocsPlugin,
   TechDocsReaderPage,
 } from '@backstage/plugin-techdocs';
-import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha';
+import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
 import { apis } from './apis';

plugins/techdocs-module-addons-contrib/src/plugin.ts

@@ -93,7 +93,7 @@ export const ExpandableNavigation = techdocsModuleAddonsContribPlugin.provide(
  *   TechDocsIndexPage,
  *   TechDocsReaderPage,
  * } from '@backstage/plugin-techdocs';
- * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha';
+ * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
  * import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
  *
  *
@@ -123,7 +123,7 @@ export const ExpandableNavigation = techdocsModuleAddonsContribPlugin.provide(
  *   TechDocsIndexPage,
  *   TechDocsReaderPage,
  * } from '@backstage/plugin-techdocs';
- * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha';
+ * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
  * import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
  *
  * const templateBuilder = ({ selection }: ReportIssueTemplateBuilder) => (({
@@ -172,7 +172,7 @@ export const ReportIssue = techdocsModuleAddonsContribPlugin.provide(
  *   TechDocsIndexPage,
  *   TechDocsReaderPage,
  * } from '@backstage/plugin-techdocs';
- * import { TechDocsAddons } from '@backstage/plugin-techdocs-react/alpha';
+ * import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
  * import { TextSize } from '@backstage/plugin-techdocs-module-addons-contrib';
  *
  *