@backstage/frontend-plugin-api 0.3.0 → 0.4.0-next.1

package/dist/index.esm.js

@@ -1,14 +1,189 @@
-import { createApiRef, useApp, AnalyticsContext, useAnalytics } from '@backstage/core-plugin-api';
-import React, { Component, Suspense, useEffect, lazy, useMemo } from 'react';
+import { createVersionedContext, createVersionedValueMap, getOrCreateGlobalSingleton, useVersionedContext } from '@backstage/version-bridge';
+import React, { useContext, useRef, Component, Suspense, useEffect, lazy, useMemo } from 'react';
+import { createApiRef, useApi, AnalyticsContext as AnalyticsContext$1, useAnalytics as useAnalytics$1 } from '@backstage/core-plugin-api';
+export { SessionState, alertApiRef, appThemeApiRef, atlassianAuthApiRef, bitbucketAuthApiRef, bitbucketServerAuthApiRef, configApiRef, createApiFactory, createApiRef, discoveryApiRef, errorApiRef, featureFlagsApiRef, fetchApiRef, githubAuthApiRef, gitlabAuthApiRef, googleAuthApiRef, identityApiRef, microsoftAuthApiRef, oauthRequestApiRef, oktaAuthApiRef, oneloginAuthApiRef, storageApiRef, useApi, useApiHolder, withApis } from '@backstage/core-plugin-api';
 import { Button } from '@material-ui/core';
 import { ErrorPanel } from '@backstage/core-components';
-import { getOrCreateGlobalSingleton, useVersionedContext } from '@backstage/version-bridge';
 import { z } from 'zod';
 import zodToJsonSchema from 'zod-to-json-schema';
 import { useLocation, useParams } from 'react-router-dom';
 
+const AnalyticsReactContext = createVersionedContext("analytics-context");
+const useAnalyticsContext = () => {
+  const theContext = useContext(AnalyticsReactContext);
+  if (theContext === void 0) {
+    return {
+      pluginId: "root",
+      extensionId: "App"
+    };
+  }
+  const theValue = theContext.atVersion(1);
+  if (theValue === void 0) {
+    throw new Error("No context found for version 1.");
+  }
+  return theValue;
+};
+const AnalyticsContext = (options) => {
+  const { attributes, children } = options;
+  const parentValues = useAnalyticsContext();
+  const combinedValue = {
+    ...parentValues,
+    ...attributes
+  };
+  const versionedCombinedValue = createVersionedValueMap({ 1: combinedValue });
+  return /* @__PURE__ */ React.createElement(AnalyticsReactContext.Provider, { value: versionedCombinedValue }, children);
+};
+
 const appTreeApiRef = createApiRef({ id: "core.app-tree" });
 
+const componentsApiRef = createApiRef({
+  id: "core.components"
+});
+
+const analyticsApiRef = createApiRef({
+  id: "core.analytics"
+});
+
+const globalEvents = getOrCreateGlobalSingleton(
+  "core-plugin-api:analytics-tracker-events",
+  () => ({
+    mostRecentGatheredNavigation: void 0,
+    mostRecentRoutableExtensionRender: void 0,
+    beforeUnloadRegistered: false
+  })
+);
+const routableExtensionRenderedEvent$1 = "_ROUTABLE-EXTENSION-RENDERED";
+class Tracker {
+  constructor(analyticsApi, context = {
+    pluginId: "root",
+    extensionId: "App"
+  }) {
+    this.analyticsApi = analyticsApi;
+    this.context = context;
+    if (!globalEvents.beforeUnloadRegistered) {
+      addEventListener(
+        "beforeunload",
+        () => {
+          if (globalEvents.mostRecentGatheredNavigation) {
+            this.analyticsApi.captureEvent({
+              ...globalEvents.mostRecentGatheredNavigation,
+              ...globalEvents.mostRecentRoutableExtensionRender
+            });
+            globalEvents.mostRecentGatheredNavigation = void 0;
+            globalEvents.mostRecentRoutableExtensionRender = void 0;
+          }
+        },
+        { once: true, passive: true }
+      );
+      globalEvents.beforeUnloadRegistered = true;
+    }
+  }
+  setContext(context) {
+    this.context = context;
+  }
+  captureEvent(action, subject, {
+    value,
+    attributes
+  } = {}) {
+    const context = this.context;
+    if (action === routableExtensionRenderedEvent$1) {
+      if (globalEvents.mostRecentGatheredNavigation) {
+        globalEvents.mostRecentRoutableExtensionRender = {
+          context: {
+            ...context,
+            extensionId: "App"
+          }
+        };
+      }
+      return;
+    }
+    if (globalEvents.mostRecentGatheredNavigation) {
+      try {
+        this.analyticsApi.captureEvent({
+          ...globalEvents.mostRecentGatheredNavigation,
+          ...globalEvents.mostRecentRoutableExtensionRender
+        });
+      } catch (e) {
+        console.warn("Error during analytics event capture. %o", e);
+      }
+      globalEvents.mostRecentGatheredNavigation = void 0;
+      globalEvents.mostRecentRoutableExtensionRender = void 0;
+    }
+    if (action === "navigate" && context.pluginId === "root") {
+      globalEvents.mostRecentGatheredNavigation = {
+        action,
+        subject,
+        value,
+        attributes,
+        context
+      };
+      return;
+    }
+    try {
+      this.analyticsApi.captureEvent({
+        action,
+        subject,
+        value,
+        attributes,
+        context
+      });
+    } catch (e) {
+      console.warn("Error during analytics event capture. %o", e);
+    }
+  }
+}
+
+function useAnalyticsApi() {
+  try {
+    return useApi(analyticsApiRef);
+  } catch {
+    return { captureEvent: () => {
+    } };
+  }
+}
+function useAnalytics() {
+  const trackerRef = useRef(null);
+  const context = useAnalyticsContext();
+  const analyticsApi = useAnalyticsApi();
+  function getTracker() {
+    if (trackerRef.current === null) {
+      trackerRef.current = new Tracker(analyticsApi);
+    }
+    return trackerRef.current;
+  }
+  const tracker = getTracker();
+  tracker.setContext(context);
+  return tracker;
+}
+
+function createComponentRef(options) {
+  const { id } = options;
+  return {
+    id,
+    get T() {
+      throw new Error(`tried to read ComponentRef.T of ${id}`);
+    }
+  };
+}
+const coreProgressComponentRef = createComponentRef({
+  id: "core.components.progress"
+});
+const coreBootErrorPageComponentRef = createComponentRef({
+  id: "core.components.bootErrorPage"
+});
+const coreNotFoundErrorPageComponentRef = createComponentRef({
+  id: "core.components.notFoundErrorPage"
+});
+const coreErrorBoundaryFallbackComponentRef = createComponentRef({
+  id: "core.components.errorBoundaryFallback"
+});
+const coreComponentsRefs = {
+  progress: coreProgressComponentRef,
+  bootErrorPage: coreBootErrorPageComponentRef,
+  notFoundErrorPage: coreNotFoundErrorPageComponentRef,
+  errorBoundaryFallback: coreErrorBoundaryFallbackComponentRef
+};
+
 var __defProp$3 = Object.defineProperty;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$3 = (obj, key, value) => {
@@ -51,13 +226,6 @@ class ErrorBoundary extends Component {
   }
 }
 
-function ExtensionSuspense(props) {
-  const { children } = props;
-  const app = useApp();
-  const { Progress } = app.getComponents();
-  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, children);
-}
-
 getOrCreateGlobalSingleton(
   "core-plugin-api:analytics-tracker-events",
   () => ({
@@ -70,7 +238,7 @@ const routableExtensionRenderedEvent = "_ROUTABLE-EXTENSION-RENDERED";
 
 const RouteTracker = (props) => {
   const { disableTracking, children } = props;
-  const analytics = useAnalytics();
+  const analytics = useAnalytics$1();
   useEffect(() => {
     if (disableTracking)
       return;
@@ -79,12 +247,13 @@ const RouteTracker = (props) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 function ExtensionBoundary(props) {
-  const { id, source, routable, children } = props;
+  var _a;
+  const { node, routable, children } = props;
   const attributes = {
-    extension: id,
-    pluginId: source == null ? void 0 : source.id
+    extension: node.spec.id,
+    pluginId: (_a = node.spec.source) == null ? void 0 : _a.id
   };
-  return /* @__PURE__ */ React.createElement(ExtensionSuspense, null, /* @__PURE__ */ React.createElement(ErrorBoundary, { plugin: source }, /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes }, /* @__PURE__ */ React.createElement(RouteTracker, { disableTracking: !routable }, children))));
+  return /* @__PURE__ */ React.createElement(Suspense, { fallback: "Loading..." }, /* @__PURE__ */ React.createElement(ErrorBoundary, { plugin: node.spec.source }, /* @__PURE__ */ React.createElement(AnalyticsContext$1, { attributes }, /* @__PURE__ */ React.createElement(RouteTracker, { disableTracking: !routable }, children))));
 }
 
 function createExtensionDataRef(id) {
@@ -104,7 +273,9 @@ const coreExtensionData = {
   apiFactory: createExtensionDataRef("core.api.factory"),
   routeRef: createExtensionDataRef("core.routing.ref"),
   navTarget: createExtensionDataRef("core.nav.target"),
-  theme: createExtensionDataRef("core.theme")
+  theme: createExtensionDataRef("core.theme"),
+  logoElements: createExtensionDataRef("core.logos"),
+  component: createExtensionDataRef("component.ref")
 };
 
 function createExtension(options) {
@@ -135,21 +306,25 @@ function createExtensionInput(extensionData, config) {
 }
 
 function createPlugin(options) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   return {
-    ...options,
+    $$type: "@backstage/BackstagePlugin",
+    version: "v1",
+    id: options.id,
     routes: (_a = options.routes) != null ? _a : {},
     externalRoutes: (_b = options.externalRoutes) != null ? _b : {},
     extensions: (_c = options.extensions) != null ? _c : [],
-    $$type: "@backstage/BackstagePlugin"
+    featureFlags: (_d = options.featureFlags) != null ? _d : []
   };
 }
 
 function createExtensionOverrides(options) {
+  var _a;
   return {
     $$type: "@backstage/ExtensionOverrides",
     version: "v1",
-    extensions: options.extensions
+    extensions: options.extensions,
+    featureFlags: (_a = options.featureFlags) != null ? _a : []
   };
 }
 
@@ -219,14 +394,14 @@ function createPageExtension(options) {
       path: coreExtensionData.routePath,
       routeRef: coreExtensionData.routeRef.optional()
     },
-    factory({ config, inputs, source }) {
+    factory({ config, inputs, node }) {
       const ExtensionComponent = lazy(
         () => options.loader({ config, inputs }).then((element) => ({ default: () => element }))
       );
       return {
         path: config.path,
         routeRef: options.routeRef,
-        element: /* @__PURE__ */ React.createElement(ExtensionBoundary, { id, source, routable: true }, /* @__PURE__ */ React.createElement(ExtensionComponent, null))
+        element: /* @__PURE__ */ React.createElement(ExtensionBoundary, { node, routable: true }, /* @__PURE__ */ React.createElement(ExtensionComponent, null))
       };
     }
   });
@@ -255,6 +430,30 @@ function createNavItemExtension(options) {
   });
 }
 
+const signInPageComponentDataRef = createExtensionDataRef("core.signInPage");
+function createSignInPageExtension(options) {
+  var _a;
+  const { id } = options;
+  return createExtension({
+    id,
+    attachTo: (_a = options.attachTo) != null ? _a : { id: "core.router", input: "signInPage" },
+    configSchema: options.configSchema,
+    inputs: options.inputs,
+    disabled: options.disabled,
+    output: {
+      component: signInPageComponentDataRef
+    },
+    factory({ config, inputs, node }) {
+      const ExtensionComponent = lazy(
+        () => options.loader({ config, inputs }).then((component) => ({ default: component }))
+      );
+      return {
+        component: (props) => /* @__PURE__ */ React.createElement(ExtensionBoundary, { node, routable: true }, /* @__PURE__ */ React.createElement(ExtensionComponent, { ...props }))
+      };
+    }
+  });
+}
+
 function createThemeExtension(theme) {
   return createExtension({
     id: `themes.${theme.id}`,
@@ -266,6 +465,37 @@ function createThemeExtension(theme) {
   });
 }
 
+function createComponentExtension(options) {
+  const id = options.ref.id;
+  return createExtension({
+    id,
+    attachTo: { id: "core", input: "components" },
+    inputs: options.inputs,
+    disabled: options.disabled,
+    configSchema: options.configSchema,
+    output: {
+      component: coreExtensionData.component
+    },
+    factory({ config, inputs, node }) {
+      let ExtensionComponent;
+      if ("sync" in options.component) {
+        ExtensionComponent = options.component.sync({ config, inputs });
+      } else {
+        const loader = options.component.lazy({ config, inputs });
+        ExtensionComponent = lazy(
+          () => loader.then((component) => ({ default: component }))
+        );
+      }
+      return {
+        component: {
+          ref: options.ref,
+          impl: (props) => /* @__PURE__ */ React.createElement(ExtensionBoundary, { node }, /* @__PURE__ */ React.createElement(ExtensionComponent, { ...props }))
+        }
+      };
+    }
+  });
+}
+
 const MESSAGE_MARKER = "eHgtF5hmbrXyiEvo";
 function describeParentCallSite(ErrorConstructor = Error) {
   const { stack } = new ErrorConstructor(MESSAGE_MARKER);
@@ -504,5 +734,5 @@ function useRouteRefParams(_routeRef) {
   return useParams();
 }
 
-export { ExtensionBoundary, appTreeApiRef, coreExtensionData, createApiExtension, createExtension, createExtensionDataRef, createExtensionInput, createExtensionOverrides, createExternalRouteRef, createNavItemExtension, createPageExtension, createPlugin, createRouteRef, createSchemaFromZod, createSubRouteRef, createThemeExtension, useRouteRef, useRouteRefParams };
+export { AnalyticsContext, ExtensionBoundary, analyticsApiRef, appTreeApiRef, componentsApiRef, coreComponentsRefs, coreExtensionData, createApiExtension, createComponentExtension, createExtension, createExtensionDataRef, createExtensionInput, createExtensionOverrides, createExternalRouteRef, createNavItemExtension, createPageExtension, createPlugin, createRouteRef, createSchemaFromZod, createSignInPageExtension, createSubRouteRef, createThemeExtension, useAnalytics, useRouteRef, useRouteRefParams };
 //# sourceMappingURL=index.esm.js.map