feat(lighthouse): add more verbose components for "no audits found" case

Signed-off-by: Frank Kong <frkong@redhat.com>

.changeset/lemon-cycles-enjoy.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-lighthouse': patch
+---
+
+Added more verbose components (used to render `null`) when no audits for a website corresponding to the provided url was found
+Added `Create New Audit` button for the `AuditListForEntity` component used by `EntityLighthouseContent` and `EmbeddedRouter`
+Removed error alert from `errorApi` if error was due to no audits being found for a website (empty database query result)

plugins/lighthouse/src/components/AuditList/AuditListForEntity.tsx

@@ -13,19 +13,70 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { AuditListTable } from './AuditListTable';
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
-import { Progress } from '@backstage/core-components';
+import { LIGHTHOUSE_WEBSITE_URL_ANNOTATION } from '../../../constants';
+import {
+  Content,
+  ContentHeader,
+  InfoCard,
+  Progress,
+  WarningPanel,
+} from '@backstage/core-components';
+import { Button } from '@material-ui/core';
+import { resolvePath, useNavigate } from 'react-router-dom';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { rootRouteRef } from '../../plugin';
+import LighthouseSupportButton from '../SupportButton';
 
 export const AuditListForEntity = () => {
   const { value, loading, error } = useWebsiteForEntity();
-  if (loading) {
-    return <Progress />;
-  }
-  if (error || !value) {
-    return null;
+  const { entity } = useEntity();
+  const navigate = useNavigate();
+  const fromPath = useRouteRef(rootRouteRef)?.() ?? '../';
+
+  let createAuditButtonUrl = 'create-audit';
+  const websiteUrl =
+    entity.metadata.annotations?.[LIGHTHOUSE_WEBSITE_URL_ANNOTATION] ?? '';
+  if (websiteUrl) {
+    createAuditButtonUrl += `?url=${encodeURIComponent(websiteUrl)}`;
   }
 
-  return <AuditListTable data-test-id="AuditListTable" items={[value]} />;
+  let content: ReactNode = null;
+  content = (
+    <Content>
+      <ContentHeader title="Latest Audit">
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => navigate(resolvePath(createAuditButtonUrl, fromPath))}
+        >
+          Create New Audit
+        </Button>
+        <LighthouseSupportButton />
+      </ContentHeader>
+      <AuditListTable
+        data-test-id="AuditListTable"
+        items={value ? [value] : []}
+      />
+    </Content>
+  );
+
+  if (loading) {
+    content = <Progress />;
+  } else if (
+    error &&
+    !error.message.includes('no audited website found for url')
+  ) {
+    // We only want to display this warning panel when its caused by an error other than no audits for the website
+    content = (
+      <WarningPanel severity="error" title="Could not load audit list.">
+        {error.message}
+      </WarningPanel>
+    );
+  }
+
+  return <InfoCard noPadding>{content}</InfoCard>;
 };

plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.tsx

@@ -23,6 +23,7 @@ import {
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
 import AuditStatusIcon from '../AuditStatusIcon';
 import {
+  EmptyState,
   InfoCard,
   InfoCardVariants,
   Progress,
@@ -30,6 +31,7 @@ import {
   StatusOK,
   StatusWarning,
   StructuredMetadataTable,
+  WarningPanel,
 } from '@backstage/core-components';
 
 const LighthouseCategoryScoreStatus = (props: { score: number }) => {
@@ -105,7 +107,14 @@ export const LastLighthouseAuditCard = (props: {
     content = <Progress />;
   }
   if (error) {
-    content = null;
+    // We only want to display this warning panel when its caused by an error other than no audits being found for the website
+    content = error.message.includes('no audited website found for url') ? (
+      <EmptyState title="No Audits Found" missing="data" />
+    ) : (
+      <WarningPanel severity="error" title="Could not load audit list.">
+        {error.message}
+      </WarningPanel>
+    );
   }
   if (website) {
     content = (

plugins/lighthouse/src/hooks/useWebsiteForEntity.ts

@@ -31,7 +31,11 @@ export const useWebsiteForEntity = () => {
     () => lighthouseApi.getWebsiteByUrl(websiteUrl),
     [websiteUrl],
   );
-  if (response.error) {
+  // Do not display error alert if its due to no audits found for a website
+  if (
+    response.error &&
+    !response.error.message.includes('no audited website found for url')
+  ) {
     errorApi.post(response.error);
   }
   return response;