diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx
index 1cd7b77965..7323faeef2 100644
--- a/packages/create-app/templates/default-app/packages/app/src/App.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx
@@ -19,7 +19,7 @@ import { TechRadarPage } from '@backstage/plugin-tech-radar';
import { TechdocsPage } from '@backstage/plugin-techdocs';
import { UserSettingsPage } from '@backstage/plugin-user-settings';
import { apis } from './apis';
-import { EntityPage } from './components/catalog/EntityPage';
+import { entityPage } from './components/catalog/EntityPage';
import { Root } from './components/Root';
import * as plugins from './plugins';
@@ -47,7 +47,7 @@ const routes = (
path="/catalog/:namespace/:kind/:name"
element={}
>
-
+ {entityPage}
} />
} />
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
index d05f6bfa8d..f1aba46c52 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
@@ -15,308 +15,248 @@
*/
import React from 'react';
import { Button, Grid } from '@material-ui/core';
-import {
- ApiEntity,
- DomainEntity,
- Entity,
- GroupEntity,
- SystemEntity,
- UserEntity,
-} from '@backstage/catalog-model';
import { EmptyState } from '@backstage/core';
import {
- ApiDefinitionCard,
- ConsumedApisCard,
- ConsumingComponentsCard,
+ EntityApiDefinitionCard,
+ EntityConsumedApisCard,
+ EntityConsumingComponentsCard,
EntityHasApisCard,
- ProvidedApisCard,
- ProvidingComponentsCard,
+ EntityProvidedApisCard,
+ EntityProvidingComponentsCard,
} from '@backstage/plugin-api-docs';
import {
- AboutCard,
+ EntityAboutCard,
+ EntitySystemDiagramCard,
EntityHasComponentsCard,
EntityHasSystemsCard,
- EntityPageLayout,
+ EntityLayout,
+ EntitySwitch,
+ isComponentType,
+ isKind,
} from '@backstage/plugin-catalog';
-import { useEntity } from '@backstage/plugin-catalog-react';
import {
- isPluginApplicableToEntity as isGitHubActionsAvailable,
- Router as GitHubActionsRouter,
+ isGithubActionsAvailable,
+ EntityGithubActionsContent,
} from '@backstage/plugin-github-actions';
import {
- GroupProfileCard,
- MembersListCard,
- OwnershipCard,
- UserProfileCard,
+ EntityUserProfileCard,
+ EntityGroupProfileCard,
+ EntityMembersListCard,
+ EntityOwnershipCard,
} from '@backstage/plugin-org';
-import { EmbeddedDocsRouter as DocsRouter } from '@backstage/plugin-techdocs';
+import { EntityTechdocsContent } from '@backstage/plugin-techdocs';
-
-const CICDSwitcher = ({ entity }: { entity: Entity }) => {
- // This component is just an example of how you can implement your company's logic in entity page.
+const cicdContent = (
+ // This is an example of how you can implement your company's logic in entity page.
// You can for example enforce that all components of type 'service' should use GitHubActions
- switch (true) {
- case isGitHubActionsAvailable(entity):
- return ;
- default:
- return (
-
- Read more
-
- }
- />
- );
- }
-};
+
+
+
+
-const OverviewContent = ({ entity }: { entity: Entity }) => (
+
+
+ Read more
+
+ }
+ />
+
+
+);
+
+const overviewContent = (
-
+
);
-const ComponentApisContent = ({ entity }: { entity: Entity }) => (
-
-
-
-
-
-
-
-
-);
+const serviceEntityPage = (
+
+
+ {overviewContent}
+
-const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
-
- }
- />
- }
- />
- }
- />
- }
- />
-
-);
+
+ {cicdContent}
+
-const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
-
- }
- />
- }
- />
- }
- />
-
-);
-
-const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
-
- }
- />
- }
- />
-
-);
-
-export const ComponentEntityPage = ({ entity }: { entity: Entity }) => {
- switch (entity?.spec?.type) {
- case 'service':
- return ;
- case 'website':
- return ;
- default:
- return ;
- }
-};
-
-const ApiOverviewContent = ({ entity }: { entity: Entity }) => (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+);
+
+const websiteEntityPage = (
+
+
+ {overviewContent}
+
+
+
+ {cicdContent}
+
+
+
+
+
+
+);
+
+const defaultEntityPage = (
+
+
+ {overviewContent}
+
+
+
+
+
+
+);
+
+const componentPage = (
+
+
+ {serviceEntityPage}
+
+
+
+ {websiteEntityPage}
+
+
+ {defaultEntityPage}
+
+);
+
+const apiPage = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
);
-const ApiDefinitionContent = ({ entity }: { entity: ApiEntity }) => (
-
-
-
-
-
+const userPage = (
+
+
+
+
+
+
+
+
+
+
+
+
);
-const ApiEntityPage = ({ entity }: { entity: Entity }) => (
-
- }
- />
- }
- />
-
+const groupPage = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
-const UserOverviewContent = ({ entity }: { entity: UserEntity }) => (
-
-
-
-
-
-
-
-
+const systemPage = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
-const UserEntityPage = ({ entity }: { entity: Entity }) => (
-
- }
- />
-
+const domainPage = (
+
+
+
+
+
+
+
+
+
+
+
+
);
-const GroupOverviewContent = ({ entity }: { entity: GroupEntity }) => (
-
-
-
-
-
-
-
-
-
-
-
+export const entityPage = (
+
+
+
+
+
+
+
+
+ {defaultEntityPage}
+
);
-
-const GroupEntityPage = ({ entity }: { entity: Entity }) => (
-
- }
- />
-
-);
-
-const SystemOverviewContent = ({ entity }: { entity: SystemEntity }) => (
-
-
-
-
-
-
-
-
-
-
-
-);
-
-const SystemEntityPage = ({ entity }: { entity: Entity }) => (
-
- }
- />
-
-);
-
-const DomainOverviewContent = ({ entity }: { entity: DomainEntity }) => (
-
-
-
-
-
-
-
-
-);
-
-const DomainEntityPage = ({ entity }: { entity: Entity }) => (
-
- }
- />
-
-);
-
-export const EntityPage = () => {
- const { entity } = useEntity();
-
- switch (entity?.kind?.toLocaleLowerCase('en-US')) {
- case 'component':
- return ;
- case 'api':
- return ;
- case 'group':
- return ;
- case 'user':
- return ;
- case 'system':
- return ;
- case 'domain':
- return ;
- case 'location':
- case 'resource':
- case 'template':
- default:
- return ;
- }
-};