example-app: migrate entity pages to composability api

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/app/package.json

@@ -42,10 +42,10 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@octokit/rest": "^18.0.12",
-    "@roadiehq/backstage-plugin-buildkite": "^0.1.3",
-    "@roadiehq/backstage-plugin-github-insights": "^0.3.2",
-    "@roadiehq/backstage-plugin-github-pull-requests": "^0.7.6",
-    "@roadiehq/backstage-plugin-travis-ci": "^0.4.5",
+    "@roadiehq/backstage-plugin-buildkite": "^0.3.0",
+    "@roadiehq/backstage-plugin-github-insights": "^0.3.3",
+    "@roadiehq/backstage-plugin-github-pull-requests": "^0.7.9",
+    "@roadiehq/backstage-plugin-travis-ci": "^0.4.7",
     "history": "^5.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",

packages/app/src/App.tsx

@@ -48,8 +48,8 @@ import React from 'react';
 import { hot } from 'react-hot-loader/root';
 import { Navigate, Route } from 'react-router';
 import { apis } from './apis';
-import { EntityPage } from './components/catalog/EntityPage';
 import { Root } from './components/Root';
+import { entityPage } from './components/catalog/EntityPage';
 import { providers } from './identityProviders';
 import * as plugins from './plugins';
 
@@ -96,7 +96,7 @@ const routes = (
       path="/catalog/:namespace/:kind/:name"
       element={<CatalogEntityPage />}
     >
-      <EntityPage />
+      {entityPage}
     </Route>
     <Route path="/catalog-import" element={<CatalogImportPage />} />
     <Route path="/docs" element={<TechdocsPage />} />

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

@@ -14,174 +14,96 @@
  * limitations under the License.
  */
 
-import {
-  ApiEntity,
-  DomainEntity,
-  Entity,
-  GroupEntity,
-  SystemEntity,
-  UserEntity,
-} from '@backstage/catalog-model';
+import React, { ReactNode, useMemo, useState } from 'react';
+import BadgeIcon from '@material-ui/icons/CallToAction';
 import { EmptyState } from '@backstage/core';
 import {
-  ApiDefinitionCard,
-  ConsumedApisCard,
-  ConsumingComponentsCard,
+  EntityApiDefinitionCard,
+  EntityConsumingComponentsCard,
   EntityHasApisCard,
-  ProvidedApisCard,
-  ProvidingComponentsCard,
+  EntityProvidingComponentsCard,
+  EntityProvidedApisCard,
+  EntityConsumedApisCard,
 } from '@backstage/plugin-api-docs';
 import { EntityBadgesDialog } from '@backstage/plugin-badges';
 import {
-  AboutCard,
+  EntityAboutCard,
   EntityHasComponentsCard,
   EntityHasSubcomponentsCard,
   EntityHasSystemsCard,
+  EntityLayout,
   EntityLinksCard,
-  EntityPageLayout,
   EntitySystemDiagramCard,
+  EntitySwitch,
+  isComponentType,
+  isKind,
 } from '@backstage/plugin-catalog';
-import { EntityProvider, useEntity } from '@backstage/plugin-catalog-react';
 import {
-  isPluginApplicableToEntity as isCircleCIAvailable,
-  Router as CircleCIRouter,
+  EntityCircleCIContent,
+  isCircleCIAvailable,
 } from '@backstage/plugin-circleci';
 import {
-  isPluginApplicableToEntity as isCloudbuildAvailable,
-  Router as CloudbuildRouter,
+  EntityCloudbuildContent,
+  isCloudbuildAvailable,
 } from '@backstage/plugin-cloudbuild';
 import {
-  isPluginApplicableToEntity as isGitHubActionsAvailable,
-  RecentWorkflowRunsCard,
-  Router as GitHubActionsRouter,
+  EntityGithubActionsContent,
+  EntityRecentGithubActionsRunsCard,
+  isGithubActionsAvailable,
 } from '@backstage/plugin-github-actions';
 import {
-  isPluginApplicableToEntity as isJenkinsAvailable,
-  LatestRunCard as JenkinsLatestRunCard,
-  Router as JenkinsRouter,
+  EntityJenkinsContent,
+  EntityLatestJenkinsRunCard,
+  isJenkinsAvailable,
 } from '@backstage/plugin-jenkins';
-import { Router as KafkaRouter } from '@backstage/plugin-kafka';
-import { Router as KubernetesRouter } from '@backstage/plugin-kubernetes';
+import { EntityKafkaContent } from '@backstage/plugin-kafka';
+import { EntityKubernetesContent } from '@backstage/plugin-kubernetes';
 import {
-  EmbeddedRouter as LighthouseRouter,
-  isPluginApplicableToEntity as isLighthouseAvailable,
-  LastLighthouseAuditCard,
+  EntityLastLighthouseAuditCard,
+  EntityLighthouseContent,
+  isLighthouseAvailable,
 } from '@backstage/plugin-lighthouse';
 import {
-  GroupProfileCard,
-  MembersListCard,
-  OwnershipCard,
-  UserProfileCard,
+  EntityGroupProfileCard,
+  EntityMembersListCard,
+  EntityOwnershipCard,
+  EntityUserProfileCard,
 } from '@backstage/plugin-org';
 import {
-  isPluginApplicableToEntity as isPagerDutyAvailable,
-  PagerDutyCard,
+  EntityPagerDutyCard,
+  isPagerDutyAvailable,
 } from '@backstage/plugin-pagerduty';
 import {
+  EntityRollbarContent,
   isRollbarAvailable,
-  Router as RollbarRouter,
 } from '@backstage/plugin-rollbar';
-import { Router as SentryRouter } from '@backstage/plugin-sentry';
-import { EmbeddedDocsRouter as DocsRouter } from '@backstage/plugin-techdocs';
+import { EntitySentryContent } from '@backstage/plugin-sentry';
+import { EntityTechdocsContent } from '@backstage/plugin-techdocs';
 import { EntityTodoContent } from '@backstage/plugin-todo';
 import { Button, Grid } from '@material-ui/core';
-import {
-  isPluginApplicableToEntity as isBuildkiteAvailable,
-  Router as BuildkiteRouter,
-} from '@roadiehq/backstage-plugin-buildkite';
-import {
-  isPluginApplicableToEntity as isGitHubAvailable,
-  LanguagesCard,
-  ReadMeCard,
-  ReleasesCard,
-  Router as GitHubInsightsRouter,
-} from '@roadiehq/backstage-plugin-github-insights';
-import {
-  isPluginApplicableToEntity as isPullRequestsAvailable,
-  PullRequestsStatsCard,
-  Router as PullRequestsRouter,
-} from '@roadiehq/backstage-plugin-github-pull-requests';
-import {
-  isPluginApplicableToEntity as isTravisCIAvailable,
-  RecentTravisCIBuildsWidget,
-  Router as TravisCIRouter,
-} from '@roadiehq/backstage-plugin-travis-ci';
-import React, { ReactNode, useMemo, useState } from 'react';
-import BadgeIcon from '@material-ui/icons/CallToAction';
+// import {
+//   EntityBuildkiteContent,
+//   isBuildkiteAvailable,
+// } from '@roadiehq/backstage-plugin-buildkite';
+// import {
+//   EntityGitHubInsightsContent,
+//   EntityLanguagesCard,
+//   EntityReadMeCard,
+//   EntityReleasesCard,
+//   isGithubInsightsAvailable,
+// } from '@roadiehq/backstage-plugin-github-insights';
+// import {
+//   EntityGithubPullRequestsContent,
+//   EntityGithubPullRequestsOverviewCard,
+//   isGithubPullRequestsAvailable,
+// } from '@roadiehq/backstage-plugin-github-pull-requests';
+// import {
+//   EntityTravisCIContent,
+//   EntityTravisCIOverviewCard,
+//   isTravisciAvailable,
+// } from '@roadiehq/backstage-plugin-travis-ci';
 
-export const CICDSwitcher = ({ entity }: { entity: Entity }) => {
-  // This component is just 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 isJenkinsAvailable(entity):
-      return <JenkinsRouter entity={entity} />;
-    case isBuildkiteAvailable(entity):
-      return <BuildkiteRouter entity={entity} />;
-    case isCircleCIAvailable(entity):
-      return <CircleCIRouter entity={entity} />;
-    case isCloudbuildAvailable(entity):
-      return <CloudbuildRouter entity={entity} />;
-    case isTravisCIAvailable(entity):
-      return <TravisCIRouter entity={entity} />;
-    case isGitHubActionsAvailable(entity):
-      return <GitHubActionsRouter entity={entity} />;
-    default:
-      return (
-        <EmptyState
-          title="No CI/CD available for this entity"
-          missing="info"
-          description="You need to add an annotation to your component if you want to enable CI/CD for it. You can read more about annotations in Backstage by clicking the button below."
-          action={
-            <Button
-              variant="contained"
-              color="primary"
-              href="https://backstage.io/docs/features/software-catalog/well-known-annotations"
-            >
-              Read more
-            </Button>
-          }
-        />
-      );
-  }
-};
-
-const RecentCICDRunsSwitcher = ({ entity }: { entity: Entity }) => {
-  let content: ReactNode;
-  switch (true) {
-    case isJenkinsAvailable(entity):
-      content = <JenkinsLatestRunCard branch="master" variant="gridItem" />;
-      break;
-    case isTravisCIAvailable(entity):
-      content = <RecentTravisCIBuildsWidget entity={entity} />;
-      break;
-    case isGitHubActionsAvailable(entity):
-      content = (
-        <RecentWorkflowRunsCard entity={entity} limit={4} variant="gridItem" />
-      );
-      break;
-    default:
-      content = null;
-  }
-  if (!content) {
-    return null;
-  }
-  return (
-    <Grid item sm={6}>
-      {content}
-    </Grid>
-  );
-};
-
-export const ErrorsSwitcher = ({ entity }: { entity: Entity }) => {
-  switch (true) {
-    case isRollbarAvailable(entity):
-      return <RollbarRouter entity={entity} />;
-    default:
-      return <SentryRouter entity={entity} />;
-  }
-};
-
-const EntityPageLayoutWrapper = (props: { children?: React.ReactNode }) => {
+const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
   const [badgesDialogOpen, setBadgesDialogOpen] = useState(false);
 
   const extraMenuItems = useMemo(() => {
@@ -196,9 +118,9 @@ const EntityPageLayoutWrapper = (props: { children?: React.ReactNode }) => {
 
   return (
     <>
-      <EntityPageLayout UNSTABLE_extraContextMenuItems={extraMenuItems}>
+      <EntityLayout UNSTABLE_extraContextMenuItems={extraMenuItems}>
         {props.children}
-      </EntityPageLayout>
+      </EntityLayout>
       <EntityBadgesDialog
         open={badgesDialogOpen}
         onClose={() => setBadgesDialogOpen(false)}
@@ -207,350 +129,367 @@ const EntityPageLayoutWrapper = (props: { children?: React.ReactNode }) => {
   );
 };
 
-const ComponentOverviewContent = ({ entity }: { entity: Entity }) => (
+const cicdContent = (
+  <EntitySwitch>
+    <EntitySwitch.Case if={isJenkinsAvailable}>
+      <EntityJenkinsContent />
+    </EntitySwitch.Case>
+
+    {/* <EntitySwitch.Case if={isBuildkiteAvailable}>
+      <EntityBuildkiteContent />
+    </EntitySwitch.Case> */}
+
+    <EntitySwitch.Case if={isCircleCIAvailable}>
+      <EntityCircleCIContent />
+    </EntitySwitch.Case>
+
+    <EntitySwitch.Case if={isCloudbuildAvailable}>
+      <EntityCloudbuildContent />
+    </EntitySwitch.Case>
+
+    {/* <EntitySwitch.Case if={isTravisciAvailable}>
+      <EntityTravisCIContent />
+    </EntitySwitch.Case> */}
+
+    <EntitySwitch.Case if={isGithubActionsAvailable}>
+      <EntityGithubActionsContent />
+    </EntitySwitch.Case>
+
+    <EntitySwitch.Case>
+      <EmptyState
+        title="No CI/CD available for this entity"
+        missing="info"
+        description="You need to add an annotation to your component if you want to enable CI/CD for it. You can read more about annotations in Backstage by clicking the button below."
+        action={
+          <Button
+            variant="contained"
+            color="primary"
+            href="https://backstage.io/docs/features/software-catalog/well-known-annotations"
+          >
+            Read more
+          </Button>
+        }
+      />
+    </EntitySwitch.Case>
+  </EntitySwitch>
+);
+
+const cicdCard = (
+  <EntitySwitch>
+    <EntitySwitch.Case if={isJenkinsAvailable}>
+      <Grid item sm={6}>
+        <EntityLatestJenkinsRunCard branch="master" variant="gridItem" />
+      </Grid>
+    </EntitySwitch.Case>
+
+    {/* <EntitySwitch.Case if={isTravisciAvailable}>
+      <Grid item sm={6}>
+        <EntityTravisCIOverviewCard />
+      </Grid>
+    </EntitySwitch.Case> */}
+
+    <EntitySwitch.Case if={isGithubActionsAvailable}>
+      <Grid item sm={6}>
+        <EntityRecentGithubActionsRunsCard limit={4} variant="gridItem" />
+      </Grid>
+    </EntitySwitch.Case>
+  </EntitySwitch>
+);
+
+const errorsContent = (
+  <EntitySwitch>
+    <EntitySwitch.Case if={isRollbarAvailable}>
+      <EntityRollbarContent />
+    </EntitySwitch.Case>
+
+    <EntitySwitch.Case>
+      <EntitySentryContent />
+    </EntitySwitch.Case>
+  </EntitySwitch>
+);
+
+const overviewContent = (
   <Grid container spacing={3} alignItems="stretch">
-    <Grid item xs={12} md={6}>
-      <AboutCard entity={entity} variant="gridItem" />
+    <Grid item md={6}>
+      <EntityAboutCard variant="gridItem" />
     </Grid>
-    {isPagerDutyAvailable(entity) && (
-      <Grid item xs={12} md={6}>
-        <EntityProvider entity={entity}>
-          <PagerDutyCard />
-        </EntityProvider>
-      </Grid>
-    )}
-    <Grid item xs={12} md={6}>
-      <EntityLinksCard entity={entity} />
+
+    <EntitySwitch>
+      <EntitySwitch.Case if={isPagerDutyAvailable}>
+        <Grid item md={6}>
+          <EntityPagerDutyCard />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
+
+    <Grid item md={4} sm={6}>
+      <EntityLinksCard />
     </Grid>
-    <RecentCICDRunsSwitcher entity={entity} />
-    {isGitHubAvailable(entity) && (
-      <>
-        <Grid item xs={12} md={6}>
-          <LanguagesCard entity={entity} />
-          <ReleasesCard entity={entity} />
+
+    {cicdCard}
+
+    {/* <EntitySwitch>
+      <EntitySwitch.Case if={e => Boolean(isGithubInsightsAvailable(e))}>
+        <Grid item md={6}>
+          <EntityLanguagesCard />
+          <EntityReleasesCard />
         </Grid>
-        <Grid item xs={12} md={6}>
-          <ReadMeCard entity={entity} maxHeight={350} />
+        <Grid item md={6}>
+          <EntityReadMeCard maxHeight={350} />
         </Grid>
-      </>
-    )}
-    {isLighthouseAvailable(entity) && (
-      <Grid item xs={12} sm={4}>
-        <LastLighthouseAuditCard variant="gridItem" />
-      </Grid>
-    )}
-    {isPullRequestsAvailable(entity) && (
-      <Grid item xs={12} sm={4}>
-        <PullRequestsStatsCard entity={entity} />
-      </Grid>
-    )}
-    <Grid item xs={12} md={6}>
+      </EntitySwitch.Case>
+    </EntitySwitch> */}
+
+    <EntitySwitch>
+      <EntitySwitch.Case if={isLighthouseAvailable}>
+        <Grid item sm={4}>
+          <EntityLastLighthouseAuditCard variant="gridItem" />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
+
+    {/* <EntitySwitch>
+      <EntitySwitch.Case if={e => Boolean(isGithubPullRequestsAvailable(e))}>
+        <Grid item sm={4}>
+          <EntityGithubPullRequestsOverviewCard />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch> */}
+
+    <Grid item md={6}>
       <EntityHasSubcomponentsCard variant="gridItem" />
     </Grid>
   </Grid>
 );
 
-const ComponentApisContent = ({ entity }: { entity: Entity }) => (
-  <Grid container spacing={3} alignItems="stretch">
-    <Grid item xs={12} md={6}>
-      <ProvidedApisCard entity={entity} />
-    </Grid>
-    <Grid item xs={12} md={6}>
-      <ConsumedApisCard entity={entity} />
-    </Grid>
-  </Grid>
-);
+const serviceEntityPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      {overviewContent}
+    </EntityLayout.Route>
 
-const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayoutWrapper>
-    <EntityPageLayout.Content
-      path="/"
-      title="Overview"
-      element={<ComponentOverviewContent entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/ci-cd/*"
-      title="CI/CD"
-      element={<CICDSwitcher entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/errors/*"
-      title="Errors"
-      element={<ErrorsSwitcher entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/api/*"
-      title="API"
-      element={<ComponentApisContent entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/docs/*"
-      title="Docs"
-      element={<DocsRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/kubernetes/*"
-      title="Kubernetes"
-      element={<KubernetesRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/pull-requests"
-      title="Pull Requests"
-      element={<PullRequestsRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/code-insights"
-      title="Code Insights"
-      element={<GitHubInsightsRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/kafka/*"
-      title="Kafka"
-      element={<KafkaRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/todos"
-      title="TODOs"
-      element={<EntityTodoContent />}
-    />
-  </EntityPageLayoutWrapper>
-);
+    <EntityLayout.Route path="/ci-cd" title="CI/CD">
+      {cicdContent}
+    </EntityLayout.Route>
 
-const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayoutWrapper>
-    <EntityPageLayout.Content
-      path="/"
-      title="Overview"
-      element={<ComponentOverviewContent entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/ci-cd/*"
-      title="CI/CD"
-      element={<CICDSwitcher entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/lighthouse/*"
-      title="Lighthouse"
-      element={<LighthouseRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/errors/*"
-      title="Errors"
-      element={<ErrorsSwitcher entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/docs/*"
-      title="Docs"
-      element={<DocsRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/kubernetes/*"
-      title="Kubernetes"
-      element={<KubernetesRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/pull-requests"
-      title="Pull Requests"
-      element={<PullRequestsRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/code-insights"
-      title="Code Insights"
-      element={<GitHubInsightsRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/todos"
-      title="TODOs"
-      element={<EntityTodoContent />}
-    />
-  </EntityPageLayoutWrapper>
-);
+    <EntityLayout.Route path="/errors" title="Errors">
+      {errorsContent}
+    </EntityLayout.Route>
 
-const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayoutWrapper>
-    <EntityPageLayout.Content
-      path="/*"
-      title="Overview"
-      element={<ComponentOverviewContent entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/docs/*"
-      title="Docs"
-      element={<DocsRouter entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/todos"
-      title="TODOs"
-      element={<EntityTodoContent />}
-    />
-  </EntityPageLayoutWrapper>
-);
-
-export const ComponentEntityPage = ({ entity }: { entity: Entity }) => {
-  switch (entity?.spec?.type) {
-    case 'service':
-      return <ServiceEntityPage entity={entity} />;
-    case 'website':
-      return <WebsiteEntityPage entity={entity} />;
-    default:
-      return <DefaultEntityPage entity={entity} />;
-  }
-};
-
-const ApiOverviewContent = ({ entity }: { entity: Entity }) => (
-  <Grid container spacing={3}>
-    <Grid item md={6}>
-      <AboutCard entity={entity} />
-    </Grid>
-    <Grid container item md={12}>
-      <Grid item md={6}>
-        <ProvidingComponentsCard entity={entity} />
+    <EntityLayout.Route path="/api" title="API">
+      <Grid container spacing={3} alignItems="stretch">
+        <Grid item md={6}>
+          <EntityProvidedApisCard />
+        </Grid>
+        <Grid item md={6}>
+          <EntityConsumedApisCard />
+        </Grid>
       </Grid>
-      <Grid item md={6}>
-        <ConsumingComponentsCard entity={entity} />
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/docs" title="Docs">
+      <EntityTechdocsContent />
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/kubernetes" title="Kubernetes">
+      <EntityKubernetesContent />
+    </EntityLayout.Route>
+
+    {/* <EntityLayout.Route path="/pull-requests" title="Pull Requests">
+      <EntityGithubPullRequestsContent />
+    </EntityLayout.Route> */}
+
+    {/* <EntityLayout.Route path="/code-insights" title="Code Insights">
+      <EntityGitHubInsightsContent />
+    </EntityLayout.Route> */}
+
+    <EntityLayout.Route path="/kafka" title="Kafka">
+      <EntityKafkaContent />
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/todos" title="TODOs">
+      <EntityTodoContent />
+    </EntityLayout.Route>
+  </EntityLayoutWrapper>
+);
+
+const websiteEntityPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      {overviewContent}
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/ci-cd" title="CI/CD">
+      {cicdContent}
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/lighthouse" title="Lighthouse">
+      <EntityLighthouseContent />
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/errors" title="Errors">
+      {errorsContent}
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/docs" title="Docs">
+      <EntityTechdocsContent />
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/kubernetes" title="Kubernetes">
+      <EntityKubernetesContent />
+    </EntityLayout.Route>
+
+    {/* <EntityLayout.Route path="/pull-requests" title="Pull Requests">
+      <EntityGithubPullRequestsContent />
+    </EntityLayout.Route> */}
+
+    {/* <EntityLayout.Route path="/code-insights" title="Code Insights">
+      <EntityGithubInsightsContent />
+    </EntityLayout.Route> */}
+
+    <EntityLayout.Route path="/todos" title="TODOs">
+      <EntityTodoContent />
+    </EntityLayout.Route>
+  </EntityLayoutWrapper>
+);
+
+const defaultEntityPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      {overviewContent}
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/docs" title="Docs">
+      <EntityTechdocsContent />
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/todos" title="TODOs">
+      <EntityTodoContent />
+    </EntityLayout.Route>
+  </EntityLayoutWrapper>
+);
+
+const componentPage = (
+  <EntitySwitch>
+    <EntitySwitch.Case if={isComponentType('service')}>
+      {serviceEntityPage}
+    </EntitySwitch.Case>
+
+    <EntitySwitch.Case if={isComponentType('website')}>
+      {websiteEntityPage}
+    </EntitySwitch.Case>
+
+    <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case>
+  </EntitySwitch>
+);
+
+const apiPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      <Grid container spacing={3}>
+        <Grid item md={6}>
+          <EntityAboutCard />
+        </Grid>
+        <Grid container item md={12}>
+          <Grid item md={6}>
+            <EntityProvidingComponentsCard />
+          </Grid>
+          <Grid item md={6}>
+            <EntityConsumingComponentsCard />
+          </Grid>
+        </Grid>
       </Grid>
-    </Grid>
-  </Grid>
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/definition" title="Definition">
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <EntityApiDefinitionCard />
+        </Grid>
+      </Grid>
+    </EntityLayout.Route>
+  </EntityLayoutWrapper>
 );
 
-const ApiDefinitionContent = ({ entity }: { entity: ApiEntity }) => (
-  <Grid container spacing={3}>
-    <Grid item xs={12}>
-      <ApiDefinitionCard apiEntity={entity} />
-    </Grid>
-  </Grid>
+const userPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={6}>
+          <EntityUserProfileCard variant="gridItem" />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <EntityOwnershipCard variant="gridItem" />
+        </Grid>
+      </Grid>
+    </EntityLayout.Route>
+  </EntityLayoutWrapper>
 );
 
-const ApiEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayoutWrapper>
-    <EntityPageLayout.Content
-      path="/*"
-      title="Overview"
-      element={<ApiOverviewContent entity={entity} />}
-    />
-    <EntityPageLayout.Content
-      path="/definition/*"
-      title="Definition"
-      element={<ApiDefinitionContent entity={entity as ApiEntity} />}
-    />
-  </EntityPageLayoutWrapper>
+const groupPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={6}>
+          <EntityGroupProfileCard variant="gridItem" />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <EntityOwnershipCard variant="gridItem" />
+        </Grid>
+        <Grid item xs={12}>
+          <EntityMembersListCard />
+        </Grid>
+      </Grid>
+    </EntityLayout.Route>
+
+    <EntityLayout.Route path="/diagram" title="Diagram">
+      <EntitySystemDiagramCard />
+    </EntityLayout.Route>
+  </EntityLayoutWrapper>
 );
 
-const UserOverviewContent = ({ entity }: { entity: UserEntity }) => (
-  <Grid container spacing={3}>
-    <Grid item xs={12} md={6}>
-      <UserProfileCard entity={entity} variant="gridItem" />
-    </Grid>
-    <Grid item xs={12} md={6}>
-      <OwnershipCard entity={entity} variant="gridItem" />
-    </Grid>
-  </Grid>
+const systemPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      <Grid container spacing={3} alignItems="stretch">
+        <Grid item md={6}>
+          <EntityAboutCard variant="gridItem" />
+        </Grid>
+        <Grid item md={6}>
+          <EntityHasComponentsCard variant="gridItem" />
+        </Grid>
+        <Grid item md={6}>
+          <EntityHasApisCard variant="gridItem" />
+        </Grid>
+      </Grid>
+    </EntityLayout.Route>
+  </EntityLayoutWrapper>
 );
 
-const UserEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayoutWrapper>
-    <EntityPageLayout.Content
-      path="/*"
-      title="Overview"
-      element={<UserOverviewContent entity={entity as UserEntity} />}
-    />
-  </EntityPageLayoutWrapper>
+const domainPage = (
+  <EntityLayoutWrapper>
+    <EntityLayout.Route path="/" title="Overview">
+      <Grid container spacing={3} alignItems="stretch">
+        <Grid item md={6}>
+          <EntityAboutCard variant="gridItem" />
+        </Grid>
+        <Grid item md={6}>
+          <EntityHasSystemsCard variant="gridItem" />
+        </Grid>
+      </Grid>
+    </EntityLayout.Route>
+  </EntityLayoutWrapper>
 );
 
-const GroupOverviewContent = ({ entity }: { entity: GroupEntity }) => (
-  <Grid container spacing={3}>
-    <Grid item xs={12} md={6}>
-      <GroupProfileCard entity={entity} variant="gridItem" />
-    </Grid>
-    <Grid item xs={12} md={6}>
-      <OwnershipCard entity={entity} variant="gridItem" />
-    </Grid>
-    <Grid item xs={12}>
-      <MembersListCard entity={entity} />
-    </Grid>
-  </Grid>
+export const entityPage = (
+  <EntitySwitch>
+    <EntitySwitch.Case if={isKind('component')} children={componentPage} />
+    <EntitySwitch.Case if={isKind('api')} children={apiPage} />
+    <EntitySwitch.Case if={isKind('group')} children={groupPage} />
+    <EntitySwitch.Case if={isKind('user')} children={userPage} />
+    <EntitySwitch.Case if={isKind('system')} children={systemPage} />
+    <EntitySwitch.Case if={isKind('domain')} children={domainPage} />
+
+    <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case>
+  </EntitySwitch>
 );
-
-const GroupEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayoutWrapper>
-    <EntityPageLayout.Content
-      path="/*"
-      title="Overview"
-      element={<GroupOverviewContent entity={entity as GroupEntity} />}
-    />
-  </EntityPageLayoutWrapper>
-);
-
-const SystemOverviewContent = ({ entity }: { entity: SystemEntity }) => (
-  <Grid container spacing={3} alignItems="stretch">
-    <Grid item md={6}>
-      <AboutCard entity={entity} variant="gridItem" />
-    </Grid>
-    <Grid item md={6}>
-      <EntityHasComponentsCard variant="gridItem" />
-    </Grid>
-    <Grid item md={6}>
-      <EntityHasApisCard variant="gridItem" />
-    </Grid>
-  </Grid>
-);
-
-const SystemEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayoutWrapper>
-    <EntityPageLayout.Content
-      path="/*"
-      title="Overview"
-      element={<SystemOverviewContent entity={entity as SystemEntity} />}
-    />
-    <EntityPageLayout.Content
-      path="/diagram/*"
-      title="Diagram"
-      element={<EntitySystemDiagramCard />}
-    />
-  </EntityPageLayoutWrapper>
-);
-
-const DomainOverviewContent = ({ entity }: { entity: DomainEntity }) => (
-  <Grid container spacing={3} alignItems="stretch">
-    <Grid item md={6}>
-      <AboutCard entity={entity} variant="gridItem" />
-    </Grid>
-    <Grid item md={6}>
-      <EntityHasSystemsCard variant="gridItem" />
-    </Grid>
-  </Grid>
-);
-
-const DomainEntityPage = ({ entity }: { entity: Entity }) => (
-  <EntityPageLayoutWrapper>
-    <EntityPageLayout.Content
-      path="/*"
-      title="Overview"
-      element={<DomainOverviewContent entity={entity as DomainEntity} />}
-    />
-  </EntityPageLayoutWrapper>
-);
-
-export const EntityPage = () => {
-  const { entity } = useEntity();
-
-  switch (entity?.kind?.toLocaleLowerCase('en-US')) {
-    case 'component':
-      return <ComponentEntityPage entity={entity} />;
-    case 'api':
-      return <ApiEntityPage entity={entity} />;
-    case 'group':
-      return <GroupEntityPage entity={entity} />;
-    case 'user':
-      return <UserEntityPage entity={entity} />;
-    case 'system':
-      return <SystemEntityPage entity={entity} />;
-    case 'domain':
-      return <DomainEntityPage entity={entity} />;
-    case 'location':
-    case 'resource':
-    case 'template':
-    default:
-      return <DefaultEntityPage entity={entity} />;
-  }
-};