Merge pull request #16285 from awanlin/topic/use-link-for-linksgroup

Updated LinksGroup to use Link over ListItem

.changeset/stale-houses-push.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Updated `LinksGroup` to use `Link` over `ListItem` as this makes the links more obvious and follows the pattern already used in the `GroupProfileCard`. Also updated the `GroupProfileCard` `ExtraDetails` story in Storybook to enable the `showLinks` feature with this off there is no difference between it and the `default` story.

plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx

@@ -123,7 +123,7 @@ export const ExtraDetails = () => (
   <EntityProvider entity={extraDetailsEntity}>
     <Grid container spacing={4}>
       <Grid item xs={12} md={4}>
-        <GroupProfileCard variant="gridItem" />
+        <GroupProfileCard variant="gridItem" showLinks />
       </Grid>
     </Grid>
   </EntityProvider>

plugins/org/src/components/Cards/Meta/LinksGroup.tsx

@@ -23,6 +23,7 @@ import {
   Divider,
 } from '@material-ui/core';
 import React from 'react';
+import { Link } from '@backstage/core-components';
 
 const WebLink = ({
   href,
@@ -33,9 +34,11 @@ const WebLink = ({
   text?: string;
   Icon?: IconComponent;
 }) => (
-  <ListItem button component="a" key={href} href={href}>
+  <ListItem key={href}>
     <ListItemIcon>{Icon ? <Icon /> : <LanguageIcon />}</ListItemIcon>
-    <ListItemText>{text}</ListItemText>
+    <ListItemText>
+      <Link to={href}>{text}</Link>
+    </ListItemText>
   </ListItem>
 );