From 283e71c935c4901ba2da4dfa905633caf317f89d Mon Sep 17 00:00:00 2001
From: Sebastian Qvarfordt <s.qvarfordt@gmail.com>
Date: Thu, 4 Jun 2020 12:47:02 +0200
Subject: [PATCH] WIP

---
 plugins/catalog/src/data/component.ts            | 3 ++-
 plugins/catalog/src/data/{utils.ts => utils.tsx} | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)
 rename plugins/catalog/src/data/{utils.ts => utils.tsx} (74%)

diff --git a/plugins/catalog/src/data/component.ts b/plugins/catalog/src/data/component.ts
index 1a7935a196..692176a468 100644
--- a/plugins/catalog/src/data/component.ts
+++ b/plugins/catalog/src/data/component.ts
@@ -13,11 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { Location } from '@backstage/catalog-model';
 
 export type Component = {
   name: string;
   kind: string;
-  description: string;
+  description: React.ReactNode;
   location?: Location;
 };
diff --git a/plugins/catalog/src/data/utils.ts b/plugins/catalog/src/data/utils.tsx
similarity index 74%
rename from plugins/catalog/src/data/utils.ts
rename to plugins/catalog/src/data/utils.tsx
index fe2ec62493..71661ead53 100644
--- a/plugins/catalog/src/data/utils.ts
+++ b/plugins/catalog/src/data/utils.tsx
@@ -13,8 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { Component } from './component';
 import { Entity, Location } from '@backstage/catalog-model';
+import Edit from '@material-ui/icons/Edit';
 
 export function envelopeToComponent(
   envelope: Entity,
@@ -23,7 +25,12 @@ export function envelopeToComponent(
   return {
     name: envelope.metadata?.name ?? '',
     kind: envelope.kind ?? 'unknown',
-    description: envelope.metadata?.annotations?.description ?? 'placeholder',
+    description: (
+      <span style={{ display: 'flex', alignItems: 'center' }}>
+        {envelope.metadata?.annotations?.description ?? 'placeholder'}
+        <Edit style={{ fontSize: 20, paddingLeft: '5px' }} />
+      </span>
+    ),
     location,
   };
 }