network_nameservers: Introduce enum for nameservers type

Instead of using string constants, introduce an enum for the selected
nameservers type.
This is less error prone and easier to read.

Bug: 1108922
Change-Id: I05cc167f42467af8a6b78cb688b8239e8a896c67
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2537678
Commit-Queue: Pavol Marko <pmarko@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828017}

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

@@ -67,18 +67,20 @@
           on-selected-changed="onTypeChange_"
           aria-label="[[i18n('networkNameservers')]]">
         <!-- Automatic nameservers -->
-        <cr-radio-button name="automatic" disabled="[[!canChangeConfigType_]]">
+        <cr-radio-button name="[[nameserversTypeEnum_.AUTOMATIC]]"
+          disabled="[[!canChangeConfigType_]]">
           [[i18n('networkNameserversAutomatic')]]
         </cr-radio-button>
         <template is="dom-if" if="[[showNameservers_(nameserversType_,
-            'automatic', nameservers_)]]">
+            nameserversTypeEnum_.AUTOMATIC, nameservers_)]]">
           <div class="nameservers" changeable$="[[canChangeConfigType_]]">
             [[getNameserversString_(nameservers_)]]
           </div>
         </template>
 
         <!-- Google nameservers -->
-        <cr-radio-button name="google" disabled="[[!canChangeConfigType_]]">
+        <cr-radio-button name="[[nameserversTypeEnum_.GOOGLE]]"
+          disabled="[[!canChangeConfigType_]]">
           [[i18n('networkNameserversGoogle')]]
           <template is="dom-if"
               if="[[i18nExists('networkGoogleNameserversLearnMoreUrl')]]">
@@ -89,18 +91,19 @@
           </template>
         </cr-radio-button>
         <template is="dom-if" if="[[showNameservers_(nameserversType_,
-            'google', nameservers_)]]">
+            nameserversTypeEnum_.GOOGLE, nameservers_)]]">
           <div class="nameservers" changeable>
             [[getNameserversString_(nameservers_)]]
           </div>
         </template>
 
         <!-- Custom nameservers -->
-        <cr-radio-button name="custom" disabled="[[!canChangeConfigType_]]">
+        <cr-radio-button name="[[nameserversTypeEnum_.CUSTOM]]"
+          disabled="[[!canChangeConfigType_]]">
           [[i18n('networkNameserversCustom')]]
         </cr-radio-button>
         <template is="dom-if" if="[[showNameservers_(nameserversType_,
-            'custom')]]">
+            nameserversTypeEnum_.CUSTOM)]]">
           <div class="property-box single-column two-line">
             <template is="dom-repeat" items="[[nameservers_]]">
               <cr-input id="nameserver[[index]]" value="[[item]]"

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

@@ -5,6 +5,17 @@
 /**
  * @fileoverview Polymer element for displaying network nameserver options.
  */
+
+/**
+ * UI configuration options for nameservers.
+ * @enum {string}
+ */
+const NameserversType = {
+  AUTOMATIC: 'automatic',
+  CUSTOM: 'custom',
+  GOOGLE: 'google'
+};
+
 Polymer({
   is: 'network-nameservers',
 
@@ -30,11 +41,21 @@ Polymer({
 
     /**
      * The selected nameserver type.
-     * @private
+     * @private {!NameserversType}
      */
     nameserversType_: {
       type: String,
-      value: 'automatic',
+      value: NameserversType.AUTOMATIC,
+    },
+
+    /**
+     * Enum values for |nameserversType_|.
+     * @private {NameserversType}
+     */
+    nameserversTypeEnum_: {
+      readOnly: true,
+      type: Object,
+      value: NameserversType,
     },
 
     /** @private */
@@ -66,7 +87,7 @@ Polymer({
   MAX_NAMESERVERS: 4,
 
   /**
-   * Saved nameservers when switching to 'automatic'.
+   * Saved nameservers when switching to NameserversType.AUTOMATIC.
    * @private {!Array<string>}
    */
   savedNameservers_: [],
@@ -132,30 +153,31 @@ Polymer({
     // Update the 'nameserversType' property.
     const configType =
         OncMojo.getActiveValue(this.managedProperties.nameServersConfigType);
+    /** @type {NameserversType} */
     let type;
     if (configType === 'Static') {
       if (this.isGoogleNameservers_(nameservers)) {
-        type = 'google';
+        type = NameserversType.GOOGLE;
         nameservers = this.GOOGLE_NAMESERVERS;  // Use consistent order.
       } else {
-        type = 'custom';
+        type = NameserversType.CUSTOM;
       }
     } else {
-      type = 'automatic';
+      type = NameserversType.AUTOMATIC;
       nameservers = this.clearEmptyNameServers_(nameservers);
     }
     this.setNameservers_(type, nameservers, false /* send */);
   },
 
   /**
-   * @param {string} nameserversType
+   * @param {!NameserversType} nameserversType
    * @param {!Array<string>} nameservers
    * @param {boolean} sendNameservers If true, send the nameservers once they
    *     have been set in the UI.
    * @private
    */
   setNameservers_(nameserversType, nameservers, sendNameservers) {
-    if (nameserversType === 'custom') {
+    if (nameserversType === NameserversType.CUSTOM) {
       // Add empty entries for unset custom nameservers.
       for (let i = nameservers.length; i < this.MAX_NAMESERVERS; ++i) {
         nameservers[i] = this.EMPTY_NAMESERVER;
@@ -205,7 +227,7 @@ Polymer({
     if (!managedProperties) {
       return false;
     }
-    if (nameserversType !== 'custom') {
+    if (nameserversType !== NameserversType.CUSTOM) {
       return false;
     }
     if (this.isNetworkPolicyEnforced(managedProperties.nameServersConfigType)) {
@@ -221,8 +243,8 @@ Polymer({
   },
 
   /**
-   * @param {string} nameserversType
-   * @param {string} type
+   * @param {NameserversType} nameserversType
+   * @param {NameserversType} type
    * @param {!Array<string>} nameservers
    * @return {boolean}
    * @private
@@ -231,7 +253,7 @@ Polymer({
     if (nameserversType !== type) {
       return false;
     }
-    return type === 'custom' || nameservers.length > 0;
+    return type === NameserversType.CUSTOM || nameservers.length > 0;
   },
 
   /**
@@ -251,7 +273,7 @@ Polymer({
   onTypeChange_() {
     const type = this.$$('#nameserverType').selected;
     this.nameserversType_ = type;
-    if (type === 'custom') {
+    if (type === NameserversType.CUSTOM) {
       // Restore the saved nameservers.
       this.setNameservers_(type, this.savedNameservers_, true /* send */);
       return;
@@ -264,9 +286,10 @@ Polymer({
    * @private
    */
   onValueChange_() {
-    if (this.nameserversType_ !== 'custom') {
+    if (this.nameserversType_ !== NameserversType.CUSTOM) {
       // If a user inputs Google nameservers in the custom nameservers fields,
-      // |nameserversType| will change to 'google' so don't send the values.
+      // |nameserversType| will change to NameserversType.GOOGLE so don't send
+      // the values.
       return;
     }
     this.sendNameServers_();
@@ -279,7 +302,7 @@ Polymer({
   sendNameServers_() {
     const type = this.nameserversType_;
 
-    if (type === 'custom') {
+    if (type === NameserversType.CUSTOM) {
       const nameservers = new Array(this.MAX_NAMESERVERS);
       for (let i = 0; i < this.MAX_NAMESERVERS; ++i) {
         const nameserverInput = this.$$('#nameserver' + i);
@@ -291,13 +314,13 @@ Polymer({
         field: 'nameServers',
         value: nameservers,
       });
-    } else if (type === 'google') {
+    } else if (type === NameserversType.GOOGLE) {
       this.nameservers_ = this.GOOGLE_NAMESERVERS;
       this.fire('nameservers-change', {
         field: 'nameServers',
         value: this.GOOGLE_NAMESERVERS,
       });
-    } else {  // type === automatic
+    } else {  // type === NameserversType.AUTOMATIC
       // If not connected, properties will clear. Otherwise they may or may not
       // change so leave them as-is.
       if (!OncMojo.connectionStateIsConnected(