paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 46 Packages Projects Releases Wiki Activity

Merge pull request #4342 from backstage/rugvip/ports

Browse Source 
plugins: port welcome and sonarqube plugins to new composability API
This commit is contained in:
Patrik Oldsberg
2021-02-02 13:55:59 +01:00
committed by GitHub
parent 26caa8bdc6 87b189d00f
commit 98794d67e3
17 changed files with 129 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/cyan-lions-float.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-graphiql': patch
---
Finalized composability API migration, now exporting the plugin as `graphiqlPlugin`.
.changeset/silent-readers-worry.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-sonarqube': patch
---
Migrate to new composability API, exporting the plugin as `sonarQubePlugin` and card as `EntitySonarQubeCard`.
.changeset/stale-zebras-warn.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-welcome': patch
---
Migrated to new composability API, exporting the plugin as `welcomePlugin` and the page as `WelcomePage`.
plugins/graphiql/dev/index.tsx
+12 -2
View File
@@ -14,12 +14,18 @@
* limitations under the License.
*/
import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
import { githubAuthApiRef, errorApiRef } from '@backstage/core';
import { plugin, GraphQLEndpoints, graphQlBrowseApiRef } from '../src';
import {
graphiqlPlugin,
GraphQLEndpoints,
graphQlBrowseApiRef,
GraphiQLPage,
} from '../src';
createDevApp()
.registerPlugin(plugin)
.registerPlugin(graphiqlPlugin)
.registerApi({
api: graphQlBrowseApiRef,
deps: {
@@ -47,4 +53,8 @@ createDevApp()
]);
},
})
.addPage({
title: 'GraphiQL',
element: <GraphiQLPage />,
})
.render();
plugins/graphiql/src/index.ts
+5 -1
View File
@@ -14,7 +14,11 @@
* limitations under the License.
*/
export { plugin, GraphiQLPage } from './plugin';
export {
graphiqlPlugin,
graphiqlPlugin as plugin,
GraphiQLPage,
} from './plugin';
export { GraphiQLPage as Router } from './components';
export * from './lib/api';
export * from './route-refs';
plugins/graphiql/src/plugin.test.ts
+2 -2
View File
@@ -14,10 +14,10 @@
* limitations under the License.
*/
import { plugin } from './plugin';
import { graphiqlPlugin } from './plugin';
describe('graphiql', () => {
it('should export plugin', () => {
expect(plugin).toBeDefined();
expect(graphiqlPlugin).toBeDefined();
});
});
plugins/graphiql/src/plugin.ts
+2 -2
View File
@@ -22,7 +22,7 @@ import {
import { graphQlBrowseApiRef, GraphQLEndpoints } from './lib/api';
import { graphiQLRouteRef } from './route-refs';
export const plugin = createPlugin({
export const graphiqlPlugin = createPlugin({
id: 'graphiql',
apis: [
// GitLab is used as an example endpoint, but most will want to plug in
@@ -40,7 +40,7 @@ export const plugin = createPlugin({
],
});
export const GraphiQLPage = plugin.provide(
export const GraphiQLPage = graphiqlPlugin.provide(
createRoutableExtension({
component: () => import('./components').then(m => m.GraphiQLPage),
mountPoint: graphiQLRouteRef,
plugins/sonarqube/dev/index.tsx
+49 -63
View File
@@ -15,21 +15,61 @@
*/
import { Entity } from '@backstage/catalog-model';
import {
Content,
createPlugin,
createRouteRef,
Header,
Page,
} from '@backstage/core';
import { createDevApp } from '@backstage/dev-utils';
import { Content, Header, Page } from '@backstage/core';
import { createDevApp, EntityGridItem } from '@backstage/dev-utils';
import { Grid } from '@material-ui/core';
import React from 'react';
import { SonarQubeCard } from '../src';
import { EntitySonarQubeCard, sonarQubePlugin } from '../src';
import { FindingSummary, SonarQubeApi, sonarQubeApiRef } from '../src/api';
import { SONARQUBE_PROJECT_KEY_ANNOTATION } from '../src/components/useProjectKey';
const entity = (name?: string) =>
({
apiVersion: 'backstage.io/v1alpha1',
kind: 'Component',
metadata: {
annotations: {
[SONARQUBE_PROJECT_KEY_ANNOTATION]: name,
},
name: name,
},
} as Entity);
createDevApp()
.registerPlugin(sonarQubePlugin)
.addPage({
title: 'Cards',
element: (
<Page themeId="home">
<Header title="SonarQube" />
<Content>
<Grid container>
<EntityGridItem xs={12} md={6} entity={entity('empty')}>
<EntitySonarQubeCard />
</EntityGridItem>
<EntityGridItem xs={12} md={6} entity={entity('error')}>
<EntitySonarQubeCard />
</EntityGridItem>
<EntityGridItem xs={12} md={6} entity={entity('never')}>
<EntitySonarQubeCard />
</EntityGridItem>
<EntityGridItem xs={12} md={6} entity={entity('not-computed')}>
<EntitySonarQubeCard />
</EntityGridItem>
<EntityGridItem xs={12} md={6} entity={entity('failed')}>
<EntitySonarQubeCard />
</EntityGridItem>
<EntityGridItem xs={12} md={6} entity={entity('passed')}>
<EntitySonarQubeCard />
</EntityGridItem>
<EntityGridItem xs={12} entity={entity(undefined)}>
<EntitySonarQubeCard />
</EntityGridItem>
</Grid>
</Content>
</Page>
),
})
.registerApi({
api: sonarQubeApiRef,
deps: {},
@@ -114,58 +154,4 @@ createDevApp()
},
} as SonarQubeApi),
})
.registerPlugin(
createPlugin({
id: 'defectdojo-demo',
register({ router }) {
const entity = (name?: string) =>
({
apiVersion: 'backstage.io/v1alpha1',
kind: 'Component',
metadata: {
annotations: {
[SONARQUBE_PROJECT_KEY_ANNOTATION]: name,
},
name: name,
},
} as Entity);
const ExamplePage = () => (
<Page themeId="home">
<Header title="SonarQube" />
<Content>
<Grid container>
<Grid item xs={12} sm={6} md={4}>
<SonarQubeCard entity={entity('empty')} />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<SonarQubeCard entity={entity('error')} />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<SonarQubeCard entity={entity('never')} />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<SonarQubeCard entity={entity('not-computed')} />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<SonarQubeCard entity={entity('failed')} />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<SonarQubeCard entity={entity('passed')} />
</Grid>
<Grid item xs={12}>
<SonarQubeCard entity={entity(undefined)} />
</Grid>
</Grid>
</Content>
</Page>
);
router.addRoute(
createRouteRef({ path: '/', title: 'SonarQube' }),
ExamplePage,
);
},
}),
)
.render();
plugins/sonarqube/package.json
+1
View File
@@ -33,6 +33,7 @@
},
"dependencies": {
"@backstage/catalog-model": "^0.7.0",
"@backstage/plugin-catalog-react": "^0.0.1",
"@backstage/core": "^0.5.0",
"@backstage/theme": "^0.2.2",
"@material-ui/core": "^4.11.0",
plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
+5 -4
View File
@@ -22,6 +22,7 @@ import {
Progress,
useApi,
} from '@backstage/core';
import { useEntity } from '@backstage/plugin-catalog-react';
import { Chip, Grid } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import BugReport from '@material-ui/icons/BugReport';
@@ -69,10 +70,10 @@ const useStyles = makeStyles(theme => ({
},
}));
interface DuplicationRating {
type DuplicationRating = {
greaterThan: number;
rating: '1.0' | '2.0' | '3.0' | '4.0' | '5.0';
}
};
const defaultDuplicationRatings: DuplicationRating[] = [
{ greaterThan: 0, rating: '1.0' },
@@ -83,14 +84,14 @@ const defaultDuplicationRatings: DuplicationRating[] = [
];
export const SonarQubeCard = ({
entity,
variant = 'gridItem',
duplicationRatings = defaultDuplicationRatings,
}: {
entity: Entity;
entity?: Entity;
variant?: string;
duplicationRatings?: DuplicationRating[];
}) => {
const { entity } = useEntity();
const sonarQubeApi = useApi(sonarQubeApiRef);
const projectTitle = useProjectKey(entity);
plugins/sonarqube/src/index.ts
+5 -1
View File
@@ -15,4 +15,8 @@
*/
export * from './components';
export { plugin } from './plugin';
export {
sonarQubePlugin,
sonarQubePlugin as plugin,
EntitySonarQubeCard,
} from './plugin';
plugins/sonarqube/src/plugin.test.ts
+2 -2
View File
@@ -14,10 +14,10 @@
* limitations under the License.
*/
import { plugin } from './plugin';
import { sonarQubePlugin } from './plugin';
describe('sonarqube', () => {
it('should export plugin', () => {
expect(plugin).toBeDefined();
expect(sonarQubePlugin).toBeDefined();
});
});
plugins/sonarqube/src/plugin.ts
+11 -1
View File
@@ -17,12 +17,13 @@
import {
configApiRef,
createApiFactory,
createComponentExtension,
createPlugin,
discoveryApiRef,
} from '@backstage/core';
import { sonarQubeApiRef, SonarQubeClient } from './api';
export const plugin = createPlugin({
export const sonarQubePlugin = createPlugin({
id: 'sonarqube',
apis: [
createApiFactory({
@@ -36,3 +37,12 @@ export const plugin = createPlugin({
}),
],
});
export const EntitySonarQubeCard = sonarQubePlugin.provide(
createComponentExtension({
component: {
lazy: () =>
import('./components/SonarQubeCard').then(m => m.SonarQubeCard),
},
}),
);
plugins/welcome/dev/index.tsx
+2 -2
View File
@@ -15,6 +15,6 @@
*/
import { createDevApp } from '@backstage/dev-utils';
import { plugin } from '../src/plugin';
import { welcomePlugin } from '../src/plugin';
createDevApp().registerPlugin(plugin).render();
createDevApp().registerPlugin(welcomePlugin).render();
plugins/welcome/src/index.ts
+1 -1
View File
@@ -14,4 +14,4 @@
* limitations under the License.
*/
export { plugin } from './plugin';
export { welcomePlugin, welcomePlugin as plugin, WelcomePage } from './plugin';
plugins/welcome/src/plugin.test.ts
+2 -2
View File
@@ -14,10 +14,10 @@
* limitations under the License.
*/
import { plugin } from './plugin';
import { welcomePlugin } from './plugin';
describe('welcome', () => {
it('should export plugin', () => {
expect(plugin).toBeDefined();
expect(welcomePlugin).toBeDefined();
});
});
plugins/welcome/src/plugin.ts
+15 -5
View File
@@ -14,18 +14,28 @@
* limitations under the License.
*/
import { createPlugin, createRouteRef } from '@backstage/core';
import WelcomePage from './components/WelcomePage';
import {
createPlugin,
createRoutableExtension,
createRouteRef,
} from '@backstage/core';
import WelcomePageComponent from './components/WelcomePage';
export const rootRouteRef = createRouteRef({
path: '/welcome',
title: 'Welcome',
});
export const plugin = createPlugin({
export const welcomePlugin = createPlugin({
id: 'welcome',
register({ router, featureFlags }) {
router.addRoute(rootRouteRef, WelcomePage);
router.addRoute(rootRouteRef, WelcomePageComponent);
featureFlags.register('enable-welcome-box');
},
});
export const WelcomePage = welcomePlugin.provide(
createRoutableExtension({
component: () => import('./components/WelcomePage').then(m => m.default),
mountPoint: rootRouteRef,
}),
);