@backstage/core-app-api 1.2.1-next.1 → 1.2.1-next.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @backstage/core-app-api
 
+## 1.2.1-next.3
+
+### Patch Changes
+
+- 6870b43dd1: Fix for the automatic rewriting of base URLs.
+- 653d7912ac: Made `WebStorage` notify its subscribers when `localStorage` values change in other tabs/windows
+- Updated dependencies
+  - @backstage/config@1.0.5-next.1
+  - @backstage/core-plugin-api@1.2.0-next.2
+  - @backstage/types@1.0.2-next.1
+  - @backstage/version-bridge@1.0.3-next.0
+
+## 1.2.1-next.2
+
+### Patch Changes
+
+- b4b5b02315: Tweak feature flag registration so that it happens immediately before the first rendering of the app, rather than just after.
+- 203271b746: Prevent duplicate feature flag components from rendering in the settings when using <FeatureFlagged /> components
+- 8015ff1258: Tweaked wording to use inclusive terminology
+- 63310e3987: Apps will now rewrite the `app.baseUrl` configuration to match the current `location.origin`. The `backend.baseUrl` will also be rewritten in the same way when the `app.baseUrl` and `backend.baseUrl` have matching origins. This will reduce the need for separate frontend builds for different environments.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.2.0-next.2
+  - @backstage/config@1.0.5-next.1
+  - @backstage/types@1.0.2-next.1
+  - @backstage/version-bridge@1.0.3-next.0
+
 ## 1.2.1-next.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -535,16 +535,19 @@ declare class WebStorage implements StorageApi {
     private readonly namespace;
     private readonly errorApi;
     constructor(namespace: string, errorApi: ErrorApi);
+    private static hasSubscribed;
     static create(options: {
         errorApi: ErrorApi;
         namespace?: string;
     }): WebStorage;
+    private static addStorageEventListener;
     get<T>(key: string): T | undefined;
     snapshot<T extends JsonValue>(key: string): StorageValueSnapshot<T>;
     forBucket(name: string): WebStorage;
     set<T>(key: string, data: T): Promise<void>;
     remove(key: string): Promise<void>;
     observe$<T extends JsonValue>(key: string): Observable<StorageValueSnapshot<T>>;
+    private handleStorageChange;
     private getKeyName;
     private notifyChanges;
     private subscribers;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useContext, Children, isValidElement, useEffect, useMemo, useState, createContext } from 'react';
+import React, { useContext, Children, isValidElement, useEffect, useMemo, useState, createContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { createVersionedContext, createVersionedValueMap, getOrCreateGlobalSingleton } from '@backstage/version-bridge';
 import ObservableImpl from 'zen-observable';
@@ -1613,7 +1613,7 @@ class OAuthRequestManager {
 }
 
 const buckets = /* @__PURE__ */ new Map();
-class WebStorage {
+const _WebStorage = class {
   constructor(namespace, errorApi) {
     this.namespace = namespace;
     this.errorApi = errorApi;
@@ -1627,7 +1627,17 @@ class WebStorage {
   }
   static create(options) {
     var _a;
-    return new WebStorage((_a = options.namespace) != null ? _a : "", options.errorApi);
+    return new _WebStorage((_a = options.namespace) != null ? _a : "", options.errorApi);
+  }
+  static addStorageEventListener() {
+    window.addEventListener("storage", (event) => {
+      var _a;
+      for (const [bucketPath, webStorage] of buckets.entries()) {
+        if ((_a = event.key) == null ? void 0 : _a.startsWith(bucketPath)) {
+          webStorage.handleStorageChange(event.key);
+        }
+      }
+    });
   }
   get(key) {
     return this.snapshot(key).value;
@@ -1656,7 +1666,7 @@ class WebStorage {
   forBucket(name) {
     const bucketPath = `${this.namespace}/${name}`;
     if (!buckets.has(bucketPath)) {
-      buckets.set(bucketPath, new WebStorage(bucketPath, this.errorApi));
+      buckets.set(bucketPath, new _WebStorage(bucketPath, this.errorApi));
     }
     return buckets.get(bucketPath);
   }
@@ -1669,8 +1679,21 @@ class WebStorage {
     this.notifyChanges(key);
   }
   observe$(key) {
+    if (!_WebStorage.hasSubscribed) {
+      _WebStorage.addStorageEventListener();
+      _WebStorage.hasSubscribed = true;
+    }
     return this.observable.filter(({ key: messageKey }) => messageKey === key);
   }
+  handleStorageChange(eventKey) {
+    if (!(eventKey == null ? void 0 : eventKey.startsWith(this.namespace))) {
+      return;
+    }
+    const trimmedKey = eventKey == null ? void 0 : eventKey.slice(`${this.namespace}/`.length);
+    if (!trimmedKey.includes("/")) {
+      this.notifyChanges(decodeURIComponent(trimmedKey));
+    }
+  }
   getKeyName(key) {
     return `${this.namespace}/${encodeURIComponent(key)}`;
   }
@@ -1680,7 +1703,9 @@ class WebStorage {
       subscription.next(snapshot);
     }
   }
-}
+};
+let WebStorage = _WebStorage;
+WebStorage.hasSubscribed = false;
 
 function traverseElementTree(options) {
   const collectors = {};
@@ -2509,7 +2534,7 @@ function readBasePath(configApi) {
   var _a;
   let { pathname } = new URL(
     (_a = configApi.getOptionalString("app.baseUrl")) != null ? _a : "/",
-    "http://dummy.dev"
+    "http://sample.dev"
   );
   pathname = pathname.replace(/\/*$/, "");
   return pathname;
@@ -2532,7 +2557,46 @@ function useConfigLoader(configLoader, components, appThemeApi) {
       node: /* @__PURE__ */ React.createElement(ApiProvider, { apis: ApiRegistry.with(appThemeApiRef, appThemeApi) }, /* @__PURE__ */ React.createElement(ThemeProvider, null, noConfigNode))
     };
   }
-  const configReader = ConfigReader.fromConfigs((_a = config.value) != null ? _a : []);
+  let configReader;
+  if ((_a = config.value) == null ? void 0 : _a.length) {
+    const urlConfigReader = ConfigReader.fromConfigs(config.value);
+    const getOrigin = (url) => new URL(url).origin;
+    const overrideOrigin = (fullUrl) => {
+      return new URL(
+        fullUrl.replace(getOrigin(fullUrl), ""),
+        document.location.origin
+      ).href.replace(/\/$/, "");
+    };
+    const appBaseUrl = urlConfigReader.getOptionalString("app.baseUrl");
+    const backendBaseUrl = urlConfigReader.getOptionalString("backend.baseUrl");
+    let configs = config.value;
+    const relativeResolverConfig = {
+      data: {},
+      context: "relative-resolver"
+    };
+    if (appBaseUrl && backendBaseUrl) {
+      const appOrigin = getOrigin(appBaseUrl);
+      const backendOrigin = getOrigin(backendBaseUrl);
+      if (appOrigin === backendOrigin) {
+        const newBackendBaseUrl = overrideOrigin(backendBaseUrl);
+        if (backendBaseUrl !== newBackendBaseUrl) {
+          relativeResolverConfig.data.backend = { baseUrl: newBackendBaseUrl };
+        }
+      }
+    }
+    if (appBaseUrl) {
+      const newAppBaseUrl = overrideOrigin(appBaseUrl);
+      if (appBaseUrl !== newAppBaseUrl) {
+        relativeResolverConfig.data.app = { baseUrl: newAppBaseUrl };
+      }
+    }
+    if (Object.keys(relativeResolverConfig.data).length) {
+      configs = configs.concat([relativeResolverConfig]);
+    }
+    configReader = ConfigReader.fromConfigs(configs);
+  } else {
+    configReader = ConfigReader.fromConfigs([]);
+  }
   return { api: configReader };
 }
 class AppContextImpl {
@@ -2582,6 +2646,7 @@ class AppManager {
     const appContext = new AppContextImpl(this);
     let routesHaveBeenValidated = false;
     const Provider = ({ children }) => {
+      const needsFeatureFlagRegistrationRef = useRef(true);
       const appThemeApi = useMemo(
         () => AppThemeSelector.createWithStorage(this.themes),
         []
@@ -2622,9 +2687,13 @@ class AppManager {
         const { api } = loadedConfig;
         this.configApi = api;
       }
-      useEffect(() => {
-        if (hasConfigApi) {
-          const featureFlagsApi = this.getApiHolder().get(featureFlagsApiRef);
+      if ("node" in loadedConfig) {
+        return loadedConfig.node;
+      }
+      if (hasConfigApi && needsFeatureFlagRegistrationRef.current) {
+        needsFeatureFlagRegistrationRef.current = false;
+        const featureFlagsApi = this.getApiHolder().get(featureFlagsApiRef);
+        if (featureFlagsApi) {
           for (const plugin of this.plugins.values()) {
             if ("getFeatureFlags" in plugin) {
               for (const flag of plugin.getFeatureFlags()) {
@@ -2644,13 +2713,14 @@ class AppManager {
               }
             }
           }
+          const registeredFlags = featureFlagsApi.getRegisteredFlags();
+          const flagNames = new Set(registeredFlags.map((f) => f.name));
           for (const name of featureFlags) {
-            featureFlagsApi.registerFlag({ name, pluginId: "" });
+            if (!flagNames.has(name)) {
+              featureFlagsApi.registerFlag({ name, pluginId: "" });
+            }
           }
         }
-      }, [hasConfigApi, loadedConfig, featureFlags]);
-      if ("node" in loadedConfig) {
-        return loadedConfig.node;
       }
       const { ThemeProvider = AppThemeProvider } = this.components;
       return /* @__PURE__ */ React.createElement(ApiProvider, { apis: this.getApiHolder() }, /* @__PURE__ */ React.createElement(AppContextProvider, { appContext }, /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(