Make api-docs customizable

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

@@ -13,63 +13,66 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ApiEntity, Entity } from '@backstage/catalog-model';
+import { EmptyState } from '@backstage/core';
 import {
-  isPluginApplicableToEntity as isTravisCIAvailable,
-  RecentTravisCIBuildsWidget,
-  Router as TravisCIRouter,
-} from '@roadiehq/backstage-plugin-travis-ci';
+  ApiDefinitionCard,
+  Router as ApiDocsRouter,
+} from '@backstage/plugin-api-docs';
+import {
+  AboutCard,
+  EntityPageLayout,
+  useEntity,
+} from '@backstage/plugin-catalog';
+import {
+  isPluginApplicableToEntity as isCircleCIAvailable,
+  Router as CircleCIRouter,
+} from '@backstage/plugin-circleci';
+import {
+  isPluginApplicableToEntity as isCloudbuildAvailable,
+  Router as CloudbuildRouter,
+} from '@backstage/plugin-cloudbuild';
 import {
   isPluginApplicableToEntity as isGitHubActionsAvailable,
   RecentWorkflowRunsCard,
   Router as GitHubActionsRouter,
 } from '@backstage/plugin-github-actions';
 import {
-  Router as CloudbuildRouter,
-  isPluginApplicableToEntity as isCloudbuildAvailable,
-} from '@backstage/plugin-cloudbuild';
-import {
-  Router as JenkinsRouter,
   isPluginApplicableToEntity as isJenkinsAvailable,
   LatestRunCard as JenkinsLatestRunCard,
+  Router as JenkinsRouter,
 } from '@backstage/plugin-jenkins';
-import {
-  isPluginApplicableToEntity as isCircleCIAvailable,
-  Router as CircleCIRouter,
-} from '@backstage/plugin-circleci';
-import { Router as ApiDocsRouter } from '@backstage/plugin-api-docs';
-import { Router as SentryRouter } from '@backstage/plugin-sentry';
-import { EmbeddedDocsRouter as DocsRouter } from '@backstage/plugin-techdocs';
 import { Router as KubernetesRouter } from '@backstage/plugin-kubernetes';
-import {
-  Router as GitHubInsightsRouter,
-  isPluginApplicableToEntity as isGitHubAvailable,
-  ReadMeCard,
-  LanguagesCard,
-  ReleasesCard,
-} from '@roadiehq/backstage-plugin-github-insights';
-import React, { ReactNode } from 'react';
-import {
-  AboutCard,
-  EntityPageLayout,
-  useEntity,
-} from '@backstage/plugin-catalog';
-import { Entity } from '@backstage/catalog-model';
-import { Button, Grid } from '@material-ui/core';
-import { EmptyState } from '@backstage/core';
 import {
   EmbeddedRouter as LighthouseRouter,
-  LastLighthouseAuditCard,
   isPluginApplicableToEntity as isLighthouseAvailable,
+  LastLighthouseAuditCard,
 } from '@backstage/plugin-lighthouse/';
+import { Router as SentryRouter } from '@backstage/plugin-sentry';
+import { EmbeddedDocsRouter as DocsRouter } from '@backstage/plugin-techdocs';
+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 {
-  Router as PullRequestsRouter,
   isPluginApplicableToEntity as isPullRequestsAvailable,
   PullRequestsStatsCard,
+  Router as PullRequestsRouter,
 } from '@roadiehq/backstage-plugin-github-pull-requests';
 import {
-  Router as BuildkiteRouter,
-  isPluginApplicableToEntity as isBuildkiteAvailable,
-} from '@roadiehq/backstage-plugin-buildkite';
+  isPluginApplicableToEntity as isTravisCIAvailable,
+  RecentTravisCIBuildsWidget,
+  Router as TravisCIRouter,
+} from '@roadiehq/backstage-plugin-travis-ci';
+import React, { ReactNode } from 'react';
 
 export const CICDSwitcher = ({ entity }: { entity: Entity }) => {
   // This component is just an example of how you can implement your company's logic in entity page.
@@ -134,7 +137,7 @@ const RecentCICDRunsSwitcher = ({ entity }: { entity: Entity }) => {
   );
 };
 
-const OverviewContent = ({ entity }: { entity: Entity }) => (
+const ComponentOverviewContent = ({ entity }: { entity: Entity }) => (
   <Grid container spacing={3} alignItems="stretch">
     <Grid item md={6}>
       <AboutCard entity={entity} variant="gridItem" />
@@ -169,7 +172,7 @@ const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
     <EntityPageLayout.Content
       path="/"
       title="Overview"
-      element={<OverviewContent entity={entity} />}
+      element={<ComponentOverviewContent entity={entity} />}
     />
     <EntityPageLayout.Content
       path="/ci-cd/*"
@@ -214,7 +217,7 @@ const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
     <EntityPageLayout.Content
       path="/"
       title="Overview"
-      element={<OverviewContent entity={entity} />}
+      element={<ComponentOverviewContent entity={entity} />}
     />
     <EntityPageLayout.Content
       path="/ci-cd/*"
@@ -253,12 +256,13 @@ const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
     />
   </EntityPageLayout>
 );
+
 const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
   <EntityPageLayout>
     <EntityPageLayout.Content
       path="/*"
       title="Overview"
-      element={<OverviewContent entity={entity} />}
+      element={<ComponentOverviewContent entity={entity} />}
     />
     <EntityPageLayout.Content
       path="/docs/*"
@@ -268,8 +272,7 @@ const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
   </EntityPageLayout>
 );
 
-export const EntityPage = () => {
-  const { entity } = useEntity();
+export const ComponentEntityPage = ({ entity }: { entity: Entity }) => {
   switch (entity?.spec?.type) {
     case 'service':
       return <ServiceEntityPage entity={entity} />;
@@ -279,3 +282,47 @@ export const EntityPage = () => {
       return <DefaultEntityPage entity={entity} />;
   }
 };
+
+const ApiOverviewContent = ({ entity }: { entity: Entity }) => (
+  <Grid container spacing={3}>
+    <Grid item md={6}>
+      <AboutCard entity={entity} />
+    </Grid>
+  </Grid>
+);
+
+const ApiDefinitionContent = ({ entity }: { entity: ApiEntity }) => (
+  <Grid container spacing={3}>
+    <Grid item xs={12}>
+      <ApiDefinitionCard apiEntity={entity} />
+    </Grid>
+  </Grid>
+);
+
+const ApiEntityPage = ({ entity }: { entity: Entity }) => (
+  <EntityPageLayout>
+    <EntityPageLayout.Content
+      path="/*"
+      title="Overview"
+      element={<ApiOverviewContent entity={entity} />}
+    />
+    <EntityPageLayout.Content
+      path="/definition/*"
+      title="Definition"
+      element={<ApiDefinitionContent entity={entity as ApiEntity} />}
+    />
+  </EntityPageLayout>
+);
+
+export const EntityPage = () => {
+  const { entity } = useEntity();
+
+  switch (entity?.kind?.toLowerCase()) {
+    case 'component':
+      return <ComponentEntityPage entity={entity} />;
+    case 'api':
+      return <ApiEntityPage entity={entity} />;
+    default:
+      return <DefaultEntityPage entity={entity} />;
+  }
+};