From 0d021c7b8cbb0ffef03b7d712a5ea7961c333a9f Mon Sep 17 00:00:00 2001
From: Chase Rutherford-Jenkins <chaseajen@users.noreply.github.com>
Date: Tue, 20 Jul 2021 17:58:35 -0700
Subject: [PATCH] clarify code snippets for plugin installation

Signed-off-by: Chase Rutherford-Jenkins <chaseajen@users.noreply.github.com>
---
 plugins/pagerduty/README.md | 43 +++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/plugins/pagerduty/README.md b/plugins/pagerduty/README.md
index 2a898fc740..478031d36a 100644
--- a/plugins/pagerduty/README.md
+++ b/plugins/pagerduty/README.md
@@ -35,34 +35,59 @@ If you need help with this plugin, please reach out on the [Backstage Discord se
 
 ### Install the plugin
 
-Install the plugin via a CLI:
+The file paths mentioned in the following steps are relative to your app's root directory — for example, the directory created by following the [Getting Started](https://backstage.io/docs/getting-started/) guide and creating your app with `npx @backstage/create-app`.
+
+First, install the PagerDuty plugin via a CLI:
 
 ```bash
-# From your Backstage root directory
+# From your Backstage app root directory
 cd packages/app
 yarn add @backstage/plugin-pagerduty
 ```
 
-Next, add the plugin to `EntityPage.tsx` by adding the following code snippet where appropriate:
+Next, add the plugin to `EntityPage.tsx` in `packages/app/src/components/catalog` by adding the following code snippets.
+
+Add the following imports to the top of the file:
 
 ```ts
 import {
   isPluginApplicableToEntity as isPagerDutyAvailable,
   EntityPagerDutyCard,
 } from '@backstage/plugin-pagerduty';
-// add to code
-{
-  isPagerDutyAvailable(entity) && (
+```
+
+Find `const overviewContent` in `EntityPage.tsx`, and add the following snippet inside the outermost `Grid` defined there, just before the closing `</Grid>` tag:
+
+```ts
+<EntitySwitch>
+  <EntitySwitch.Case if={isPagerDutyAvailable}>
     <Grid item md={6}>
       <EntityPagerDutyCard />
     </Grid>
-  );
-}
+  </EntitySwitch.Case>
+</EntitySwitch>
+```
+
+When you're done, the `overviewContent` definition should look something like this:
+
+```ts
+const overviewContent = (
+  <Grid ...>
+    ...
+    <EntitySwitch>
+      <EntitySwitch.Case if={isPagerDutyAvailable}>
+        <Grid item md={6}>
+          <EntityPagerDutyCard />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
+  </Grid>
+);
 ```
 
 ### Configure the plugin
 
-First, annotate the appropriate entity with the PagerDuty integration key:
+First, [annotate](https://backstage.io/docs/features/software-catalog/descriptor-format#annotations-optional) the appropriate entity with the PagerDuty integration key in its `.yaml` configuration file:
 
 ```yaml
 annotations: