diff --git a/.changeset/fresh-eels-compare.md b/.changeset/fresh-eels-compare.md
new file mode 100644
index 0000000000..5d17556f7f
--- /dev/null
+++ b/.changeset/fresh-eels-compare.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Migrate to new composability API, exporting the plugin as `userSettingsPlugin` and the page as `UserSettingsPage`.
diff --git a/.changeset/plenty-steaks-confess.md b/.changeset/plenty-steaks-confess.md
new file mode 100644
index 0000000000..f9ffe0f539
--- /dev/null
+++ b/.changeset/plenty-steaks-confess.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-gcp-projects': patch
+---
+
+Migrate to new composability API, exporting the plugin as `gcpProjectsPlugin` and page as `GcpProjectsPage`.
diff --git a/.changeset/quick-apes-shop.md b/.changeset/quick-apes-shop.md
new file mode 100644
index 0000000000..4c87b9253d
--- /dev/null
+++ b/.changeset/quick-apes-shop.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Migrate to new composability API, exporting the plugin as `apiDocsPlugin`, index page as `ApiExplorerPage`, and entity page cards as `EntityApiDefinitionCard`, `EntityConsumedApisCard`, `EntityConsumingComponentsCard`, `EntityProvidedApisCard`, and `EntityProvidingComponentsCard`.
diff --git a/plugins/api-docs/dev/example-api.yaml b/plugins/api-docs/dev/example-api.yaml
new file mode 100644
index 0000000000..a314b4e255
--- /dev/null
+++ b/plugins/api-docs/dev/example-api.yaml
@@ -0,0 +1,124 @@
+apiVersion: backstage.io/v1alpha1
+kind: API
+metadata:
+ name: petstore
+ description: The petstore API
+ tags:
+ - store
+ - rest
+spec:
+ type: openapi
+ lifecycle: experimental
+ owner: team-c
+ definition: |
+ openapi: "3.0.0"
+ info:
+ version: 1.0.0
+ title: Swagger Petstore
+ license:
+ name: MIT
+ servers:
+ - url: http://petstore.swagger.io/v1
+ paths:
+ /pets:
+ get:
+ summary: List all pets
+ operationId: listPets
+ tags:
+ - pets
+ parameters:
+ - name: limit
+ in: query
+ description: How many items to return at one time (max 100)
+ required: false
+ schema:
+ type: integer
+ format: int32
+ responses:
+ '200':
+ description: A paged array of pets
+ headers:
+ x-next:
+ description: A link to the next page of responses
+ schema:
+ type: string
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/Pets"
+ default:
+ description: unexpected error
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/Error"
+ post:
+ summary: Create a pet
+ operationId: createPets
+ tags:
+ - pets
+ responses:
+ '201':
+ description: Null response
+ default:
+ description: unexpected error
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/Error"
+ /pets/{petId}:
+ get:
+ summary: Info for a specific pet
+ operationId: showPetById
+ tags:
+ - pets
+ parameters:
+ - name: petId
+ in: path
+ required: true
+ description: The id of the pet to retrieve
+ schema:
+ type: string
+ responses:
+ '200':
+ description: Expected response to a valid request
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/Pet"
+ default:
+ description: unexpected error
+ content:
+ application/json:
+ schema:
+ $ref: "#/components/schemas/Error"
+ components:
+ schemas:
+ Pet:
+ type: object
+ required:
+ - id
+ - name
+ properties:
+ id:
+ type: integer
+ format: int64
+ name:
+ type: string
+ tag:
+ type: string
+ Pets:
+ type: array
+ items:
+ $ref: "#/components/schemas/Pet"
+ Error:
+ type: object
+ required:
+ - code
+ - message
+ properties:
+ code:
+ type: integer
+ format: int32
+ message:
+ type: string
diff --git a/plugins/api-docs/dev/index.tsx b/plugins/api-docs/dev/index.tsx
index 812a5585d4..4bf0215f32 100644
--- a/plugins/api-docs/dev/index.tsx
+++ b/plugins/api-docs/dev/index.tsx
@@ -14,7 +14,23 @@
* limitations under the License.
*/
+import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { ApiExplorerPage, apiDocsPlugin } from '../src/plugin';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import petstoreApiEntity from './example-api.yaml';
-createDevApp().registerPlugin(plugin).render();
+createDevApp()
+ .registerApi({
+ api: catalogApiRef,
+ deps: {},
+ factory: () =>
+ (({
+ async getEntities() {
+ return { items: [petstoreApiEntity] };
+ },
+ } as unknown) as typeof catalogApiRef.T),
+ })
+ .registerPlugin(apiDocsPlugin)
+ .addPage({ element: })
+ .render();
diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx
index d59699ab9a..0d2648ab5f 100644
--- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx
+++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.test.tsx
@@ -16,6 +16,7 @@
import { ApiEntity } from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry } from '@backstage/core';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
import React from 'react';
@@ -54,7 +55,7 @@ paths:
get:
summary: List all artists
responses:
- "200":
+ "200":
description: Success
`;
const apiEntity: ApiEntity = {
@@ -81,7 +82,9 @@ paths:
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
@@ -110,7 +113,9 @@ paths:
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
index 19370bfc18..0a4386e275 100644
--- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
+++ b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx
@@ -15,6 +15,7 @@
*/
import { ApiEntity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
import { CardTab, TabbedCard, useApi } from '@backstage/core';
import { Alert } from '@material-ui/lab';
import React from 'react';
@@ -22,29 +23,31 @@ import { apiDocsConfigRef } from '../../config';
import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget';
type Props = {
+ /** @deprecated The entity is now grabbed from context instead */
apiEntity?: ApiEntity;
};
-export const ApiDefinitionCard = ({ apiEntity }: Props) => {
+export const ApiDefinitionCard = (_: Props) => {
+ const entity = useEntity().entity as ApiEntity;
const config = useApi(apiDocsConfigRef);
const { getApiDefinitionWidget } = config;
- if (!apiEntity) {
+ if (!entity) {
return Could not fetch the API;
}
- const definitionWidget = getApiDefinitionWidget(apiEntity);
+ const definitionWidget = getApiDefinitionWidget(entity);
if (definitionWidget) {
return (
-
+
- {definitionWidget.component(apiEntity.spec.definition)}
+ {definitionWidget.component(entity.spec.definition)}
@@ -53,13 +56,13 @@ export const ApiDefinitionCard = ({ apiEntity }: Props) => {
return (
+
,
]}
diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
index 54cf08a429..051b9588a0 100644
--- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
@@ -21,7 +21,11 @@ import {
RELATION_PART_OF,
} from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
+import {
+ CatalogApi,
+ catalogApiRef,
+ EntityProvider,
+} from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
import React from 'react';
@@ -68,7 +72,9 @@ describe('', () => {
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
@@ -134,7 +140,9 @@ describe('', () => {
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
index 0bd4919554..8a808a6488 100644
--- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
@@ -19,6 +19,7 @@ import {
Entity,
RELATION_CONSUMES_API,
} from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
import { EmptyState, InfoCard, Progress } from '@backstage/core';
import React, { PropsWithChildren } from 'react';
import { ApisTable } from './ApisTable';
@@ -37,11 +38,13 @@ const ApisCard = ({
};
type Props = {
- entity: Entity;
+ /** @deprecated The entity is now grabbed from context instead */
+ entity?: Entity;
variant?: string;
};
-export const ConsumedApisCard = ({ entity, variant = 'gridItem' }: Props) => {
+export const ConsumedApisCard = ({ variant = 'gridItem' }: Props) => {
+ const { entity } = useEntity();
const { entities, loading, error } = useRelatedEntities(
entity,
RELATION_CONSUMES_API,
diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
index 4300aeff6d..482534f58a 100644
--- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
@@ -21,7 +21,11 @@ import {
RELATION_PROVIDES_API,
} from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
+import {
+ CatalogApi,
+ catalogApiRef,
+ EntityProvider,
+} from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
import React from 'react';
@@ -68,7 +72,9 @@ describe('', () => {
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
@@ -134,7 +140,9 @@ describe('', () => {
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
index 618f2dc1f6..ed6e893a03 100644
--- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
@@ -19,6 +19,7 @@ import {
Entity,
RELATION_PROVIDES_API,
} from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
import { EmptyState, InfoCard, Progress } from '@backstage/core';
import React, { PropsWithChildren } from 'react';
import { ApisTable } from './ApisTable';
@@ -37,11 +38,13 @@ const ApisCard = ({
};
type Props = {
- entity: Entity;
+ /** @deprecated The entity is now grabbed from context instead */
+ entity?: Entity;
variant?: string;
};
-export const ProvidedApisCard = ({ entity, variant = 'gridItem' }: Props) => {
+export const ProvidedApisCard = ({ variant = 'gridItem' }: Props) => {
+ const { entity } = useEntity();
const { entities, loading, error } = useRelatedEntities(
entity,
RELATION_PROVIDES_API,
diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
index de66b2af06..f45a48842d 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
@@ -21,7 +21,11 @@ import {
RELATION_PART_OF,
} from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
+import {
+ CatalogApi,
+ catalogApiRef,
+ EntityProvider,
+} from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
import React from 'react';
@@ -67,7 +71,9 @@ describe('', () => {
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
@@ -133,7 +139,9 @@ describe('', () => {
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
index 0431367aa2..56d2fb977d 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
@@ -19,6 +19,7 @@ import {
Entity,
RELATION_API_CONSUMED_BY,
} from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
import { EmptyState, InfoCard, Progress } from '@backstage/core';
import React, { PropsWithChildren } from 'react';
import { MissingConsumesApisEmptyState } from '../EmptyState';
@@ -37,14 +38,13 @@ const ComponentsCard = ({
};
type Props = {
- entity: Entity;
+ /** @deprecated The entity is now grabbed from context instead */
+ entity?: Entity;
variant?: string;
};
-export const ConsumingComponentsCard = ({
- entity,
- variant = 'gridItem',
-}: Props) => {
+export const ConsumingComponentsCard = ({ variant = 'gridItem' }: Props) => {
+ const { entity } = useEntity();
const { entities, loading, error } = useRelatedEntities(
entity,
RELATION_API_CONSUMED_BY,
diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
index b7b1616e00..4c55393d13 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
@@ -21,7 +21,11 @@ import {
RELATION_PART_OF,
} from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
+import {
+ CatalogApi,
+ catalogApiRef,
+ EntityProvider,
+} from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
import React from 'react';
@@ -67,7 +71,9 @@ describe('', () => {
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
@@ -133,7 +139,9 @@ describe('', () => {
const { getByText } = await renderInTestApp(
-
+
+
+
,
);
diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
index 9e405a3af3..959ff3feed 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
@@ -19,6 +19,7 @@ import {
Entity,
RELATION_API_PROVIDED_BY,
} from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
import { EmptyState, InfoCard, Progress } from '@backstage/core';
import React, { PropsWithChildren } from 'react';
import { MissingProvidesApisEmptyState } from '../EmptyState';
@@ -37,14 +38,13 @@ const ComponentsCard = ({
};
type Props = {
- entity: Entity;
+ /** @deprecated The entity is now grabbed from context instead */
+ entity?: Entity;
variant?: string;
};
-export const ProvidingComponentsCard = ({
- entity,
- variant = 'gridItem',
-}: Props) => {
+export const ProvidingComponentsCard = ({ variant = 'gridItem' }: Props) => {
+ const { entity } = useEntity();
const { entities, loading, error } = useRelatedEntities(
entity,
RELATION_API_PROVIDED_BY,
diff --git a/plugins/api-docs/src/index.ts b/plugins/api-docs/src/index.ts
index f09aeb1038..e7484f77c3 100644
--- a/plugins/api-docs/src/index.ts
+++ b/plugins/api-docs/src/index.ts
@@ -15,4 +15,13 @@
*/
export * from './components';
-export { plugin } from './plugin';
+export {
+ apiDocsPlugin,
+ apiDocsPlugin as plugin,
+ ApiExplorerPage,
+ EntityApiDefinitionCard,
+ EntityConsumedApisCard,
+ EntityConsumingComponentsCard,
+ EntityProvidedApisCard,
+ EntityProvidingComponentsCard,
+} from './plugin';
diff --git a/plugins/api-docs/src/plugin.test.ts b/plugins/api-docs/src/plugin.test.ts
index 054e804382..eaafd36b3d 100644
--- a/plugins/api-docs/src/plugin.test.ts
+++ b/plugins/api-docs/src/plugin.test.ts
@@ -14,10 +14,10 @@
* limitations under the License.
*/
-import { plugin } from './plugin';
+import { apiDocsPlugin } from './plugin';
describe('api-docs', () => {
it('should export plugin', () => {
- expect(plugin).toBeDefined();
+ expect(apiDocsPlugin).toBeDefined();
});
});
diff --git a/plugins/api-docs/src/plugin.ts b/plugins/api-docs/src/plugin.ts
index 06db03f2e1..429fd60095 100644
--- a/plugins/api-docs/src/plugin.ts
+++ b/plugins/api-docs/src/plugin.ts
@@ -15,14 +15,22 @@
*/
import { ApiEntity } from '@backstage/catalog-model';
-import { createApiFactory, createPlugin } from '@backstage/core';
-import { ApiExplorerPage } from './components/ApiExplorerPage/ApiExplorerPage';
+import {
+ createApiFactory,
+ createPlugin,
+ createRoutableExtension,
+ createComponentExtension,
+} from '@backstage/core';
+import { ApiExplorerPage as Page } from './components/ApiExplorerPage/ApiExplorerPage';
import { defaultDefinitionWidgets } from './components/ApiDefinitionCard';
import { rootRoute } from './routes';
import { apiDocsConfigRef } from './config';
-export const plugin = createPlugin({
+export const apiDocsPlugin = createPlugin({
id: 'api-docs',
+ routes: {
+ root: rootRoute,
+ },
apis: [
createApiFactory({
api: apiDocsConfigRef,
@@ -38,6 +46,63 @@ export const plugin = createPlugin({
}),
],
register({ router }) {
- router.addRoute(rootRoute, ApiExplorerPage);
+ router.addRoute(rootRoute, Page);
},
});
+
+export const ApiExplorerPage = apiDocsPlugin.provide(
+ createRoutableExtension({
+ component: () =>
+ import('./components/ApiExplorerPage').then(m => m.ApiExplorerPage),
+ mountPoint: rootRoute,
+ }),
+);
+
+export const EntityApiDefinitionCard = apiDocsPlugin.provide(
+ createComponentExtension({
+ component: {
+ lazy: () =>
+ import('./components/ApiDefinitionCard').then(m => m.ApiDefinitionCard),
+ },
+ }),
+);
+
+export const EntityConsumedApisCard = apiDocsPlugin.provide(
+ createComponentExtension({
+ component: {
+ lazy: () =>
+ import('./components/ApisCards').then(m => m.ConsumedApisCard),
+ },
+ }),
+);
+
+export const EntityConsumingComponentsCard = apiDocsPlugin.provide(
+ createComponentExtension({
+ component: {
+ lazy: () =>
+ import('./components/ComponentsCards').then(
+ m => m.ConsumingComponentsCard,
+ ),
+ },
+ }),
+);
+
+export const EntityProvidedApisCard = apiDocsPlugin.provide(
+ createComponentExtension({
+ component: {
+ lazy: () =>
+ import('./components/ApisCards').then(m => m.ProvidedApisCard),
+ },
+ }),
+);
+
+export const EntityProvidingComponentsCard = apiDocsPlugin.provide(
+ createComponentExtension({
+ component: {
+ lazy: () =>
+ import('./components/ComponentsCards').then(
+ m => m.ProvidingComponentsCard,
+ ),
+ },
+ }),
+);
diff --git a/plugins/gcp-projects/dev/index.tsx b/plugins/gcp-projects/dev/index.tsx
index 812a5585d4..b87d4b7d47 100644
--- a/plugins/gcp-projects/dev/index.tsx
+++ b/plugins/gcp-projects/dev/index.tsx
@@ -15,6 +15,6 @@
*/
import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { gcpProjectsPlugin } from '../src/plugin';
-createDevApp().registerPlugin(plugin).render();
+createDevApp().registerPlugin(gcpProjectsPlugin).render();
diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json
index 085e08e2a3..d48295e204 100644
--- a/plugins/gcp-projects/package.json
+++ b/plugins/gcp-projects/package.json
@@ -37,7 +37,7 @@
"@material-ui/lab": "4.0.0-alpha.45",
"react": "^16.13.1",
"react-dom": "^16.13.1",
- "react-router-dom": "^5.2.0",
+ "react-router-dom": "^6.0.0-beta.0",
"react-use": "^15.3.3"
},
"devDependencies": {
diff --git a/plugins/gcp-projects/src/components/GcpProjectsPage/GcpProjectsPage.tsx b/plugins/gcp-projects/src/components/GcpProjectsPage/GcpProjectsPage.tsx
new file mode 100644
index 0000000000..158347a9ff
--- /dev/null
+++ b/plugins/gcp-projects/src/components/GcpProjectsPage/GcpProjectsPage.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 { Route, Routes } from 'react-router-dom';
+import { NewProjectPage } from '../NewProjectPage';
+import { ProjectDetailsPage } from '../ProjectDetailsPage';
+import { ProjectListPage } from '../ProjectListPage';
+
+export const GcpProjectsPage = () => (
+
+ } />
+ } />
+ } />
+
+);
diff --git a/plugins/gcp-projects/src/components/GcpProjectsPage/index.ts b/plugins/gcp-projects/src/components/GcpProjectsPage/index.ts
new file mode 100644
index 0000000000..a39db43c16
--- /dev/null
+++ b/plugins/gcp-projects/src/components/GcpProjectsPage/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 { GcpProjectsPage } from './GcpProjectsPage';
diff --git a/plugins/gcp-projects/src/index.ts b/plugins/gcp-projects/src/index.ts
index d67bc6a864..af3f0bc4d9 100644
--- a/plugins/gcp-projects/src/index.ts
+++ b/plugins/gcp-projects/src/index.ts
@@ -14,5 +14,9 @@
* limitations under the License.
*/
-export { plugin } from './plugin';
+export {
+ gcpProjectsPlugin,
+ gcpProjectsPlugin as plugin,
+ GcpProjectsPage,
+} from './plugin';
export * from './api';
diff --git a/plugins/gcp-projects/src/plugin.test.ts b/plugins/gcp-projects/src/plugin.test.ts
index 86e909995f..78eddd8603 100644
--- a/plugins/gcp-projects/src/plugin.test.ts
+++ b/plugins/gcp-projects/src/plugin.test.ts
@@ -14,10 +14,10 @@
* limitations under the License.
*/
-import { plugin } from './plugin';
+import { gcpProjectsPlugin } from './plugin';
describe('gcp-projects', () => {
it('should export plugin', () => {
- expect(plugin).toBeDefined();
+ expect(gcpProjectsPlugin).toBeDefined();
});
});
diff --git a/plugins/gcp-projects/src/plugin.ts b/plugins/gcp-projects/src/plugin.ts
index 2baf3bce7d..9126716d55 100644
--- a/plugins/gcp-projects/src/plugin.ts
+++ b/plugins/gcp-projects/src/plugin.ts
@@ -17,29 +17,20 @@
import {
createApiFactory,
createPlugin,
- createRouteRef,
+ createRoutableExtension,
googleAuthApiRef,
} from '@backstage/core';
import { gcpApiRef, GcpClient } from './api';
import { NewProjectPage } from './components/NewProjectPage';
import { ProjectDetailsPage } from './components/ProjectDetailsPage';
import { ProjectListPage } from './components/ProjectListPage';
+import { rootRouteRef, projectRouteRef, newProjectRouteRef } from './routes';
-export const rootRouteRef = createRouteRef({
- path: '/gcp-projects',
- title: 'GCP Projects',
-});
-export const projectRouteRef = createRouteRef({
- path: '/gcp-projects/project',
- title: 'GCP Project Page',
-});
-export const newProjectRouteRef = createRouteRef({
- path: '/gcp-projects/new',
- title: 'GCP Project Page',
-});
-
-export const plugin = createPlugin({
+export const gcpProjectsPlugin = createPlugin({
id: 'gcp-projects',
+ routes: {
+ root: rootRouteRef,
+ },
apis: [
createApiFactory({
api: gcpApiRef,
@@ -55,3 +46,11 @@ export const plugin = createPlugin({
router.addRoute(newProjectRouteRef, NewProjectPage);
},
});
+
+export const GcpProjectsPage = gcpProjectsPlugin.provide(
+ createRoutableExtension({
+ component: () =>
+ import('./components/GcpProjectsPage').then(m => m.GcpProjectsPage),
+ mountPoint: rootRouteRef,
+ }),
+);
diff --git a/plugins/gcp-projects/src/routes.ts b/plugins/gcp-projects/src/routes.ts
new file mode 100644
index 0000000000..ff9bf9d85c
--- /dev/null
+++ b/plugins/gcp-projects/src/routes.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2021 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 { createRouteRef } from '@backstage/core';
+
+export const rootRouteRef = createRouteRef({
+ path: '/gcp-projects',
+ title: 'GCP Projects',
+});
+export const projectRouteRef = createRouteRef({
+ path: '/gcp-projects/project',
+ title: 'GCP Project Page',
+});
+export const newProjectRouteRef = createRouteRef({
+ path: '/gcp-projects/new',
+ title: 'GCP Project Page',
+});
diff --git a/plugins/user-settings/dev/index.tsx b/plugins/user-settings/dev/index.tsx
index 264d6f801f..3eaed00022 100644
--- a/plugins/user-settings/dev/index.tsx
+++ b/plugins/user-settings/dev/index.tsx
@@ -13,7 +13,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
-createDevApp().registerPlugin(plugin).render();
+import React from 'react';
+import { createDevApp } from '@backstage/dev-utils';
+import { userSettingsPlugin, UserSettingsPage } from '../src/plugin';
+
+createDevApp()
+ .registerPlugin(userSettingsPlugin)
+ .addPage({
+ title: 'Settings',
+ element: ,
+ })
+ .render();
diff --git a/plugins/user-settings/src/index.ts b/plugins/user-settings/src/index.ts
index 9b0ce4262c..b26c8b4b0b 100644
--- a/plugins/user-settings/src/index.ts
+++ b/plugins/user-settings/src/index.ts
@@ -13,5 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-export { plugin } from './plugin';
+
+export {
+ userSettingsPlugin,
+ userSettingsPlugin as plugin,
+ UserSettingsPage,
+} from './plugin';
export * from './components/';
diff --git a/plugins/user-settings/src/plugin.test.ts b/plugins/user-settings/src/plugin.test.ts
index 810a2cda12..479fd0ac61 100644
--- a/plugins/user-settings/src/plugin.test.ts
+++ b/plugins/user-settings/src/plugin.test.ts
@@ -13,10 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { plugin } from './plugin';
+import { userSettingsPlugin } from './plugin';
describe('user-settings', () => {
it('should export plugin', () => {
- expect(plugin).toBeDefined();
+ expect(userSettingsPlugin).toBeDefined();
});
});
diff --git a/plugins/user-settings/src/plugin.ts b/plugins/user-settings/src/plugin.ts
index 2f896c8197..5353c12f10 100644
--- a/plugins/user-settings/src/plugin.ts
+++ b/plugins/user-settings/src/plugin.ts
@@ -13,13 +13,28 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { createPlugin, createRouteRef } from '@backstage/core';
+
+import {
+ createPlugin,
+ createRoutableExtension,
+ createRouteRef,
+} from '@backstage/core';
export const settingsRouteRef = createRouteRef({
- path: '/settings',
title: 'Settings',
});
-export const plugin = createPlugin({
+export const userSettingsPlugin = createPlugin({
id: 'user-settings',
+ routes: {
+ settingsPage: settingsRouteRef,
+ },
});
+
+export const UserSettingsPage = userSettingsPlugin.provide(
+ createRoutableExtension({
+ component: () =>
+ import('./components/SettingsPage').then(m => m.SettingsPage),
+ mountPoint: settingsRouteRef,
+ }),
+);
diff --git a/yarn.lock b/yarn.lock
index 973fb44a15..aac0d3735b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15055,18 +15055,6 @@ highlight.js@^10.4.1, highlight.js@~10.4.0:
resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-10.4.1.tgz#d48fbcf4a9971c4361b3f95f302747afe19dbad0"
integrity sha512-yR5lWvNz7c85OhVAEAeFhVCc/GV4C30Fjzc/rCP0aCWzc1UUOPUk55dK/qdwTZHBvMZo+eZ2jpk62ndX/xMFlg==
-history@^4.9.0:
- version "4.10.1"
- resolved "https://registry.npmjs.org/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
- integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
- dependencies:
- "@babel/runtime" "^7.1.2"
- loose-envify "^1.2.0"
- resolve-pathname "^3.0.0"
- tiny-invariant "^1.0.2"
- tiny-warning "^1.0.0"
- value-equal "^1.0.1"
-
history@^5.0.0:
version "5.0.0"
resolved "https://registry.npmjs.org/history/-/history-5.0.0.tgz#0cabbb6c4bbf835addb874f8259f6d25101efd08"
@@ -15083,7 +15071,7 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -16289,11 +16277,6 @@ is-yarn-global@^0.3.0:
resolved "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
-isarray@0.0.1:
- version "0.0.1"
- resolved "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
- integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -18081,7 +18064,7 @@ longest-streak@^2.0.0:
resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -18734,14 +18717,6 @@ min-indent@^1.0.0:
resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
-mini-create-react-context@^0.4.0:
- version "0.4.0"
- resolved "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz#df60501c83151db69e28eac0ef08b4002efab040"
- integrity sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==
- dependencies:
- "@babel/runtime" "^7.5.5"
- tiny-warning "^1.0.3"
-
mini-css-extract-plugin@^0.9.0:
version "0.9.0"
resolved "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
@@ -20503,13 +20478,6 @@ path-to-regexp@0.1.7:
resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
-path-to-regexp@^1.7.0:
- version "1.8.0"
- resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
- integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
- dependencies:
- isarray "0.0.1"
-
path-type@^1.0.0:
version "1.1.0"
resolved "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -21990,7 +21958,7 @@ react-inspector@^5.0.1:
is-dom "^1.1.0"
prop-types "^15.6.1"
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
+react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -22107,7 +22075,7 @@ react-resize-detector@^2.3.0:
prop-types "^15.6.0"
resize-observer-polyfill "^1.5.0"
-react-router-dom@6.0.0-beta.0:
+react-router-dom@6.0.0-beta.0, react-router-dom@^6.0.0-beta.0:
version "6.0.0-beta.0"
resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.0-beta.0.tgz#9dcc8555365f22f7fbd09f26b6b82543f3eb97d6"
integrity sha512-36yNNGMT8RB9FRPL9nKJi6HKDkgOakU+o/2hHpSzR6e37gN70MpOU6QQlmif4oAWWBwjyGc3ZNOMFCsFuHUY5w==
@@ -22115,35 +22083,6 @@ react-router-dom@6.0.0-beta.0:
prop-types "^15.7.2"
react-router "6.0.0-beta.0"
-react-router-dom@^5.2.0:
- version "5.2.0"
- resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
- integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
- dependencies:
- "@babel/runtime" "^7.1.2"
- history "^4.9.0"
- loose-envify "^1.3.1"
- prop-types "^15.6.2"
- react-router "5.2.0"
- tiny-invariant "^1.0.2"
- tiny-warning "^1.0.0"
-
-react-router@5.2.0:
- version "5.2.0"
- resolved "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
- integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
- dependencies:
- "@babel/runtime" "^7.1.2"
- history "^4.9.0"
- hoist-non-react-statics "^3.1.0"
- loose-envify "^1.3.1"
- mini-create-react-context "^0.4.0"
- path-to-regexp "^1.7.0"
- prop-types "^15.6.2"
- react-is "^16.6.0"
- tiny-invariant "^1.0.2"
- tiny-warning "^1.0.0"
-
react-router@6.0.0-beta.0, react-router@^6.0.0-beta.0:
version "6.0.0-beta.0"
resolved "https://registry.npmjs.org/react-router/-/react-router-6.0.0-beta.0.tgz#3e11f39b6ded4412c2fed9e4f989dd4c8156724d"
@@ -22994,11 +22933,6 @@ resolve-from@^4.0.0:
resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-resolve-pathname@^3.0.0:
- version "3.0.0"
- resolved "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
- integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
-
resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -25077,7 +25011,7 @@ tiny-emitter@^2.0.0:
resolved "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
-tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
+tiny-invariant@^1.0.6:
version "1.1.0"
resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
@@ -25087,7 +25021,7 @@ tiny-merge-patch@^0.1.2:
resolved "https://registry.npmjs.org/tiny-merge-patch/-/tiny-merge-patch-0.1.2.tgz#2e8ded19c56ea15dbd3ad4ed5db1c8e5ad544c3c"
integrity sha1-Lo3tGcVuoV29OtTtXbHI5a1UTDw=
-tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
+tiny-warning@^1.0.2:
version "1.0.3"
resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -26057,11 +25991,6 @@ validate.io-number@^1.0.3:
resolved "https://registry.npmjs.org/validate.io-number/-/validate.io-number-1.0.3.tgz#f63ffeda248bf28a67a8d48e0e3b461a1665baf8"
integrity sha1-9j/+2iSL8opnqNSODjtGGhZluvg=
-value-equal@^1.0.1:
- version "1.0.1"
- resolved "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
- integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-
vary@^1, vary@~1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"