From 483fa94d0eee0f240bf706ff5d84b43793ab47e7 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 2 Jun 2020 17:00:01 +0200
Subject: [PATCH 1/3] packages/core: make AppConfigLoader return an array, and
 added defaultConfigLoader + tests

---
 packages/app/src/App.tsx                      | 24 +++---
 packages/cli/src/lib/bundler/config.ts        |  6 ++
 .../implementations/ConfigApi/ConfigReader.ts | 13 ++++
 packages/core-api/src/app/App.tsx             |  4 +-
 packages/core-api/src/app/types.ts            |  5 +-
 .../core/src/api-wrappers/createApp.test.tsx  | 74 +++++++++++++++++++
 packages/core/src/api-wrappers/createApp.tsx  | 41 +++++++++-
 7 files changed, 152 insertions(+), 15 deletions(-)
 create mode 100644 packages/core/src/api-wrappers/createApp.test.tsx

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index c18169ae03..58876a6bb2 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -24,18 +24,20 @@ import apis from './apis';
 const app = createApp({
   apis,
   plugins: Object.values(plugins),
-  configLoader: async () => ({
-    app: {
-      title: 'Backstage Example App',
-      baseUrl: 'http://localhost:3000',
+  configLoader: async () => [
+    {
+      app: {
+        title: 'Backstage Example App',
+        baseUrl: 'http://localhost:3000',
+      },
+      backend: {
+        baseUrl: 'http://localhost:7000',
+      },
+      organization: {
+        name: 'Spotify',
+      },
     },
-    backend: {
-      baseUrl: 'http://localhost:7000',
-    },
-    organization: {
-      name: 'Spotify',
-    },
-  }),
+  ],
 });
 
 const AppProvider = app.getProvider();
diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts
index a35c22e3bd..6a48b5bd21 100644
--- a/packages/cli/src/lib/bundler/config.ts
+++ b/packages/cli/src/lib/bundler/config.ts
@@ -51,6 +51,12 @@ export function createConfig(
     );
   }
 
+  plugins.push(
+    new webpack.EnvironmentPlugin({
+      APP_CONFIG: [],
+    }),
+  );
+
   return {
     mode: isDev ? 'development' : 'production',
     profile: false,
diff --git a/packages/core-api/src/apis/implementations/ConfigApi/ConfigReader.ts b/packages/core-api/src/apis/implementations/ConfigApi/ConfigReader.ts
index 7a5cf3b185..f6a8bce17b 100644
--- a/packages/core-api/src/apis/implementations/ConfigApi/ConfigReader.ts
+++ b/packages/core-api/src/apis/implementations/ConfigApi/ConfigReader.ts
@@ -15,6 +15,7 @@
  */
 
 import { ConfigApi, Config } from '../../definitions/ConfigApi';
+import { AppConfig } from '../../../app';
 
 const CONFIG_KEY_PART_PATTERN = /^[a-z][a-z0-9]*(?:[-_][a-z][a-z0-9]*)*$/i;
 
@@ -62,6 +63,18 @@ function validateString(
 export class ConfigReader implements ConfigApi {
   static nullReader = new ConfigReader({});
 
+  static fromConfigs(configs: AppConfig[]): ConfigReader {
+    if (configs.length === 0) {
+      return new ConfigReader({});
+    }
+
+    // Merge together all configs info a single config with recursive fallback
+    // readers, giving the first config object in the array the highest priority.
+    return configs.reduceRight((previousReader, nextConfig) => {
+      return new ConfigReader(nextConfig, previousReader);
+    }, undefined);
+  }
+
   constructor(
     private readonly data: JsonObject,
     private readonly fallback?: ConfigApi,
diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx
index 4207a267af..282e0aa474 100644
--- a/packages/core-api/src/app/App.tsx
+++ b/packages/core-api/src/app/App.tsx
@@ -150,7 +150,7 @@ export class PrivateAppImpl implements BackstageApp {
     const Provider: FC<{}> = ({ children }) => {
       // Keeping this synchronous when a config loader isn't set simplifies tests a lot
       const hasConfig = Boolean(this.configLoader);
-      const config = useAsync(this.configLoader || (() => Promise.resolve({})));
+      const config = useAsync(this.configLoader || (() => Promise.resolve([])));
 
       let childNode = children;
 
@@ -164,7 +164,7 @@ export class PrivateAppImpl implements BackstageApp {
 
       const appApis = ApiRegistry.from([
         [appThemeApiRef, AppThemeSelector.createWithStorage(this.themes)],
-        [configApiRef, new ConfigReader(config.value ?? {})],
+        [configApiRef, ConfigReader.fromConfigs(config.value ?? [])],
       ]);
       const apis = new ApiAggregator(this.apis, appApis);
 
diff --git a/packages/core-api/src/app/types.ts b/packages/core-api/src/app/types.ts
index defc155a82..953a10cbb2 100644
--- a/packages/core-api/src/app/types.ts
+++ b/packages/core-api/src/app/types.ts
@@ -38,8 +38,11 @@ export type AppConfig = any;
 
 /**
  * A function that loads in the App config that will be accessible via the ConfigApi.
+ *
+ * If multiple config objects are returned in the array, values in the earlier configs
+ * will override later ones.
  */
-export type AppConfigLoader = () => Promise<AppConfig>;
+export type AppConfigLoader = () => Promise<AppConfig[]>;
 
 export type AppOptions = {
   /**
diff --git a/packages/core/src/api-wrappers/createApp.test.tsx b/packages/core/src/api-wrappers/createApp.test.tsx
new file mode 100644
index 0000000000..30553d84a7
--- /dev/null
+++ b/packages/core/src/api-wrappers/createApp.test.tsx
@@ -0,0 +1,74 @@
+/*
+ * 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 { defaultConfigLoader } from './createApp';
+
+describe('defaultConfigLoader', () => {
+  afterEach(() => {
+    delete process.env.APP_CONFIG;
+  });
+
+  it('loads static config', async () => {
+    Object.defineProperty(process.env, 'APP_CONFIG', {
+      configurable: true,
+      value: [{ my: 'config' }, { my: 'override-config' }] as any,
+    });
+    const configs = await defaultConfigLoader();
+    expect(configs).toEqual([{ my: 'config' }, { my: 'override-config' }]);
+  });
+
+  it('loads runtime config', async () => {
+    Object.defineProperty(process.env, 'APP_CONFIG', {
+      configurable: true,
+      value: [{ my: 'override-config' }, { my: 'config' }] as any,
+    });
+    const configs = await (defaultConfigLoader as any)(
+      '{"my":"runtime-config"}',
+    );
+    expect(configs).toEqual([
+      { my: 'runtime-config' },
+      { my: 'override-config' },
+      { my: 'config' },
+    ]);
+  });
+
+  it('fails to load invalid missing config', async () => {
+    await expect(defaultConfigLoader()).rejects.toThrow(
+      'No static configuration provided',
+    );
+  });
+
+  it('fails to load invalid static config', async () => {
+    Object.defineProperty(process.env, 'APP_CONFIG', {
+      configurable: true,
+      value: { my: 'invalid-config' } as any,
+    });
+    await expect(defaultConfigLoader()).rejects.toThrow(
+      'Static configuration has invalid format',
+    );
+  });
+
+  it('fails to load bad runtime config', async () => {
+    Object.defineProperty(process.env, 'APP_CONFIG', {
+      configurable: true,
+      value: [{ my: 'config' }] as any,
+    });
+
+    await expect((defaultConfigLoader as any)('}')).rejects.toThrow(
+      'Failed to load runtime configuration, SyntaxError: Unexpected token } in JSON at position 0',
+    );
+  });
+});
diff --git a/packages/core/src/api-wrappers/createApp.tsx b/packages/core/src/api-wrappers/createApp.tsx
index 7c605c4e18..c53a4765b7 100644
--- a/packages/core/src/api-wrappers/createApp.tsx
+++ b/packages/core/src/api-wrappers/createApp.tsx
@@ -20,6 +20,8 @@ import privateExports, {
   ApiRegistry,
   defaultSystemIcons,
   BootErrorPageProps,
+  AppConfigLoader,
+  AppConfig,
 } from '@backstage/core-api';
 import { BrowserRouter as Router } from 'react-router-dom';
 
@@ -29,6 +31,43 @@ import { lightTheme, darkTheme } from '@backstage/theme';
 
 const { PrivateAppImpl } = privateExports;
 
+/**
+ * The default config loader, which expects that config is available at compile-time
+ * in `process.env.APP_CONFIG`. APP_CONFIG should be an array of config objects as
+ * returned by the config loader.
+ *
+ * It will also load runtime config from the __APP_INJECTED_RUNTIME_CONFIG__ string,
+ * which can be rewritten at runtime to contain an additional JSON config object.
+ * If runtime config is present, it will be placed first in the config array, overriding
+ * other config values.
+ */
+export const defaultConfigLoader: AppConfigLoader = async (
+  // This string may be replaced at runtime to provide additional config.
+  // It should be replaced by a JSON-serialized config object.
+  // It's a param so we can test it, but at runtime this will always fall back to default.
+  runtimeConfigJson: string = '__APP_INJECTED_RUNTIME_CONFIG__',
+) => {
+  const appConfig = process.env.APP_CONFIG;
+  if (!appConfig) {
+    throw new Error('No static configuration provided');
+  }
+  if (!Array.isArray(appConfig)) {
+    throw new Error('Static configuration has invalid format');
+  }
+  const configs = (appConfig.slice() as unknown) as AppConfig[];
+
+  // Avoiding this string also being replaced at runtime
+  if (runtimeConfigJson !== '__app_injected_runtime_config__'.toUpperCase()) {
+    try {
+      configs.unshift(JSON.parse(runtimeConfigJson));
+    } catch (error) {
+      throw new Error(`Failed to load runtime configuration, ${error}`);
+    }
+  }
+
+  return configs;
+};
+
 // createApp is defined in core, and not core-api, since we need access
 // to the components inside core to provide defaults.
 // The actual implementation of the app class still lives in core-api,
@@ -77,7 +116,7 @@ export function createApp(options?: AppOptions) {
       theme: darkTheme,
     },
   ];
-  const configLoader = options?.configLoader ?? (async () => ({}));
+  const configLoader = options?.configLoader ?? defaultConfigLoader;
 
   const app = new PrivateAppImpl({
     apis,

From 41dd61984c55a962dd2325d2a8384c389453fe32 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 2 Jun 2020 17:29:31 +0200
Subject: [PATCH 2/3] packages/cli: make cli read app config and inject into
 APP_CONFIG at compile-time

---
 packages/cli/package.json                  |  1 +
 packages/cli/src/commands/app/build.ts     |  2 ++
 packages/cli/src/commands/app/serve.ts     |  2 ++
 packages/cli/src/commands/plugin/serve.ts  |  2 ++
 packages/cli/src/lib/app-config/index.ts   | 18 ++++++++++
 packages/cli/src/lib/app-config/loaders.ts | 41 ++++++++++++++++++++++
 packages/cli/src/lib/app-config/types.ts   | 17 +++++++++
 packages/cli/src/lib/bundler/config.ts     |  2 +-
 packages/cli/src/lib/bundler/types.ts      |  4 +++
 yarn.lock                                  |  5 +++
 10 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 packages/cli/src/lib/app-config/index.ts
 create mode 100644 packages/cli/src/lib/app-config/loaders.ts
 create mode 100644 packages/cli/src/lib/app-config/types.ts

diff --git a/packages/cli/package.json b/packages/cli/package.json
index 20d9893a37..784df5de6b 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -79,6 +79,7 @@
     "url-loader": "^4.1.0",
     "webpack": "^4.41.6",
     "webpack-dev-server": "^3.10.3",
+    "yaml": "^1.10.0",
     "yml-loader": "^2.1.0",
     "yn": "^4.0.0"
   },
diff --git a/packages/cli/src/commands/app/build.ts b/packages/cli/src/commands/app/build.ts
index c654baa439..fad3e6db13 100644
--- a/packages/cli/src/commands/app/build.ts
+++ b/packages/cli/src/commands/app/build.ts
@@ -16,10 +16,12 @@
 
 import { buildBundle } from '../../lib/bundler';
 import { Command } from 'commander';
+import { loadConfig } from '../../lib/app-config';
 
 export default async (cmd: Command) => {
   await buildBundle({
     entry: 'src/index',
     statsJsonEnabled: cmd.stats,
+    appConfig: await loadConfig(),
   });
 };
diff --git a/packages/cli/src/commands/app/serve.ts b/packages/cli/src/commands/app/serve.ts
index 416f8f0151..19dfd9a7be 100644
--- a/packages/cli/src/commands/app/serve.ts
+++ b/packages/cli/src/commands/app/serve.ts
@@ -16,11 +16,13 @@
 
 import { Command } from 'commander';
 import { serveBundle } from '../../lib/bundler';
+import { loadConfig } from '../../lib/app-config';
 
 export default async (cmd: Command) => {
   const waitForExit = await serveBundle({
     entry: 'src/index',
     checksEnabled: cmd.check,
+    appConfig: await loadConfig(),
   });
 
   await waitForExit();
diff --git a/packages/cli/src/commands/plugin/serve.ts b/packages/cli/src/commands/plugin/serve.ts
index 8abbd92440..174d1fe4af 100644
--- a/packages/cli/src/commands/plugin/serve.ts
+++ b/packages/cli/src/commands/plugin/serve.ts
@@ -16,11 +16,13 @@
 
 import { Command } from 'commander';
 import { serveBundle } from '../../lib/bundler';
+import { loadConfig } from '../../lib/app-config';
 
 export default async (cmd: Command) => {
   const waitForExit = await serveBundle({
     entry: 'dev/index',
     checksEnabled: cmd.check,
+    appConfig: await loadConfig(),
   });
 
   await waitForExit();
diff --git a/packages/cli/src/lib/app-config/index.ts b/packages/cli/src/lib/app-config/index.ts
new file mode 100644
index 0000000000..e2c80f89e1
--- /dev/null
+++ b/packages/cli/src/lib/app-config/index.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 type { AppConfig } from './types';
+export { loadConfig } from './loaders';
diff --git a/packages/cli/src/lib/app-config/loaders.ts b/packages/cli/src/lib/app-config/loaders.ts
new file mode 100644
index 0000000000..6e6a56e6c5
--- /dev/null
+++ b/packages/cli/src/lib/app-config/loaders.ts
@@ -0,0 +1,41 @@
+/*
+ * 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 { AppConfig } from './types';
+import fs from 'fs-extra';
+import yaml from 'yaml';
+import { paths } from '../paths';
+
+type LoadConfigOptions = {
+  // Config path, defaults to app-config.yaml in project root
+  configPath?: string;
+};
+
+export async function loadConfig(
+  options: LoadConfigOptions = {},
+): Promise<AppConfig[]> {
+  // TODO: We'll want this to be a bit more elaborate, probably adding configs for
+  //       specific env, and maybe local config for plugins.
+  const { configPath = paths.resolveTargetRoot('app-config.yaml') } = options;
+
+  try {
+    const configYaml = await fs.readFile(configPath, 'utf8');
+    const config = yaml.parse(configYaml);
+    return [config];
+  } catch (error) {
+    throw new Error(`Failed to read static configuration file, ${error}`);
+  }
+}
diff --git a/packages/cli/src/lib/app-config/types.ts b/packages/cli/src/lib/app-config/types.ts
new file mode 100644
index 0000000000..d15cbe3787
--- /dev/null
+++ b/packages/cli/src/lib/app-config/types.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 type AppConfig = any;
diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts
index 6a48b5bd21..deb02a38c6 100644
--- a/packages/cli/src/lib/bundler/config.ts
+++ b/packages/cli/src/lib/bundler/config.ts
@@ -53,7 +53,7 @@ export function createConfig(
 
   plugins.push(
     new webpack.EnvironmentPlugin({
-      APP_CONFIG: [],
+      APP_CONFIG: options.appConfig,
     }),
   );
 
diff --git a/packages/cli/src/lib/bundler/types.ts b/packages/cli/src/lib/bundler/types.ts
index 4182226d69..1a9f49701c 100644
--- a/packages/cli/src/lib/bundler/types.ts
+++ b/packages/cli/src/lib/bundler/types.ts
@@ -15,16 +15,20 @@
  */
 
 import { BundlingPathsOptions } from './paths';
+import { AppConfig } from '../app-config';
 
 export type BundlingOptions = {
   checksEnabled: boolean;
   isDev: boolean;
+  appConfig: AppConfig[];
 };
 
 export type ServeOptions = BundlingPathsOptions & {
   checksEnabled: boolean;
+  appConfig: AppConfig[];
 };
 
 export type BuildOptions = BundlingPathsOptions & {
   statsJsonEnabled: boolean;
+  appConfig: AppConfig[];
 };
diff --git a/yarn.lock b/yarn.lock
index a118f0cea2..019870cfc3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19293,6 +19293,11 @@ yaml@*, yaml@^1.9.2:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+yaml@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
+
 yaml@^1.7.2:
   version "1.8.3"
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.8.3.tgz#2f420fca58b68ce3a332d0ca64be1d191dd3f87a"

From d0fb818c4d2a4f286000dffe4bcd5dfa248d4a9a Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 2 Jun 2020 17:30:32 +0200
Subject: [PATCH 3/3] package/app: move app config to yaml

---
 app-config.yaml                                    |  9 +++++++++
 packages/app/src/App.tsx                           | 14 --------------
 packages/cli/templates/default-app/app-config.yaml |  5 +++++
 3 files changed, 14 insertions(+), 14 deletions(-)
 create mode 100644 app-config.yaml
 create mode 100644 packages/cli/templates/default-app/app-config.yaml

diff --git a/app-config.yaml b/app-config.yaml
new file mode 100644
index 0000000000..6ff336c727
--- /dev/null
+++ b/app-config.yaml
@@ -0,0 +1,9 @@
+app:
+  title: Backstage Example App
+  baseUrl: http://localhost:3000
+
+backend:
+  baseUrl: http://localhost:7000
+
+organization:
+  name: Spotify
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 58876a6bb2..b4d01e067b 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -24,20 +24,6 @@ import apis from './apis';
 const app = createApp({
   apis,
   plugins: Object.values(plugins),
-  configLoader: async () => [
-    {
-      app: {
-        title: 'Backstage Example App',
-        baseUrl: 'http://localhost:3000',
-      },
-      backend: {
-        baseUrl: 'http://localhost:7000',
-      },
-      organization: {
-        name: 'Spotify',
-      },
-    },
-  ],
 });
 
 const AppProvider = app.getProvider();
diff --git a/packages/cli/templates/default-app/app-config.yaml b/packages/cli/templates/default-app/app-config.yaml
new file mode 100644
index 0000000000..b4c53905de
--- /dev/null
+++ b/packages/cli/templates/default-app/app-config.yaml
@@ -0,0 +1,5 @@
+app:
+  title: Scaffolded Backstage App
+
+organization:
+  name: Acme Corporation