Use MissingAnnotationEmptyState for plugins (#2824)

plugins/circleci/src/components/Router.tsx

@@ -21,16 +21,14 @@ import { BuildWithStepsPage } from './BuildWithStepsPage/';
 import { BuildsPage } from './BuildsPage';
 import { CIRCLECI_ANNOTATION } from '../constants';
 import { Entity } from '@backstage/catalog-model';
-import { WarningPanel } from '@backstage/core';
+import { MissingAnnotationEmptyState } from '@backstage/core';
 
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[CIRCLECI_ANNOTATION]);
 
 export const Router = ({ entity }: { entity: Entity }) =>
   !isPluginApplicableToEntity(entity) ? (
-    <WarningPanel title="CircleCI plugin:">
-      <pre>{CIRCLECI_ANNOTATION}</pre> annotation is missing on the entity.
-    </WarningPanel>
+    <MissingAnnotationEmptyState annotation={CIRCLECI_ANNOTATION} />
   ) : (
     <Routes>
       <Route path={`/${circleCIRouteRef.path}`} element={<BuildsPage />} />

plugins/cloudbuild/src/components/Router.tsx

@@ -20,7 +20,7 @@ import { rootRouteRef, buildRouteRef } from '../plugin';
 import { WorkflowRunDetails } from './WorkflowRunDetails';
 import { WorkflowRunsTable } from './WorkflowRunsTable';
 import { CLOUDBUILD_ANNOTATION } from './useProjectName';
-import { WarningPanel } from '@backstage/core';
+import { MissingAnnotationEmptyState } from '@backstage/core';
 
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[CLOUDBUILD_ANNOTATION]);
@@ -28,9 +28,7 @@ export const isPluginApplicableToEntity = (entity: Entity) =>
 export const Router = ({ entity }: { entity: Entity }) =>
   // TODO(shmidt-i): move warning to a separate standardized component
   !isPluginApplicableToEntity(entity) ? (
-    <WarningPanel title="Cloudbuild plugin:">
-      <pre>{CLOUDBUILD_ANNOTATION}</pre> annotation is missing on the entity.
-    </WarningPanel>
+    <MissingAnnotationEmptyState annotation={CLOUDBUILD_ANNOTATION} />
   ) : (
     <Routes>
       <Route

plugins/jenkins/src/components/Router.tsx

@@ -19,7 +19,7 @@ import { buildRouteRef, rootRouteRef } from '../plugin';
 import { DetailedViewPage } from './BuildWithStepsPage/';
 import { JENKINS_ANNOTATION } from '../constants';
 import { Entity } from '@backstage/catalog-model';
-import { WarningPanel } from '@backstage/core';
+import { MissingAnnotationEmptyState } from '@backstage/core';
 import { CITable } from './BuildsPage/lib/CITable';
 
 export const isPluginApplicableToEntity = (entity: Entity) =>
@@ -27,10 +27,7 @@ export const isPluginApplicableToEntity = (entity: Entity) =>
 
 export const Router = ({ entity }: { entity: Entity }) => {
   return !isPluginApplicableToEntity(entity) ? (
-    <WarningPanel title="Jenkins plugin:">
-      <pre>entity.metadata.annotations['{JENKINS_ANNOTATION}']</pre>
-      key is missing on the entity.
-    </WarningPanel>
+    <MissingAnnotationEmptyState annotation={JENKINS_ANNOTATION} />
   ) : (
     <Routes>
       <Route path={`/${rootRouteRef.path}`} element={<CITable />} />

plugins/kubernetes/src/Router.tsx

@@ -20,7 +20,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import { rootCatalogKubernetesRouteRef } from './plugin';
 import { KubernetesContent } from './components/KubernetesContent';
-import { WarningPanel } from '@backstage/core';
+import { MissingAnnotationEmptyState } from '@backstage/core';
 
 const KUBERNETES_ANNOTATION = 'backstage.io/kubernetes-id';
 
@@ -29,11 +29,7 @@ export const Router = ({ entity }: { entity: Entity }) => {
     entity.metadata.annotations?.[KUBERNETES_ANNOTATION];
 
   if (!kubernetesAnnotationValue) {
-    return (
-      <WarningPanel title="Kubernetes plugin:">
-        <pre>{KUBERNETES_ANNOTATION}</pre> annotation is missing on the entity.
-      </WarningPanel>
-    );
+    return <MissingAnnotationEmptyState annotation={KUBERNETES_ANNOTATION} />;
   }
 
   return (

plugins/lighthouse/src/Router.tsx

@@ -23,7 +23,7 @@ import CreateAudit, { CreateAuditContent } from './components/CreateAudit';
 import { Entity } from '@backstage/catalog-model';
 import { LIGHTHOUSE_WEBSITE_URL_ANNOTATION } from '../constants';
 import { AuditListForEntity } from './components/AuditList/AuditListForEntity';
-import { EmptyState } from '@backstage/core';
+import { MissingAnnotationEmptyState } from '@backstage/core';
 
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(entity.metadata.annotations?.[LIGHTHOUSE_WEBSITE_URL_ANNOTATION]);
@@ -38,10 +38,8 @@ export const Router = () => (
 
 export const EmbeddedRouter = ({ entity }: { entity: Entity }) =>
   !isPluginApplicableToEntity(entity) ? (
-    <EmptyState
-      missing="field"
-      title="Your plugin is missing an annotation"
-      description={`Please add the ${LIGHTHOUSE_WEBSITE_URL_ANNOTATION} annotation`}
+    <MissingAnnotationEmptyState
+      annotation={LIGHTHOUSE_WEBSITE_URL_ANNOTATION}
     />
   ) : (
     <Routes>

plugins/rollbar/src/components/Router.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { Routes, Route } from 'react-router';
 import { Entity } from '@backstage/catalog-model';
-import { WarningPanel } from '@backstage/core';
+import { MissingAnnotationEmptyState } from '@backstage/core';
 import { catalogRouteRef } from '../routes';
 import { ROLLBAR_ANNOTATION } from '../constants';
 import { EntityPageRollbar } from './EntityPageRollbar/EntityPageRollbar';
@@ -31,9 +31,7 @@ type Props = {
 
 export const Router = ({ entity }: Props) =>
   !isPluginApplicableToEntity(entity) ? (
-    <WarningPanel title="Rollbar plugin:">
-      <pre>{ROLLBAR_ANNOTATION}</pre> annotation is missing on the entity.
-    </WarningPanel>
+    <MissingAnnotationEmptyState annotation={ROLLBAR_ANNOTATION} />
   ) : (
     <Routes>
       <Route

plugins/sentry/src/components/Router.tsx

@@ -16,7 +16,7 @@
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { Routes, Route } from 'react-router';
-import { WarningPanel } from '@backstage/core';
+import { MissingAnnotationEmptyState } from '@backstage/core';
 import { SentryPluginWidget } from './SentryPluginWidget/SentryPluginWidget';
 
 const SENTRY_ANNOTATION = 'sentry.io/project-slug';
@@ -25,11 +25,7 @@ export const Router = ({ entity }: { entity: Entity }) => {
   const projectId = entity.metadata.annotations?.[SENTRY_ANNOTATION];
 
   if (!projectId) {
-    return (
-      <WarningPanel title="Sentry plugin:">
-        <pre>{SENTRY_ANNOTATION}</pre> annotation is missing on the entity.
-      </WarningPanel>
-    );
+    return <MissingAnnotationEmptyState annotation={SENTRY_ANNOTATION} />;
   }
 
   return (

plugins/techdocs/src/Router.tsx

@@ -17,8 +17,7 @@
 import React from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { Route, Routes } from 'react-router-dom';
-import { WarningPanel } from '@backstage/core';
-
+import { MissingAnnotationEmptyState } from '@backstage/core';
 import {
   rootRouteRef,
   rootDocsRouteRef,
@@ -43,15 +42,7 @@ export const EmbeddedDocsRouter = ({ entity }: { entity: Entity }) => {
   const projectId = entity.metadata.annotations?.[TECHDOCS_ANNOTATION];
 
   if (!projectId) {
-    return (
-      <WarningPanel title="Techdocs plugin:">
-        <pre>{TECHDOCS_ANNOTATION}</pre> annotation is missing on the entity.
-        <br />
-        <a href="https://backstage.io/docs/features/techdocs/creating-and-publishing">
-          Getting Started
-        </a>
-      </WarningPanel>
-    );
+    return <MissingAnnotationEmptyState annotation={TECHDOCS_ANNOTATION} />;
   }
 
   return (