Merge pull request #14075 from ilteoood/fix/14026

fix: page hader

.changeset/witty-horses-press.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': minor
+---
+
+Updated TechDocs header to include label for source code icon and updated label to reflect Kind name

plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx

@@ -17,6 +17,7 @@
 import React, { PropsWithChildren, useEffect } from 'react';
 import Helmet from 'react-helmet';
 
+import { Grid } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 import CodeIcon from '@material-ui/icons/Code';
 
@@ -36,6 +37,8 @@ import { RELATION_OWNED_BY, CompoundEntityRef } from '@backstage/catalog-model';
 import { Header, HeaderLabel } from '@backstage/core-components';
 import { useRouteRef, configApiRef, useApi } from '@backstage/core-plugin-api';
 
+import { capitalize } from 'lodash';
+
 import { rootRouteRef } from '../../../routes';
 
 const skeleton = <Skeleton animation="wave" variant="text" height={40} />;
@@ -102,7 +105,7 @@ export const TechDocsReaderPageHeader = (
   const labels = (
     <>
       <HeaderLabel
-        label="Component"
+        label={capitalize(entityMetadata?.kind || 'entity')}
         value={
           <EntityRefLink
             color="inherit"
@@ -131,14 +134,21 @@ export const TechDocsReaderPageHeader = (
         <HeaderLabel
           label=""
           value={
-            <a
-              href={locationMetadata.target}
-              target="_blank"
-              rel="noopener noreferrer"
+            <Grid
+              container
+              direction="column"
+              alignItems="center"
+              style={{ color: '#fff' }}
             >
-              <CodeIcon style={{ marginTop: '-25px', fill: '#fff' }} />
-            </a>
+              <Grid style={{ padding: 0 }} item>
+                <CodeIcon style={{ marginTop: '-25px' }} />
+              </Grid>
+              <Grid style={{ padding: 0 }} item>
+                Source
+              </Grid>
+            </Grid>
           }
+          url={locationMetadata.target}
         />
       ) : null}
     </>