Merge pull request #15251 from luchillo17/feat/BCKSTG-93-paragraphs

Enable eslint-plugin-react forbid paragraph

.changeset/many-carpets-beam.md

@@ -0,0 +1,14 @@
+---
+'@backstage/plugin-bazaar': patch
+'@backstage/plugin-fossa': patch
+'@backstage/plugin-github-actions': patch
+'@backstage/plugin-home': patch
+'@backstage/plugin-jenkins': patch
+'@backstage/plugin-kubernetes': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-stack-overflow': patch
+'@backstage/plugin-tech-radar': patch
+'@backstage/plugin-xcmetrics': patch
+---
+
+Small updates to some paragraph components to ensure theme typography properties are inherited correctly.

.eslintrc.js

@@ -247,6 +247,7 @@ module.exports = {
           {
             forbid: [
               { element: 'button', message: 'use MUI <Button> instead' },
+              { element: 'p', message: 'use MUI <Typography> instead' },
               {
                 element: 'span',
                 message: 'use a MUI <Typography> variant instead',

packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -36,9 +36,9 @@ export default {
 export const InHeader = () => (
   <MemoryRouter>
     <h2>Standard breadcrumbs</h2>
-    <p>
+    <Typography paragraph>
       Underlined pages are links. This should show a hierarchical relationship.
-    </p>
+    </Typography>
 
     <Page themeId="other">
       <Header title="Current Page" type="General Page" typeLink="/" />
@@ -61,17 +61,17 @@ export const OutsideOfHeader = () => {
   const open = Boolean(anchorEl);
   return (
     <MemoryRouter>
-      <p>
+      <Typography paragraph>
         It might be the case that you want to keep your breadcrumbs outside of
         the header. In that case, they should be positioned above the title of
         the page.
-      </p>
+      </Typography>
 
       <h2>Standard breadcrumbs</h2>
-      <p>
+      <Typography paragraph>
         Underlined pages are links. This should show a hierarchical
         relationship.
-      </p>
+      </Typography>
 
       <Breadcrumbs color="primaryText" />
 
@@ -82,10 +82,10 @@ export const OutsideOfHeader = () => {
       </Breadcrumbs>
 
       <h2>Hidden breadcrumbs</h2>
-      <p>
+      <Typography paragraph>
         Use this when you have more than three breadcrumbs. When user clicks on
         ellipses, expand the breadcrumbs out.
-      </p>
+      </Typography>
 
       <Breadcrumbs color="primaryText">
         <Link to="/">General Page</Link>
@@ -96,10 +96,10 @@ export const OutsideOfHeader = () => {
       </Breadcrumbs>
 
       <h2>Layered breadcrumbs</h2>
-      <p>
+      <Typography paragraph>
         Use this when you want to show alternative breadcrumbs on the same
         hierarchical level.
-      </p>
+      </Typography>
 
       <Fragment>
         <Breadcrumbs color="primaryText">

plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx

@@ -16,6 +16,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { CardHeader, Divider, IconButton, makeStyles } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import {
   HeaderIconLinkRow,
   IconLinkVerticalProps,
@@ -182,7 +183,11 @@ export const EntityBazaarInfoContent = ({
         )}
 
         <CardHeader
-          title={<p className={classes.wordBreak}>{bazaarProject?.title!}</p>}
+          title={
+            <Typography paragraph className={classes.wordBreak}>
+              {bazaarProject?.title!}
+            </Typography>
+          }
           action={
             <div>
               <IconButton

plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx

@@ -22,6 +22,7 @@ import {
   IconButton,
   makeStyles,
 } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import {
   HeaderIconLinkRow,
   IconLinkVerticalProps,
@@ -256,9 +257,9 @@ export const HomePageBazaarInfoCard = ({
 
         <CardHeader
           title={
-            <p className={classes.wordBreak}>
+            <Typography paragraph className={classes.wordBreak}>
               {bazaarProject.value?.title || initProject.title}
-            </p>
+            </Typography>
           }
           action={
             <div>

plugins/fossa/src/components/FossaCard/FossaCard.tsx

@@ -166,7 +166,8 @@ export const FossaCard = (props: { variant?: InfoCardVariants }) => {
         spacing={0}
       >
         <Grid item>
-          <p
+          <Typography
+            paragraph
             className={
               value.issueCount > 0 || value.dependencyCount === 0
                 ? classes.numberError
@@ -174,16 +175,18 @@ export const FossaCard = (props: { variant?: InfoCardVariants }) => {
             }
           >
             {value.issueCount}
-          </p>
+          </Typography>
           {value.dependencyCount > 0 && (
-            <p className={classes.description}>Number of issues</p>
+            <Typography paragraph className={classes.description}>
+              Number of issues
+            </Typography>
           )}
           {value.dependencyCount === 0 && (
-            <p className={classes.description}>
+            <Typography paragraph className={classes.description}>
               No Dependencies.
               <br />
               Please check your FOSSA project settings.
-            </p>
+            </Typography>
           )}
         </Grid>
 

plugins/github-actions/src/components/WorkflowRunsTable/WorkflowRunsTable.tsx

@@ -68,8 +68,12 @@ const generatedColumns: TableColumn[] = [
     title: 'Source',
     render: (row: Partial<WorkflowRun>) => (
       <Typography variant="body2" noWrap>
-        <p>{row.source?.branchName}</p>
-        <p>{row.source?.commit.hash}</p>
+        <Typography paragraph variant="body2">
+          {row.source?.branchName}
+        </Typography>
+        <Typography paragraph variant="body2">
+          {row.source?.commit.hash}
+        </Typography>
       </Typography>
     ),
   },

plugins/home/src/homePageComponents/RandomJoke/Content.tsx

@@ -14,18 +14,19 @@
  * limitations under the License.
  */
 
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { useRandomJoke } from './Context';
 
 export const Content = () => {
   const { joke, loading } = useRandomJoke();
 
-  if (loading) return <p>Loading...</p>;
+  if (loading) return <Typography paragraph>Loading...</Typography>;
 
   return (
     <div>
-      <p>{joke.setup}</p>
-      <p>{joke.punchline}</p>
+      <Typography paragraph>{joke.setup}</Typography>
+      <Typography paragraph>{joke.punchline}</Typography>
     </div>
   );
 };

plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -126,12 +126,12 @@ const generatedColumns: TableColumn[] = [
     field: 'lastBuild.source.branchName',
     render: (row: Partial<Project>) => (
       <>
-        <p>
+        <Typography paragraph>
           <Link to={row.lastBuild?.source?.url ?? ''}>
             {row.lastBuild?.source?.branchName}
           </Link>
-        </p>
-        <p>{row.lastBuild?.source?.commit?.hash}</p>
+        </Typography>
+        <Typography paragraph>{row.lastBuild?.source?.commit?.hash}</Typography>
       </>
     ),
   },
@@ -152,7 +152,7 @@ const generatedColumns: TableColumn[] = [
     render: (row: Partial<Project>) => {
       return (
         <>
-          <p>
+          <Typography paragraph>
             {row.lastBuild?.tests && (
               <Link to={row.lastBuild?.tests.testUrl ?? ''}>
                 {row.lastBuild?.tests.passed} / {row.lastBuild?.tests.total}{' '}
@@ -165,7 +165,7 @@ const generatedColumns: TableColumn[] = [
             )}
 
             {!row.lastBuild?.tests && 'n/a'}
-          </p>
+          </Typography>
         </>
       );
     },

plugins/kubernetes/src/components/CustomResources/ArgoRollouts/StepsProgress.tsx

@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { Step, StepLabel, Stepper } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import {
   ArgoRolloutCanaryStep,
   SetWeightStep,
@@ -49,11 +50,11 @@ const createLabelForStep = (step: ArgoRolloutCanaryStep): React.ReactNode => {
   } else if (isAnalysisStep(step)) {
     return (
       <div>
-        <p>analysis templates:</p>
+        <Typography paragraph>analysis templates:</Typography>
         {step.analysis.templates.map((t, i) => (
-          <p key={i}>{`${t.templateName}${
+          <Typography paragraph key={i}>{`${t.templateName}${
             t.clusterScope ? ' (cluster scoped)' : ''
-          }`}</p>
+          }`}</Typography>
         ))}
       </div>
     );

plugins/scaffolder/src/components/ListTasksPage/columns/CreatedAtColumn.tsx

@@ -16,6 +16,7 @@
 import { DateTime, Interval } from 'luxon';
 import humanizeDuration from 'humanize-duration';
 import React from 'react';
+import Typography from '@material-ui/core/Typography';
 
 export const CreatedAtColumn = ({ createdAt }: { createdAt: string }) => {
   const createdAtTime = DateTime.fromISO(createdAt);
@@ -23,5 +24,9 @@ export const CreatedAtColumn = ({ createdAt }: { createdAt: string }) => {
     .toDuration()
     .valueOf();
 
-  return <p>{humanizeDuration(formatted, { round: true })} ago</p>;
+  return (
+    <Typography paragraph>
+      {humanizeDuration(formatted, { round: true })} ago
+    </Typography>
+  );
 };

plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.tsx

@@ -20,6 +20,7 @@ import useAsync from 'react-use/lib/useAsync';
 
 import { catalogApiRef, EntityRefLink } from '@backstage/plugin-catalog-react';
 import { parseEntityRef, UserEntity } from '@backstage/catalog-model';
+import Typography from '@material-ui/core/Typography';
 
 export const OwnerEntityColumn = ({ entityRef }: { entityRef?: string }) => {
   const catalogApi = useApi(catalogApiRef);
@@ -30,7 +31,7 @@ export const OwnerEntityColumn = ({ entityRef }: { entityRef?: string }) => {
   );
 
   if (!entityRef) {
-    return <p>Unknown</p>;
+    return <Typography paragraph>Unknown</Typography>;
   }
 
   if (loading || error) {

plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx

@@ -24,6 +24,7 @@ import {
   ListItemSecondaryAction,
   ListItemIcon,
 } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import useAsync from 'react-use/lib/useAsync';
 import _unescape from 'lodash/unescape';
@@ -51,11 +52,11 @@ export const Content = (props: StackOverflowQuestionsContentProps) => {
   }, []);
 
   if (loading) {
-    return <p>loading...</p>;
+    return <Typography paragraph>loading...</Typography>;
   }
 
   if (error || !value || !value.length) {
-    return <p>could not load questions</p>;
+    return <Typography paragraph>could not load questions</Typography>;
   }
 
   const getSecondaryText = (answer_count: Number) =>

plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { ClassNameMap } from '@material-ui/core/styles/withStyles';
+import Typography from '@material-ui/core/Typography/Typography';
 import React from 'react';
 import { Entry, Ring } from '../../utils/types';
 import { RadarLegendLink } from './RadarLegendLink';
@@ -38,7 +39,9 @@ export const RadarLegendRing = ({
     <div data-testid="radar-ring" key={ring.id} className={classes.ring}>
       <h3 className={classes.ringHeading}>{ring.name}</h3>
       {entries.length === 0 ? (
-        <p className={classes.ringEmpty}>(empty)</p>
+        <Typography paragraph className={classes.ringEmpty}>
+          (empty)
+        </Typography>
       ) : (
         <ol className={classes.ringList}>
           {entries.map(entry => (

plugins/tech-radar/src/components/RadarPage.tsx

@@ -23,6 +23,7 @@ import {
   Link,
 } from '@backstage/core-components';
 import { Grid, Input, makeStyles } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { RadarComponent, TechRadarComponentProps } from './RadarComponent';
 
@@ -79,7 +80,7 @@ export function RadarPage(props: TechRadarPageProps) {
             onChange={e => setSearchText(e.target.value)}
           />
           <SupportButton>
-            <p>
+            <Typography paragraph>
               This is used for visualizing the official guidelines of different
               areas of software development such as languages, frameworks,
               infrastructure and processes. You can find an explanation for the
@@ -88,7 +89,7 @@ export function RadarPage(props: TechRadarPageProps) {
                 Zalando Tech Radar
               </Link>
               .
-            </p>
+            </Typography>
           </SupportButton>
         </ContentHeader>
         <Grid container spacing={3} direction="row">

plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx

@@ -15,6 +15,7 @@
  */
 
 import { createStyles, makeStyles, useTheme } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import {
   Bar,
@@ -91,7 +92,7 @@ export const BuildTimeline = ({
   width,
 }: BuildTimelineProps) => {
   const theme = useTheme();
-  if (!targets.length) return <p>No Targets</p>;
+  if (!targets.length) return <Typography paragraph>No Targets</Typography>;
 
   const data = getTimelineData(targets);