Keep the user's API keys in one per-user file, not in per-channel settings (BL-16820)

src/BloomBrowserUI/bookEdit/aiImageEditor/aiImageEditorOverlay.ts

@@ -32,6 +32,7 @@
 import {
     post,
     postJson,
+    postString,
     trackChangePicture,
     trackEvent,
 } from "../../utils/bloomApi";
@@ -116,10 +117,11 @@ export function openAiImageEditor(target: IAiImageEditorTarget): void {
                 metadata?: Record<string, unknown> | null;
             }>;
             apiKey?: string | null;
-            // Playground/demo context: the AI Image Editor must disable its
-            // "set OpenRouter API key" UI. Rides through the `...launchData`
-            // spread below into the AI Image Editor's init payload.
-            demoOnly?: boolean;
+            // Set when the subscription does not cover AI image editing: the AI
+            // Image Editor opens to be looked at, with every run that would reach
+            // OpenRouter disabled. Rides through the `...launchData` spread below
+            // into the AI Image Editor's init payload.
+            playgroundMode?: boolean;
         };
         const hostWindow = window as Window & {
             __bloomAiImageEditorCleanup?: () => void;
@@ -634,12 +636,10 @@ export function openAiImageEditor(target: IAiImageEditorTarget): void {
                     // Bloom owns the OpenRouter API key. A key the user pastes into the
                     // AI Image Editor is handed up here so Bloom persists it per-user (and
                     // supplies it on the next launch). A null apiKey clears the stored key.
-                    postJson(
-                        "aiImageEditor/saveCredentials?session=" +
-                            encodeURIComponent(launchData.sessionToken),
-                        {
-                            apiKey: data.payload?.apiKey ?? null,
-                        },
+                    // The name must match ServiceKeyStore.kOpenRouterName.
+                    postString(
+                        "serviceKeys/key?name=OR",
+                        data.payload?.apiKey ?? "",
                     );
                     break;
             }

src/BloomBrowserUI/package.json

@@ -145,7 +145,7 @@
         "@types/react-transition-group": "4.4.1",
         "@use-it/event-listener": "0.1.7",
         "axios": "0.21.1",
-        "bloom-ai-image-tools": "github:BloomBooks/bloom-ai-image-tools#dist-v0.1.7",
+        "bloom-ai-image-tools": "github:BloomBooks/bloom-ai-image-tools#dist-v0.1.13",
         "bloom-image-gallery": "github:BloomBooks/bloom-image-gallery#e376463bcd21b1558750570b63269a2e133b46c0",
         "bloom-player": "2.20.2",
         "calculate-aspect-ratio": "0.1.3",

src/BloomBrowserUI/react_components/image-gallery/ImageGalleryDialog.tsx

@@ -5,18 +5,20 @@ import type {
     IProviderKeysV1,
     ISearchReport,
 } from "bloom-image-gallery";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import {
     BloomDialog,
     DialogTitle,
 } from "../../react_components/BloomDialog/BloomDialog";
 import {
     getBloomApiPrefix,
     getAsync,
+    postJson,
     postJsonAsync,
     postDataWithConfigAsync,
     trackEvent,
 } from "../../utils/bloomApi";
+import { useMountEffect } from "../../utils/useMountEffect";
 import { kBloomBlue } from "../../bloomMaterialUITheme";
 import BloomMessageBoxSupport from "../../utils/bloomMessageBoxSupport";
 import { getEditablePageBundleExports } from "../../bookEdit/js/workspaceFrames";
@@ -38,8 +40,9 @@ const ImageGalleryDialog: React.FunctionComponent<{
     searchLang: string;
 }> = (props) => {
     const [open, setOpen] = useState(true);
-    // Keys are loaded from durable Bloom settings before the gallery is rendered,
-    // so providers (e.g. Pixabay) receive their initial API key in their constructor.
+    // Keys are loaded from Bloom's per-user service key store before the gallery is
+    // rendered, so providers (e.g. Pixabay) receive their initial API key in their
+    // constructor.
     const [providerKeys, setProviderKeys] = useState<
         IProviderKeysV1 | undefined
     >(undefined);
@@ -61,25 +64,21 @@ const ImageGalleryDialog: React.FunctionComponent<{
     // Exactly one "Image Chooser Closed" event per dialog session.
     const closeReportedRef = useRef(false);
 
-    // useEffect justified: this is a one-time async fetch that must run after mount
+    // A mount effect is justified: this is a one-time async fetch that must run after mount
     // so the component can render before the network round-trip completes.
-    // There are no dependencies to react to; [] is correct.
-    useEffect(() => {
-        getAsync("app/userSetting?settingName=ImageGalleryProviderKeys")
+    useMountEffect(() => {
+        getAsync("serviceKeys/keys?prefix=imageGallery.")
             .then((r) => {
-                const json = r?.data?.settingValue as string;
-                if (json) {
-                    try {
-                        const keys = JSON.parse(json) as IProviderKeysV1;
-                        setProviderKeys(keys);
-                        pixabayKeyPresentRef.current = !!keys.pixabay;
-                    } catch {
-                        // ignore malformed stored value
-                    }
+                const keys = r?.data as IProviderKeysV1;
+                // Bloom replies with the format version plus one property per provider the
+                // user has a key for, so anything past the version means there is a key.
+                if (keys && Object.keys(keys).length > 1) {
+                    setProviderKeys(keys);
+                    pixabayKeyPresentRef.current = !!keys.pixabay;
                 }
             })
             .finally(() => setKeysLoaded(true));
-    }, []);
+    });
 
     // Searches are counted, not reported one by one: how many a visit took and which sources it
     // tried are what the close event needs, and a per-query event adds nothing on top of them.
@@ -259,10 +258,10 @@ const ImageGalleryDialog: React.FunctionComponent<{
                             // key supplied while the chooser is open is reflected in what this
                             // visit reports.
                             pixabayKeyPresentRef.current = !!keys.pixabay;
-                            postJsonAsync("app/userSetting", {
-                                settingName: "ImageGalleryProviderKeys",
-                                settingValue: JSON.stringify(keys),
-                            });
+                            postJson(
+                                "serviceKeys/keys?prefix=imageGallery.",
+                                keys,
+                            );
                         }}
                         onLanguageChange={(lang) =>
                             postJsonAsync("app/userSetting", {

src/BloomExe/ApplicationContainer.cs

@@ -83,6 +83,7 @@ public ApplicationContainer()
                         typeof(CollectionChooserApi),
                         typeof(I18NApi),
                         typeof(ProgressDialogApi),
+                        typeof(ServiceKeysApi),
                     }.Contains(t)
                 );
 
@@ -131,6 +132,9 @@ public ApplicationContainer()
             _container
                 .Resolve<ProgressDialogApi>()
                 .RegisterWithApiHandler(server.ApiHandler);
+            // The user's service API keys belong to the Windows user, not to a collection, so
+            // these endpoints live here rather than in ProjectContext.
+            _container.Resolve<ServiceKeysApi>().RegisterWithApiHandler(server.ApiHandler);
             server.ApiHandler.RecordApplicationLevelHandlers();
         }
 

src/BloomExe/Properties/Settings.settings

@@ -26,9 +26,6 @@
     <Setting Name="ImageHandler" Provider="SIL.Settings.CrossPlatformSettingsProvider" Type="System.String" Scope="User">
       <Value Profile="(Default)">http</Value>
     </Setting>
-    <Setting Name="ImageGalleryProviderKeys" Provider="SIL.Settings.CrossPlatformSettingsProvider" Type="System.String" Scope="User">
-      <Value Profile="(Default)" />
-    </Setting>
     <Setting Name="ShowSendReceive" Provider="SIL.Settings.CrossPlatformSettingsProvider" Type="System.Boolean" Scope="User">
       <Value Profile="(Default)">False</Value>
     </Setting>
@@ -125,9 +122,6 @@
     <Setting Name="ExportImportFileFolder" Type="System.String" Scope="User">
       <Value Profile="(Default)" />
     </Setting>
-    <Setting Name="OpenRouterApiKey" Provider="SIL.Settings.CrossPlatformSettingsProvider" Type="System.String" Scope="User">
-      <Value Profile="(Default)" />
-    </Setting>
     <Setting Name="CollectionTabSplitterSizes" Provider="SIL.Settings.CrossPlatformSettingsProvider" Type="System.String" Scope="User">
       <Value Profile="(Default)" />
     </Setting>