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

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @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
+
+- d3fea4ae0a: Internal fixes to avoid implicit usage of globals
+- c3fa90e184: Updated dependency `zen-observable` to `^0.10.0`.
+- Updated dependencies
+  - @backstage/version-bridge@1.0.3-next.0
+  - @backstage/core-plugin-api@1.1.1-next.1
+  - @backstage/types@1.0.2-next.1
+  - @backstage/config@1.0.5-next.1
+
 ## 1.2.1-next.0
 
 ### 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';
@@ -31,10 +31,13 @@ const ApiProvider = (props) => {
   const { apis, children } = props;
   const parentHolder = (_a = useContext(ApiContext)) == null ? void 0 : _a.atVersion(1);
   const holder = parentHolder ? new ApiAggregator(apis, parentHolder) : apis;
-  return /* @__PURE__ */ React.createElement(ApiContext.Provider, {
-    value: createVersionedValueMap({ 1: holder }),
-    children
-  });
+  return /* @__PURE__ */ React.createElement(
+    ApiContext.Provider,
+    {
+      value: createVersionedValueMap({ 1: holder }),
+      children
+    }
+  );
 };
 ApiProvider.propTypes = {
   apis: PropTypes.shape({ get: PropTypes.func.isRequired }).isRequired,
@@ -279,7 +282,7 @@ class DefaultAuthConnector {
     const scope = this.joinScopesFunc(scopes);
     const popupUrl = await this.buildUrl("/start", {
       scope,
-      origin: location.origin
+      origin: window.location.origin
     });
     const payload = await showLoginPopup({
       url: popupUrl,
@@ -2167,9 +2170,7 @@ const RoutingProvider = ({
     basePath
   );
   const versionedValue = createVersionedValueMap({ 1: resolver });
-  return /* @__PURE__ */ React.createElement(RoutingContext.Provider, {
-    value: versionedValue
-  }, children);
+  return /* @__PURE__ */ React.createElement(RoutingContext.Provider, { value: versionedValue }, children);
 };
 
 const getExtensionContext = (pathname, routes) => {
@@ -2211,13 +2212,7 @@ const RouteTracker = ({
   routeObjects
 }) => {
   const { pathname, search, hash } = useLocation();
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: getExtensionContext(pathname, routeObjects)
-  }, /* @__PURE__ */ React.createElement(TrackNavigation, {
-    pathname,
-    search,
-    hash
-  }));
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes: getExtensionContext(pathname, routeObjects) }, /* @__PURE__ */ React.createElement(TrackNavigation, { pathname, search, hash }));
 };
 
 function validateRouteParameters(routePaths, routeParents) {
@@ -2277,10 +2272,7 @@ const AppContextProvider = ({
   children
 }) => {
   const versionedValue = createVersionedValueMap({ 1: appContext });
-  return /* @__PURE__ */ React.createElement(AppContext.Provider, {
-    value: versionedValue,
-    children
-  });
+  return /* @__PURE__ */ React.createElement(AppContext.Provider, { value: versionedValue, children });
 };
 
 function mkError(thing) {
@@ -2355,7 +2347,7 @@ class AppIdentityProxy {
   }
   async signOut() {
     await this.waitForTarget.then((target) => target.signOut());
-    location.href = this.signOutTargetUrl;
+    window.location.href = this.signOutTargetUrl;
   }
 }
 
@@ -2410,9 +2402,7 @@ function AppThemeProvider({ children }) {
   if (!appTheme) {
     throw new Error("App has no themes");
   }
-  return /* @__PURE__ */ React.createElement(appTheme.Provider, {
-    children
-  });
+  return /* @__PURE__ */ React.createElement(appTheme.Provider, { children });
 }
 
 const defaultConfigLoader = async (runtimeConfigJson = "__APP_INJECTED_RUNTIME_CONFIG__") => {
@@ -2504,10 +2494,7 @@ function resolveRouteBindings(bindRoutes) {
 }
 
 function isReactRouterBeta() {
-  const [obj] = createRoutesFromChildren(/* @__PURE__ */ React.createElement(Route, {
-    index: true,
-    element: /* @__PURE__ */ React.createElement("div", null)
-  }));
+  const [obj] = createRoutesFromChildren(/* @__PURE__ */ React.createElement(Route, { index: true, element: /* @__PURE__ */ React.createElement("div", null) }));
   return !obj.index;
 }
 
@@ -2522,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;
@@ -2537,20 +2524,52 @@ function useConfigLoader(configLoader, components, appThemeApi) {
     noConfigNode = /* @__PURE__ */ React.createElement(Progress, null);
   } else if (config.error) {
     const { BootErrorPage } = components;
-    noConfigNode = /* @__PURE__ */ React.createElement(BootErrorPage, {
-      step: "load-config",
-      error: config.error
-    });
+    noConfigNode = /* @__PURE__ */ React.createElement(BootErrorPage, { step: "load-config", error: config.error });
   }
   const { ThemeProvider = AppThemeProvider } = components;
   if (noConfigNode) {
     return {
-      node: /* @__PURE__ */ React.createElement(ApiProvider, {
-        apis: ApiRegistry.with(appThemeApiRef, appThemeApi)
-      }, /* @__PURE__ */ React.createElement(ThemeProvider, null, noConfigNode))
+      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 {
@@ -2600,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),
         []
@@ -2640,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()) {
@@ -2662,28 +2686,33 @@ 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(RoutingProvider, {
-        routePaths: routing.paths,
-        routeParents: routing.parents,
-        routeObjects: routing.objects,
-        routeBindings,
-        basePath: getBasePath(loadedConfig.api)
-      }, /* @__PURE__ */ React.createElement(InternalAppContext.Provider, {
-        value: { routeObjects: routing.objects }
-      }, children)))));
+      return /* @__PURE__ */ React.createElement(ApiProvider, { apis: this.getApiHolder() }, /* @__PURE__ */ React.createElement(AppContextProvider, { appContext }, /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(
+        RoutingProvider,
+        {
+          routePaths: routing.paths,
+          routeParents: routing.parents,
+          routeObjects: routing.objects,
+          routeBindings,
+          basePath: getBasePath(loadedConfig.api)
+        },
+        /* @__PURE__ */ React.createElement(
+          InternalAppContext.Provider,
+          {
+            value: { routeObjects: routing.objects }
+          },
+          children
+        )
+      ))));
     };
     return Provider;
   }
@@ -2697,9 +2726,7 @@ class AppManager {
       const configApi = useApi(configApiRef);
       const basePath = getBasePath(configApi);
       if (!identityApi) {
-        return /* @__PURE__ */ React.createElement(Component, {
-          onSignInSuccess: setIdentityApi
-        });
+        return /* @__PURE__ */ React.createElement(Component, { onSignInSuccess: setIdentityApi });
       }
       this.appIdentityProxy.setTarget(identityApi, {
         signOutTargetUrl: basePath || "/"
@@ -2736,36 +2763,14 @@ class AppManager {
           { signOutTargetUrl: basePath || "/" }
         );
         if (isReactRouterBeta()) {
-          return /* @__PURE__ */ React.createElement(RouterComponent, null, /* @__PURE__ */ React.createElement(RouteTracker, {
-            routeObjects
-          }), /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
-            path: mountPath,
-            element: /* @__PURE__ */ React.createElement(React.Fragment, null, children)
-          })));
+          return /* @__PURE__ */ React.createElement(RouterComponent, null, /* @__PURE__ */ React.createElement(RouteTracker, { routeObjects }), /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, { path: mountPath, element: /* @__PURE__ */ React.createElement(React.Fragment, null, children) })));
         }
-        return /* @__PURE__ */ React.createElement(RouterComponent, {
-          basename: basePath
-        }, /* @__PURE__ */ React.createElement(RouteTracker, {
-          routeObjects
-        }), children);
+        return /* @__PURE__ */ React.createElement(RouterComponent, { basename: basePath }, /* @__PURE__ */ React.createElement(RouteTracker, { routeObjects }), children);
       }
       if (isReactRouterBeta()) {
-        return /* @__PURE__ */ React.createElement(RouterComponent, null, /* @__PURE__ */ React.createElement(RouteTracker, {
-          routeObjects
-        }), /* @__PURE__ */ React.createElement(SignInPageWrapper, {
-          component: SignInPageComponent
-        }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
-          path: mountPath,
-          element: /* @__PURE__ */ React.createElement(React.Fragment, null, children)
-        }))));
-      }
-      return /* @__PURE__ */ React.createElement(RouterComponent, {
-        basename: basePath
-      }, /* @__PURE__ */ React.createElement(RouteTracker, {
-        routeObjects
-      }), /* @__PURE__ */ React.createElement(SignInPageWrapper, {
-        component: SignInPageComponent
-      }, /* @__PURE__ */ React.createElement(React.Fragment, null, children)));
+        return /* @__PURE__ */ React.createElement(RouterComponent, null, /* @__PURE__ */ React.createElement(RouteTracker, { routeObjects }), /* @__PURE__ */ React.createElement(SignInPageWrapper, { component: SignInPageComponent }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, { path: mountPath, element: /* @__PURE__ */ React.createElement(React.Fragment, null, children) }))));
+      }
+      return /* @__PURE__ */ React.createElement(RouterComponent, { basename: basePath }, /* @__PURE__ */ React.createElement(RouteTracker, { routeObjects }), /* @__PURE__ */ React.createElement(SignInPageWrapper, { component: SignInPageComponent }, /* @__PURE__ */ React.createElement(React.Fragment, null, children)));
     };
     return AppRouter;
   }