Merge pull request #623 from Jigsaw-Code/fortuna-cleanup-1

Merge fortuna-cleanup-1 into master

src/server_manager/ui_components/app-root.html

@@ -532,126 +532,125 @@
   </template>
   <script>
     const TOS_ACK_LOCAL_STORAGE_KEY = "tos-ack";
-    Polymer({
-      is: "app-root",
-      behaviors: [Polymer.AppLocalizeBehavior],
-      properties: {
-        LANGUAGES_AVAILABLE: {
-          type: Object,
-          readonly: true,
-          value: {
-            am: {id: "am", dir: "ltr"},
-            ar: {id: "ar", dir: "rtl"},
-            bg: {id: "bg", dir: "ltr"},
-            ca: {id: "ca", dir: "ltr"},
-            cs: {id: "cs", dir: "ltr"},
-            da: {id: "da", dir: "ltr"},
-            de: {id: "de", dir: "ltr"},
-            el: {id: "el", dir: "ltr"},
-            en: {id: "en", dir: "ltr"},
-            "es-419": {id: "es-419", dir: "ltr"},
-            fa: {id: "fa", dir: "rtl"},
-            fi: {id: "fi", dir: "ltr"},
-            fil: {id: "fil", dir: "ltr"},
-            fr: {id: "fr", dir: "ltr"},
-            he: {id: "he", dir: "rtl"},
-            hi: {id: "hi", dir: "ltr"},
-            hr: {id: "hr", dir: "ltr"},
-            hu: {id: "hu", dir: "ltr"},
-            id: {id: "id", dir: "ltr"},
-            it: {id: "it", dir: "ltr"},
-            ja: {id: "ja", dir: "ltr"},
-            ko: {id: "ko", dir: "ltr"},
-            km: {id: "km", dir: "ltr"},
-            lt: {id: "lt", dir: "ltr"},
-            lv: {id: "lv", dir: "ltr"},
-            nl: {id: "nl", dir: "ltr"},
-            no: {id: "no", dir: "ltr"},
-            pl: {id: "pl", dir: "ltr"},
-            "pt-BR": {id: "pt-BR", dir: "ltr"},
-            ro: {id: "ro", dir: "ltr"},
-            ru: {id: "ru", dir: "ltr"},
-            sk: {id: "sk", dir: "ltr"},
-            sl: {id: "sl", dir: "ltr"},
-            sr: {id: "sr", dir: "ltr"},
-            "sr-Latn": {id: "sr-Latn", dir: "ltr"},
-            sv: {id: "sv", dir: "ltr"},
-            th: {id: "th", dir: "ltr"},
-            tr: {id: "tr", dir: "ltr"},
-            uk: {id: "uk", dir: "ltr"},
-            ur: {id: "ur", dir: "rtl"},
-            vi: {id: "vi", dir: "ltr"},
-            zh: {id: "zh", dir: "ltr"},
-            "zh-CN": {id: "zh-CN", dir: "ltr"},
-            "zh-TW": {id: "zh-TW", dir: "ltr"},
+
+    class AppRoot extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element) {
+      static get is() {
+        return "app-root";
+      }
+
+      static get properties() {
+        return {
+          LANGUAGES_AVAILABLE: {
+            type: Object,
+            readonly: true,
+            value: {
+              am: {id: "am", dir: "ltr"},
+              ar: {id: "ar", dir: "rtl"},
+              bg: {id: "bg", dir: "ltr"},
+              ca: {id: "ca", dir: "ltr"},
+              cs: {id: "cs", dir: "ltr"},
+              da: {id: "da", dir: "ltr"},
+              de: {id: "de", dir: "ltr"},
+              el: {id: "el", dir: "ltr"},
+              en: {id: "en", dir: "ltr"},
+              "es-419": {id: "es-419", dir: "ltr"},
+              fa: {id: "fa", dir: "rtl"},
+              fi: {id: "fi", dir: "ltr"},
+              fil: {id: "fil", dir: "ltr"},
+              fr: {id: "fr", dir: "ltr"},
+              he: {id: "he", dir: "rtl"},
+              hi: {id: "hi", dir: "ltr"},
+              hr: {id: "hr", dir: "ltr"},
+              hu: {id: "hu", dir: "ltr"},
+              id: {id: "id", dir: "ltr"},
+              it: {id: "it", dir: "ltr"},
+              ja: {id: "ja", dir: "ltr"},
+              ko: {id: "ko", dir: "ltr"},
+              km: {id: "km", dir: "ltr"},
+              lt: {id: "lt", dir: "ltr"},
+              lv: {id: "lv", dir: "ltr"},
+              nl: {id: "nl", dir: "ltr"},
+              no: {id: "no", dir: "ltr"},
+              pl: {id: "pl", dir: "ltr"},
+              "pt-BR": {id: "pt-BR", dir: "ltr"},
+              ro: {id: "ro", dir: "ltr"},
+              ru: {id: "ru", dir: "ltr"},
+              sk: {id: "sk", dir: "ltr"},
+              sl: {id: "sl", dir: "ltr"},
+              sr: {id: "sr", dir: "ltr"},
+              "sr-Latn": {id: "sr-Latn", dir: "ltr"},
+              sv: {id: "sv", dir: "ltr"},
+              th: {id: "th", dir: "ltr"},
+              tr: {id: "tr", dir: "ltr"},
+              uk: {id: "uk", dir: "ltr"},
+              ur: {id: "ur", dir: "rtl"},
+              vi: {id: "vi", dir: "ltr"},
+              zh: {id: "zh", dir: "ltr"},
+              "zh-CN": {id: "zh-CN", dir: "ltr"},
+              "zh-TW": {id: "zh-TW", dir: "ltr"},
+            },
           },
-        },
-        DEFAULT_LANGUAGE: {
-          type: String,
-          readonly: true,
-          value: "en",
-        },
-        useKeyIfMissing: {
-          type: Boolean,
-          value: true,
-        },
-        language: {
-          type: String,
-          readonly: true,
-          computed: "_computeLanguage(LANGUAGES_AVAILABLE, DEFAULT_LANGUAGE)",
-        },
-        serverList: {
-          type: Array,
-          value: [],
-        },
-        selectedServer: {
-          type: Object, // DisplayServer in display_server.ts
-          value: undefined,
-        },
-        hasManualServers: {
-          type: Boolean,
-          computed: "_computeHasManualServers(serverList.*)",
-        },
-        adminEmail: {
-          type: String,
-          value: "",
-        },
-        isSignedInToDigitalOcean: {
-          type: Boolean,
-          computed: "_computeIsSignedInToDigitalOcean(adminEmail)",
-        },
-        outlineVersion: String,
-        userAcceptedTos: {
-          type: Boolean,
-          // Get notified when the user clicks the OK button in the ToS view
-          observer: "_userAcceptedTosChanged",
-        },
-        hasAcceptedTos: {
-          type: Boolean,
-          computed: "_computeHasAcceptedTermsOfService(userAcceptedTos)",
-        },
-        currentPage: {
-          type: String,
-          value: "intro",
-        },
-        shouldShowSideBar: {
-          type: Boolean,
-          value: false,
-        },
-        sideBarMarginClass: {
-          type: String,
-          computed: "_computeSideBarMarginClass(shouldShowSideBar)",
-        },
-      },
-      listeners: {
-        RegionSelected: "handleRegionSelected",
-        MetricsChoiceSelected: "handleMetricsChoiceSelected",
-        SetUpGenericCloudProviderRequested: "handleSetUpGenericCloudProviderRequested",
-        SetUpAwsRequested: "handleSetUpAwsRequested",
-        SetUpGcpRequested: "handleSetUpGcpRequested",
-        ManualServerEntryCancelled: "handleManualCancelled",
-      },
-      ready: function() {
+          DEFAULT_LANGUAGE: {
+            type: String,
+            readonly: true,
+            value: "en",
+          },
+          useKeyIfMissing: {
+            type: Boolean,
+            value: true,
+          },
+          language: {
+            type: String,
+            readonly: true,
+            computed: "_computeLanguage(LANGUAGES_AVAILABLE, DEFAULT_LANGUAGE)",
+          },
+          serverList: {
+            type: Array,
+            value: [],
+          },
+          selectedServer: {
+            type: Object, // DisplayServer in display_server.ts
+            value: undefined,
+          },
+          hasManualServers: {
+            type: Boolean,
+            computed: "_computeHasManualServers(serverList.*)",
+          },
+          adminEmail: {
+            type: String,
+            value: "",
+          },
+          isSignedInToDigitalOcean: {
+            type: Boolean,
+            computed: "_computeIsSignedInToDigitalOcean(adminEmail)",
+          },
+          outlineVersion: String,
+          userAcceptedTos: {
+            type: Boolean,
+            // Get notified when the user clicks the OK button in the ToS view
+            observer: "_userAcceptedTosChanged",
+          },
+          hasAcceptedTos: {
+            type: Boolean,
+            computed: "_computeHasAcceptedTermsOfService(userAcceptedTos)",
+          },
+          currentPage: {
+            type: String,
+            value: "intro",
+          },
+          shouldShowSideBar: {
+            type: Boolean,
+            value: false,
+          },
+          sideBarMarginClass: {
+            type: String,
+            computed: "_computeSideBarMarginClass(shouldShowSideBar)",
+          },
+        };
+      }
+
+      ready() {
+        super.ready();
         const messagesUrl = `/messages/${this.language}.json`;
         this.loadResources(messagesUrl, this.language);
         const languageProperties = this.LANGUAGES_AVAILABLE[this.language];
@@ -660,80 +659,103 @@
           this.$.appDrawer.align = "right";
           this.$.sideBar.align = "right";
         }
-      },
-      showIntro: function() {
+        this.addEventListener("RegionSelected", this.handleRegionSelected);
+        this.addEventListener("SetUpGenericCloudProviderRequested", this.handleSetUpGenericCloudProviderRequested);
+        this.addEventListener("SetUpAwsRequested", this.handleSetUpAwsRequested);
+        this.addEventListener("SetUpGcpRequested", this.handleSetUpGcpRequested);
+        this.addEventListener("ManualServerEntryCancelled", this.handleManualCancelled);
+      }
+
+      showIntro() {
         this.maybeCloseDrawer();
         this.selectedServer = undefined;
         this.currentPage = "intro";
-      },
-      getDigitalOceanOauthFlow: function(onCancel) {
+      }
+
+      getDigitalOceanOauthFlow(onCancel) {
         const oauthFlow = this.$.digitalOceanOauth;
         oauthFlow.onCancel = onCancel;
         return oauthFlow;
-      },
-      showDigitalOceanOauthFlow: function() {
+      }
+
+      showDigitalOceanOauthFlow() {
         this.currentPage = "digitalOceanOauth";
-      },
-      getAndShowDigitalOceanOauthFlow: function(onCancel) {
+      }
+
+      getAndShowDigitalOceanOauthFlow(onCancel) {
         this.currentPage = "digitalOceanOauth";
         const oauthFlow = this.getDigitalOceanOauthFlow(onCancel);
         oauthFlow.showConnectAccount();
         return oauthFlow;
-      },
-      getAndShowRegionPicker: function() {
+      }
+
+      getAndShowRegionPicker() {
         this.currentPage = "regionPicker";
         this.$.regionPicker.init();
         return this.$.regionPicker;
-      },
-      getManualServerEntry: function() {
+      }
+
+      getManualServerEntry() {
         return this.$.manualEntry;
-      },
-      showProgress: function(serverName, showCancelButton) {
+      }
+
+      showProgress(serverName, showCancelButton) {
         this.currentPage = "serverProgressStep";
         this.$.serverProgressStep.serverName = serverName;
         this.$.serverProgressStep.showCancelButton = showCancelButton;
         this.$.serverProgressStep.start();
-      },
-      showServerView: function() {
+      }
+
+      showServerView() {
         this.$.serverProgressStep.stop();
         this.currentPage = "serverView";
-      },
-      getServerView: function(displayServerId) {
+      }
+
+      getServerView(displayServerId) {
         if (!displayServerId) {
           return null;
         }
         const selectedServerId = this._base64Encode(displayServerId);
         return this.$.serverView.querySelector(`#serverView-${selectedServerId}`);
-      },
-      handleRegionSelected: function(e) {
+      }
+
+      handleRegionSelected(e) {
         this.fire("SetUpServerRequested", {
           regionId: this.$.regionPicker.getSelectedRegionId(),
         });
-      },
-      handleSetUpGenericCloudProviderRequested: function() {
+      }
+
+      handleSetUpGenericCloudProviderRequested() {
         this.handleManualServerSelected("generic");
-      },
-      handleSetUpAwsRequested: function() {
+      }
+
+      handleSetUpAwsRequested() {
         this.handleManualServerSelected("aws");
-      },
-      handleSetUpGcpRequested: function() {
+      }
+
+      handleSetUpGcpRequested() {
         this.handleManualServerSelected("gcp");
-      },
-      handleManualServerSelected: function(cloudProvider) {
+      }
+
+      handleManualServerSelected(cloudProvider) {
         this.$.manualEntry.clear();
         this.$.manualEntry.cloudProvider = cloudProvider;
         this.currentPage = "manualEntry";
-      },
-      handleManualCancelled: function() {
+      }
+
+      handleManualCancelled() {
         this.currentPage = "intro";
-      },
-      showError: function(errorMsg) {
+      }
+
+      showError(errorMsg) {
         this.showToast(errorMsg, Infinity);
-      },
-      showNotification: function(message, durationMs = 3000) {
+      }
+
+      showNotification(message, durationMs = 3000) {
         this.showToast(message, durationMs);
-      },
-      showToast: function(message, duration) {
+      }
+
+      showToast(message, duration) {
         const toast = this.$.toast;
         toast.close();
         // Defer in order to trigger the toast animation, otherwise the
@@ -745,13 +767,15 @@
             noOverlap: true,
           });
         }, 0);
-      },
-      closeError: function() {
+      }
+
+      closeError() {
         this.$.toast.close();
-      },
+      }
+
       // cb is a function which accepts a single boolean which is true iff
       // the user chose to retry the failing operation.
-      showConnectivityDialog: function(cb) {
+      showConnectivityDialog(cb) {
         const dialogTitle = this.localize("error-connectivity-title");
         const dialogText = this.localize("error-connectivity");
         this.showModalDialog(dialogTitle, dialogText, [this.localize("cancel"), this.localize("retry")]).then(
@@ -759,16 +783,18 @@
             cb(clickedButtonIndex === 1); // pass true if user clicked retry
           }
         );
-      },
-      getConfirmation: function(title, text, confirmButtonText, continueFunc) {
+      }
+
+      getConfirmation(title, text, confirmButtonText, continueFunc) {
         this.showModalDialog(title, text, [this.localize("cancel"), confirmButtonText]).then(clickedButtonIndex => {
           if (clickedButtonIndex === 1) {
             // user clicked to confirm.
             continueFunc();
           }
         });
-      },
-      showManualServerError: function(errorTitle, errorText) {
+      }
+
+      showManualServerError(errorTitle, errorText) {
         this.showModalDialog(errorTitle, errorText, [this.localize("cancel"), this.localize("retry")]).then(
           clickedButtonIndex => {
             if (clickedButtonIndex == 1) {
@@ -778,22 +804,26 @@
             }
           }
         );
-      },
-      _computeIsSignedInToDigitalOcean: function(adminEmail) {
+      }
+      _computeIsSignedInToDigitalOcean(adminEmail) {
         return Boolean(adminEmail);
-      },
-      _computeHasManualServers: function(serverList) {
+      }
+
+      _computeHasManualServers(serverList) {
         return this.serverList.filter(server => !server.isManaged).length > 0;
-      },
-      _userAcceptedTosChanged: function(userAcceptedTos) {
+      }
+
+      _userAcceptedTosChanged(userAcceptedTos) {
         if (userAcceptedTos) {
           window.localStorage[TOS_ACK_LOCAL_STORAGE_KEY] = Date.now();
         }
-      },
-      _computeHasAcceptedTermsOfService: function(userAcceptedTos) {
+      }
+
+      _computeHasAcceptedTermsOfService(userAcceptedTos) {
         return userAcceptedTos || !!window.localStorage[TOS_ACK_LOCAL_STORAGE_KEY];
-      },
-      _toggleAppDrawer: function() {
+      }
+
+      _toggleAppDrawer() {
         const drawerNarrow = this.$.drawerLayout.narrow;
         const forceNarrow = this.$.drawerLayout.forceNarrow;
         if (drawerNarrow) {
@@ -807,28 +837,35 @@
           // collapses the drawer. Conversely, reverting force narrow expands the drawer.
           this.$.drawerLayout.forceNarrow = !forceNarrow;
         }
-      },
-      maybeCloseDrawer: function() {
+      }
+
+      maybeCloseDrawer() {
         if (this.$.drawerLayout.narrow || this.$.drawerLayout.forceNarrow) {
           this.$.appDrawer.close();
         }
-      },
-      submitFeedbackTapped: function() {
+      }
+
+      submitFeedbackTapped() {
         this.$.feedbackDialog.open();
-      },
-      aboutTapped: function() {
+      }
+
+      aboutTapped() {
         this.$.aboutDialog.open();
-      },
-      signOutTapped: function() {
+      }
+
+      signOutTapped() {
         this.fire("SignOutRequested");
-      },
-      openManualInstallFeedback: function(prepopulatedMessage) {
+      }
+
+      openManualInstallFeedback(prepopulatedMessage) {
         this.$.feedbackDialog.open(prepopulatedMessage, true);
-      },
-      openShareDialog: function(accessKey, s3Url) {
+      }
+
+      openShareDialog(accessKey, s3Url) {
         this.$.shareDialog.open(accessKey, s3Url);
-      },
-      openGetConnectedDialog: function(inviteUrl) {
+      }
+
+      openGetConnectedDialog(inviteUrl) {
         const dialog = this.$.getConnectedDialog;
         if (dialog.children.length > 1) {
           return; // The iframe is already loading.
@@ -843,24 +880,29 @@
         };
         iframe.src = inviteUrl;
         dialog.insertBefore(iframe, dialog.children[0]);
-      },
-      closeGetConnectedDialog: function() {
+      }
+
+      closeGetConnectedDialog() {
         const dialog = this.$.getConnectedDialog;
         dialog.close();
         const oldIframe = dialog.children[0];
         dialog.removeChild(oldIframe);
-      },
-      showMetricsDialogForNewServer: function() {
+      }
+
+      showMetricsDialogForNewServer() {
         this.$.metricsDialog.showMetricsOptInDialog();
-      },
+      }
+
       // Returns a Promise which fulfills with the index of the button clicked.
-      showModalDialog: function(title, text, buttons) {
+      showModalDialog(title, text, buttons) {
         return this.$.modalDialog.open(title, text, buttons);
-      },
-      closeModalDialog: function(title, text, buttons) {
+      }
+
+      closeModalDialog(title, text, buttons) {
         return this.$.modalDialog.close();
-      },
-      showLicensesTapped: function() {
+      }
+
+      showLicensesTapped() {
         var xhr = new XMLHttpRequest();
         xhr.onload = () => {
           this.$.licensesText.innerText = xhr.responseText;
@@ -871,8 +913,9 @@
         };
         xhr.open("GET", "/ui_components/licenses/licenses.txt", true);
         xhr.send();
-      },
-      _computeShouldShowSideBar: function() {
+      }
+
+      _computeShouldShowSideBar() {
         const drawerNarrow = this.$.drawerLayout.narrow;
         const drawerOpened = this.$.appDrawer.opened;
         if (drawerOpened && drawerNarrow) {
@@ -880,17 +923,21 @@
         } else {
           this.shouldShowSideBar = drawerNarrow;
         }
-      },
-      _computeSideBarMarginClass: function(shouldShowSideBar) {
+      }
+
+      _computeSideBarMarginClass(shouldShowSideBar) {
         return shouldShowSideBar ? "side-bar-margin" : "";
-      },
-      _isServerManaged: function(server) {
+      }
+
+      _isServerManaged(server) {
         return server.isManaged;
-      },
-      _isServerManual: function(server) {
+      }
+
+      _isServerManual(server) {
         return !server.isManaged;
-      },
-      _sortServersByName: function(a, b) {
+      }
+
+      _sortServersByName(a, b) {
         const aName = a.name.toUpperCase();
         const bName = b.name.toUpperCase();
         if (aName < bName) {
@@ -899,8 +946,9 @@
           return 1;
         }
         return 0;
-      },
-      _computeServerClasses: function(selectedServer, server) {
+      }
+
+      _computeServerClasses(selectedServer, server) {
         let serverClasses = [];
         if (this._isServerSelected(selectedServer, server)) {
           serverClasses.push("selected");
@@ -909,30 +957,36 @@
           serverClasses.push("syncing");
         }
         return serverClasses.join(" ");
-      },
-      _computeServerImage: function(selectedServer, server) {
+      }
+
+      _computeServerImage(selectedServer, server) {
         if (this._isServerSelected(selectedServer, server)) {
           return "server-icon-selected.png";
         }
         return "server-icon.png";
-      },
-      _isServerSelected: function(selectedServer, server) {
+      }
+
+      _isServerSelected(selectedServer, server) {
         return !!selectedServer && selectedServer.id === server.id;
-      },
-      _showServer: function(event) {
+      }
+
+      _showServer(event) {
         const server = event.model.server;
         this.fire("ShowServerRequested", {displayServerId: server.id});
         this.maybeCloseDrawer();
-      },
-      _computeLanguage: function(LANGUAGES_AVAILABLE, DEFAULT_LANGUAGE) {
+      }
+
+      _computeLanguage(LANGUAGES_AVAILABLE, DEFAULT_LANGUAGE) {
         return OutlineI18n.getBestMatchingLanguage(Object.keys(LANGUAGES_AVAILABLE)) || DEFAULT_LANGUAGE;
-      },
+      }
+
       // Wrapper to encode a string in base64. This is necessary to set the server view IDs to
       // the display server IDs, which are URLs, so they can be used with selector methods. The IDs
       // are never decoded.
-      _base64Encode: function(s) {
+      _base64Encode(s) {
         return btoa(s).replace(/=/g, "");
-      },
-    });
+      }
+    }
+    customElements.define(AppRoot.is, AppRoot);
   </script>
 </dom-module>