diff --git a/.changeset/hungry-mice-clap.md b/.changeset/hungry-mice-clap.md
new file mode 100644
index 0000000000..6b819620b0
--- /dev/null
+++ b/.changeset/hungry-mice-clap.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-sentry': patch
+---
+
+Port to new composability API by exporting new `EntitySentryContent` and `EntitySentryCard` component extensions.
diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt
index 6227215896..f9d5024af4 100644
--- a/.github/styles/vocab.txt
+++ b/.github/styles/vocab.txt
@@ -36,6 +36,7 @@ Codecov
codehilite
Codehilite
codeowners
+composability
composable
config
Config
diff --git a/plugins/sentry/dev/index.tsx b/plugins/sentry/dev/index.tsx
index fc75008040..c9313911b2 100644
--- a/plugins/sentry/dev/index.tsx
+++ b/plugins/sentry/dev/index.tsx
@@ -15,24 +15,32 @@
*/
import { Entity } from '@backstage/catalog-model';
-import {
- Content,
- createPlugin,
- createRouteRef,
- Header,
- Page,
-} from '@backstage/core';
-import { createDevApp } from '@backstage/dev-utils';
+import { EntityProvider } from '@backstage/plugin-catalog';
+import { Content, Header, Page } from '@backstage/core';
+import { createDevApp, EntityGridItem } from '@backstage/dev-utils';
import { Grid } from '@material-ui/core';
import React from 'react';
import {
MockSentryApi,
SentryApi,
sentryApiRef,
- SentryIssuesWidget,
+ EntitySentryCard,
+ EntitySentryContent,
} from '../src';
import { SENTRY_PROJECT_SLUG_ANNOTATION } from '../src/components/useProjectSlug';
+const entity = (name?: string) =>
+ ({
+ apiVersion: 'backstage.io/v1alpha1',
+ kind: 'Component',
+ metadata: {
+ annotations: {
+ [SENTRY_PROJECT_SLUG_ANNOTATION]: name,
+ },
+ name: name,
+ },
+ } as Entity);
+
createDevApp()
.registerApi({
api: sentryApiRef,
@@ -56,52 +64,44 @@ createDevApp()
},
} as SentryApi),
})
- .registerPlugin(
- createPlugin({
- id: 'sentry-demo',
- register({ router }) {
- const entity = (name?: string) =>
- ({
- apiVersion: 'backstage.io/v1alpha1',
- kind: 'Component',
- metadata: {
- annotations: {
- [SENTRY_PROJECT_SLUG_ANNOTATION]: name,
- },
- name: name,
- },
- } as Entity);
-
- const ExamplePage = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- router.addRoute(
- createRouteRef({ path: '/', title: 'Sentry' }),
- ExamplePage,
- );
- },
- }),
- )
+ .addPage({
+ title: 'Entity Content',
+ element: (
+
+
+
+
+
+
+
+
+ ),
+ })
+ .addPage({
+ title: 'Cards',
+ element: (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ })
.render();
diff --git a/plugins/sentry/package.json b/plugins/sentry/package.json
index 56736d83a3..5dcba49cf0 100644
--- a/plugins/sentry/package.json
+++ b/plugins/sentry/package.json
@@ -33,6 +33,7 @@
"dependencies": {
"@backstage/catalog-model": "^0.6.0",
"@backstage/core": "^0.4.3",
+ "@backstage/plugin-catalog": "^0.2.9",
"@backstage/theme": "^0.2.2",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
diff --git a/plugins/sentry/src/extensions.tsx b/plugins/sentry/src/extensions.tsx
new file mode 100644
index 0000000000..a66080f2b6
--- /dev/null
+++ b/plugins/sentry/src/extensions.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {
+ createComponentExtension,
+ createRoutableExtension,
+} from '@backstage/core';
+import { useEntity } from '@backstage/plugin-catalog';
+import { plugin, rootRouteRef } from './plugin';
+
+export const EntitySentryContent = plugin.provide(
+ createRoutableExtension({
+ mountPoint: rootRouteRef,
+ component: () =>
+ import('./components/SentryIssuesWidget').then(
+ ({ SentryIssuesWidget }) => {
+ const SentryPage = () => {
+ const { entity } = useEntity();
+ return ;
+ };
+ return SentryPage;
+ },
+ ),
+ }),
+);
+
+export const EntitySentryCard = plugin.provide(
+ createComponentExtension({
+ component: {
+ lazy: () =>
+ import('./components/SentryIssuesWidget').then(
+ ({ SentryIssuesWidget }) => {
+ const SentryCard = () => {
+ const { entity } = useEntity();
+ return ;
+ };
+ return SentryCard;
+ },
+ ),
+ },
+ }),
+);
diff --git a/plugins/sentry/src/index.ts b/plugins/sentry/src/index.ts
index 2b9e2186ec..de53d7456a 100644
--- a/plugins/sentry/src/index.ts
+++ b/plugins/sentry/src/index.ts
@@ -17,4 +17,5 @@
export * from './api';
export * from './components';
export { plugin } from './plugin';
+export { EntitySentryCard, EntitySentryContent } from './extensions';
export { Router } from './components/Router';
diff --git a/plugins/sentry/src/plugin.ts b/plugins/sentry/src/plugin.ts
index 6a4fe4e5a4..49ecfdb5f2 100644
--- a/plugins/sentry/src/plugin.ts
+++ b/plugins/sentry/src/plugin.ts
@@ -41,4 +41,7 @@ export const plugin = createPlugin({
),
}),
],
+ routes: {
+ root: rootRouteRef,
+ },
});