From e334a6aeda1822e104f29420b92ff0489ad15c4a Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 27 Jul 2022 14:05:55 +0300
Subject: [PATCH] Adding more control over extension preferences page title
 (#5901)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 ...tension-specific-preferences.test.tsx.snap | 55 ++++++++++---------
 ...to-extension-specific-preferences.test.tsx | 12 ++++
 .../extension-preference-model.injectable.ts  |  4 +-
 .../components/+preferences/extensions.tsx    |  9 ++-
 4 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
index 143b335c30..e0357f140f 100644
--- a/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
+++ b/src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
@@ -172,10 +172,10 @@ exports[`preferences - navigation to extension specific preferences given in pre
             <section
               id="extensions"
             >
-              <h2>
+              <h2
+                data-testid="extension-preferences-page-title"
+              >
                 Metrics tab
-                 
-                preferences
               </h2>
               <section
                 class="small"
@@ -472,10 +472,10 @@ exports[`preferences - navigation to extension specific preferences given in pre
             <section
               id="extensions"
             >
-              <h2>
+              <h2
+                data-testid="extension-preferences-page-title"
+              >
                 Metrics tab
-                 
-                preferences
               </h2>
               <section
                 class="small"
@@ -772,10 +772,10 @@ exports[`preferences - navigation to extension specific preferences given in pre
             <section
               id="extensions"
             >
-              <h2>
+              <h2
+                data-testid="extension-preferences-page-title"
+              >
                 Metrics tab
-                 
-                preferences
               </h2>
               <section
                 class="small"
@@ -1095,10 +1095,10 @@ exports[`preferences - navigation to extension specific preferences given in pre
             <section
               id="extensions"
             >
-              <h2>
-                some-test-extension-id
-                 
-                preferences
+              <h2
+                data-testid="extension-preferences-page-title"
+              >
+                some-test-extension-id preferences
               </h2>
               <section
                 class="small"
@@ -2717,10 +2717,10 @@ exports[`preferences - navigation to extension specific preferences given in pre
             <section
               id="extensions"
             >
-              <h2>
-                some-test-extension-id
-                 
-                preferences
+              <h2
+                data-testid="extension-preferences-page-title"
+              >
+                some-test-extension-id preferences
               </h2>
               <section
                 class="small"
@@ -2994,9 +2994,10 @@ exports[`preferences - navigation to extension specific preferences given in pre
               <section
                 id="extensions"
               >
-                <h2>
-                   
-                  preferences
+                <h2
+                  data-testid="extension-preferences-page-title"
+                >
+                  Extension preferences
                 </h2>
                 <div
                   class="flex items-center"
@@ -3263,10 +3264,10 @@ exports[`preferences - navigation to extension specific preferences when navigat
             <section
               id="extensions"
             >
-              <h2>
+              <h2
+                data-testid="extension-preferences-page-title"
+              >
                 Metrics tab
-                 
-                preferences
               </h2>
               <section
                 class="small"
@@ -3551,10 +3552,10 @@ exports[`preferences - navigation to extension specific preferences when navigat
             <section
               id="extensions"
             >
-              <h2>
-                extension-using-someone-else-tab-id
-                 
-                preferences
+              <h2
+                data-testid="extension-preferences-page-title"
+              >
+                extension-using-someone-else-tab-id preferences
               </h2>
               <section
                 class="small"
diff --git a/src/behaviours/preferences/navigation-to-extension-specific-preferences.test.tsx b/src/behaviours/preferences/navigation-to-extension-specific-preferences.test.tsx
index bded3769f2..876ce98004 100644
--- a/src/behaviours/preferences/navigation-to-extension-specific-preferences.test.tsx
+++ b/src/behaviours/preferences/navigation-to-extension-specific-preferences.test.tsx
@@ -225,6 +225,18 @@ describe("preferences - navigation to extension specific preferences", () => {
 
           expect(actual).not.toBeInTheDocument();
         });
+        it("shows page title", () => {
+          const pageTitle = rendered.queryByTestId("extension-preferences-page-title");
+
+          expect(pageTitle).toBeInTheDocument();
+        });
+        it("shows page title same as tab title", () => {
+          const pageTitle = rendered.queryByTestId("extension-preferences-page-title");
+          const tabs = extensionStubWithWithRegisteredTab.appPreferenceTabs;
+          const tabTitle = tabs && tabs[0].title;
+
+          expect(pageTitle?.innerHTML).toBe(tabTitle);
+        });
       });
     });
 
diff --git a/src/renderer/components/+preferences/extension-preference-model.injectable.ts b/src/renderer/components/+preferences/extension-preference-model.injectable.ts
index c46842eb8a..ee87b5dcdf 100644
--- a/src/renderer/components/+preferences/extension-preference-model.injectable.ts
+++ b/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,
       };
     });
   },
diff --git a/src/renderer/components/+preferences/extensions.tsx b/src/renderer/components/+preferences/extensions.tsx
index 94b56a2716..3b7fe7f343 100644
--- a/src/renderer/components/+preferences/extensions.tsx
+++ b/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