From 5ec70a9678a480b2a34355ccae7ffa44ea802e3d Mon Sep 17 00:00:00 2001
From: Adam Harvey <adaharve@cisco.com>
Date: Wed, 14 Apr 2021 16:28:53 -0400
Subject: [PATCH] Update getting started for composibility

Signed-off-by: Adam Harvey <adaharve@cisco.com>
---
 plugins/sonarqube/README.md | 38 +++++++++++++++++--------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/plugins/sonarqube/README.md b/plugins/sonarqube/README.md
index 7afc9cc04a..a07bb2964d 100644
--- a/plugins/sonarqube/README.md
+++ b/plugins/sonarqube/README.md
@@ -10,7 +10,6 @@ The SonarQube Plugin displays code statistics from [SonarCloud](https://sonarclo
 
 ```bash
 # packages/app
-
 yarn add @backstage/plugin-sonarqube
 ```
 
@@ -18,37 +17,36 @@ yarn add @backstage/plugin-sonarqube
 
 ```js
 // packages/app/src/plugins.ts
-
 export { plugin as SonarQube } from '@backstage/plugin-sonarqube';
 ```
 
-3. Add the `SonarQubeCard` to the EntityPage:
+3. Add the `EntitySonarQubeCard` to the EntityPage:
 
-```jsx
-// packages/app/src/components/catalog/EntityPage.tsx
+```diff
+  // packages/app/src/components/catalog/EntityPage.tsx
++ import { EntitySonarQubeCard } from '@backstage/plugin-sonarqube';
 
-import { SonarQubeCard } from '@backstage/plugin-sonarqube';
+ ...
 
-const OverviewContent = ({ entity }: { entity: Entity }) => (
-  <Grid container spacing={3} alignItems="stretch">
-    // ...
-    <Grid item xs={12} sm={6} md={4}>
-      <SonarQubeCard entity={entity} />
-    </Grid>
-    // ...
-  </Grid>
-);
+ const overviewContent = (
+   <Grid container spacing={3} alignItems="stretch">
+     <Grid item md={6}>
+       <EntityAboutCard variant="gridItem" />
+     </Grid>
++    <Grid item md={6}>
++      <EntitySonarQubeCard variant="gridItem" />
++    </Grid>
+   </Grid>
+ );
 ```
 
 4. Add the proxy config:
 
-   Provide a method for your Backstage backend to get to your SonarQube API end point.
+   Provide a method for your Backstage backend to get to your SonarQube API end point. Add configuration to your `app-config.yaml` file depending on the product you use.
 
 **SonarCloud**
 
 ```yaml
-# app-config.yaml
-
 proxy:
   '/sonarqube':
     target: https://sonarcloud.io/api
@@ -63,8 +61,6 @@ proxy:
 **SonarQube**
 
 ```yaml
-# app-config.yaml
-
 proxy:
   '/sonarqube':
     target: https://your.sonarqube.instance.com/api
@@ -81,7 +77,7 @@ sonarQube:
 
 5. Get and provide `SONARQUBE_AUTH_HEADER` as env variable (https://sonarcloud.io/account/security or https://docs.sonarqube.org/latest/user-guide/user-token/)
 
-6. Add the `sonarqube.org/project-key` annotation to your catalog-info.yaml file:
+6. Add the `sonarqube.org/project-key` annotation to your entity's `catalog-info.yaml` file:
 
 ```yaml
 apiVersion: backstage.io/v1alpha1