From 8cc6efd90a9982d755aa6f306189fe7c9cfaa2f7 Mon Sep 17 00:00:00 2001
From: Jagadesh P <jagadeshjai1999@gmail.com>
Date: Sun, 15 Sep 2024 21:33:32 +0530
Subject: [PATCH] [Sync] Remove Enable/Disable switch and just use input
 element for handling custom sync url.

Also show Relauch button and Managed icon when required.
---
 app/brave_settings_strings.grdp               |   4 +-
 browser/brave_local_state_prefs.cc            |   3 -
 .../api/settings_private/brave_prefs_util.cc  |   6 +-
 .../brave_sync_browser_proxy.ts               |   4 -
 .../brave_sync_page/brave_sync_page.html      |  48 ++---
 .../brave_sync_page/brave_sync_page.ts        |  18 +-
 .../brave_sync_page/sync_url_input.html       |  69 ++++++--
 .../brave_sync_page/sync_url_input.ts         | 165 +++++++++++-------
 browser/ui/webui/brave_settings_ui.cc         |   7 +-
 ...ave_settings_localized_strings_provider.cc |   3 +-
 components/constants/pref_names.h             |   4 -
 11 files changed, 181 insertions(+), 150 deletions(-)

diff --git a/app/brave_settings_strings.grdp b/app/brave_settings_strings.grdp
index 8704b0357d6f..a16f1f95d92d 100644
--- a/app/brave_settings_strings.grdp
+++ b/app/brave_settings_strings.grdp
@@ -736,8 +736,8 @@
   <message name="IDS_SETTINGS_BRAVE_SYNC_COULD_NOT_SYNC_ACTION_LABEL" desc="Could not sync devices action label. It is displayed in the case when Brave Sync could not decrypt code words and start work">
     Could not sync Brave on your devices
   </message>
-  <message name="IDS_SETTINGS_BRAVE_CUSTOM_SYNC_URL_ENABLE_LABEL" desc="Label for setting to en/disable Custom sync url feature">
-    Enable custom sync url
+  <message name="IDS_SETTINGS_BRAVE_CUSTOM_SYNC_URL_TITLE" desc="Title for custom sync url">
+    Custom sync url
   </message>
   <message name="IDS_SETTINGS_ENTER_CUSTOM_SYNC_URL" desc="Input label for a custom sync url">
     Enter custom sync url
diff --git a/browser/brave_local_state_prefs.cc b/browser/brave_local_state_prefs.cc
index 2d964cc9c2a7..e41dd1e68c77 100644
--- a/browser/brave_local_state_prefs.cc
+++ b/browser/brave_local_state_prefs.cc
@@ -180,9 +180,6 @@ void RegisterLocalStatePrefs(PrefRegistrySimple* registry) {
   misc_metrics::GeneralBrowserUsage::RegisterPrefs(registry);
 
   playlist::PlaylistServiceFactory::RegisterLocalStatePrefs(registry);
-
-  registry->RegisterBooleanPref(kBraveCustomSyncUrlEnabled, false);
-  registry->RegisterStringPref(kBraveCustomSyncUrl, std::string());
 }
 
 }  // namespace brave
diff --git a/browser/extensions/api/settings_private/brave_prefs_util.cc b/browser/extensions/api/settings_private/brave_prefs_util.cc
index 89b01b6a6b03..253a43e3b881 100644
--- a/browser/extensions/api/settings_private/brave_prefs_util.cc
+++ b/browser/extensions/api/settings_private/brave_prefs_util.cc
@@ -14,6 +14,7 @@
 #include "brave/components/brave_rewards/common/pref_names.h"
 #include "brave/components/brave_shields/content/browser/brave_shields_util.h"
 #include "brave/components/brave_shields/core/common/pref_names.h"
+#include "brave/components/brave_sync/brave_sync_prefs.h"
 #include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "brave/components/brave_wallet/browser/pref_names.h"
 #include "brave/components/brave_wayback_machine/buildflags/buildflags.h"
@@ -227,9 +228,8 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetAllowlistedKeys() {
   (*s_brave_allowlist)[kMRUCyclingEnabled] = settings_api::PrefType::kBoolean;
 
   // Sync prefs
-  (*s_brave_allowlist)[kBraveCustomSyncUrlEnabled] =
-      settings_api::PrefType::kBoolean;
-  (*s_brave_allowlist)[kBraveCustomSyncUrl] = settings_api::PrefType::kUrl;
+  (*s_brave_allowlist)[brave_sync::kCustomSyncServiceUrl] =
+      settings_api::PrefType::kUrl;
 
   // WebTorrent pref
   (*s_brave_allowlist)[kWebTorrentEnabled] = settings_api::PrefType::kBoolean;
diff --git a/browser/resources/settings/brave_sync_page/brave_sync_browser_proxy.ts b/browser/resources/settings/brave_sync_page/brave_sync_browser_proxy.ts
index 25ee7dfcedea..f34334be5eea 100644
--- a/browser/resources/settings/brave_sync_page/brave_sync_browser_proxy.ts
+++ b/browser/resources/settings/brave_sync_page/brave_sync_browser_proxy.ts
@@ -58,10 +58,6 @@ export class BraveSyncBrowserProxy {
     return sendWithPromise('SyncGetWordsCount', syncCode);
   }
 
-  wasCustomSyncUrlEnabledAtStartup(): boolean {
-    return loadTimeData.getBoolean('customSyncUrlEnabledAtStartup');
-  }
-
   getCustomSyncUrlAtStartup(): string {
     return loadTimeData.getString('customSyncUrlAtStartup');
   }
diff --git a/browser/resources/settings/brave_sync_page/brave_sync_page.html b/browser/resources/settings/brave_sync_page/brave_sync_page.html
index cc1aebb5daa5..90d6cb92d6da 100644
--- a/browser/resources/settings/brave_sync_page/brave_sync_page.html
+++ b/browser/resources/settings/brave_sync_page/brave_sync_page.html
@@ -1,16 +1,8 @@
-<style include="settings-shared iron-flex">
-  cr-input {
-    width: 100%;
-    --cr-input-width: 50%;
-    margin-top: 10px;
-    margin-left: 20px;
-  }
-
-  cr-input::part(row-container) {
-    justify-content: normal;
-  }
-</style>
-<settings-animated-pages id="pages" section="braveSync">
+<style include="settings-shared iron-flex"></style>
+<settings-animated-pages
+  id="pages"
+  section="braveSync"
+>
   <div route-path="default">
     <cr-link-row
       id="brave-sync-setup"
@@ -21,7 +13,10 @@
     </cr-link-row>
   </div>
 
-  <template is="dom-if" route-path="/braveSync/setup">
+  <template
+    is="dom-if"
+    route-path="/braveSync/setup"
+  >
     <settings-subpage
       associated-control="[[$$('#brave-sync-setup')]]"
       page-title="[[syncLabel_]]"
@@ -32,24 +27,9 @@
   </template>
 </settings-animated-pages>
 
-<settings-toggle-button
-  id="customSyncUrlEnabled"
-  class="hr"
-  pref="{{prefs.brave.custom_sync_url_enabled}}"
-  label="$i18n{braveCustomSyncUrlEnableLabel}"
+<div class="hr"></div>
+<sync-url-input
+  id="customSyncUrl"
+  pref="{{prefs.brave_sync.sync_service_url}}"
 >
-  <template
-    is="dom-if"
-    if="[[shouldShowRestart_(prefs.brave.custom_sync_url_enabled.value, prefs.brave.custom_sync_url.value)]]"
-  >
-    <cr-button on-click="onRestartClick_" slot="more-actions">
-      $i18n{restart}
-    </cr-button>
-  </template>
-</settings-toggle-button>
-<template is="dom-if" if="[[prefs.brave.custom_sync_url_enabled.value]]">
-  <sync-url-input
-    id="customSyncUrl"
-    pref="{{prefs.brave.custom_sync_url}}"
-  ></sync-url-input>
-</template>
+</sync-url-input>
diff --git a/browser/resources/settings/brave_sync_page/brave_sync_page.ts b/browser/resources/settings/brave_sync_page/brave_sync_page.ts
index 072e130da19a..2f3110b4e7a6 100644
--- a/browser/resources/settings/brave_sync_page/brave_sync_page.ts
+++ b/browser/resources/settings/brave_sync_page/brave_sync_page.ts
@@ -21,7 +21,6 @@ import { SyncBrowserProxy, SyncBrowserProxyImpl, SyncPrefs } from '/shared/setti
 import { PrefsMixin } from '/shared/settings/prefs/prefs_mixin.js';
 
 import { BaseMixin } from '../base_mixin.js';
-import { RelaunchMixin, RestartType } from '../relaunch_mixin.js';
 import { Route, Router } from '../router.js';
 
 import { BraveSyncBrowserProxy, BraveSyncStatus } from './brave_sync_browser_proxy.js';
@@ -34,8 +33,8 @@ import { getTemplate } from './brave_sync_page.html.js';
  */
 
 const SettingsBraveSyncPageElementBase =
-  RelaunchMixin(PrefsMixin(I18nMixin(
-    WebUiListenerMixin((BaseMixin(PolymerElement))))));
+  PrefsMixin(I18nMixin(
+    WebUiListenerMixin((BaseMixin(PolymerElement)))));
 
 export class SettingsBraveSyncPageElement extends SettingsBraveSyncPageElementBase {
   static get is() {
@@ -122,19 +121,6 @@ export class SettingsBraveSyncPageElement extends SettingsBraveSyncPageElementBa
       }
     }
   }
-
-  private shouldShowRestart_(enabled: boolean, url: string): boolean {
-    const proxy = BraveSyncBrowserProxy.getInstance();
-    return enabled !== proxy.wasCustomSyncUrlEnabledAtStartup() ||
-      proxy.getCustomSyncUrlAtStartup() !== url;
-  }
-
-  private onRestartClick_(e: Event) {
-    // Prevent event from bubbling up to the toggle button.
-    e.stopPropagation();
-    this.performRestart(RestartType.RESTART);
-  }
-
 }
 
 customElements.define(
diff --git a/browser/resources/settings/brave_sync_page/sync_url_input.html b/browser/resources/settings/brave_sync_page/sync_url_input.html
index e9b565e9a4ff..b6823bc3062a 100644
--- a/browser/resources/settings/brave_sync_page/sync_url_input.html
+++ b/browser/resources/settings/brave_sync_page/sync_url_input.html
@@ -1,28 +1,63 @@
 <style>
-  cr-input {
+  :host {
+    cursor: auto;
+    display: block;
     width: 100%;
+  }
+
+  cr-input {
     --cr-input-width: 50%;
-    margin: 10px 0;
-    padding-left: 20px;
+    margin: 0 20px;
   }
 
   cr-input::part(row-container) {
     justify-content: normal;
   }
+
+  .custom-title {
+    margin: 10px 20px;
+  }
 </style>
 
 <!-- Max length of 100 KB to prevent browser from freezing. -->
-<cr-input
-  id="input"
-  value="{{value}}"
-  error-message="$i18n{notValid}"
-  placeholder="$i18n{enterCustomSyncUrl}"
-  invalid="{{invalid}}"
-  on-input="validate_"
-  maxlength="102400"
-  spellcheck="false"
-  on-keypress="onKeyPress_"
-  on-blur="validate_"
-  on-change="onChange_"
->
-</cr-input>
+<div id="syncUrlInput">
+  <p class="custom-title">$i18n{braveCustomSyncUrlTitle}</p>
+  <cr-input
+    id="input"
+    value="{{value}}"
+    error-message="$i18n{notValid}"
+    placeholder="$i18n{enterCustomSyncUrl}"
+    invalid="{{invalid}}"
+    on-input="validate_"
+    maxlength="102400"
+    spellcheck="false"
+    on-keypress="onKeyPress_"
+    on-blur="validate_"
+    on-change="onChange_"
+    disabled="[[controlDisabled_(pref.*, disabled)]]"
+  >
+    <template
+      is="dom-if"
+      if="[[hasPrefPolicyIndicator(pref.*)]]"
+    >
+      <cr-policy-pref-indicator
+        pref="[[pref]]"
+        icon-aria-label="[[label]]"
+        slot="suffix"
+      >
+      </cr-policy-pref-indicator>
+    </template>
+
+    <template
+      is="dom-if"
+      if="[[shouldShowRestart_(pref.*)]]"
+    >
+      <cr-button
+        on-click="onRestartClick_"
+        slot="suffix"
+      >
+        $i18n{restart}
+      </cr-button>
+    </template>
+  </cr-input>
+</div>
diff --git a/browser/resources/settings/brave_sync_page/sync_url_input.ts b/browser/resources/settings/brave_sync_page/sync_url_input.ts
index 7d874db90989..f337b83632e3 100644
--- a/browser/resources/settings/brave_sync_page/sync_url_input.ts
+++ b/browser/resources/settings/brave_sync_page/sync_url_input.ts
@@ -3,42 +3,51 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-
 /**
- * @fileoverview `sync-url-input` is a single-line text field that is used
- * for setting up custom sync server url. It is based on
+ * @fileoverview `sync-url-input` is a single-line text field with title
+ *  that is used for setting up custom sync server url. It is based on
  * `home-url-input`.
  */
-import 'chrome://resources/cr_elements/cr_textarea/cr_textarea.js';
-import '/shared/settings/prefs/prefs.js';
+import 'chrome://resources/cr_elements/cr_textarea/cr_textarea.js'
+import '/shared/settings/prefs/prefs.js'
+
+import type { CrInputElement } from 'chrome://resources/cr_elements/cr_input/cr_input.js'
+import type { CrPolicyPrefMixinInterface } from '/shared/settings/controls/cr_policy_pref_mixin.js'
 
-import type { CrInputElement } from 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import { assert } from 'chrome://resources/js/assert.js';
-import { PolymerElement } from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import { PrefControlMixin } from '/shared/settings/controls/pref_control_mixin.js';
-import { PrefsMixin, PrefsMixinInterface } from '/shared/settings/prefs/prefs_mixin.js';
+import { assert } from 'chrome://resources/js/assert.js'
+import { PolymerElement } from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'
+import { PrefControlMixin } from '/shared/settings/controls/pref_control_mixin.js'
+import { PrefsMixin } from '/shared/settings/prefs/prefs_mixin.js'
+import { CrPolicyPrefMixin } from '/shared/settings/controls/cr_policy_pref_mixin.js'
+import {
+  RelaunchMixin,
+  RelaunchMixinInterface,
+  RestartType
+} from '../relaunch_mixin.js'
 
-import { BraveSyncBrowserProxy } from './brave_sync_browser_proxy.js';
+import { BraveSyncBrowserProxy } from './brave_sync_browser_proxy.js'
 
-import { getTemplate } from './sync_url_input.html.js';
+import { getTemplate } from './sync_url_input.html.js'
 
 export interface SyncUrlInputElement {
   $: {
-    input: CrInputElement,
-  };
+    input: CrInputElement
+  }
 }
-const SyncUrlInputElementBase =
-  PrefsMixin(PrefControlMixin(PolymerElement)) as
-  { new(): PolymerElement & PrefsMixinInterface };
 
+const SyncUrlInputElementBase = RelaunchMixin(
+  PrefsMixin(PrefControlMixin(CrPolicyPrefMixin(PolymerElement)))
+) as {
+  new (): PolymerElement & CrPolicyPrefMixinInterface & RelaunchMixinInterface
+}
 
 export class SyncUrlInputElement extends SyncUrlInputElementBase {
   static get is() {
-    return 'sync-url-input';
+    return 'sync-url-input'
   }
 
   static get template() {
-    return getTemplate();
+    return getTemplate()
   }
 
   static get properties() {
@@ -53,37 +62,35 @@ export class SyncUrlInputElement extends SyncUrlInputElementBase {
        */
       pref: { observer: 'prefChanged_' },
 
-
       /**
        * Indicates whether the input is invalid.s
        */
-      invalid: {type: Boolean, value: false},
-    };
-  }
+      invalid: { type: Boolean, value: false },
 
-  value: string;
-  pref: chrome.settingsPrivate.PrefObject<string> | undefined;
-  invalid: boolean;
-
-  private browserProxy_: BraveSyncBrowserProxy =
-    BraveSyncBrowserProxy.getInstance();
-
-  private onKeyPress_(e: KeyboardEvent) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      this.validate_();
+      /**
+       * Whether the control is disabled, for example due to an extension
+       * managing the preference.
+       */
+      disabled: {
+        type: Boolean,
+        value: false
+      }
     }
   }
 
-  private validate_() {
-    if (this.value === '') {
-      this.invalid = false;
-      return;
-    }
+  value: string
+  pref: chrome.settingsPrivate.PrefObject<string> | undefined
+  invalid: boolean
+  disabled: boolean
 
-    this.browserProxy_.validateCustomSyncUrl(this.value).then(isValid => {
-      this.invalid = !isValid;
-    });
+  private browserProxy_: BraveSyncBrowserProxy =
+    BraveSyncBrowserProxy.getInstance()
+
+  /**
+   * Focus the custom input field.
+   */
+  override focus() {
+    this.$.input.focusInput()
   }
 
   /**
@@ -91,45 +98,83 @@ export class SyncUrlInputElement extends SyncUrlInputElementBase {
    */
   private prefChanged_() {
     if (!this.pref) {
-      return;
+      return
     }
 
-    this.setInputValueFromPref_();
+    this.setInputValueFromPref_()
+  }
+
+  private onRestartClick_(e: Event) {
+    // Prevent event from bubbling up to the toggle button.
+    e.stopPropagation()
+    this.performRestart(RestartType.RESTART)
+  }
+
+  private validate_() {
+    if (this.value === '') {
+      this.invalid = false
+      return
+    }
+
+    this.browserProxy_.validateCustomSyncUrl(this.value).then((isValid) => {
+      this.invalid = !isValid
+    })
   }
 
   private setInputValueFromPref_() {
-    assert(this.pref!.type === chrome.settingsPrivate.PrefType.URL);
-    this.value = this.pref!.value;
+    assert(this.pref!.type === chrome.settingsPrivate.PrefType.URL)
+    this.value = this.pref!.value
   }
 
   private onChange_() {
     if (this.invalid) {
-      this.resetValue_();
-      return;
+      this.resetValue_()
+      return
     }
 
-    assert(this.pref!.type === chrome.settingsPrivate.PrefType.URL);
-    this.set('pref.value', this.value);
+    assert(this.pref!.type === chrome.settingsPrivate.PrefType.URL)
+    this.set('pref.value', this.value)
   }
 
   private resetValue_() {
-    this.invalid = false;
-    this.setInputValueFromPref_();
-    this.$.input.blur();
+    this.invalid = false
+    this.setInputValueFromPref_()
+    this.$.input.blur()
   }
 
-  /**
-   * Focus the custom input field.
-   */
-  override focus() {
-    this.$.input.focusInput();
+  private onKeyPress_(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      this.validate_()
+      this.onChange_()
+    }
+  }
+
+  private isPrefEnforced_(): boolean {
+    return (
+      !!this.pref &&
+      this.pref.enforcement === chrome.settingsPrivate.Enforcement.ENFORCED
+    )
+  }
+
+  private shouldShowRestart_(): boolean {
+    const proxy = BraveSyncBrowserProxy.getInstance()
+    return !!this.pref && proxy.getCustomSyncUrlAtStartup() !== this.pref.value
+  }
+
+  private controlDisabled_(): boolean {
+    return (
+      this.disabled ||
+      this.isPrefEnforced_() ||
+      !!(this.pref && this.pref.userControlDisabled)
+    )
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'sync-url-input': SyncUrlInputElement;
+    'sync-url-input': SyncUrlInputElement
   }
 }
 
-customElements.define(SyncUrlInputElement.is, SyncUrlInputElement);
+customElements.define(SyncUrlInputElement.is, SyncUrlInputElement)
diff --git a/browser/ui/webui/brave_settings_ui.cc b/browser/ui/webui/brave_settings_ui.cc
index 8af11b9f8970..d89ca580d69b 100644
--- a/browser/ui/webui/brave_settings_ui.cc
+++ b/browser/ui/webui/brave_settings_ui.cc
@@ -28,6 +28,7 @@
 #include "brave/browser/ui/webui/settings/brave_wallet_handler.h"
 #include "brave/browser/ui/webui/settings/default_brave_shields_handler.h"
 #include "brave/components/ai_chat/core/common/buildflags/buildflags.h"
+#include "brave/components/brave_sync/brave_sync_prefs.h"
 #include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "brave/components/brave_vpn/common/features.h"
 #include "brave/components/brave_wallet/common/features.h"
@@ -217,13 +218,9 @@ void BraveSettingsUI::AddResources(content::WebUIDataSource* html_source,
   html_source->AddBoolean(
       "isSharedPinnedTabsEnabled",
       base::FeatureList::IsEnabled(tabs::features::kBraveSharedPinnedTabs));
-
-  html_source->AddBoolean(
-      "customSyncUrlEnabledAtStartup",
-      g_browser_process->local_state()->GetBoolean(kBraveCustomSyncUrlEnabled));
   html_source->AddString(
       "customSyncUrlAtStartup",
-      g_browser_process->local_state()->GetString(kBraveCustomSyncUrl));
+      profile->GetPrefs()->GetString(brave_sync::kCustomSyncServiceUrl));
 }
 
 // static
diff --git a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
index e54cf8fa82e5..f650db218ef1 100644
--- a/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
+++ b/browser/ui/webui/settings/brave_settings_localized_strings_provider.cc
@@ -319,8 +319,7 @@ void BraveAddCommonStrings(content::WebUIDataSource* html_source,
        IDS_SETTINGS_BRAVE_SYNC_MANAGE_ACTION_LABEL},
       {"braveSyncCouldNotSyncActionLabel",
        IDS_SETTINGS_BRAVE_SYNC_COULD_NOT_SYNC_ACTION_LABEL},
-      {"braveCustomSyncUrlEnableLabel",
-       IDS_SETTINGS_BRAVE_CUSTOM_SYNC_URL_ENABLE_LABEL},
+      {"braveCustomSyncUrlTitle", IDS_SETTINGS_BRAVE_CUSTOM_SYNC_URL_TITLE},
       {"enterCustomSyncUrl", IDS_SETTINGS_ENTER_CUSTOM_SYNC_URL},
       {"braveSyncWordCount", IDS_SETTINGS_BRAVE_SYNC_WORD_COUNT},
       {"braveSyncCopied", IDS_SETTINGS_BRAVE_SYNC_COPIED_TEXT},
diff --git a/components/constants/pref_names.h b/components/constants/pref_names.h
index b18469bda540..051eee42df44 100644
--- a/components/constants/pref_names.h
+++ b/components/constants/pref_names.h
@@ -162,8 +162,4 @@ inline constexpr char kBraveSuggestedSiteSuggestionsEnabled[] =
     "brave.brave_suggested_site_suggestions_enabled";
 #endif
 
-inline constexpr char kBraveCustomSyncUrlEnabled[] =
-    "brave.custom_sync_url_enabled";
-inline constexpr char kBraveCustomSyncUrl[] = "brave.custom_sync_url";
-
 #endif  // BRAVE_COMPONENTS_CONSTANTS_PREF_NAMES_H_