Merge pull request #14807 from Linneaiv/error_conditional_rendering

ErrorReporting conditional rendering

.changeset/chilly-flies-nail.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kubernetes': patch
+---
+
+Removed rendering for ErrorEmptyState in ErrorReporting component, so nothing is rendered when there are no errors. Also removed Divider on Kubernetes page.

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

@@ -15,9 +15,8 @@
  */
 import * as React from 'react';
 import { DetectedError, DetectedErrorsByCluster } from '../../error-detection';
-import { Chip, Typography, Grid } from '@material-ui/core';
-import EmptyStateImage from '../../assets/emptystate.svg';
-import { Table, TableColumn, InfoCard } from '@backstage/core-components';
+import { Chip } from '@material-ui/core';
+import { Table, TableColumn } from '@backstage/core-components';
 
 type ErrorReportingProps = {
   detectedErrors: DetectedErrorsByCluster;
@@ -91,31 +90,6 @@ const sortBySeverity = (a: DetectedError, b: DetectedError) => {
   return 0;
 };
 
-export const ErrorEmptyState = () => {
-  return (
-    <Grid
-      container
-      justifyContent="space-around"
-      direction="row"
-      alignItems="center"
-      spacing={2}
-    >
-      <Grid item xs={4}>
-        <Typography variant="h5">
-          Nice! There are no errors to report!
-        </Typography>
-      </Grid>
-      <Grid item xs={4}>
-        <img
-          src={EmptyStateImage}
-          alt="EmptyState"
-          data-testid="emptyStateImg"
-        />
-      </Grid>
-    </Grid>
-  );
-};
-
 export const ErrorReporting = ({ detectedErrors }: ErrorReportingProps) => {
   const errors = Array.from(detectedErrors.values())
     .flat()
@@ -123,11 +97,7 @@ export const ErrorReporting = ({ detectedErrors }: ErrorReportingProps) => {
 
   return (
     <>
-      {errors.length === 0 ? (
-        <InfoCard title="Error Reporting">
-          <ErrorEmptyState />
-        </InfoCard>
-      ) : (
+      {errors.length !== 0 && (
         <Table
           title="Error Reporting"
           data={errors}

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

@@ -45,11 +45,6 @@ describe('KubernetesContent', () => {
         />,
       ),
     );
-
-    expect(getByText('Error Reporting')).toBeInTheDocument();
-    expect(
-      getByText('Nice! There are no errors to report!'),
-    ).toBeInTheDocument();
     expect(getByText('Your Clusters')).toBeInTheDocument();
     // TODO add a prompt for the user to configure their clusters
   });
@@ -94,9 +89,6 @@ describe('KubernetesContent', () => {
       ),
     );
 
-    expect(
-      getByText('Nice! There are no errors to report!'),
-    ).toBeInTheDocument();
     expect(getByText('cluster-1')).toBeInTheDocument();
     expect(getByText('Cluster')).toBeInTheDocument();
     expect(getByText('10 pods')).toBeInTheDocument();
@@ -148,7 +140,7 @@ describe('KubernetesContent', () => {
       },
       error: undefined,
     });
-    const { getByText, getAllByText, queryByText } = render(
+    const { getByText, getAllByText } = render(
       wrapInTestApp(
         <KubernetesContent
           entity={
@@ -161,8 +153,6 @@ describe('KubernetesContent', () => {
         />,
       ),
     );
-
-    expect(queryByText('Nice! There are no errors to report!')).toBeNull();
     expect(getAllByText('Cluster')).toHaveLength(2);
     expect(getByText('cluster-a')).toBeInTheDocument();
     expect(getByText('10 pods')).toBeInTheDocument();

plugins/kubernetes/src/components/KubernetesContent.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Divider, Grid, Typography } from '@material-ui/core';
+import { Grid, Typography } from '@material-ui/core';
 import { Entity } from '@backstage/catalog-model';
 import { ErrorPanel } from './ErrorPanel';
 import { ErrorReporting } from './ErrorReporting';
@@ -82,9 +82,6 @@ export const KubernetesContent = ({
             <Grid item>
               <ErrorReporting detectedErrors={detectedErrors} />
             </Grid>
-            <Grid item>
-              <Divider />
-            </Grid>
             <Grid item>
               <Typography variant="h3">Your Clusters</Typography>
             </Grid>