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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @backstage/core-app-api
 
+## 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.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';
@@ -2509,7 +2509,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 +2532,44 @@ 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;
+    };
+    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) {
+        relativeResolverConfig.data.backend = {
+          baseUrl: overrideOrigin(backendBaseUrl)
+        };
+      }
+    }
+    if (appBaseUrl) {
+      relativeResolverConfig.data.app = {
+        baseUrl: overrideOrigin(appBaseUrl)
+      };
+    }
+    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 +2619,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 +2660,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 +2686,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(