fix: Apply linter <span> rule

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

plugins/azure-devops/src/components/BuildTable/BuildTable.tsx

@@ -42,34 +42,34 @@ export const getBuildResultComponent = (result: number | undefined) => {
   switch (result) {
     case BuildResult.Succeeded:
       return (
-        <span>
+        <Typography component="span">
           <StatusOK /> Succeeded
-        </span>
+        </Typography>
       );
     case BuildResult.PartiallySucceeded:
       return (
-        <span>
+        <Typography component="span">
           <StatusWarning /> Partially Succeeded
-        </span>
+        </Typography>
       );
     case BuildResult.Failed:
       return (
-        <span>
+        <Typography component="span">
           <StatusError /> Failed
-        </span>
+        </Typography>
       );
     case BuildResult.Canceled:
       return (
-        <span>
+        <Typography component="span">
           <StatusAborted /> Canceled
-        </span>
+        </Typography>
       );
     case BuildResult.None:
     default:
       return (
-        <span>
+        <Typography component="span">
           <StatusWarning /> Unknown
-        </span>
+        </Typography>
       );
   }
 };
@@ -81,36 +81,36 @@ export const getBuildStateComponent = (
   switch (status) {
     case BuildStatus.InProgress:
       return (
-        <span>
+        <Typography component="span">
           <StatusRunning /> In Progress
-        </span>
+        </Typography>
       );
     case BuildStatus.Completed:
       return getBuildResultComponent(result);
     case BuildStatus.Cancelling:
       return (
-        <span>
+        <Typography component="span">
           <StatusAborted /> Cancelling
-        </span>
+        </Typography>
       );
     case BuildStatus.Postponed:
       return (
-        <span>
+        <Typography component="span">
           <StatusPending /> Postponed
-        </span>
+        </Typography>
       );
     case BuildStatus.NotStarted:
       return (
-        <span>
+        <Typography component="span">
           <StatusAborted /> Not Started
-        </span>
+        </Typography>
       );
     case BuildStatus.None:
     default:
       return (
-        <span>
+        <Typography component="span">
           <StatusWarning /> Unknown
-        </span>
+        </Typography>
       );
   }
 };

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx

@@ -16,6 +16,7 @@
 
 import { Avatar, Link } from '@backstage/core-components';
 import { Card, CardContent, CardHeader } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 
 import { AutoCompleteIcon } from '../AutoCompleteIcon';
 import { DashboardPullRequest } from '@backstage/plugin-azure-devops-common';
@@ -78,9 +79,9 @@ export const PullRequestCard = ({
     : undefined;
 
   const subheader = (
-    <span>
+    <Typography component="span">
       {repoLink} · {creationDate}
-    </span>
+    </Typography>
   );
 
   const avatar = (

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx

@@ -20,6 +20,7 @@ import {
   PolicyType,
 } from '@backstage/plugin-azure-devops-common';
 import { styled, withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 
 import CancelIcon from '@material-ui/icons/Cancel';
 import GroupWorkIcon from '@material-ui/icons/GroupWork';
@@ -91,6 +92,7 @@ export const PullRequestCardPolicy = ({
   policy,
 }: PullRequestCardPolicyProps) => (
   <PullRequestCardPolicyContainer>
-    {getPolicyIcon(policy)} <span>{policy.text}</span>
+    {getPolicyIcon(policy)}{' '}
+    <Typography component="span">{policy.text}</Typography>
   </PullRequestCardPolicyContainer>
 );