@backstage/plugin-user-settings 0.8.32-next.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @backstage/plugin-user-settings
 
+## 0.9.0
+
+### Minor Changes
+
+- 104ca74: User-settings will now use DataLoader to batch consecutive calls into one API call to improve performance
+
+### Patch Changes
+
+- 018ca87: Added `title` and `icon` to the plugin definition for the new frontend system.
+- a7e0d50: Updated `react-router-dom` peer dependency to `^6.30.2` and explicitly disabled v7 future flags to suppress deprecation warnings.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@2.0.0
+  - @backstage/core-components@0.18.7
+  - @backstage/core-app-api@1.19.5
+  - @backstage/theme@0.7.2
+  - @backstage/frontend-plugin-api@0.14.0
+  - @backstage/core-plugin-api@1.12.3
+  - @backstage/plugin-user-settings-common@0.1.0
+  - @backstage/plugin-signals-react@0.0.19
+
+## 0.9.0-next.2
+
+### Minor Changes
+
+- 104ca74: User-settings will now use DataLoader to batch consecutive calls into one API call to improve performance
+
+### Patch Changes
+
+- a7e0d50: Prepare for React Router v7 migration by updating to v6.30.2 across all NFS packages and enabling v7 future flags. Convert routes from splat paths to parent/child structure with Outlet components.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@2.0.0-next.2
+  - @backstage/core-app-api@1.19.5-next.1
+  - @backstage/plugin-user-settings-common@0.1.0-next.0
+  - @backstage/frontend-plugin-api@0.14.0-next.2
+  - @backstage/core-components@0.18.7-next.2
+  - @backstage/core-plugin-api@1.12.3-next.1
+  - @backstage/plugin-signals-react@0.0.19-next.1
+  - @backstage/theme@0.7.2-next.1
+
 ## 0.8.32-next.1
 
 ### Patch Changes

package/README.md

@@ -90,7 +90,7 @@ import {
 To standardize the UI of all setting tabs,
 make sure you use a similar component structure as the other tabs.
 You can take a look at
-[the example extra tab](https://github.com/backstage/backstage/blob/master/packages/app/src/components/advancedSettings/AdvancedSettings.tsx)
+[the example extra tab](https://github.com/backstage/backstage/blob/master/packages/app-legacy/src/components/advancedSettings/AdvancedSettings.tsx)
 we have created in Backstage's example app.
 
 To change the layout altogether, create a custom page in `packages/app/src/components/user-settings/SettingsPage.tsx`:

package/dist/alpha.d.ts

@@ -42,10 +42,10 @@ declare const userSettingsTranslationRef: _backstage_frontend_plugin_api.Transla
     readonly "emptyProviders.action.title": "Open app-config.yaml and make the changes as highlighted below:";
     readonly "emptyProviders.action.readMoreButtonTitle": "Read More";
     readonly "emptyProviders.description": "You can add Authentication Providers to Backstage which allows you to use these providers to authenticate yourself.";
-    readonly "providerSettingsItem.title.signIn": "Sign in to {{title}}";
     readonly "providerSettingsItem.title.signOut": "Sign out from {{title}}";
-    readonly "providerSettingsItem.buttonTitle.signIn": "Sign in";
+    readonly "providerSettingsItem.title.signIn": "Sign in to {{title}}";
     readonly "providerSettingsItem.buttonTitle.signOut": "Sign out";
+    readonly "providerSettingsItem.buttonTitle.signIn": "Sign in";
     readonly "authProviders.title": "Available Providers";
     readonly "defaultSettingsPage.tabsTitle.featureFlags": "Feature Flags";
     readonly "defaultSettingsPage.tabsTitle.authProviders": "Authentication Providers";
@@ -100,14 +100,31 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
     "page:user-settings": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         config: {
             path: string | undefined;
+            title: string | undefined;
         };
         configInput: {
+            title?: string | undefined;
             path?: string | undefined;
         };
-        output: _backstage_frontend_plugin_api.ExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+            optional: true;
+        }> | _backstage_frontend_plugin_api.ExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<string, "core.title", {
+            optional: true;
+        }> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.IconElement, "core.icon", {
             optional: true;
         }>;
         inputs: {
+            pages: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+                optional: true;
+            }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.title", {
+                optional: true;
+            }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.IconElement, "core.icon", {
+                optional: true;
+            }>, {
+                singleton: false;
+                optional: false;
+                internal: false;
+            }>;
             providerSettings: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<react.JSX.Element, "core.reactElement", {}>, {
                 singleton: true;
                 optional: true;
@@ -119,8 +136,11 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
         params: {
             defaultPath?: [Error: `Use the 'path' param instead`];
             path: string;
-            loader: () => Promise<JSX.Element>;
+            title?: string;
+            icon?: _backstage_frontend_plugin_api.IconElement;
+            loader?: () => Promise<react.JSX.Element>;
             routeRef?: _backstage_frontend_plugin_api.RouteRef;
+            noHeader?: boolean;
         };
     }>;
 }>;

package/dist/alpha.esm.js

@@ -35,6 +35,8 @@ const settingsNavItem = NavItemBlueprint.make({
 });
 var alpha = createFrontendPlugin({
   pluginId: "user-settings",
+  title: "Settings",
+  icon: /* @__PURE__ */ jsx(SettingsIcon, {}),
   info: { packageJson: () => import('./package.json.esm.js') },
   extensions: [userSettingsPage, settingsNavItem],
   routes: {

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  coreExtensionData,\n  createExtensionInput,\n  createFrontendPlugin,\n  PageBlueprint,\n  NavItemBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport { settingsRouteRef } from './plugin';\n\nexport * from './translation';\n\nconst userSettingsPage = PageBlueprint.makeWithOverrides({\n  inputs: {\n    providerSettings: createExtensionInput([coreExtensionData.reactElement], {\n      singleton: true,\n      optional: true,\n    }),\n  },\n  factory(originalFactory, { inputs }) {\n    return originalFactory({\n      path: '/settings',\n      routeRef: settingsRouteRef,\n      loader: () =>\n        import('./components/SettingsPage').then(m => (\n          <m.SettingsPage\n            providerSettings={inputs.providerSettings?.get(\n              coreExtensionData.reactElement,\n            )}\n          />\n        )),\n    });\n  },\n});\n\n/** @alpha */\nexport const settingsNavItem = NavItemBlueprint.make({\n  params: {\n    routeRef: settingsRouteRef,\n    title: 'Settings',\n    icon: SettingsIcon,\n  },\n});\n\n/**\n * @alpha\n */\nexport default createFrontendPlugin({\n  pluginId: 'user-settings',\n  info: { packageJson: () => import('../package.json') },\n  extensions: [userSettingsPage, settingsNavItem],\n  routes: {\n    root: settingsRouteRef,\n  },\n});\n"],"names":[],"mappings":";;;;;;AA2BA,MAAM,gBAAA,GAAmB,cAAc,iBAAA,CAAkB;AAAA,EACvD,MAAA,EAAQ;AAAA,IACN,gBAAA,EAAkB,oBAAA,CAAqB,CAAC,iBAAA,CAAkB,YAAY,CAAA,EAAG;AAAA,MACvE,SAAA,EAAW,IAAA;AAAA,MACX,QAAA,EAAU;AAAA,KACX;AAAA,GACH;AAAA,EACA,OAAA,CAAQ,eAAA,EAAiB,EAAE,MAAA,EAAO,EAAG;AACnC,IAAA,OAAO,eAAA,CAAgB;AAAA,MACrB,IAAA,EAAM,WAAA;AAAA,MACN,QAAA,EAAU,gBAAA;AAAA,MACV,QAAQ,MACN,OAAO,wCAA2B,CAAA,CAAE,KAAK,CAAA,CAAA,qBACvC,GAAA;AAAA,QAAC,CAAA,CAAE,YAAA;AAAA,QAAF;AAAA,UACC,gBAAA,EAAkB,OAAO,gBAAA,EAAkB,GAAA;AAAA,YACzC,iBAAA,CAAkB;AAAA;AACpB;AAAA,OAEH;AAAA,KACJ,CAAA;AAAA,EACH;AACF,CAAC,CAAA;AAGM,MAAM,eAAA,GAAkB,iBAAiB,IAAA,CAAK;AAAA,EACnD,MAAA,EAAQ;AAAA,IACN,QAAA,EAAU,gBAAA;AAAA,IACV,KAAA,EAAO,UAAA;AAAA,IACP,IAAA,EAAM;AAAA;AAEV,CAAC;AAKD,YAAe,oBAAA,CAAqB;AAAA,EAClC,QAAA,EAAU,eAAA;AAAA,EACV,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,uBAAiB,CAAA,EAAE;AAAA,EACrD,UAAA,EAAY,CAAC,gBAAA,EAAkB,eAAe,CAAA;AAAA,EAC9C,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;;;;"}
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  coreExtensionData,\n  createExtensionInput,\n  createFrontendPlugin,\n  PageBlueprint,\n  NavItemBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport { settingsRouteRef } from './plugin';\n\nexport * from './translation';\n\nconst userSettingsPage = PageBlueprint.makeWithOverrides({\n  inputs: {\n    providerSettings: createExtensionInput([coreExtensionData.reactElement], {\n      singleton: true,\n      optional: true,\n    }),\n  },\n  factory(originalFactory, { inputs }) {\n    return originalFactory({\n      path: '/settings',\n      routeRef: settingsRouteRef,\n      loader: () =>\n        import('./components/SettingsPage').then(m => (\n          <m.SettingsPage\n            providerSettings={inputs.providerSettings?.get(\n              coreExtensionData.reactElement,\n            )}\n          />\n        )),\n    });\n  },\n});\n\n/** @alpha */\nexport const settingsNavItem = NavItemBlueprint.make({\n  params: {\n    routeRef: settingsRouteRef,\n    title: 'Settings',\n    icon: SettingsIcon,\n  },\n});\n\n/**\n * @alpha\n */\nexport default createFrontendPlugin({\n  pluginId: 'user-settings',\n  title: 'Settings',\n  icon: <SettingsIcon />,\n  info: { packageJson: () => import('../package.json') },\n  extensions: [userSettingsPage, settingsNavItem],\n  routes: {\n    root: settingsRouteRef,\n  },\n});\n"],"names":[],"mappings":";;;;;;AA2BA,MAAM,gBAAA,GAAmB,cAAc,iBAAA,CAAkB;AAAA,EACvD,MAAA,EAAQ;AAAA,IACN,gBAAA,EAAkB,oBAAA,CAAqB,CAAC,iBAAA,CAAkB,YAAY,CAAA,EAAG;AAAA,MACvE,SAAA,EAAW,IAAA;AAAA,MACX,QAAA,EAAU;AAAA,KACX;AAAA,GACH;AAAA,EACA,OAAA,CAAQ,eAAA,EAAiB,EAAE,MAAA,EAAO,EAAG;AACnC,IAAA,OAAO,eAAA,CAAgB;AAAA,MACrB,IAAA,EAAM,WAAA;AAAA,MACN,QAAA,EAAU,gBAAA;AAAA,MACV,QAAQ,MACN,OAAO,wCAA2B,CAAA,CAAE,KAAK,CAAA,CAAA,qBACvC,GAAA;AAAA,QAAC,CAAA,CAAE,YAAA;AAAA,QAAF;AAAA,UACC,gBAAA,EAAkB,OAAO,gBAAA,EAAkB,GAAA;AAAA,YACzC,iBAAA,CAAkB;AAAA;AACpB;AAAA,OAEH;AAAA,KACJ,CAAA;AAAA,EACH;AACF,CAAC,CAAA;AAGM,MAAM,eAAA,GAAkB,iBAAiB,IAAA,CAAK;AAAA,EACnD,MAAA,EAAQ;AAAA,IACN,QAAA,EAAU,gBAAA;AAAA,IACV,KAAA,EAAO,UAAA;AAAA,IACP,IAAA,EAAM;AAAA;AAEV,CAAC;AAKD,YAAe,oBAAA,CAAqB;AAAA,EAClC,QAAA,EAAU,eAAA;AAAA,EACV,KAAA,EAAO,UAAA;AAAA,EACP,IAAA,sBAAO,YAAA,EAAA,EAAa,CAAA;AAAA,EACpB,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,uBAAiB,CAAA,EAAE;AAAA,EACrD,UAAA,EAAY,CAAC,gBAAA,EAAkB,eAAe,CAAA;AAAA,EAC9C,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;;;;"}

package/dist/apis/StorageApi/CacheMap.esm.js

@@ -0,0 +1,35 @@
+class CacheMap extends Map {
+  #ttlMs;
+  #timestamps = /* @__PURE__ */ new Map();
+  constructor(ttlMs) {
+    super();
+    this.#ttlMs = ttlMs;
+  }
+  set(key, value) {
+    const result = super.set(key, value);
+    this.#timestamps.set(key, Date.now());
+    return result;
+  }
+  get(key) {
+    if (!this.has(key)) {
+      return void 0;
+    }
+    const timestamp = this.#timestamps.get(key);
+    if (Date.now() - timestamp > this.#ttlMs) {
+      this.delete(key);
+      return void 0;
+    }
+    return super.get(key);
+  }
+  delete(key) {
+    this.#timestamps.delete(key);
+    return super.delete(key);
+  }
+  clear() {
+    this.#timestamps.clear();
+    return super.clear();
+  }
+}
+
+export { CacheMap };
+//# sourceMappingURL=CacheMap.esm.js.map

package/dist/apis/StorageApi/CacheMap.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CacheMap.esm.js","sources":["../../../src/apis/StorageApi/CacheMap.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * A Map<K, V> with TTL (time-to-live) support, for the Dataloader of user settings.\n */\nexport class CacheMap<K, V> extends Map<K, V> {\n  #ttlMs: number;\n  #timestamps: Map<K, number> = new Map();\n\n  constructor(ttlMs: number) {\n    super();\n    this.#ttlMs = ttlMs;\n  }\n\n  set(key: K, value: V) {\n    const result = super.set(key, value);\n    this.#timestamps.set(key, Date.now());\n    return result;\n  }\n\n  get(key: K) {\n    if (!this.has(key)) {\n      return undefined;\n    }\n    const timestamp = this.#timestamps.get(key)!;\n    if (Date.now() - timestamp > this.#ttlMs) {\n      this.delete(key);\n      return undefined;\n    }\n    return super.get(key);\n  }\n\n  delete(key: K) {\n    this.#timestamps.delete(key);\n    return super.delete(key);\n  }\n\n  clear() {\n    this.#timestamps.clear();\n    return super.clear();\n  }\n}\n"],"names":[],"mappings":"AAmBO,MAAM,iBAAuB,GAAA,CAAU;AAAA,EAC5C,MAAA;AAAA,EACA,WAAA,uBAAkC,GAAA,EAAI;AAAA,EAEtC,YAAY,KAAA,EAAe;AACzB,IAAA,KAAA,EAAM;AACN,IAAA,IAAA,CAAK,MAAA,GAAS,KAAA;AAAA,EAChB;AAAA,EAEA,GAAA,CAAI,KAAQ,KAAA,EAAU;AACpB,IAAA,MAAM,MAAA,GAAS,KAAA,CAAM,GAAA,CAAI,GAAA,EAAK,KAAK,CAAA;AACnC,IAAA,IAAA,CAAK,WAAA,CAAY,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,KAAK,CAAA;AACpC,IAAA,OAAO,MAAA;AAAA,EACT;AAAA,EAEA,IAAI,GAAA,EAAQ;AACV,IAAA,IAAI,CAAC,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,EAAG;AAClB,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,MAAM,SAAA,GAAY,IAAA,CAAK,WAAA,CAAY,GAAA,CAAI,GAAG,CAAA;AAC1C,IAAA,IAAI,IAAA,CAAK,GAAA,EAAI,GAAI,SAAA,GAAY,KAAK,MAAA,EAAQ;AACxC,MAAA,IAAA,CAAK,OAAO,GAAG,CAAA;AACf,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,OAAO,KAAA,CAAM,IAAI,GAAG,CAAA;AAAA,EACtB;AAAA,EAEA,OAAO,GAAA,EAAQ;AACb,IAAA,IAAA,CAAK,WAAA,CAAY,OAAO,GAAG,CAAA;AAC3B,IAAA,OAAO,KAAA,CAAM,OAAO,GAAG,CAAA;AAAA,EACzB;AAAA,EAEA,KAAA,GAAQ;AACN,IAAA,IAAA,CAAK,YAAY,KAAA,EAAM;AACvB,IAAA,OAAO,MAAM,KAAA,EAAM;AAAA,EACrB;AACF;;;;"}

package/dist/apis/StorageApi/UserSettingsStorage.esm.js

@@ -1,12 +1,16 @@
 import { WebStorage } from '@backstage/core-app-api';
 import { ResponseError } from '@backstage/errors';
 import ObservableImpl from 'zen-observable';
+import DataLoader from 'dataloader';
+import { CacheMap } from './CacheMap.esm.js';
 
 const JSON_HEADERS = {
   "Content-Type": "application/json; charset=utf-8",
   Accept: "application/json"
 };
 const buckets = /* @__PURE__ */ new Map();
+const DATALOADER_CACHE_TTL_MS = 2 * 1e3;
+const DATALOADER_WINDOW_MS = 10;
 class UserSettingsStorage {
   subscribers = /* @__PURE__ */ new Set();
   observables = /* @__PURE__ */ new Map();
@@ -17,7 +21,8 @@ class UserSettingsStorage {
   identityApi;
   fallback;
   signalApi;
-  constructor(namespace, fetchApi, discoveryApi, errorApi, identityApi, fallback, signalApi) {
+  userSettingsLoader;
+  constructor(namespace, fetchApi, discoveryApi, errorApi, identityApi, fallback, signalApi, userSettingsLoader) {
     this.namespace = namespace;
     this.fetchApi = fetchApi;
     this.discoveryApi = discoveryApi;
@@ -25,6 +30,25 @@ class UserSettingsStorage {
     this.identityApi = identityApi;
     this.fallback = fallback;
     this.signalApi = signalApi;
+    this.userSettingsLoader = userSettingsLoader ?? new DataLoader(
+      async (bucketAndKeyList) => this.getMulti(bucketAndKeyList),
+      {
+        name: "UserSettingsStorage.userSettingsLoader",
+        cacheMap: new CacheMap(DATALOADER_CACHE_TTL_MS),
+        cacheKeyFn: (bucketAndKey) => this.stringifyDataLoaderKey(bucketAndKey),
+        maxBatchSize: 100,
+        batchScheduleFn: (cb) => setTimeout(cb, DATALOADER_WINDOW_MS)
+      }
+    );
+  }
+  stringifyDataLoaderKey({
+    bucket,
+    key
+  }) {
+    return `${encodeURIComponent(bucket)}/${encodeURIComponent(key)}`;
+  }
+  clearCacheKey(key) {
+    this.userSettingsLoader.clear({ bucket: this.namespace, key });
   }
   static create(options) {
     return new UserSettingsStorage(
@@ -51,7 +75,9 @@ class UserSettingsStorage {
           this.discoveryApi,
           this.errorApi,
           this.identityApi,
-          this.fallback
+          this.fallback,
+          this.signalApi,
+          this.userSettingsLoader
         )
       );
     }
@@ -65,14 +91,17 @@ class UserSettingsStorage {
     if (!response.ok && response.status !== 404) {
       throw await ResponseError.fromResponse(response);
     }
+    this.clearCacheKey(key);
     this.notifyChanges({ key, presence: "absent" });
   }
   async set(key, data) {
     if (!await this.isSignedIn()) {
       await this.fallback.set(key, data);
       this.notifyChanges({ key, presence: "present", value: data });
+      this.clearCacheKey(key);
       return;
     }
+    this.clearCacheKey(key);
     const fetchUrl = await this.getFetchUrl(key);
     const response = await this.fetchApi.fetch(fetchUrl, {
       method: "PUT",
@@ -83,6 +112,14 @@ class UserSettingsStorage {
       throw await ResponseError.fromResponse(response);
     }
     const { value } = await response.json();
+    this.userSettingsLoader.prime(
+      { bucket: this.namespace, key },
+      {
+        key,
+        presence: "present",
+        value
+      }
+    );
     this.notifyChanges({ key, value, presence: "present" });
   }
   observe$(key) {
@@ -93,7 +130,9 @@ class UserSettingsStorage {
           let signalSubscription;
           this.subscribers.add(subscriber);
           const updateSnapshot = () => {
-            Promise.resolve().then(() => this.get(key)).then((snapshot) => subscriber.next(snapshot)).catch((error) => this.errorApi.post(error));
+            Promise.resolve().then(
+              () => this.userSettingsLoader.load({ bucket: this.namespace, key })
+            ).then((snapshot) => subscriber.next(snapshot)).catch((error) => this.errorApi.post(error));
           };
           if (this.signalApi) {
             signalSubscription = this.signalApi.subscribe(
@@ -120,29 +159,53 @@ class UserSettingsStorage {
   snapshot(key) {
     return { key, presence: "unknown" };
   }
-  async get(key) {
+  async getMulti(bucketAndKeyList) {
+    if (bucketAndKeyList.length === 0) return [];
     if (!await this.isSignedIn()) {
-      return this.fallback.snapshot(key);
-    }
-    const fetchUrl = await this.getFetchUrl(key);
-    const response = await this.fetchApi.fetch(fetchUrl);
-    if (response.status === 404) {
-      return { key, presence: "absent" };
-    }
-    if (!response.ok) {
-      throw await ResponseError.fromResponse(response);
+      return bucketAndKeyList.map(
+        (bucketAndKey) => this.fallback.snapshot(bucketAndKey.key)
+      );
     }
     try {
-      const { value: rawValue } = await response.json();
-      const value = JSON.parse(JSON.stringify(rawValue), (_key, val) => {
-        if (typeof val === "object" && val !== null) {
-          Object.freeze(val);
-        }
-        return val;
+      const baseUrl = await this.discoveryApi.getBaseUrl("user-settings");
+      const response = await this.fetchApi.fetch(`${baseUrl}/multiget`, {
+        method: "POST",
+        headers: JSON_HEADERS,
+        body: JSON.stringify({ items: bucketAndKeyList })
       });
-      return { key, presence: "present", value };
-    } catch {
-      return { key, presence: "absent" };
+      if (response.status === 404) {
+        return bucketAndKeyList.map((bucketAndKey) => ({
+          key: bucketAndKey.key,
+          presence: "absent"
+        }));
+      }
+      if (!response.ok) {
+        throw await ResponseError.fromResponse(response);
+      }
+      const { items: values } = await response.json();
+      return bucketAndKeyList.map(
+        ({ key }, i) => {
+          if (!values[i]) {
+            return { key, presence: "absent" };
+          }
+          return {
+            key,
+            presence: "present",
+            value: JSON.parse(JSON.stringify(values[i].value), (_key, val) => {
+              if (typeof val === "object" && val !== null) {
+                Object.freeze(val);
+              }
+              return val;
+            })
+          };
+        }
+      );
+    } catch (e) {
+      this.errorApi.post(new Error(`Failed to fetch user settings, ${e}`));
+      return bucketAndKeyList.map((bucketAndKey) => ({
+        key: bucketAndKey.key,
+        presence: "absent"
+      }));
     }
   }
   async getFetchUrl(key) {

package/dist/apis/StorageApi/UserSettingsStorage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsStorage.esm.js","sources":["../../../src/apis/StorageApi/UserSettingsStorage.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { WebStorage } from '@backstage/core-app-api';\nimport {\n  DiscoveryApi,\n  ErrorApi,\n  FetchApi,\n  IdentityApi,\n  StorageApi,\n  StorageValueSnapshot,\n} from '@backstage/core-plugin-api';\nimport { ResponseError } from '@backstage/errors';\nimport { JsonValue, Observable } from '@backstage/types';\nimport { SignalApi, SignalSubscriber } from '@backstage/plugin-signals-react';\nimport ObservableImpl from 'zen-observable';\nimport { UserSettingsSignal } from '@backstage/plugin-user-settings-common';\n\nconst JSON_HEADERS = {\n  'Content-Type': 'application/json; charset=utf-8',\n  Accept: 'application/json',\n};\n\nconst buckets = new Map<string, UserSettingsStorage>();\n\n/**\n * An implementation of the storage API, that uses the user-settings backend to\n * persist the data in the DB.\n *\n * @public\n */\nexport class UserSettingsStorage implements StorageApi {\n  private subscribers = new Set<\n    ZenObservable.SubscriptionObserver<StorageValueSnapshot<JsonValue>>\n  >();\n\n  private readonly observables = new Map<\n    string,\n    Observable<StorageValueSnapshot<JsonValue>>\n  >();\n\n  private readonly namespace: string;\n  private readonly fetchApi: FetchApi;\n  private readonly discoveryApi: DiscoveryApi;\n  private readonly errorApi: ErrorApi;\n  private readonly identityApi: IdentityApi;\n  private readonly fallback: WebStorage;\n  private readonly signalApi?: SignalApi;\n\n  private constructor(\n    namespace: string,\n    fetchApi: FetchApi,\n    discoveryApi: DiscoveryApi,\n    errorApi: ErrorApi,\n    identityApi: IdentityApi,\n    fallback: WebStorage,\n    signalApi?: SignalApi,\n  ) {\n    this.namespace = namespace;\n    this.fetchApi = fetchApi;\n    this.discoveryApi = discoveryApi;\n    this.errorApi = errorApi;\n    this.identityApi = identityApi;\n    this.fallback = fallback;\n    this.signalApi = signalApi;\n  }\n\n  static create(options: {\n    fetchApi: FetchApi;\n    discoveryApi: DiscoveryApi;\n    errorApi: ErrorApi;\n    identityApi: IdentityApi;\n    signalApi?: SignalApi;\n    namespace?: string;\n  }): UserSettingsStorage {\n    return new UserSettingsStorage(\n      options.namespace ?? 'default',\n      options.fetchApi,\n      options.discoveryApi,\n      options.errorApi,\n      options.identityApi,\n      WebStorage.create({\n        namespace: options.namespace,\n        errorApi: options.errorApi,\n      }),\n      options.signalApi,\n    );\n  }\n\n  forBucket(name: string): StorageApi {\n    // use dot instead of slash separator to have nicer URLs\n    const bucketPath = `${this.namespace}.${name}`;\n\n    if (!buckets.has(bucketPath)) {\n      buckets.set(\n        bucketPath,\n        new UserSettingsStorage(\n          bucketPath,\n          this.fetchApi,\n          this.discoveryApi,\n          this.errorApi,\n          this.identityApi,\n          this.fallback,\n        ),\n      );\n    }\n\n    return buckets.get(bucketPath)!;\n  }\n\n  async remove(key: string): Promise<void> {\n    const fetchUrl = await this.getFetchUrl(key);\n\n    const response = await this.fetchApi.fetch(fetchUrl, {\n      method: 'DELETE',\n    });\n\n    if (!response.ok && response.status !== 404) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    this.notifyChanges({ key, presence: 'absent' });\n  }\n\n  async set<T extends JsonValue>(key: string, data: T): Promise<void> {\n    if (!(await this.isSignedIn())) {\n      await this.fallback.set(key, data);\n      this.notifyChanges({ key, presence: 'present', value: data });\n      return;\n    }\n\n    const fetchUrl = await this.getFetchUrl(key);\n\n    const response = await this.fetchApi.fetch(fetchUrl, {\n      method: 'PUT',\n      headers: JSON_HEADERS,\n      body: JSON.stringify({ value: data }),\n    });\n\n    if (!response.ok) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    const { value } = await response.json();\n\n    this.notifyChanges({ key, value, presence: 'present' });\n  }\n\n  observe$<T extends JsonValue>(\n    key: string,\n  ): Observable<StorageValueSnapshot<T>> {\n    if (!this.observables.has(key)) {\n      this.observables.set(\n        key,\n        new ObservableImpl<StorageValueSnapshot<JsonValue>>(subscriber => {\n          let signalSubscription: SignalSubscriber | undefined;\n          this.subscribers.add(subscriber);\n\n          const updateSnapshot = () => {\n            Promise.resolve()\n              .then(() => this.get(key))\n              .then(snapshot => subscriber.next(snapshot))\n              .catch(error => this.errorApi.post(error));\n          };\n\n          if (this.signalApi) {\n            signalSubscription = this.signalApi.subscribe(\n              `user-settings`,\n              (msg: UserSettingsSignal) => {\n                if (msg.key === key) {\n                  updateSnapshot();\n                }\n              },\n            );\n          }\n\n          updateSnapshot();\n\n          return () => {\n            if (signalSubscription) {\n              signalSubscription.unsubscribe();\n            }\n            this.subscribers.delete(subscriber);\n          };\n        }).filter(({ key: messageKey }) => messageKey === key),\n      );\n    }\n\n    return this.observables.get(key) as Observable<StorageValueSnapshot<T>>;\n  }\n\n  snapshot<T extends JsonValue>(key: string): StorageValueSnapshot<T> {\n    return { key, presence: 'unknown' };\n  }\n\n  private async get<T extends JsonValue>(\n    key: string,\n  ): Promise<StorageValueSnapshot<T>> {\n    if (!(await this.isSignedIn())) {\n      // This explicitly uses WebStorage, which we know is synchronous and doesn't return presence: unknown\n      return this.fallback.snapshot(key);\n    }\n\n    const fetchUrl = await this.getFetchUrl(key);\n    const response = await this.fetchApi.fetch(fetchUrl);\n\n    if (response.status === 404) {\n      return { key, presence: 'absent' };\n    }\n\n    if (!response.ok) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    try {\n      const { value: rawValue } = await response.json();\n      const value = JSON.parse(JSON.stringify(rawValue), (_key, val) => {\n        if (typeof val === 'object' && val !== null) {\n          Object.freeze(val);\n        }\n        return val;\n      });\n\n      return { key, presence: 'present', value };\n    } catch {\n      // If the value is not valid JSON, we return an unknown presence. This should never happen\n      return { key, presence: 'absent' };\n    }\n  }\n\n  private async getFetchUrl(key: string) {\n    const baseUrl = await this.discoveryApi.getBaseUrl('user-settings');\n    const encodedNamespace = encodeURIComponent(this.namespace);\n    const encodedKey = encodeURIComponent(key);\n    return `${baseUrl}/buckets/${encodedNamespace}/keys/${encodedKey}`;\n  }\n\n  private async notifyChanges<T extends JsonValue>(\n    snapshot: StorageValueSnapshot<T>,\n  ) {\n    for (const subscription of this.subscribers) {\n      try {\n        subscription.next(snapshot);\n      } catch {\n        // ignore\n      }\n    }\n  }\n\n  private async isSignedIn(): Promise<boolean> {\n    try {\n      const credentials = await this.identityApi.getCredentials();\n      return credentials?.token ? true : false;\n    } catch {\n      return false;\n    }\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UserSettingsStorage.esm.js","sources":["../../../src/apis/StorageApi/UserSettingsStorage.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { WebStorage } from '@backstage/core-app-api';\nimport {\n  DiscoveryApi,\n  ErrorApi,\n  FetchApi,\n  IdentityApi,\n  StorageApi,\n  StorageValueSnapshot,\n} from '@backstage/core-plugin-api';\nimport { ResponseError } from '@backstage/errors';\nimport { JsonValue, Observable } from '@backstage/types';\nimport { SignalApi, SignalSubscriber } from '@backstage/plugin-signals-react';\nimport ObservableImpl from 'zen-observable';\nimport {\n  MultiGetResponse,\n  UserSettingsSignal,\n} from '@backstage/plugin-user-settings-common';\nimport DataLoader from 'dataloader';\nimport { CacheMap } from './CacheMap';\n\nconst JSON_HEADERS = {\n  'Content-Type': 'application/json; charset=utf-8',\n  Accept: 'application/json',\n};\n\nconst buckets = new Map<string, UserSettingsStorage>();\n\nconst DATALOADER_CACHE_TTL_MS = 2 * 1000; // 2 seconds cache\nconst DATALOADER_WINDOW_MS = 10; // 10 ms\n\ntype DataLoaderType = DataLoader<\n  { bucket: string; key: string },\n  StorageValueSnapshot<JsonValue>,\n  string\n>;\n\n/**\n * An implementation of the storage API, that uses the user-settings backend to\n * persist the data in the DB.\n *\n * @public\n */\nexport class UserSettingsStorage implements StorageApi {\n  private subscribers = new Set<\n    ZenObservable.SubscriptionObserver<StorageValueSnapshot<JsonValue>>\n  >();\n\n  private readonly observables = new Map<\n    string,\n    Observable<StorageValueSnapshot<JsonValue>>\n  >();\n\n  private readonly namespace: string;\n  private readonly fetchApi: FetchApi;\n  private readonly discoveryApi: DiscoveryApi;\n  private readonly errorApi: ErrorApi;\n  private readonly identityApi: IdentityApi;\n  private readonly fallback: WebStorage;\n  private readonly signalApi?: SignalApi;\n  private readonly userSettingsLoader: DataLoaderType;\n\n  private constructor(\n    namespace: string,\n    fetchApi: FetchApi,\n    discoveryApi: DiscoveryApi,\n    errorApi: ErrorApi,\n    identityApi: IdentityApi,\n    fallback: WebStorage,\n    signalApi?: SignalApi,\n    userSettingsLoader?: DataLoaderType,\n  ) {\n    this.namespace = namespace;\n    this.fetchApi = fetchApi;\n    this.discoveryApi = discoveryApi;\n    this.errorApi = errorApi;\n    this.identityApi = identityApi;\n    this.fallback = fallback;\n    this.signalApi = signalApi;\n\n    this.userSettingsLoader =\n      userSettingsLoader ??\n      new DataLoader(\n        async bucketAndKeyList => this.getMulti(bucketAndKeyList),\n        {\n          name: 'UserSettingsStorage.userSettingsLoader',\n          cacheMap: new CacheMap<\n            string,\n            Promise<StorageValueSnapshot<JsonValue>>\n          >(DATALOADER_CACHE_TTL_MS),\n          cacheKeyFn: bucketAndKey => this.stringifyDataLoaderKey(bucketAndKey),\n          maxBatchSize: 100,\n          batchScheduleFn: cb => setTimeout(cb, DATALOADER_WINDOW_MS),\n        },\n      );\n  }\n\n  private stringifyDataLoaderKey({\n    bucket,\n    key,\n  }: {\n    bucket: string;\n    key: string;\n  }) {\n    return `${encodeURIComponent(bucket)}/${encodeURIComponent(key)}`;\n  }\n  private clearCacheKey(key: string) {\n    this.userSettingsLoader.clear({ bucket: this.namespace, key });\n  }\n\n  static create(options: {\n    fetchApi: FetchApi;\n    discoveryApi: DiscoveryApi;\n    errorApi: ErrorApi;\n    identityApi: IdentityApi;\n    signalApi?: SignalApi;\n    namespace?: string;\n  }): UserSettingsStorage {\n    return new UserSettingsStorage(\n      options.namespace ?? 'default',\n      options.fetchApi,\n      options.discoveryApi,\n      options.errorApi,\n      options.identityApi,\n      WebStorage.create({\n        namespace: options.namespace,\n        errorApi: options.errorApi,\n      }),\n      options.signalApi,\n    );\n  }\n\n  forBucket(name: string): StorageApi {\n    // use dot instead of slash separator to have nicer URLs\n    const bucketPath = `${this.namespace}.${name}`;\n\n    if (!buckets.has(bucketPath)) {\n      buckets.set(\n        bucketPath,\n        new UserSettingsStorage(\n          bucketPath,\n          this.fetchApi,\n          this.discoveryApi,\n          this.errorApi,\n          this.identityApi,\n          this.fallback,\n          this.signalApi,\n          this.userSettingsLoader,\n        ),\n      );\n    }\n\n    return buckets.get(bucketPath)!;\n  }\n\n  async remove(key: string): Promise<void> {\n    const fetchUrl = await this.getFetchUrl(key);\n\n    const response = await this.fetchApi.fetch(fetchUrl, {\n      method: 'DELETE',\n    });\n\n    if (!response.ok && response.status !== 404) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    this.clearCacheKey(key);\n\n    this.notifyChanges({ key, presence: 'absent' });\n  }\n\n  async set<T extends JsonValue>(key: string, data: T): Promise<void> {\n    if (!(await this.isSignedIn())) {\n      await this.fallback.set(key, data);\n      this.notifyChanges({ key, presence: 'present', value: data });\n      this.clearCacheKey(key);\n      return;\n    }\n\n    this.clearCacheKey(key);\n\n    const fetchUrl = await this.getFetchUrl(key);\n\n    const response = await this.fetchApi.fetch(fetchUrl, {\n      method: 'PUT',\n      headers: JSON_HEADERS,\n      body: JSON.stringify({ value: data }),\n    });\n\n    if (!response.ok) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    const { value } = await response.json();\n\n    this.userSettingsLoader.prime(\n      { bucket: this.namespace, key },\n      {\n        key,\n        presence: 'present',\n        value,\n      },\n    );\n\n    this.notifyChanges({ key, value, presence: 'present' });\n  }\n\n  observe$<T extends JsonValue>(\n    key: string,\n  ): Observable<StorageValueSnapshot<T>> {\n    if (!this.observables.has(key)) {\n      this.observables.set(\n        key,\n        new ObservableImpl<StorageValueSnapshot<JsonValue>>(subscriber => {\n          let signalSubscription: SignalSubscriber | undefined;\n          this.subscribers.add(subscriber);\n\n          const updateSnapshot = () => {\n            Promise.resolve()\n              .then(() =>\n                this.userSettingsLoader.load({ bucket: this.namespace, key }),\n              )\n              .then(snapshot => subscriber.next(snapshot))\n              .catch(error => this.errorApi.post(error));\n          };\n\n          if (this.signalApi) {\n            signalSubscription = this.signalApi.subscribe(\n              `user-settings`,\n              (msg: UserSettingsSignal) => {\n                if (msg.key === key) {\n                  updateSnapshot();\n                }\n              },\n            );\n          }\n\n          updateSnapshot();\n\n          return () => {\n            if (signalSubscription) {\n              signalSubscription.unsubscribe();\n            }\n            this.subscribers.delete(subscriber);\n          };\n        }).filter(({ key: messageKey }) => messageKey === key),\n      );\n    }\n\n    return this.observables.get(key) as Observable<StorageValueSnapshot<T>>;\n  }\n\n  snapshot<T extends JsonValue>(key: string): StorageValueSnapshot<T> {\n    return { key, presence: 'unknown' };\n  }\n\n  private async getMulti(\n    bucketAndKeyList: readonly { bucket: string; key: string }[],\n  ): Promise<StorageValueSnapshot<JsonValue>[]> {\n    if (bucketAndKeyList.length === 0) return [];\n\n    if (!(await this.isSignedIn())) {\n      // This explicitly uses WebStorage, which we know is synchronous and doesn't return presence: unknown\n      return bucketAndKeyList.map(bucketAndKey =>\n        this.fallback.snapshot(bucketAndKey.key),\n      );\n    }\n\n    try {\n      const baseUrl = await this.discoveryApi.getBaseUrl('user-settings');\n      const response = await this.fetchApi.fetch(`${baseUrl}/multiget`, {\n        method: 'POST',\n        headers: JSON_HEADERS,\n        body: JSON.stringify({ items: bucketAndKeyList }),\n      });\n\n      if (response.status === 404) {\n        return bucketAndKeyList.map(bucketAndKey => ({\n          key: bucketAndKey.key,\n          presence: 'absent',\n        }));\n      }\n\n      if (!response.ok) {\n        throw await ResponseError.fromResponse(response);\n      }\n\n      const { items: values } = (await response.json()) as MultiGetResponse;\n\n      return bucketAndKeyList.map(\n        ({ key }, i): StorageValueSnapshot<JsonValue> => {\n          if (!values[i]) {\n            return { key, presence: 'absent' };\n          }\n          return {\n            key,\n            presence: 'present',\n            value: JSON.parse(JSON.stringify(values[i].value), (_key, val) => {\n              if (typeof val === 'object' && val !== null) {\n                Object.freeze(val);\n              }\n              return val;\n            }),\n          };\n        },\n      );\n    } catch (e) {\n      this.errorApi.post(new Error(`Failed to fetch user settings, ${e}`));\n      return bucketAndKeyList.map(bucketAndKey => ({\n        key: bucketAndKey.key,\n        presence: 'absent',\n      }));\n    }\n  }\n\n  private async getFetchUrl(key: string) {\n    const baseUrl = await this.discoveryApi.getBaseUrl('user-settings');\n    const encodedNamespace = encodeURIComponent(this.namespace);\n    const encodedKey = encodeURIComponent(key);\n    return `${baseUrl}/buckets/${encodedNamespace}/keys/${encodedKey}`;\n  }\n\n  private async notifyChanges<T extends JsonValue>(\n    snapshot: StorageValueSnapshot<T>,\n  ) {\n    for (const subscription of this.subscribers) {\n      try {\n        subscription.next(snapshot);\n      } catch {\n        // ignore\n      }\n    }\n  }\n\n  private async isSignedIn(): Promise<boolean> {\n    try {\n      const credentials = await this.identityApi.getCredentials();\n      return credentials?.token ? true : false;\n    } catch {\n      return false;\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -23,7 +23,10 @@ declare class UserSettingsStorage implements StorageApi {
     private readonly identityApi;
     private readonly fallback;
     private readonly signalApi?;
+    private readonly userSettingsLoader;
     private constructor();
+    private stringifyDataLoaderKey;
+    private clearCacheKey;
     static create(options: {
         fetchApi: FetchApi;
         discoveryApi: DiscoveryApi;
@@ -37,7 +40,7 @@ declare class UserSettingsStorage implements StorageApi {
     set<T extends JsonValue>(key: string, data: T): Promise<void>;
     observe$<T extends JsonValue>(key: string): Observable<StorageValueSnapshot<T>>;
     snapshot<T extends JsonValue>(key: string): StorageValueSnapshot<T>;
-    private get;
+    private getMulti;
     private getFetchUrl;
     private notifyChanges;
     private isSignedIn;

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-user-settings";
-var version = "0.8.32-next.1";
+var version = "0.9.0";
 var description = "A Backstage plugin that provides a settings page";
 var backstage = {
 	role: "frontend-plugin",
@@ -68,6 +68,7 @@ var dependencies = {
 	"@material-ui/core": "^4.12.2",
 	"@material-ui/icons": "^4.9.1",
 	"@material-ui/lab": "4.0.0-alpha.61",
+	dataloader: "^2.0.0",
 	"react-use": "^17.2.4",
 	"zen-observable": "^0.10.0"
 };
@@ -84,13 +85,13 @@ var devDependencies = {
 	msw: "^1.0.0",
 	react: "^18.0.2",
 	"react-dom": "^18.0.2",
-	"react-router-dom": "^6.3.0"
+	"react-router-dom": "^6.30.2"
 };
 var peerDependencies = {
 	"@types/react": "^17.0.0 || ^18.0.0",
 	react: "^17.0.0 || ^18.0.0",
 	"react-dom": "^17.0.0 || ^18.0.0",
-	"react-router-dom": "^6.3.0"
+	"react-router-dom": "^6.30.2"
 };
 var peerDependenciesMeta = {
 	"@types/react": {

package/dist/package.json.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-user-settings",
-  "version": "0.8.32-next.1",
+  "version": "0.9.0",
   "description": "A Backstage plugin that provides a settings page",
   "backstage": {
     "role": "frontend-plugin",
@@ -67,28 +67,29 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-model": "1.7.6",
-    "@backstage/core-app-api": "1.19.5-next.0",
-    "@backstage/core-components": "0.18.7-next.1",
-    "@backstage/core-plugin-api": "1.12.3-next.0",
-    "@backstage/errors": "1.2.7",
-    "@backstage/frontend-plugin-api": "0.14.0-next.1",
-    "@backstage/plugin-catalog-react": "1.22.0-next.1",
-    "@backstage/plugin-signals-react": "0.0.19-next.0",
-    "@backstage/plugin-user-settings-common": "0.0.1",
-    "@backstage/theme": "0.7.2-next.0",
-    "@backstage/types": "1.2.2",
+    "@backstage/catalog-model": "^1.7.6",
+    "@backstage/core-app-api": "^1.19.5",
+    "@backstage/core-components": "^0.18.7",
+    "@backstage/core-plugin-api": "^1.12.3",
+    "@backstage/errors": "^1.2.7",
+    "@backstage/frontend-plugin-api": "^0.14.0",
+    "@backstage/plugin-catalog-react": "^2.0.0",
+    "@backstage/plugin-signals-react": "^0.0.19",
+    "@backstage/plugin-user-settings-common": "^0.1.0",
+    "@backstage/theme": "^0.7.2",
+    "@backstage/types": "^1.2.2",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
+    "dataloader": "^2.0.0",
     "react-use": "^17.2.4",
     "zen-observable": "^0.10.0"
   },
   "devDependencies": {
-    "@backstage/cli": "0.35.4-next.1",
-    "@backstage/dev-utils": "1.1.20-next.1",
-    "@backstage/plugin-catalog": "1.33.0-next.1",
-    "@backstage/test-utils": "1.7.15-next.1",
+    "@backstage/cli": "^0.35.4",
+    "@backstage/dev-utils": "^1.1.20",
+    "@backstage/plugin-catalog": "^1.33.0",
+    "@backstage/test-utils": "^1.7.15",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
@@ -97,13 +98,13 @@
     "msw": "^1.0.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.30.2"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.30.2"
   },
   "peerDependenciesMeta": {
     "@types/react": {