Add primary account description on Account Manager page

Add primary account description with a link pointing to Sync Settings.
Show management status for supervised users.

Screenshots: http://screen/8FKJx5YBtEY4X6Y,
http://screen/5EWijZQ5sCaUJMf (managed account),
http://screen/63ivfWWtMvpKn8D (child account)

Bug: 1144113
Change-Id: I15cb13ac6763882e671ac57c13bd81825b61a8c6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2549763
Commit-Queue: Anastasiia N <anastasiian@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Kush Sinha <sinhak@chromium.org>
Cr-Commit-Position: refs/heads/master@{#832305}

chrome/app/os_settings_strings.grdp

@@ -1142,6 +1142,9 @@
   <message name="IDS_SETTINGS_ACCOUNT_MANAGER_CHILD_SECOND_MESSAGE" desc="Description of the Account Manager Settings page for child users. Shown just below the link to learn more about account management.">
     Adding a school account enables easy sign-in to websites, extensions, and apps as a student while still operating under parental controls.
   </message>
+  <message name="IDS_SETTINGS_ACCOUNT_MANAGER_PRIMARY_ACCOUNT_DESCRIPTION" desc="Description of the Account Manager Settings page for primary account. Shown above primary account picture.">
+    Your apps and OS settings will sync across Chromebooks where you're signed in with this account.<ph name="LINK_BEGIN">&lt;a href="#"&gt;</ph>Sync Settings<ph name="LINK_END">&lt;/a&gt;</ph>
+  </message>
   <message name="IDS_SETTINGS_ACCOUNT_MANAGER_LIST_HEADER" desc="List header for Account List in Account Manager Settings page.">
     Accounts
   </message>
@@ -1211,6 +1214,12 @@
   <message name="IDS_SETTINGS_ACCOUNT_MANAGER_MANAGEMENT_STATUS_MANAGED_ACCOUNT" desc="Management status label for managed accounts. This will be e.g. 'Managed by google.com' for Enterprise accounts and 'Managed by Family Link' for child accounts.">
     Managed by <ph name="DOMAIN">$1<ex>google.com</ex></ph>
   </message>
+  <message name="IDS_SETTINGS_ACCOUNT_MANAGER_MANAGEMENT_STATUS" desc="Management status label for managed accounts.">
+    This account is managed by <ph name="BEGIN_LINK">&lt;a target="_blank"&gt;</ph><ph name="DOMAIN">$1<ex>google.com</ex></ph><ph name="END_LINK">&lt;/a&gt;</ph>
+  </message>
+  <message name="IDS_SETTINGS_ACCOUNT_MANAGER_MANAGEMENT_STATUS_CHILD" desc="Management status label for child accounts.">
+    This user is managed by Family Link
+  </message>
   <message name="IDS_SETTINGS_ACCOUNT_MANAGER_MANAGEMENT_PRIMARY_ACCOUNT" desc="Indicates this account is the primary account, when the primary account is a child account.">
     Primary Account
   </message>

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ACCOUNT_MANAGER_MANAGEMENT_STATUS.png.sha1

+3cc46e67d0b5717858d2e9e7090f0131bda8d615
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ACCOUNT_MANAGER_MANAGEMENT_STATUS_CHILD.png.sha1

+ff945af9a4d7096af626d1e6131cac6f73115976
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ACCOUNT_MANAGER_PRIMARY_ACCOUNT_DESCRIPTION.png.sha1

+ff945af9a4d7096af626d1e6131cac6f73115976
\ No newline at end of file

chrome/browser/resources/settings/chromeos/os_people_page/account_manager.html

@@ -26,6 +26,7 @@
       }
 
       .account-manager-description {
+        color: var(--cr-secondary-text-color);
         display: block;
         max-width: 560px;
       }
@@ -41,6 +42,7 @@
 
       .profile-icon.device-account-icon {
         --profile-icon-size: 60px;
+        margin-top: 20px;
       }
 
       .device-account-container {
@@ -152,6 +154,15 @@
         right: var(--badge-offset);
       }
 
+      .managed-message {
+        color: var(--cr-secondary-text-color);
+        justify-content: center;
+      }
+
+      .managed-message > iron-icon {
+        margin-inline-end: 5px;
+      }
+
       .management-status {
         color: var(--cr-secondary-text-color);
         overflow: hidden;
@@ -185,15 +196,30 @@
     <template is="dom-if" if="[[isAccountManagementFlowsV2Enabled_]]">
       <!-- Primary account description -->
       <div class="settings-box first">
-        <div class="start two-line">
+        <div class="start two-line account-manager-description">
           <div>
             <h2>$i18n{accountManagerUnmanagedLabel}</h2>
-            <!-- TODO(crbug.com/1144113): add primary account description -->
+            <settings-localized-link
+                localized-string=
+                  "$i18n{accountManagerPrimaryAccountDescription}"
+                on-link-clicked="goToSyncSettings_">
+            </settings-localized-link>
           </div>
         </div>
       </div>
 
-      <!-- TODO(crbug.com/1144113): add managed icon -->
+      <template is="dom-if" if="[[isDeviceAccountManaged_]]">
+        <div class="settings-box first managed-message">
+          <iron-icon icon="[[getManagedAccountTooltipIcon_(isChildUser_,
+                            isDeviceAccountManaged_)]]">
+          </iron-icon>
+          <settings-localized-link
+              localized-string=
+                "[[getManagementDescription_(isChildUser_, deviceAccount_)]]"
+              link-url="$i18nRaw{accountManagerChromeUIManagementURL}">
+          </settings-localized-link>
+        </div>
+      </template>
 
       <!-- Primary account icon, name and email -->
       <div class="device-account-container" tabIndex="0"

chrome/browser/resources/settings/chromeos/os_people_page/account_manager.js

@@ -266,6 +266,46 @@ Polymer({
     return this.i18n('accountManagerUnmanagedLabel');
   },
 
+  /**
+   * @return {string} icon
+   * @private
+   */
+  getManagedAccountTooltipIcon_() {
+    if (this.isChildUser_) {
+      return 'cr20:kite';
+    }
+    if (this.isDeviceAccountManaged_) {
+      return 'cr20:domain';
+    }
+    return '';
+  },
+
+  /**
+   * @return {string} description text
+   * @private
+   */
+  getManagementDescription_() {
+    if (this.isChildUser_) {
+      return loadTimeData.getString('accountManagerManagementDescription');
+    }
+    if (!this.deviceAccount_) {
+      return '';
+    }
+    if (!this.deviceAccount_.organization) {
+      if (this.isDeviceAccountManaged_) {
+        console.error(
+            'The device account is managed, but the organization is not set.');
+      }
+      return '';
+    }
+    // Format: 'This account is managed by
+    //          <a target="_blank" href="chrome://management">google.com</a>'.
+    // Where href will be set by <settings-localized-link>.
+    return loadTimeData.getStringF(
+        'accountManagerManagementDescription',
+        this.deviceAccount_.organization);
+  },
+
   /**
    * @param {boolean} unmigrated
    * @private
@@ -373,5 +413,18 @@ Polymer({
     this.browserProxy_.removeAccount(
         /** @type {?settings.Account} */ (this.actionMenuAccount_));
     this.closeActionMenu_();
-  }
+  },
+
+  /**
+   * @param {Event} event
+   * @private
+   */
+  goToSyncSettings_(event) {
+    event.detail.event.preventDefault();
+    if (loadTimeData.getBoolean('splitSettingsSyncEnabled')) {
+      settings.Router.getInstance().navigateTo(settings.routes.OS_SYNC);
+    } else {
+      settings.Router.getInstance().navigateTo(settings.routes.SYNC_ADVANCED);
+    }
+  },
 });

chrome/browser/ui/webui/settings/chromeos/people_section.cc

@@ -331,8 +331,11 @@ const std::vector<SearchConcept>& GetParentalSearchConcepts() {
   return *tags;
 }
 
-void AddAccountManagerPageStrings(content::WebUIDataSource* html_source) {
+void AddAccountManagerPageStrings(content::WebUIDataSource* html_source,
+                                  Profile* profile) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
+      {"accountManagerPrimaryAccountDescription",
+       IDS_SETTINGS_ACCOUNT_MANAGER_PRIMARY_ACCOUNT_DESCRIPTION},
       {"accountManagerChildDescription",
        IDS_SETTINGS_ACCOUNT_MANAGER_CHILD_DESCRIPTION},
       {"accountManagerChildFirstMessage",
@@ -376,6 +379,12 @@ void AddAccountManagerPageStrings(content::WebUIDataSource* html_source) {
 
   html_source->AddString("accountManagerLearnMoreUrl",
                          chrome::kAccountManagerLearnMoreURL);
+  html_source->AddLocalizedString(
+      "accountManagerManagementDescription",
+      profile->IsChild() ? IDS_SETTINGS_ACCOUNT_MANAGER_MANAGEMENT_STATUS_CHILD
+                         : IDS_SETTINGS_ACCOUNT_MANAGER_MANAGEMENT_STATUS);
+  html_source->AddString("accountManagerChromeUIManagementURL",
+                         base::UTF8ToUTF16(chrome::kChromeUIManagementURL));
 
   if (chromeos::features::IsAccountManagementFlowsV2Enabled()) {
     static constexpr webui::LocalizedString kLocalizedStringsV2[] = {
@@ -846,7 +855,7 @@ void PeopleSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
       "driveSuggestAvailable",
       base::FeatureList::IsEnabled(omnibox::kDocumentProvider));
 
-  AddAccountManagerPageStrings(html_source);
+  AddAccountManagerPageStrings(html_source, profile());
   KerberosAccountsHandler::AddLoadTimeKerberosStrings(
       html_source, kerberos_credentials_manager_);
   AddLockScreenPageStrings(html_source, profile()->GetPrefs());