Adding more control over extension preferences page title (#5901)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+preferences/extension-preference-model.injectable.ts

@@ -21,10 +21,12 @@ const extensionPreferencesModelInjectable = getInjectable({
       const { extensionId, tabId } = pathParameters.get();
       const targetExtension = extensions.get().find((extension) => extension.sanitizedExtensionId === extensionId);
       const targetAppTab = targetExtension?.appPreferenceTabs.find(tab => tab.id === tabId);
+      const preferencePageTitle = targetAppTab?.title || `${targetExtension?.manifest.name || "Extension"} preferences`;
 
       return {
-        extensionName: targetAppTab?.title ?? targetExtension?.manifest.name,
+        extensionName: targetExtension?.manifest.name,
         preferenceItems: getExtensionPreferenceItems(targetExtension, tabId),
+        preferencePageTitle,
       };
     });
   },

src/renderer/components/+preferences/extensions.tsx

@@ -16,19 +16,18 @@ interface Dependencies {
   model: IComputedValue<{
     preferenceItems: RegisteredAppPreference[];
     extensionName?: string;
+    preferencePageTitle?: string;
   }>;
 }
 
 const NonInjectedExtensions = ({ model }: Dependencies) => {
-  const { extensionName, preferenceItems } = model.get();
+  const { extensionName, preferenceItems, preferencePageTitle } = model.get();
 
   return (
     <Preferences data-testid="extension-preferences-page">
       <section id="extensions">
-        <h2>
-          {extensionName}
-          {" "}
-          preferences
+        <h2 data-testid="extension-preferences-page-title">
+          {preferencePageTitle}
         </h2>
         {!extensionName && (
           <div