[CrOS MultiDevice] Reflect policy prohibition in Settings.

This CL shows a policy indicator and a disabled toggle when the suite
or a specific feature (on the subpage) is prohibited by policy.

Note that some unrealistic cases are not handled. This includes:

1) suite is prohibited but the mode (a.k.a. host status) is something
other than "no eligible hosts"
2) the user is in the subpage but the suite is prohibited by policy.

Screenshots:

Suite prohibited by policy (main Settings UI page):
http://screen/EbYef2RFFrf

Individual feature prohibited by policy (subpage):
http://screen/D3iqHQCW4B3


Bug: 870127
Change-Id: Iebeed37255e4a3dffb4f1b6376acfe5a9c26cc2d
Reviewed-on: https://chromium-review.googlesource.com/1208900Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Jeremy Klein <jlklein@chromium.org>
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589303}

chrome/browser/resources/settings/multidevice_page/multidevice_feature_behavior.js

@@ -35,6 +35,26 @@ const MultiDeviceFeatureBehaviorImpl = {
         settings.MultiDeviceFeatureState.ENABLED_BY_USER;
   },
 
+  /**
+   * Whether the gatekeeper pref for the whole Better Together feature suite is
+   * allowed by policy.
+   * @return {boolean}
+   */
+  isSuiteAllowedByPolicy: function() {
+    return this.pageContentData.betterTogetherState !==
+        settings.MultiDeviceFeatureState.PROHIBITED_BY_POLICY;
+  },
+
+  /**
+   * Whether an individual feature is allowed by policy.
+   * @param {!settings.MultiDeviceFeature} feature
+   * @return {boolean}
+   */
+  isFeatureAllowedByPolicy: function(feature) {
+    return this.getFeatureState(feature) !==
+        settings.MultiDeviceFeatureState.PROHIBITED_BY_POLICY;
+  },
+
   /**
    * @param {!settings.MultiDeviceFeature} feature
    * @return {boolean}

chrome/browser/resources/settings/multidevice_page/multidevice_feature_item.html

@@ -24,11 +24,16 @@
       iron-icon {
         padding: 2px;
       }
+
+      cr-policy-indicator {
+        padding: 0 var(--cr-controlled-by-spacing);
+      }
     </style>
     <div id="card"
         class="settings-box two-line"
         on-click="handleItemClick_"
-        actionable$="[[hasSubpageClickHandler_(subpageRoute)]]">
+        actionable$="[[hasSubpageClickHandler_(
+            subpageRoute, pageContentData, feature)]]">
       <iron-icon icon="[[getIconName(feature)]]"></iron-icon>
       <div id="item-text-container" class="middle">
         [[getFeatureName(feature)]]
@@ -37,13 +42,21 @@
             inner-h-t-m-l="[[getFeatureSummaryHtml(feature)]]">
         </div>
       </div>
-      <template is="dom-if" if="[[hasSubpageClickHandler_(subpageRoute)]]">
+      <template is="dom-if"
+          if="[[hasSubpageClickHandler_(
+              subpageRoute, pageContentData, feature)]]"
+          restamp>
         <paper-icon-button-light class="subpage-arrow">
           <button aria-label="[[getFeatureName(feature)]]"
               aria-describedby="featureSecondary"></button>
         </paper-icon-button-light>
         <div class="separator"></div>
       </template>
+      <template is="dom-if"
+          if="[[!isFeatureAllowedByPolicy(feature, pageContentData)]]"
+          restamp>
+        <cr-policy-indicator indicator-type="userPolicy"></cr-policy-indicator>
+      </template>
       <slot name="feature-controller">
         <!-- This settings-multidevice-feature-toggle is the default controller.
         If an element with slot="feature-controller" is attached, it will

chrome/browser/resources/settings/multidevice_page/multidevice_feature_item.js

@@ -35,12 +35,12 @@ Polymer({
    * @private
    */
   hasSubpageClickHandler_: function() {
-    return !!this.subpageRoute;
+    return !!this.subpageRoute && this.isFeatureAllowedByPolicy(this.feature);
   },
 
   /** @private */
   handleItemClick_: function(event) {
-    if (!this.subpageRoute)
+    if (!this.hasSubpageClickHandler_())
       return;
 
     // We do not navigate away if the click was on a link.

chrome/browser/resources/settings/multidevice_page/multidevice_page.html

@@ -22,7 +22,11 @@
 
 <dom-module id="settings-multidevice-page">
   <template>
-    <style include="settings-shared"></style>
+    <style include="settings-shared">
+      cr-policy-indicator {
+        padding: 0 var(--cr-controlled-by-spacing);
+      }
+    </style>
     <settings-animated-pages id="pages" section="multidevice"
         focus-config="[[focusConfig_]]">
       <neon-animatable route-path="default">
@@ -42,6 +46,16 @@
                 inner-h-t-m-l="[[getSubLabelInnerHtml_(pageContentData)]]">
             </div>
           </div>
+          <template is="dom-if"
+              if="[[!isSuiteAllowedByPolicy(pageContentData)]]"
+              restamp>
+            <cr-policy-indicator indicator-type="userPolicy">
+            </cr-policy-indicator>
+            <settings-multidevice-feature-toggle
+                feature="[[MultiDeviceFeature.BETTER_TOGETHER_SUITE]]"
+                page-content-data="[[pageContentData]]">
+            </settings-multidevice-feature-toggle>
+          </template>
           <template is="dom-if"
               if="[[shouldShowSeparatorAndSubpageArrow_(pageContentData)]]"
               restamp>
@@ -83,7 +97,6 @@
         </settings-subpage>
       </template>
     </settings-animated-pages>
-
     <template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
       <settings-password-prompt-dialog
           id="passwordPrompt" on-close="onPasswordPromptDialogClose_"

chrome/browser/resources/settings/multidevice_page/multidevice_page.js

@@ -94,6 +94,8 @@ Polymer({
    * @private
    */
   getSubLabelInnerHtml_: function() {
+    if (!this.isSuiteAllowedByPolicy())
+      return this.i18nAdvanced('multideviceSetupSummary');
     switch (this.pageContentData.mode) {
       case settings.MultiDeviceSettingsMode.NO_ELIGIBLE_HOSTS:
         return this.i18nAdvanced('multideviceNoHostText');
@@ -177,6 +179,9 @@ Polymer({
 
   /** @private */
   handleItemClick_: function() {
+    if (!this.isHostSet())
+      return;
+
     settings.navigateTo(settings.routes.MULTIDEVICE_FEATURES);
   },
 

chrome/test/data/webui/settings/multidevice_page_tests.js

@@ -48,6 +48,12 @@ suite('Multidevice', function() {
     Polymer.dom.flush();
   }
 
+  function setSuiteState(newState) {
+    multidevicePage.pageContentData = Object.assign(
+        {}, multidevicePage.pageContentData, {betterTogetherState: newState});
+    Polymer.dom.flush();
+  }
+
   suiteSetup(function() {
     ALL_MODES = Object.values(settings.MultiDeviceSettingsMode);
   });
@@ -144,4 +150,15 @@ suite('Multidevice', function() {
     // Button should be disabled because UI is waiting on server.
     assertTrue(verificationButton.disabled);
   });
+
+  test('policy prohibited suite shows policy indicator', function() {
+    setPageContentData(settings.MultiDeviceSettingsMode.NO_ELIGIBLE_HOSTS);
+    assertFalse(!!multidevicePage.$$('cr-policy-indicator'));
+    // Prohibit suite by policy.
+    setSuiteState(settings.MultiDeviceFeatureState.PROHIBITED_BY_POLICY);
+    assertTrue(!!multidevicePage.$$('cr-policy-indicator'));
+    // Reallow suite.
+    setSuiteState(settings.MultiDeviceFeatureState.DISABLED_BY_USER);
+    assertFalse(!!multidevicePage.$$('cr-policy-indicator'));
+  });
 });