Skip to content

Commit

Permalink
feat(github-deployments): add support for new frontend system
Browse files Browse the repository at this point in the history
Adding github-deployments support for the new frontend system.

Signed-off-by: Craig Tracey <[email protected]>
  • Loading branch information
craigtracey committed Oct 31, 2024
1 parent b470529 commit c13f760
Show file tree
Hide file tree
Showing 12 changed files with 342 additions and 3 deletions.
5 changes: 5 additions & 0 deletions workspaces/github-deployments/.changeset/shiny-seals-greet.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@backstage-community/plugin-github-deployments': patch
---

Adding support for the new frontend system, available at the `/alpha` export.
28 changes: 28 additions & 0 deletions workspaces/github-deployments/plugins/github-deployments/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,31 @@ integrations:
- host: 'your-github-host.com'
apiBaseUrl: 'https://api.your-github-host.com'
```

## Integrating with the new Frontend System

Follow this section if you are using Backstage's [new frontend system](https://backstage.io/docs/frontend-system/).

1. Import `githubDeploymentsPlugin` in your `App.tsx` and add it to your app's `features` array:

```typescript
import githubDeploymentsPlugin from '@backstage-community/plugin-github-deployments/alpha';
// ...
export const app = createApp({
features: [
// ...
githubDeploymentsPlugin,
// ...
],
});
```

2. Next, enable your desired extensions in `app-config.yaml`

```yaml
app:
extensions:
- entity-card:github-deployments/overview
```

3. Whichever extensions you've enabled should now appear in your entity page.
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,22 @@
]
},
"publishConfig": {
"access": "public",
"main": "dist/index.esm.js",
"types": "dist/index.d.ts"
"access": "public"
},
"exports": {
".": "./src/index.ts",
"./alpha": "./src/alpha.ts",
"./package.json": "./package.json"
},
"typesVersions": {
"*": {
"alpha": [
"src/alpha.ts"
],
"package.json": [
"package.json"
]
}
},
"homepage": "https://backstage.io",
"repository": {
Expand All @@ -38,9 +51,11 @@
},
"dependencies": {
"@backstage/catalog-model": "^1.7.0",
"@backstage/core-compat-api": "^0.3.1",
"@backstage/core-components": "^0.15.1",
"@backstage/core-plugin-api": "^1.10.0",
"@backstage/errors": "^1.2.4",
"@backstage/frontend-plugin-api": "^0.9.0",
"@backstage/integration": "^1.15.1",
"@backstage/integration-react": "^1.2.0",
"@backstage/plugin-catalog-react": "^1.14.0",
Expand All @@ -55,6 +70,7 @@
"@backstage/cli": "^0.28.0",
"@backstage/core-app-api": "^1.15.1",
"@backstage/dev-utils": "^1.1.2",
"@backstage/frontend-test-utils": "^0.2.1",
"@backstage/test-utils": "^1.7.0",
"@testing-library/dom": "^10.0.0",
"@testing-library/jest-dom": "^6.0.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
## API Report File for "@backstage-community/plugin-github-deployments"

> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
/// <reference types="react" />

import { AnyApiFactory } from '@backstage/core-plugin-api';
import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
import { Entity } from '@backstage/catalog-model';
import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
import { FrontendPlugin } from '@backstage/frontend-plugin-api';
import { JSX as JSX_2 } from 'react';
import { RouteRef } from '@backstage/frontend-plugin-api';

// @alpha (undocumented)
const _default: FrontendPlugin<
{
entityContent: RouteRef<undefined>;
},
{},
{
'entity-card:github-deployments/overview': ExtensionDefinition<{
kind: 'entity-card';
name: 'overview';
config: {
filter: string | undefined;
};
configInput: {
filter?: string | undefined;
};
output:
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
| ConfigurableExtensionDataRef<
(entity: Entity) => boolean,
'catalog.entity-filter-function',
{
optional: true;
}
>
| ConfigurableExtensionDataRef<
string,
'catalog.entity-filter-expression',
{
optional: true;
}
>;
inputs: {};
params: {
loader: () => Promise<JSX.Element>;
filter?: string | ((entity: Entity) => boolean) | undefined;
};
}>;
'api:github-deployments': ExtensionDefinition<{
kind: 'api';
name: undefined;
config: {};
configInput: {};
output: ConfigurableExtensionDataRef<
AnyApiFactory,
'core.api.factory',
{}
>;
inputs: {};
params: {
factory: AnyApiFactory;
};
}>;
}
>;
export default _default;

// (No @packageDocumentation comment for this package)
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/*
* Copyright 2024 The Backstage Authors
*
* 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 { convertLegacyRouteRefs } from '@backstage/core-compat-api';
import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
import {
entityGithubDeploymentsCard,
githubDeploymentsApiExtension,
} from './alpha/index';
import { rootRouteRef } from './routes';

/**
* @alpha
*/
export default createFrontendPlugin({
id: 'github-deployments',
routes: convertLegacyRouteRefs({
entityContent: rootRouteRef,
}),
extensions: [entityGithubDeploymentsCard, githubDeploymentsApiExtension],
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/*
* Copyright 2024 The Backstage Authors
*
* 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 { scmIntegrationsApiRef } from '@backstage/integration-react';
import {
ApiBlueprint,
createApiFactory,
githubAuthApiRef,
} from '@backstage/frontend-plugin-api';
import { githubDeploymentsApiRef, GithubDeploymentsApiClient } from '../api';

/**
* @alpha
*/
export const githubDeploymentsApiExtension = ApiBlueprint.make({
params: {
factory: createApiFactory({
api: githubDeploymentsApiRef,
deps: {
scmIntegrationsApi: scmIntegrationsApiRef,
githubAuthApi: githubAuthApiRef,
},
factory: ({ scmIntegrationsApi, githubAuthApi }) =>
new GithubDeploymentsApiClient({ scmIntegrationsApi, githubAuthApi }),
}),
},
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/*
* Copyright 2024 The Backstage Authors
*
* 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 { screen, waitFor } from '@testing-library/react';
import {
createExtensionTester,
renderInTestApp,
TestApiProvider,
} from '@backstage/frontend-test-utils';
import * as cards from './entityCards';
import { EntityProvider } from '@backstage/plugin-catalog-react';
import { Entity } from '@backstage/catalog-model';
import React from 'react';
import {
GithubDeployment,
GithubDeploymentsApi,
githubDeploymentsApiRef,
} from '../api';

const entityComponent = {
metadata: {
annotations: {
'github.com/project-slug': 'backstage/backstage',
'backstage.io/source-location':
'url:https://github.com/backstage/backstage',
},
name: 'backstage',
},
apiVersion: 'backstage.io/v1alpha1',
kind: 'Component',
} as unknown as Entity;

const mockGithubDeployementsApi = {
listDeployments: async (): Promise<GithubDeployment[]> => {
return [] as GithubDeployment[];
},
} as GithubDeploymentsApi;

const apis = [[githubDeploymentsApiRef, mockGithubDeployementsApi]] as const;

describe('Entity card extensions', () => {
it('should render', async () => {
renderInTestApp(
<TestApiProvider apis={apis}>
<EntityProvider entity={entityComponent}>
{createExtensionTester(
cards.entityGithubDeploymentsCard,
).reactElement()}
</EntityProvider>
</TestApiProvider>,
);

await waitFor(
() => {
expect(screen.getByText('GitHub Deployments')).toBeInTheDocument();
},
{ timeout: 5000 },
);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/*
* Copyright 2024 The Backstage Authors
*
* 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 { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';

/**
* @alpha
*/
export const entityGithubDeploymentsCard = EntityCardBlueprint.make({
name: 'overview',
params: {
filter: 'kind:component',
loader: () =>
import('../components/GithubDeploymentsCard').then(m => (
<m.GithubDeploymentsCard />
)),
},
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*
* Copyright 2024 The Backstage Authors
*
* 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 * from './apis';
export * from './entityCards';
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export const GithubDeploymentsCard = (props: {
<MissingAnnotationEmptyState annotation={GITHUB_PROJECT_SLUG_ANNOTATION} />
) : (
<GithubDeploymentsComponent
data-testid="deployments-component"
projectSlug={
entity?.metadata.annotations?.[GITHUB_PROJECT_SLUG_ANNOTATION] || ''
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*
* Copyright 2022 The Backstage Authors
*
* 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-plugin-api';

export const rootRouteRef = createRouteRef({
id: 'github-deployments',
});
3 changes: 3 additions & 0 deletions workspaces/github-deployments/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2519,10 +2519,13 @@ __metadata:
"@backstage/catalog-model": ^1.7.0
"@backstage/cli": ^0.28.0
"@backstage/core-app-api": ^1.15.1
"@backstage/core-compat-api": ^0.3.1
"@backstage/core-components": ^0.15.1
"@backstage/core-plugin-api": ^1.10.0
"@backstage/dev-utils": ^1.1.2
"@backstage/errors": ^1.2.4
"@backstage/frontend-plugin-api": ^0.9.0
"@backstage/frontend-test-utils": ^0.2.1
"@backstage/integration": ^1.15.1
"@backstage/integration-react": ^1.2.0
"@backstage/plugin-catalog-react": ^1.14.0
Expand Down

0 comments on commit c13f760

Please sign in to comment.