introduce @backstage/integration-react and its scmIntegrationsApiRef

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/dull-jobs-lick.md

@@ -0,0 +1,30 @@
+---
+'@backstage/create-app': patch
+---
+
+Supply a `scmIntegrationsApiRef` from the new `@backstage/integration-react`.
+
+This is a new facility that plugins will start to use. You will have to add it to your local `packages/app` as described below. If this is not done, runtime errors will be seen in the frontend, on the form `No API factory available for dependency apiRef{integration.scmintegrations}`.
+
+In `packages/app/package.json`:
+
+```diff
+   "dependencies": {
++    "@backstage/integration-react": "^0.1.1",
+```
+
+In `packages/app/src/apis.ts`:
+
+```diff
++import {
++  scmIntegrationsApiRef,
++  ScmIntegrationsApi,
++} from '@backstage/integration-react';
+
+ export const apis: AnyApiFactory[] = [
++  createApiFactory({
++    api: scmIntegrationsApiRef,
++    deps: { configApi: configApiRef },
++    factory: ({ configApi }) => ScmIntegrationsApi.fromConfig(configApi),
++  }),
+```

.changeset/late-apples-doubt.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-scaffolder': patch
+---
+
+Use `scmIntegrationsApiRef` from the new `@backstage/integration-react`.

cypress/src/integration/catalog.ts

@@ -23,7 +23,7 @@ describe('Catalog', () => {
 
       cy.visit('/catalog');
 
-      cy.contains('Owned (7)').should('be.visible');
+      cy.contains('Owned (8)').should('be.visible');
     });
   });
 });

packages/app/package.json

@@ -7,6 +7,7 @@
     "@backstage/catalog-model": "^0.7.4",
     "@backstage/cli": "^0.6.4",
     "@backstage/core": "^0.7.1",
+    "@backstage/integration-react": "^0.1.1",
     "@backstage/plugin-api-docs": "^0.4.8",
     "@backstage/plugin-catalog": "^0.4.2",
     "@backstage/plugin-catalog-import": "^0.4.3",
@@ -29,8 +30,8 @@
     "@backstage/plugin-register-component": "^0.2.12",
     "@backstage/plugin-rollbar": "^0.3.3",
     "@backstage/plugin-scaffolder": "^0.7.1",
-    "@backstage/plugin-sentry": "^0.3.8",
     "@backstage/plugin-search": "^0.3.3",
+    "@backstage/plugin-sentry": "^0.3.8",
     "@backstage/plugin-tech-radar": "^0.3.7",
     "@backstage/plugin-techdocs": "^0.6.1",
     "@backstage/plugin-user-settings": "^0.2.7",

packages/app/src/apis.ts

@@ -15,22 +15,32 @@
  */
 
 import {
+  AnyApiFactory,
+  configApiRef,
+  createApiFactory,
   errorApiRef,
   githubAuthApiRef,
-  createApiFactory,
 } from '@backstage/core';
-
 import {
-  graphQlBrowseApiRef,
-  GraphQLEndpoints,
-} from '@backstage/plugin-graphiql';
-
+  ScmIntegrationsApi,
+  scmIntegrationsApiRef,
+} from '@backstage/integration-react';
 import {
   costInsightsApiRef,
   ExampleCostInsightsClient,
 } from '@backstage/plugin-cost-insights';
+import {
+  graphQlBrowseApiRef,
+  GraphQLEndpoints,
+} from '@backstage/plugin-graphiql';
+
+export const apis: AnyApiFactory[] = [
+  createApiFactory({
+    api: scmIntegrationsApiRef,
+    deps: { configApi: configApiRef },
+    factory: ({ configApi }) => ScmIntegrationsApi.fromConfig(configApi),
+  }),
 
-export const apis = [
   createApiFactory({
     api: graphQlBrowseApiRef,
     deps: { errorApi: errorApiRef, githubAuthApi: githubAuthApiRef },

packages/create-app/package.json

@@ -69,6 +69,7 @@
     "@backstage/plugin-techdocs": "*",
     "@backstage/plugin-techdocs-backend": "*",
     "@backstage/plugin-user-settings": "*",
+    "@backstage/integration-react": "*",
     "@backstage/test-utils": "*",
     "@backstage/theme": "*"
   },

packages/create-app/src/lib/versions.ts

@@ -37,6 +37,7 @@ import { version as cli } from '../../../cli/package.json';
 import { version as config } from '../../../config/package.json';
 import { version as core } from '../../../core/package.json';
 import { version as errors } from '../../../errors/package.json';
+import { version as integrationReact } from '../../../integration-react/package.json';
 import { version as testUtils } from '../../../test-utils/package.json';
 import { version as theme } from '../../../theme/package.json';
 
@@ -69,6 +70,7 @@ export const packageVersions = {
   '@backstage/config': config,
   '@backstage/core': core,
   '@backstage/errors': errors,
+  '@backstage/integration-react': integrationReact,
   '@backstage/plugin-api-docs': pluginApiDocs,
   '@backstage/plugin-app-backend': pluginAppBackend,
   '@backstage/plugin-auth-backend': pluginAuthBackend,

packages/create-app/templates/default-app/packages/app/package.json.hbs

@@ -19,6 +19,7 @@
     "@backstage/plugin-github-actions": "^{{version '@backstage/plugin-github-actions'}}",
     "@backstage/plugin-user-settings": "^{{version '@backstage/plugin-user-settings'}}",
     "@backstage/plugin-search": "^{{version '@backstage/plugin-search'}}",
+    "@backstage/integration-react": "^{{version '@backstage/integration-react'}}",
     "@backstage/test-utils": "^{{version '@backstage/test-utils'}}",
     "@backstage/theme": "^{{version '@backstage/theme'}}",
     "history": "^5.0.0",

packages/create-app/templates/default-app/packages/app/src/apis.ts

@@ -1 +1,14 @@
-export const apis = [];
+import {
+  AnyApiFactory, configApiRef, createApiFactory
+} from '@backstage/core';
+import {
+  ScmIntegrationsApi, scmIntegrationsApiRef
+} from '@backstage/integration-react';
+
+export const apis: AnyApiFactory[] = [
+  createApiFactory({
+    api: scmIntegrationsApiRef,
+    deps: { configApi: configApiRef },
+    factory: ({ configApi }) => ScmIntegrationsApi.fromConfig(configApi),
+  }),
+];

packages/dev-utils/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@backstage/core": "^0.7.0",
     "@backstage/catalog-model": "^0.7.3",
+    "@backstage/integration-react": "^0.1.1",
     "@backstage/plugin-catalog-react": "^0.1.1",
     "@backstage/test-utils": "^0.1.8",
     "@backstage/theme": "^0.2.3",

packages/dev-utils/src/devApp/render.tsx

@@ -19,6 +19,8 @@ import {
   AnyApiFactory,
   ApiFactory,
   attachComponentData,
+  configApiRef,
+  createApiFactory,
   createApp,
   createPlugin,
   createRouteRef,
@@ -31,6 +33,10 @@ import {
   SidebarPage,
   SidebarSpacer,
 } from '@backstage/core';
+import {
+  ScmIntegrationsApi,
+  scmIntegrationsApiRef,
+} from '@backstage/integration-react';
 import { Box } from '@material-ui/core';
 import BookmarkIcon from '@material-ui/icons/Bookmark';
 import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied';
@@ -136,6 +142,17 @@ class DevAppBuilder {
     const DummyPage = () => <Box p={3}>Page belonging to another plugin.</Box>;
     attachComponentData(DummyPage, 'core.mountPoint', dummyRouteRef);
 
+    const apis = [...this.apis];
+    if (!apis.some(api => api.api.id === scmIntegrationsApiRef.id)) {
+      apis.push(
+        createApiFactory({
+          api: scmIntegrationsApiRef,
+          deps: { configApi: configApiRef },
+          factory: ({ configApi }) => ScmIntegrationsApi.fromConfig(configApi),
+        }),
+      );
+    }
+
     const app = createApp({
       apis: this.apis,
       plugins: this.plugins,

packages/integration-react/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint')],
+};

packages/integration-react/README.md

@@ -0,0 +1,5 @@
+# Integrations React-specific functionality
+
+Exposes a frontend API for interacting with configured integrations (as added
+under the `integrations` root config key). Most of the actual code is in the
+`@backstage/integration` package.

packages/integration-react/dev/DevPage.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 { Content, useApi } from '@backstage/core';
+import { ScmIntegration, ScmIntegrationsGroup } from '@backstage/integration';
+import { Typography } from '@material-ui/core';
+import React from 'react';
+import { scmIntegrationsApiRef } from '../src/ScmIntegrationsApi';
+
+const Integrations = (props: {
+  group: ScmIntegrationsGroup<ScmIntegration>;
+}) => {
+  const integrations = props.group.list();
+  if (!integrations) {
+    return (
+      <Typography color="textSecondary">
+        No integrations of this type
+      </Typography>
+    );
+  }
+
+  return (
+    <Typography variant="caption">
+      <pre>{JSON.stringify(integrations, undefined, 2)}</pre>
+    </Typography>
+  );
+};
+
+export const DevPage = () => {
+  const integrations = useApi(scmIntegrationsApiRef);
+  return (
+    <Content>
+      <Typography paragraph variant="h2">
+        Azure
+      </Typography>
+      <Integrations group={integrations.azure} />
+      <Typography paragraph variant="h2">
+        Bitbucket
+      </Typography>
+      <Integrations group={integrations.bitbucket} />
+      <Typography paragraph variant="h2">
+        GitHub
+      </Typography>
+      <Integrations group={integrations.github} />
+      <Typography paragraph variant="h2">
+        GitLab
+      </Typography>
+      <Integrations group={integrations.gitlab} />
+    </Content>
+  );
+};

packages/integration-react/dev/index.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { configApiRef, createApiFactory } from '@backstage/core';
+import { createDevApp } from '@backstage/dev-utils';
+import { ScmIntegrations } from '@backstage/integration';
+import React from 'react';
+import { scmIntegrationsApiRef } from '../src/ScmIntegrationsApi';
+import { DevPage } from './DevPage';
+
+createDevApp()
+  .registerApi(
+    createApiFactory({
+      api: scmIntegrationsApiRef,
+      deps: { configApi: configApiRef },
+      factory: ({ configApi }) => ScmIntegrations.fromConfig(configApi),
+    }),
+  )
+  .addPage({
+    element: <DevPage />,
+    title: 'Root Page',
+  })
+  .render();

packages/integration-react/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@backstage/integration-react",
+  "version": "0.1.1",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "scripts": {
+    "build": "backstage-cli plugin:build",
+    "start": "backstage-cli plugin:serve",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test",
+    "prepack": "backstage-cli prepack",
+    "postpack": "backstage-cli postpack",
+    "clean": "backstage-cli clean"
+  },
+  "dependencies": {
+    "@backstage/config": "^0.1.2",
+    "@backstage/core": "^0.7.0",
+    "@backstage/integration": "^0.5.0",
+    "@backstage/theme": "^0.2.3",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.45",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-use": "^15.3.3"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.6.3",
+    "@backstage/dev-utils": "^0.1.13",
+    "@backstage/test-utils": "^0.1.8",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.0.7",
+    "@types/jest": "^26.0.7",
+    "@types/node": "^14.14.32",
+    "msw": "^0.21.2",
+    "cross-fetch": "^3.0.6"
+  },
+  "files": [
+    "dist"
+  ]
+}

packages/integration-react/src/ScmIntegrationsApi.test.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 { ConfigReader } from '@backstage/config';
+import {
+  ScmIntegrationsApi,
+  scmIntegrationsApiRef,
+} from './ScmIntegrationsApi';
+
+describe('scmIntegrationsApiRef', () => {
+  it('should export api', () => {
+    expect(scmIntegrationsApiRef).toBeDefined();
+  });
+
+  it('should be instantiated', () => {
+    const i = ScmIntegrationsApi.fromConfig(new ConfigReader({}));
+    expect(i.list().length).toBe(4); // The default ones
+  });
+});