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

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

@@ -5,7 +5,7 @@ import type {
     IProviderKeysV1,
     ISearchReport,
 } from "bloom-image-gallery";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import {
     BloomDialog,
     DialogTitle,
@@ -14,9 +14,11 @@ import {
     getBloomApiPrefix,
     getAsync,
     postJsonAsync,
+    postString,
     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,7 +40,7 @@ const ImageGalleryDialog: React.FunctionComponent<{
     searchLang: string;
 }> = (props) => {
     const [open, setOpen] = useState(true);
-    // Keys are loaded from durable Bloom settings before the gallery is rendered,
+    // Keys are loaded from the per-user 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
@@ -61,25 +63,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("imageGallery/providerKeys")
             .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 +257,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),
-                            });
+                            postString(
+                                "imageGallery/providerKeys",
+                                JSON.stringify(keys),
+                            );
                         }}
                         onLanguageChange={(lang) =>
                             postJsonAsync("app/userSetting", {

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>
@@ -122,9 +119,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>