From 8d666e43bd91c54db74d03afe336fc00a06da5f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Fri, 9 Oct 2020 15:11:15 +0200
Subject: [PATCH] Use MissingAnnotationEmptyState for plugins (#2824)

---
 plugins/circleci/src/components/Router.tsx   |  6 ++----
 plugins/cloudbuild/src/components/Router.tsx |  6 ++----
 plugins/jenkins/src/components/Router.tsx    |  7 ++-----
 plugins/kubernetes/src/Router.tsx            |  8 ++------
 plugins/lighthouse/src/Router.tsx            |  8 +++-----
 plugins/rollbar/src/components/Router.tsx    |  6 ++----
 plugins/sentry/src/components/Router.tsx     |  8 ++------
 plugins/techdocs/src/Router.tsx              | 13 ++-----------
 8 files changed, 17 insertions(+), 45 deletions(-)

diff --git a/plugins/circleci/src/components/Router.tsx b/plugins/circleci/src/components/Router.tsx
index 41764b3d7d..5fe9a20eff 100644
--- a/plugins/circleci/src/components/Router.tsx
+++ b/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 />} />
diff --git a/plugins/cloudbuild/src/components/Router.tsx b/plugins/cloudbuild/src/components/Router.tsx
index b2653a05f2..af4959f4be 100644
--- a/plugins/cloudbuild/src/components/Router.tsx
+++ b/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
diff --git a/plugins/jenkins/src/components/Router.tsx b/plugins/jenkins/src/components/Router.tsx
index a4c7314691..91bcde2a8b 100644
--- a/plugins/jenkins/src/components/Router.tsx
+++ b/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 />} />
diff --git a/plugins/kubernetes/src/Router.tsx b/plugins/kubernetes/src/Router.tsx
index 41f534fbef..20a4c04285 100644
--- a/plugins/kubernetes/src/Router.tsx
+++ b/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 (
diff --git a/plugins/lighthouse/src/Router.tsx b/plugins/lighthouse/src/Router.tsx
index df481483c3..d264f3bc1b 100644
--- a/plugins/lighthouse/src/Router.tsx
+++ b/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>
diff --git a/plugins/rollbar/src/components/Router.tsx b/plugins/rollbar/src/components/Router.tsx
index 192ef33a61..f0756cb02a 100644
--- a/plugins/rollbar/src/components/Router.tsx
+++ b/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
diff --git a/plugins/sentry/src/components/Router.tsx b/plugins/sentry/src/components/Router.tsx
index 47d532b4e3..6d15268629 100644
--- a/plugins/sentry/src/components/Router.tsx
+++ b/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 (
diff --git a/plugins/techdocs/src/Router.tsx b/plugins/techdocs/src/Router.tsx
index 6dc0dd02ad..262f542ee6 100644
--- a/plugins/techdocs/src/Router.tsx
+++ b/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 (