Merge pull request #6691 from Patil2099/master

Fix All Material UI Warnings

.changeset/stale-goats-chew.md

@@ -0,0 +1,13 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-fossa': patch
+'@backstage/plugin-kubernetes': patch
+'@backstage/plugin-lighthouse': patch
+'@backstage/plugin-pagerduty': patch
+'@backstage/plugin-sonarqube': patch
+'@backstage/plugin-splunk-on-call': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Fix All Material UI Warnings

packages/core-components/src/components/EmptyState/EmptyState.tsx

@@ -44,7 +44,7 @@ export const EmptyState = ({ title, description, missing, action }: Props) => {
     <Grid
       container
       direction="row"
-      justify="space-around"
+      justifyContent="space-around"
       alignItems="flex-start"
       className={classes.root}
       spacing={2}

packages/core-components/src/layout/Content/Content.tsx

@@ -24,7 +24,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     minWidth: 0,
     paddingTop: theme.spacing(3),
     paddingBottom: theme.spacing(3),
-    ...theme.mixins.gutters({}),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+    },
   },
   stretch: {
     display: 'flex',

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

@@ -117,7 +117,7 @@ const DataGrid = () => (
         xs={12}
         container
         spacing={2}
-        justify="space-between"
+        justifyContent="space-between"
         direction="row"
       >
         <Grid item xs={12} md={6}>

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -167,7 +167,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
     <Badge
       color="secondary"
       variant="dot"
-      overlap="circle"
+      overlap="circular"
       invisible={!hasNotifications}
     >
       <Icon fontSize="small" />

packages/core-components/src/layout/SignInPage/SignInPage.tsx

@@ -70,7 +70,7 @@ export const MultiSignInPage = ({
         {title && <ContentHeader title={title} textAlign={align} />}
         <Grid
           container
-          justify={align === 'center' ? align : 'flex-start'}
+          justifyContent={align === 'center' ? align : 'flex-start'}
           spacing={2}
           component="ul"
           classes={classes}
@@ -152,7 +152,7 @@ export const SingleSignInPage = ({
       <Content>
         <Grid
           container
-          justify="center"
+          justifyContent="center"
           spacing={2}
           component="ul"
           classes={classes}

plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx

@@ -36,7 +36,12 @@ export const AlertInsightsSectionHeader = ({
   return (
     <Box position="relative" mb={3} textAlign="left">
       <ScrollAnchor id={`alert-${number}`} />
-      <Grid container spacing={2} justify="space-between" alignItems="center">
+      <Grid
+        container
+        spacing={2}
+        justifyContent="space-between"
+        alignItems="center"
+      >
         <Grid item>
           <Box display="flex" alignItems="center">
             <Box mr={2}>

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

@@ -157,7 +157,7 @@ export const FossaCard = ({ variant }: { variant?: InfoCardVariants }) => {
         item
         container
         direction="column"
-        justify="space-between"
+        justifyContent="space-between"
         alignItems="center"
         style={{ height: '100%' }}
         spacing={0}

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

@@ -97,7 +97,12 @@ const RolloutSummary = ({
   const abortedMessage = findAbortedMessage(rollout);
 
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <RolloutDrawer rollout={rollout} />
       </Grid>
@@ -111,7 +116,7 @@ const RolloutSummary = ({
               item
               container
               direction="column"
-              justify="flex-start"
+              justifyContent="flex-start"
               alignItems="flex-start"
               spacing={0}
             >
@@ -142,7 +147,7 @@ const RolloutSummary = ({
         container
         xs={3}
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
       >
         <Grid item>
@@ -250,7 +255,7 @@ export const RolloutAccordions = ({
     <Grid
       container
       direction="column"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {rollouts.map((rollout, i) => (

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

@@ -35,7 +35,7 @@ export const RolloutDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >

plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx

@@ -51,7 +51,12 @@ const DefaultCustomResourceSummary = ({
   customResourceName,
 }: DefaultCustomResourceSummaryProps) => {
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <DefaultCustomResourceDrawer
           customResource={customResource}
@@ -99,7 +104,7 @@ export const DefaultCustomResourceAccordions = ({
     <Grid
       container
       direction="column"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {customResources.map((cr, i) => (

plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx

@@ -42,7 +42,7 @@ export const DefaultCustomResourceDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >

plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx

@@ -52,7 +52,7 @@ export const DeploymentDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >

plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx

@@ -68,7 +68,12 @@ const DeploymentSummary = ({
   hpa,
 }: DeploymentSummaryProps) => {
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <DeploymentDrawer deployment={deployment} />
       </Grid>
@@ -82,7 +87,7 @@ const DeploymentSummary = ({
               item
               container
               direction="column"
-              justify="flex-start"
+              justifyContent="flex-start"
               alignItems="flex-start"
               spacing={0}
             >
@@ -113,7 +118,7 @@ const DeploymentSummary = ({
         container
         xs={3}
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
       >
         <Grid item>
@@ -169,7 +174,7 @@ export const DeploymentsAccordions = ({}: DeploymentsAccordionsProps) => {
     <Grid
       container
       direction="column"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {groupedResponses.deployments.map((deployment, i) => (

plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx

@@ -90,7 +90,7 @@ export const ErrorEmptyState = () => {
   return (
     <Grid
       container
-      justify="space-around"
+      justifyContent="space-around"
       direction="row"
       alignItems="center"
       spacing={2}

plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx

@@ -38,7 +38,7 @@ export const IngressDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >

plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx

@@ -40,7 +40,12 @@ type IngressSummaryProps = {
 
 const IngressSummary = ({ ingress }: IngressSummaryProps) => {
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <IngressDrawer ingress={ingress} />
       </Grid>
@@ -84,7 +89,7 @@ export const IngressesAccordions = ({}: IngressesAccordionsProps) => {
     <Grid
       container
       direction="row"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {groupedResponses.ingresses.map((ingress, i) => (

plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx

@@ -65,7 +65,7 @@ const ClusterSummary = ({
     <Grid
       container
       direction="row"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       <Grid
@@ -73,7 +73,7 @@ const ClusterSummary = ({
         item
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >
@@ -92,7 +92,7 @@ const ClusterSummary = ({
         container
         xs={3}
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
       >
         <Grid item>
@@ -208,7 +208,7 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
               {kubernetesObjects?.items.length <= 0 && (
                 <Grid
                   container
-                  justify="space-around"
+                  justifyContent="space-around"
                   direction="row"
                   alignItems="center"
                   spacing={2}

plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx

@@ -112,7 +112,7 @@ const KubernetesDrawerContent = <T extends KubernetesDrawerable>({
         <Grid
           container
           direction="column"
-          justify="flex-start"
+          justifyContent="flex-start"
           alignItems="flex-start"
         >
           <Grid item>

plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx

@@ -38,7 +38,7 @@ export const ServiceDrawer = ({
       <Grid
         container
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
         spacing={0}
       >

plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx

@@ -35,7 +35,12 @@ type ServiceSummaryProps = {
 
 const ServiceSummary = ({ service }: ServiceSummaryProps) => {
   return (
-    <Grid container direction="row" justify="flex-start" alignItems="center">
+    <Grid
+      container
+      direction="row"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
       <Grid xs={3} item>
         <ServiceDrawer service={service} />
       </Grid>
@@ -107,7 +112,7 @@ export const ServicesAccordions = ({}: ServicesAccordionsProps) => {
     <Grid
       container
       direction="row"
-      justify="flex-start"
+      justifyContent="flex-start"
       alignItems="flex-start"
     >
       {groupedResponses.services.map((service, i) => (

plugins/lighthouse/src/components/Intro/index.tsx

@@ -105,7 +105,7 @@ function GettingStartedCard() {
       divider
       actions={
         <>
-          <Grid container direction="row" justify="flex-end">
+          <Grid container direction="row" justifyContent="flex-end">
             <Grid item>
               <Button
                 component="a"
@@ -155,7 +155,7 @@ export default function LighthouseIntro({ onDismiss = () => {} }: Props) {
         <Grid item xs={12} sm={6} md={8}>
           <Grid
             container
-            justify="flex-end"
+            justifyContent="flex-end"
             alignItems="flex-end"
             className={classes.closeButtonContainer}
           >

plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx

@@ -20,7 +20,12 @@ import EmptyStateImage from '../../assets/emptystate.svg';
 
 export const IncidentsEmptyState = () => {
   return (
-    <Grid container justify="center" direction="column" alignItems="center">
+    <Grid
+      container
+      justifyContent="center"
+      direction="column"
+      alignItems="center"
+    >
       <Grid item xs={12}>
         <Typography variant="h5">Nice! No incidents found!</Typography>
       </Grid>

plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx

@@ -183,12 +183,12 @@ export const SonarQubeCard = ({
             item
             container
             direction="column"
-            justify="space-between"
+            justifyContent="space-between"
             alignItems="center"
             style={{ height: '100%' }}
             spacing={0}
           >
-            <Grid item container justify="space-around">
+            <Grid item container justifyContent="space-around">
               <RatingCard
                 titleIcon={<BugReport />}
                 title="Bugs"

plugins/splunk-on-call/src/components/Incident/IncidentEmptyState.tsx

@@ -20,7 +20,12 @@ import EmptyStateImage from '../../assets/emptystate.svg';
 
 export const IncidentsEmptyState = () => {
   return (
-    <Grid container justify="center" direction="column" alignItems="center">
+    <Grid
+      container
+      justifyContent="center"
+      direction="column"
+      alignItems="center"
+    >
       <Grid item xs={12}>
         <Typography variant="h5">Nice! No incidents found!</Typography>
       </Grid>

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

@@ -67,7 +67,7 @@ export const TechDocsBuildLogsDrawerContent = ({
       <Grid
         item
         container
-        justify="space-between"
+        justifyContent="space-between"
         alignItems="center"
         spacing={0}
         wrap="nowrap"