From d266c30243f4b239775fd2322b89526d9ee9aa0a Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 18 Nov 2021 14:12:31 +0800
Subject: [PATCH] add missing installation steps for the todo plugin

Signed-off-by: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
---
 plugins/todo-backend/README.md | 13 +++++++
 plugins/todo/README.md         | 71 ++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)

diff --git a/plugins/todo-backend/README.md b/plugins/todo-backend/README.md
index 61ca5202d0..fd3410e42e 100644
--- a/plugins/todo-backend/README.md
+++ b/plugins/todo-backend/README.md
@@ -36,6 +36,19 @@ export default async function createPlugin({
 }
 ```
 
+And then add to `packages/backend/src/index.ts`:
+
+```js
+// In packages/backend/src/index.ts
+import todo from './plugins/todo';
+// ...
+async function main() {
+  // ...
+  const todoEnv = useHotMemoize(module, () => createEnv('todo'));
+  // ...
+  apiRouter.use('/todo', await kafka(todoEnv));
+```
+
 ## Scanned Files
 
 The included `TodoReaderService` and `TodoScmReader` works by reading source code of to the entity that is being viewed. The location source code is determined by the value of the [`backstage.io/source-location`
diff --git a/plugins/todo/README.md b/plugins/todo/README.md
index 4165582b65..3e1c370d8a 100644
--- a/plugins/todo/README.md
+++ b/plugins/todo/README.md
@@ -2,6 +2,77 @@
 
 This plugin lists `// TODO` comments in source code. It currently exports a single component extension for use on entity pages.
 
+## Setup
+
+1. Run:
+
+```bash
+# From your Backstage root directory
+yarn --cwd packages/app add @backstage/plugin-todo
+yarn --cwd packages/backend add @backstage/plugin-todo-backend
+```
+
+2. Add the plugin backend:
+
+In a new file named `todo.ts` under `backend/src/plugins`:
+
+```js
+import { Router } from 'express';
+import { CatalogClient } from '@backstage/catalog-client';
+import {
+  createRouter,
+  TodoReaderService,
+  TodoScmReader,
+} from '@backstage/plugin-todo-backend';
+import { PluginEnvironment } from '../types';
+
+export default async function createPlugin({
+  logger,
+  reader,
+  config,
+  discovery,
+}: PluginEnvironment): Promise<Router> {
+  const todoReader = TodoScmReader.fromConfig(config, {
+    logger,
+    reader,
+  });
+  const catalogClient = new CatalogClient({ discoveryApi: discovery });
+  const todoService = new TodoReaderService({
+    todoReader,
+    catalogClient,
+  });
+
+  return await createRouter({ todoService });
+}
+```
+
+And then add to `packages/backend/src/index.ts`:
+
+```js
+// In packages/backend/src/index.ts
+import todo from './plugins/todo';
+// ...
+async function main() {
+  // ...
+  const todoEnv = useHotMemoize(module, () => createEnv('todo'));
+  // ...
+  apiRouter.use('/todo', await kafka(todoEnv));
+```
+
+3. Add the plugin as a tab to your service entities:
+
+```jsx
+// In packages/app/src/components/catalog/EntityPage.tsx
+import { EntityTodoContent } from '@backstage/plugin-todo';
+
+const serviceEntityPage = (
+  <EntityLayout>
+    {/* other tabs... */}
+    <EntityLayout.Route path="/todo" title="Todo">
+      <EntityTodoContent />
+    </EntityLayout.Route>
+```
+
 ## Format
 
 The default parser uses [Leasot](https://github.com/pgilad/leasot), which supports a wide range of languages. By default it supports the `TODO` and `FIXME` tags, along with `@` prefix and author reference through with either a `(<name>)` suffix or trailing `/<name>`. For more information on how to configure the parser, see `@backstage/plugin-todo-backend`.