From 847fc588a6387b0d0404f853d2e14f29ca789b9d Mon Sep 17 00:00:00 2001
From: Matteo Pietro Dazzi <matteopietro.dazzi@gmail.com>
Date: Tue, 11 Oct 2022 13:31:01 +0200
Subject: [PATCH] fix: page hader

Signed-off-by: Matteo Pietro Dazzi <matteopietro.dazzi@gmail.com>
---
 .changeset/witty-horses-press.md              |  5 +++++
 .../TechDocsReaderPageHeader.tsx              | 22 +++++++++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/witty-horses-press.md

diff --git a/.changeset/witty-horses-press.md b/.changeset/witty-horses-press.md
new file mode 100644
index 0000000000..009f52ef8b
--- /dev/null
+++ b/.changeset/witty-horses-press.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': minor
+---
+
+feat: tech doc reader page hader now has a explicit label for code icon
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx
index e76cb1d173..250232fa17 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx
@@ -37,6 +37,7 @@ import { Header, HeaderLabel } from '@backstage/core-components';
 import { useRouteRef, configApiRef, useApi } from '@backstage/core-plugin-api';
 
 import { rootRouteRef } from '../../../routes';
+import { Grid } from '@material-ui/core';
 
 const skeleton = <Skeleton animation="wave" variant="text" height={40} />;
 
@@ -102,7 +103,7 @@ export const TechDocsReaderPageHeader = (
   const labels = (
     <>
       <HeaderLabel
-        label="Component"
+        label="Entity"
         value={
           <EntityRefLink
             color="inherit"
@@ -131,14 +132,21 @@ export const TechDocsReaderPageHeader = (
         <HeaderLabel
           label=""
           value={
-            <a
-              href={locationMetadata.target}
-              target="_blank"
-              rel="noopener noreferrer"
+            <Grid
+              container
+              direction="row"
+              alignItems="center"
+              style={{ color: '#fff' }}
             >
-              <CodeIcon style={{ marginTop: '-25px', fill: '#fff' }} />
-            </a>
+              <Grid style={{ paddingTop: 16, paddingRight: 0 }} item>
+                <CodeIcon style={{ marginTop: '-25px' }} />
+              </Grid>
+              <Grid style={{ paddingTop: 2, paddingLeft: 2 }} item>
+                Source
+              </Grid>
+            </Grid>
           }
+          url={locationMetadata.target}
         />
       ) : null}
     </>