Fix incorrect behaviour of settings UI for IP address and name servers.

* Block IP address and name servers checkboxes and input fields when
corresponding settings are enforced by policy and not recommended.
* Correctly show policy indicators for these settings.

Bug: 847429
Change-Id: I3db8ad751ebe44dff487cc01721019738f72c4e5
Reviewed-on: https://chromium-review.googlesource.com/c/1335487
Commit-Queue: Zakhar Voit <voit@google.com>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Alexander Hendrich <hendrich@chromium.org>
Cr-Commit-Position: refs/heads/master@{#619929}

ui/webui/resources/cr_components/chromeos/network/network_ip_config.html

@@ -2,18 +2,28 @@
 
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="network_property_list.html">
 <link rel="import" href="network_shared_css.html">
 
 <dom-module id="network-ip-config">
   <template>
-    <style include="network-shared iron-flex"></style>
+    <style include="network-shared iron-flex">
+      cr-toggle {
+        margin-inline-start: var(--settings-control-label-spacing);
+      }
+    </style>
     <div class="property-box">
       <div id="autoIPConfigLabel" class="start">
         [[i18n('networkIPConfigAuto')]]
       </div>
-      <cr-toggle checked="{{automatic_}}" disabled="[[!editable]]"
+      <cr-policy-indicator indicator-type="[[getPolicyIndicatorType_(
+          networkProperties, 'IPAddressConfigType')]]">
+      </cr-policy-indicator>
+      <cr-toggle checked="{{automatic_}}"
+          disabled="[[!canChangeIPConfigType_(editable, networkProperties)]]"
           on-change="onAutomaticChange_"
           aria-labelledby="autoIPConfigLabel">
       </cr-toggle>

ui/webui/resources/cr_components/chromeos/network/network_ip_config.js

@@ -10,7 +10,7 @@
 Polymer({
   is: 'network-ip-config',
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, CrPolicyNetworkBehavior],
 
   properties: {
     /**
@@ -110,6 +110,28 @@ Polymer({
     }
   },
 
+  /**
+   * Checks whether IP address config type can be changed.
+   * @param {boolean} editable
+   * @param {!CrOnc.NetworkProperties} networkProperties
+   * @return {boolean} true only if 'IPAddressConfigType' as well as all other
+   * IP address config related fields are editable.
+   * @private
+   */
+  canChangeIPConfigType_: function(editable, networkProperties) {
+    if (!editable) {
+      return false;
+    }
+    const controlledProps = [
+      'IPAddressConfigType', 'StaticIPConfig.IPAddress',
+      'StaticIPConfig.RoutingPrefix', 'StaticIPConfig.Gateway'
+    ];
+
+    return controlledProps.every(
+        setting =>
+            !this.isNetworkPolicyPathEnforced(networkProperties, setting));
+  },
+
   /** @private */
   onAutomaticChange_: function() {
     if (!this.automatic_) {

ui/webui/resources/cr_components/chromeos/network/network_nameservers.html

@@ -4,6 +4,8 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
@@ -32,6 +34,10 @@
         margin-inline-start: 38px;
       }
 
+      .nameservers:not([changeable]) {
+        opacity: var(--cr-disabled-opacity);
+      }
+
       #radioGroupDiv {
         align-items: center;
         display: block;
@@ -39,28 +45,38 @@
         padding-inline-start: var(--cr-section-padding);
       }
 
+      cr-policy-indicator {
+        /* Aligns with the other policy indicators. */
+        margin-inline-end: calc(var(--settings-control-label-spacing) + 34px);
+      }
     </style>
 
     <div class="property-box">
+      <div class="start">
         [[i18n('networkNameservers')]]
       </div>
-
+      <cr-policy-indicator indicator-type="[[getPolicyIndicatorType_(
+          networkProperties, 'NameServersConfigType')]]">
+      </cr-policy-indicator>
+    </div>
     <div id="radioGroupDiv">
       <cr-radio-group id="nameserverType" class="layout vertical"
           selected="[[nameserversType_]]"
           on-selected-changed="onTypeChange_"
           aria-label="[[i18n('networkNameservers')]]">
         <!-- Automatic nameservers -->
-        <cr-radio-button name="automatic">
+        <cr-radio-button name="automatic" disabled="[[!canChangeConfigType_]]">
           [[i18n('networkNameserversAutomatic')]]
         </cr-radio-button>
         <template is="dom-if" if="[[showNameservers_(nameserversType_,
             'automatic', nameservers_)]]">
-          <div class="nameservers">[[getNameserversString_(nameservers_)]]</div>
+          <div class="nameservers" changeable$="[[canChangeConfigType_]]">
+            [[getNameserversString_(nameservers_)]]
+          </div>
         </template>
 
         <!-- Google nameservers -->
-        <cr-radio-button name="google">
+        <cr-radio-button name="google" disabled="[[!canChangeConfigType_]]">
           [[i18n('networkNameserversGoogle')]]
           <template is="dom-if"
               if="[[i18nExists('networkGoogleNameserversLearnMoreUrl')]]">
@@ -72,11 +88,13 @@
         </cr-radio-button>
         <template is="dom-if" if="[[showNameservers_(nameserversType_,
             'google', nameservers_)]]">
-          <div class="nameservers">[[getNameserversString_(nameservers_)]]</div>
+          <div class$="nameservers">
+            [[getNameserversString_(nameservers_)]]
+          </div>
         </template>
 
         <!-- Custom nameservers -->
-        <cr-radio-button name="custom">
+        <cr-radio-button name="custom" disabled="[[!canChangeConfigType_]]">
           [[i18n('networkNameserversCustom')]]
         </cr-radio-button>
         <template is="dom-if" if="[[showNameservers_(nameserversType_,
@@ -85,7 +103,8 @@
             <template is="dom-repeat" items="[[nameservers_]]">
               <cr-input id="nameserver[[index]]" value="[[item]]"
                   on-change="onValueChange_"
-                  disabled="[[!canEdit_(editable, nameserversType_)]]">
+                  disabled="[[!canEditCustomNameServers_(editable,
+                      nameserversType_, networkProperties)]]">
               </cr-input>
             </template>
           </div>

ui/webui/resources/cr_components/chromeos/network/network_nameservers.js

@@ -8,7 +8,7 @@
 Polymer({
   is: 'network-nameservers',
 
-  behaviors: [I18nBehavior],
+  behaviors: [I18nBehavior, CrPolicyNetworkBehavior],
 
   properties: {
     /**
@@ -54,6 +54,12 @@ Polymer({
         return this.i18nAdvanced(
             'networkNameserversGoogle', {substitutions: [], tags: ['a']});
       }
+    },
+
+    /** @private */
+    canChangeConfigType_: {
+      type: Boolean,
+      computed: 'computeCanChangeConfigType_(editable, networkProperties)',
     }
   },
 
@@ -132,14 +138,38 @@ Polymer({
     });
   },
 
+  /**
+   * @param {boolean} editable
+   * @param {!CrOnc.NetworkProperties} networkProperties
+   * @return {boolean} True if the nameservers config type type can be changed.
+   * @private
+   */
+  computeCanChangeConfigType_: function(editable, networkProperties) {
+    if (!editable) {
+      return false;
+    }
+
+    return !this.isNetworkPolicyPathEnforced(
+               networkProperties, 'NameServersConfigType') &&
+        !this.isNetworkPolicyPathEnforced(
+            networkProperties, 'StaticIPConfig.NameServers');
+  },
+
   /**
    * @param {boolean} editable
    * @param {string} nameserversType
+   * @param {!CrOnc.NetworkProperties} networkProperties
    * @return {boolean} True if the nameservers are editable.
    * @private
    */
-  canEdit_: function(editable, nameserversType) {
-    return editable && nameserversType == 'custom';
+  canEditCustomNameServers_: function(
+      editable, nameserversType, networkProperties) {
+    return editable && nameserversType == 'custom' &&
+        !this.isNetworkPolicyEnforced(
+            networkProperties.NameServersConfigType) &&
+        !!networkProperties.StaticIPConfig &&
+        !this.isNetworkPolicyEnforced(
+            networkProperties.StaticIPConfig.NameServers);
   },
 
   /**

ui/webui/resources/cr_elements/policy/cr_policy_network_behavior.js

@@ -121,4 +121,88 @@ const CrPolicyNetworkBehavior = {
     }
     return CrPolicyIndicatorType.NONE;
   },
+
+  /**
+   * @param {Object} dict A managed ONC dictionary.
+   * @param {string} path A path to a setting inside |dict|.
+   * @return {!CrOnc.ManagedProperty|undefined} The value of the setting at
+   * |path|.
+   * @private
+   */
+  getSettingAtPath_: function(dict, path) {
+    const keys = path.split('.');
+    for (let i = 0; i < keys.length; ++i) {
+      const key = keys[i];
+      if (typeof dict !== 'object' || !(key in dict)) {
+        return undefined;
+      }
+      dict = dict[key];
+    }
+    return dict;
+  },
+
+  /**
+   * Get managed property at the given path. If the property is not policy
+   * managed, return 'undefined'. If the property's value is 'undefined' return
+   * a non-editable policy managed 'CrOnc.ManagedProperty' object.
+   * @param {!CrOnc.NetworkProperties} networkProperties
+   * @param {string} path
+   * @return {!CrOnc.ManagedProperty|undefined}
+   * @private
+   */
+  getManagedSettingAtPath_: function(networkProperties, path) {
+    if (!this.isPolicySource(networkProperties.Source)) {
+      return undefined;
+    }
+    const setting = this.getSettingAtPath_(networkProperties, path);
+    if (setting) {
+      return setting;
+    }
+    // If setting is not defined, return a non-editable managed property with
+    // 'undefined' value enforced by 'networkProperties.Source'.
+    return {
+      'Effective': networkProperties.Source,
+      'DeviceEditable': false,
+      'UserEditable': false,
+      'UserPolicy': undefined,
+      'DevicePolicy': undefined
+    };
+  },
+
+  /**
+   * @param {!CrOnc.NetworkProperties} networkProperties
+   * @param {string} path A path to a setting inside |networkProperties|.
+   * @return {boolean} True if the setting at |path| is managed by policy (e.g.
+   * 'StaticIPConfig.NameServers').
+   */
+  isNetworkPolicyPathManaged: function(networkProperties, path) {
+    return this.isNetworkPolicyControlled(
+        this.getManagedSettingAtPath_(networkProperties, path));
+  },
+
+  /**
+   * @param {!CrOnc.NetworkProperties} networkProperties
+   * @param {string} path A path to a setting inside |networkProperties|.
+   * @return {boolean} True if the setting at |path| is enforced by policy (e.g.
+   * 'StaticIPConfig.NameServers').
+   */
+  isNetworkPolicyPathEnforced: function(networkProperties, path) {
+    return this.isNetworkPolicyEnforced(
+        this.getManagedSettingAtPath_(networkProperties, path));
+  },
+
+  /**
+   * Get policy indicator type for the setting at |path|.
+   * @param {CrOnc.NetworkProperties} networkProperties
+   * @param {string} path
+   * @return {CrPolicyIndicatorType}
+   */
+  getPolicyIndicatorType_: function(networkProperties, path) {
+    if (!this.isNetworkPolicyPathManaged(networkProperties, path)) {
+      return CrPolicyIndicatorType.NONE;
+    }
+    return networkProperties.Source == CrOnc.Source.DEVICE_POLICY ?
+        CrPolicyIndicatorType.DEVICE_POLICY :
+        CrPolicyIndicatorType.USER_POLICY;
+  },
 };