core,app: add a method for registering APIs

packages/app/src/App.tsx

@@ -20,6 +20,7 @@ import React, { FC } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import Root from './components/Root';
 import * as plugins from './plugins';
+import apis from './apis';
 
 const useStyles = makeStyles(theme => ({
   '@global': {
@@ -40,6 +41,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const app = createApp();
+app.registerApis(apis);
 app.registerPlugin(...Object.values(plugins));
 const AppComponent = app.build();
 

packages/app/src/apis.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 { ApiHolder, ApiRegistry } from '@spotify-backstage/core';
+
+const builder = ApiRegistry.builder();
+
+export default builder.build() as ApiHolder;

packages/core/src/api/app/AppBuilder.tsx

@@ -25,6 +25,7 @@ import {
   SystemIconKey,
   defaultSystemIcons,
 } from '../../icons';
+import { ApiHolder, ApiProvider } from '../apis';
 import LoginPage from './LoginPage';
 
 class AppImpl implements App {
@@ -36,9 +37,14 @@ class AppImpl implements App {
 }
 
 export default class AppBuilder {
+  private apis?: ApiHolder;
   private systemIcons = { ...defaultSystemIcons };
   private readonly plugins = new Set<BackstagePlugin>();
 
+  registerApis(apis: ApiHolder) {
+    this.apis = apis;
+  }
+
   registerIcons(icons: Partial<SystemIcons>) {
     this.systemIcons = { ...this.systemIcons, ...icons };
   }
@@ -91,13 +97,17 @@ export default class AppBuilder {
       <Route key="login" path="/login" component={LoginPage} exact />,
     );
 
-    return () => (
-      <AppContextProvider app={app}>
-        <Switch>
-          {routes}
-          <Route component={() => <span>404 Not Found</span>} />
-        </Switch>
-      </AppContextProvider>
+    let rendered = (
+      <Switch>
+        {routes}
+        <Route component={() => <span>404 Not Found</span>} />
+      </Switch>
     );
+
+    if (this.apis) {
+      rendered = <ApiProvider apis={this.apis} children={rendered} />;
+    }
+
+    return () => <AppContextProvider app={app} children={rendered} />;
   }
 }