detach the badges plugin from the catalog plugin

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

packages/app/src/components/catalog/EntityPage.tsx

@@ -31,6 +31,7 @@ import {
   ProvidedApisCard,
   ProvidingComponentsCard,
 } from '@backstage/plugin-api-docs';
+import { EntityBadgesDialog } from '@backstage/plugin-badges';
 import {
   AboutCard,
   EntityHasComponentsCard,
@@ -104,7 +105,8 @@ import {
   RecentTravisCIBuildsWidget,
   Router as TravisCIRouter,
 } from '@roadiehq/backstage-plugin-travis-ci';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
+import BadgeIcon from '@material-ui/icons/CallToAction';
 
 export const CICDSwitcher = ({ entity }: { entity: Entity }) => {
   // This component is just an example of how you can implement your company's logic in entity page.
@@ -178,6 +180,32 @@ export const ErrorsSwitcher = ({ entity }: { entity: Entity }) => {
   }
 };
 
+const EntityPageLayoutWrapper = (props: { children?: React.ReactNode }) => {
+  const [badgesDialogOpen, setBadgesDialogOpen] = useState(false);
+
+  const extraMenuItems = useMemo(() => {
+    return [
+      {
+        title: 'Badges',
+        Icon: BadgeIcon,
+        onClick: () => setBadgesDialogOpen(true),
+      },
+    ];
+  }, []);
+
+  return (
+    <>
+      <EntityPageLayout UNSTABLE_extraContextMenuItems={extraMenuItems}>
+        {props.children}
+      </EntityPageLayout>
+      <EntityBadgesDialog
+        open={badgesDialogOpen}
+        onClose={() => setBadgesDialogOpen(false)}
+      />
+    </>
+  );
+};
+
 const ComponentOverviewContent = ({ entity }: { entity: Entity }) => (
   <Grid container spacing={3} alignItems="stretch">
     <Grid item md={6}>
@@ -233,7 +261,7 @@ const ComponentApisContent = ({ entity }: { entity: Entity }) => (
 );
 
 const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayout>
+  <EntityPageLayoutWrapper>
     <EntityPageLayout.Content
       path="/"
       title="Overview"
@@ -284,11 +312,11 @@ const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
       title="TODOs"
       element={<EntityTodoContent />}
     />
-  </EntityPageLayout>
+  </EntityPageLayoutWrapper>
 );
 
 const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayout>
+  <EntityPageLayoutWrapper>
     <EntityPageLayout.Content
       path="/"
       title="Overview"
@@ -334,11 +362,11 @@ const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
       title="TODOs"
       element={<EntityTodoContent />}
     />
-  </EntityPageLayout>
+  </EntityPageLayoutWrapper>
 );
 
 const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayout>
+  <EntityPageLayoutWrapper>
     <EntityPageLayout.Content
       path="/*"
       title="Overview"
@@ -354,7 +382,7 @@ const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
       title="TODOs"
       element={<EntityTodoContent />}
     />
-  </EntityPageLayout>
+  </EntityPageLayoutWrapper>
 );
 
 export const ComponentEntityPage = ({ entity }: { entity: Entity }) => {
@@ -393,7 +421,7 @@ const ApiDefinitionContent = ({ entity }: { entity: ApiEntity }) => (
 );
 
 const ApiEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayout>
+  <EntityPageLayoutWrapper>
     <EntityPageLayout.Content
       path="/*"
       title="Overview"
@@ -404,7 +432,7 @@ const ApiEntityPage = ({ entity }: { entity: Entity }) => (
       title="Definition"
       element={<ApiDefinitionContent entity={entity as ApiEntity} />}
     />
-  </EntityPageLayout>
+  </EntityPageLayoutWrapper>
 );
 
 const UserOverviewContent = ({ entity }: { entity: UserEntity }) => (
@@ -419,13 +447,13 @@ const UserOverviewContent = ({ entity }: { entity: UserEntity }) => (
 );
 
 const UserEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayout>
+  <EntityPageLayoutWrapper>
     <EntityPageLayout.Content
       path="/*"
       title="Overview"
       element={<UserOverviewContent entity={entity as UserEntity} />}
     />
-  </EntityPageLayout>
+  </EntityPageLayoutWrapper>
 );
 
 const GroupOverviewContent = ({ entity }: { entity: GroupEntity }) => (
@@ -443,13 +471,13 @@ const GroupOverviewContent = ({ entity }: { entity: GroupEntity }) => (
 );
 
 const GroupEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayout>
+  <EntityPageLayoutWrapper>
     <EntityPageLayout.Content
       path="/*"
       title="Overview"
       element={<GroupOverviewContent entity={entity as GroupEntity} />}
     />
-  </EntityPageLayout>
+  </EntityPageLayoutWrapper>
 );
 
 const SystemOverviewContent = ({ entity }: { entity: SystemEntity }) => (
@@ -467,13 +495,13 @@ const SystemOverviewContent = ({ entity }: { entity: SystemEntity }) => (
 );
 
 const SystemEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayout>
+  <EntityPageLayoutWrapper>
     <EntityPageLayout.Content
       path="/*"
       title="Overview"
       element={<SystemOverviewContent entity={entity as SystemEntity} />}
     />
-  </EntityPageLayout>
+  </EntityPageLayoutWrapper>
 );
 
 const DomainOverviewContent = ({ entity }: { entity: DomainEntity }) => (
@@ -488,13 +516,13 @@ const DomainOverviewContent = ({ entity }: { entity: DomainEntity }) => (
 );
 
 const DomainEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayout>
+  <EntityPageLayoutWrapper>
     <EntityPageLayout.Content
       path="/*"
       title="Overview"
       element={<DomainOverviewContent entity={entity as DomainEntity} />}
     />
-  </EntityPageLayout>
+  </EntityPageLayoutWrapper>
 );
 
 export const EntityPage = () => {