feat(api-docs): move the api-tab from the catalog to the plugin and register it in the default app

plugins/api-docs/src/catalog/EntityPageApi/EntityPageApi.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { ComponentEntity, Entity } from '@backstage/catalog-model';
+import { Progress } from '@backstage/core';
+import React, { FC } from 'react';
+import { Grid } from '@material-ui/core';
+import {
+  ApiDefinitionCard,
+  useComponentApiEntities,
+  useComponentApiNames,
+} from '../../components';
+
+export const EntityPageApi: FC<{ entity: Entity }> = ({ entity }) => {
+  const apiNames = useComponentApiNames(entity as ComponentEntity);
+
+  const { apiEntities, loading } = useComponentApiEntities({
+    entity: entity as ComponentEntity,
+  });
+
+  if (loading) {
+    return <Progress />;
+  }
+
+  return (
+    <Grid container spacing={3}>
+      {apiNames.map(api => (
+        <Grid item xs={12} key={api}>
+          <ApiDefinitionCard title={api} apiEntity={apiEntities!.get(api)} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+};

plugins/api-docs/src/catalog/EntityPageApi/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export { EntityPageApi } from './EntityPageApi';

plugins/api-docs/src/catalog/Router.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 { Entity } from '@backstage/catalog-model';
+import { Route, Routes } from 'react-router';
+import { WarningPanel } from '@backstage/core';
+import { catalogRoute } from '../routes';
+import { EntityPageApi } from './EntityPageApi';
+
+const isPluginApplicableToEntity = (entity: Entity) => {
+  return ((entity.spec?.implementsApis as string[]) || []).length > 0;
+};
+
+export const Router = ({ entity }: { entity: Entity }) =>
+  // TODO(shmidt-i): move warning to a separate standardized component
+  !isPluginApplicableToEntity(entity) ? (
+    <WarningPanel title="API Docs plugin:">
+      The entity doesn't implement any APIs.
+    </WarningPanel>
+  ) : (
+    <Routes>
+      <Route
+        path={`/${catalogRoute.path}`}
+        element={<EntityPageApi entity={entity} />}
+      />
+      )
+    </Routes>
+  );

plugins/api-docs/src/catalog/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export { Router } from './Router';

plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.test.tsx

@@ -16,7 +16,6 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry, storageApiRef } from '@backstage/core';
-// TODO: Circular ref!
 import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';

plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.tsx

@@ -15,7 +15,6 @@
  */
 
 import { Content, useApi } from '@backstage/core';
-// TODO: Circular ref
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import React from 'react';
 import { useAsync } from 'react-use';

plugins/api-docs/src/components/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export { ApiDefinitionCard } from './ApiDefinitionCard';
+export { useComponentApiNames } from './useComponentApiNames';
+export { useComponentApiEntities } from './useComponentApiEntities';

plugins/api-docs/src/components/useComponentApiEntities.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 { useAsyncRetry } from 'react-use';
+import { errorApiRef, useApi } from '@backstage/core';
+import { ApiEntity, ComponentEntity } from '@backstage/catalog-model';
+import { catalogApiRef } from '@backstage/plugin-catalog';
+import { useComponentApiNames } from './useComponentApiNames';
+
+export function useComponentApiEntities({
+  entity,
+}: {
+  entity: ComponentEntity;
+}): {
+  loading: boolean;
+  apiEntities?: Map<String, ApiEntity>;
+  error?: Error;
+  retry: () => void;
+} {
+  const catalogApi = useApi(catalogApiRef);
+  const errorApi = useApi(errorApiRef);
+
+  const apiNames = useComponentApiNames(entity);
+
+  const { loading, value: apiEntities, retry, error } = useAsyncRetry<
+    Map<string, ApiEntity>
+  >(async () => {
+    const resultMap = new Map<string, ApiEntity>();
+
+    await Promise.all(
+      apiNames.map(async name => {
+        try {
+          const api = (await catalogApi.getEntityByName({
+            kind: 'API',
+            name,
+          })) as ApiEntity | undefined;
+
+          if (api) {
+            resultMap.set(api.metadata.name, api);
+          }
+        } catch (e) {
+          errorApi.post(e);
+        }
+      }),
+    );
+
+    return resultMap;
+  }, [catalogApi, entity]);
+
+  return {
+    apiEntities,
+    loading,
+    error,
+    retry,
+  };
+}

plugins/api-docs/src/components/useComponentApiNames.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { ComponentEntity } from '@backstage/catalog-model';
+
+export const useComponentApiNames = (entity: ComponentEntity) => {
+  return (entity.spec?.implementsApis as string[]) || [];
+};

plugins/api-docs/src/index.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export { ApiDefinitionCard } from './components/ApiDefinitionCard/ApiDefinitionCard';
+export { Router } from './catalog';
 export { plugin } from './plugin';

plugins/api-docs/src/routes.ts

@@ -28,3 +28,8 @@ export const entityRoute = createRouteRef({
   path: '/api-docs/:optionalNamespaceAndName/',
   title: 'API',
 });
+export const catalogRoute = createRouteRef({
+  icon: NoIcon,
+  path: '',
+  title: 'API',
+});