diff --git a/plugins/catalog/src/alpha/entityCards.tsx b/plugins/catalog/src/alpha/entityCards.tsx
new file mode 100644
index 0000000000..9faf0b9517
--- /dev/null
+++ b/plugins/catalog/src/alpha/entityCards.tsx
@@ -0,0 +1,173 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * 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 { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
+import { createSchemaFromZod } from '@backstage/frontend-plugin-api';
+
+export const EntityAboutCard = createEntityCardExtension({
+ id: 'about',
+ configSchema: createSchemaFromZod(z =>
+ z.object({
+ variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'),
+ }),
+ ),
+ loader: async ({ config }) =>
+ import('../components/AboutCard').then(m => (
+
+ )),
+});
+
+export const EntityLinksCard = createEntityCardExtension({
+ id: 'links',
+ configSchema: createSchemaFromZod(z =>
+ z.object({
+ variant: z.enum(['gridItem', 'flex', 'fullHeight']).optional(),
+ cols: z
+ .union([
+ z.number(),
+ z.object({
+ xs: z.number(),
+ sm: z.number(),
+ md: z.number(),
+ lg: z.number(),
+ xl: z.number(),
+ }),
+ ])
+ .optional(),
+ }),
+ ),
+ loader: async ({ config }) =>
+ import('../components/EntityLinksCard').then(m => {
+ return ;
+ }),
+});
+
+export const EntityLabelsCard = createEntityCardExtension({
+ id: 'labels',
+ configSchema: createSchemaFromZod(z =>
+ z.object({
+ variant: z.enum(['gridItem', 'flex', 'fullHeight']).optional(),
+ title: z.string().optional(),
+ }),
+ ),
+ loader: async ({ config }) =>
+ import('../components/EntityLabelsCard').then(m => (
+
+ )),
+});
+
+export const EntityDependsOnComponentsCard = createEntityCardExtension({
+ id: 'dependsOn.components',
+ configSchema: createSchemaFromZod(z =>
+ z.object({
+ variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'),
+ title: z.string().optional(),
+ // TODO: columns, tableOptions
+ }),
+ ),
+ loader: async ({ config }) =>
+ import('../components/DependsOnComponentsCard').then(m => (
+
+ )),
+});
+
+export const EntityDependsOnResourcesCard = createEntityCardExtension({
+ id: 'dependsOn.resources',
+ configSchema: createSchemaFromZod(z =>
+ z.object({
+ variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'),
+ title: z.string().optional(),
+ // TODO: columns, tableOptions
+ }),
+ ),
+ loader: async ({ config }) =>
+ import('../components/DependsOnResourcesCard').then(m => (
+
+ )),
+});
+
+export const EntityHasComponentsCard = createEntityCardExtension({
+ id: 'has.components',
+ configSchema: createSchemaFromZod(z =>
+ z.object({
+ variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'),
+ title: z.string().optional(),
+ }),
+ ),
+ loader: async ({ config }) =>
+ import('../components/HasComponentsCard').then(m => (
+
+ )),
+});
+
+export const EntityHasResourcesCard = createEntityCardExtension({
+ id: 'has.resources',
+ configSchema: createSchemaFromZod(z =>
+ z.object({
+ variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'),
+ title: z.string().optional(),
+ }),
+ ),
+ loader: async ({ config }) =>
+ import('../components/HasResourcesCard').then(m => (
+
+ )),
+});
+
+export const EntityHasSubcomponentsCard = createEntityCardExtension({
+ id: 'has.subcomponents',
+ configSchema: createSchemaFromZod(z =>
+ z.object({
+ variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'),
+ title: z.string().optional(),
+ // TODO: tableOptions
+ }),
+ ),
+ loader: async ({ config }) =>
+ import('../components/HasSubcomponentsCard').then(m => (
+
+ )),
+});
+
+export const EntityHasSystemsCard = createEntityCardExtension({
+ id: 'has.systems',
+ configSchema: createSchemaFromZod(z =>
+ z.object({
+ variant: z.enum(['gridItem', 'flex', 'fullHeight']).default('gridItem'),
+ title: z.string().optional(),
+ }),
+ ),
+ loader: async ({ config }) =>
+ import('../components/HasSystemsCard').then(m => (
+
+ )),
+});
+
+export default [
+ EntityAboutCard,
+ EntityLinksCard,
+ EntityLabelsCard,
+ EntityDependsOnComponentsCard,
+ EntityDependsOnResourcesCard,
+ EntityHasComponentsCard,
+ EntityHasResourcesCard,
+ EntityHasSubcomponentsCard,
+ EntityHasSystemsCard,
+];
diff --git a/plugins/catalog/src/alpha/plugin.tsx b/plugins/catalog/src/alpha/plugin.tsx
index 67d1f036ee..761a00c29b 100644
--- a/plugins/catalog/src/alpha/plugin.tsx
+++ b/plugins/catalog/src/alpha/plugin.tsx
@@ -27,10 +27,7 @@ import {
} from '@backstage/frontend-plugin-api';
import { entityRouteRef } from '@backstage/plugin-catalog-react';
-import {
- createEntityContentExtension,
- createEntityCardExtension,
-} from '@backstage/plugin-catalog-react/alpha';
+import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha';
import { createSearchResultListItemExtension } from '@backstage/plugin-search-react/alpha';
import {
@@ -43,6 +40,7 @@ import {
import apis from './apis';
import pages from './pages';
import filters from './filters';
+import entityCards from './entityCards';
/** @alpha */
export const CatalogSearchResultListItemExtension =
@@ -55,14 +53,6 @@ export const CatalogSearchResultListItemExtension =
),
});
-const EntityAboutCard = createEntityCardExtension({
- id: 'about',
- loader: async () =>
- import('../components/AboutCard').then(m => (
-
- )),
-});
-
const OverviewEntityContent = createEntityContentExtension({
id: 'overview',
defaultPath: '/',
@@ -107,9 +97,9 @@ export default createPlugin({
...apis,
...pages,
...filters,
+ ...entityCards,
CatalogSearchResultListItemExtension,
CatalogNavItem,
OverviewEntityContent,
- EntityAboutCard,
],
});