Fix All Material UI Warnings

Signed-off-by: Pankaj Patil <pankaj.patil2099@hotmail.com>

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

@@ -36,7 +36,7 @@ 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,7 @@ 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 +111,7 @@ const RolloutSummary = ({
               item
               container
               direction="column"
-              justify="flex-start"
+              justifyContent="flex-start"
               alignItems="flex-start"
               spacing={0}
             >
@@ -142,7 +142,7 @@ const RolloutSummary = ({
         container
         xs={3}
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
       >
         <Grid item>
@@ -250,7 +250,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,7 @@ 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 +99,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,7 @@ 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 +82,7 @@ const DeploymentSummary = ({
               item
               container
               direction="column"
-              justify="flex-start"
+              justifyContent="flex-start"
               alignItems="flex-start"
               spacing={0}
             >
@@ -113,7 +113,7 @@ const DeploymentSummary = ({
         container
         xs={3}
         direction="column"
-        justify="flex-start"
+        justifyContent="flex-start"
         alignItems="flex-start"
       >
         <Grid item>
@@ -169,7 +169,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,7 @@ 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 +84,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,7 @@ 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 +107,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,7 @@ 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,7 @@ 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"