Make data limits a permanent feature (#698)

src/server_manager/messages/en.json

@@ -22,9 +22,10 @@
   "confirmation-server-remove": "This action removes your server from the Outline Manager, but does not block proxy access to users. You will still need to manually delete the Outline server from your host machine.",
   "confirmation-server-remove-title": "Remove Server?",
   "data-limits": "Data limits",
-  "data-limits-description": "Set a 30 day trailing data transfer limit for access keys on this server. Available at least until {date}.",
+  "data-limits-description": "Set a 30 day trailing data transfer limit for access keys on this server.",
   "data-limits-dialog-text": "Go to the Settings tab to set a data transfer limit for access keys on this server.",
   "data-limits-dialog-title": "Avoid data overages",
+  "data-limits-disclaimer": "Since you are currently reporting metrics, use of the data limits feature will be included. Please see the {openLink}data collection policy{closeLink} for more details.",
   "data-limits-usage": "{used} of {total} used",
   "destroy": "Destroy",
   "digitalocean-disconnect": "Disconnect",

src/server_manager/messages/master_messages.json

@@ -126,14 +126,8 @@
     "description": "This string appears as a title in a section to configure access key data transfer limits."
   },
   "data_limits_description": {
-    "message": "Set a 30 day trailing data transfer limit for access keys on this server. Available at least until $DATE$.",
-    "description": "This string appears as an explanation to the access key data transfer limits feature.",
-    "placeholders": {
-      "DATE": {
-        "content": "{date}",
-        "example": "December 9, 2019"
-      }
-    }
+    "message": "Set a 30 day trailing data transfer limit for access keys on this server.",
+    "description": "This string appears as an explanation to the access key data transfer limits feature."
   },
   "data_limits_dialog_text": {
     "message": "Go to the Settings tab to set a data transfer limit for access keys on this server.",
@@ -143,6 +137,18 @@
     "message": "Avoid data overages",
     "description": "This string appears as a title in a dialog to advertise the data limits feature."
   },
+  "data_limits_disclaimer": {
+    "message": "Since you are currently reporting metrics, use of the data limits feature will be included. Please see the $START_OF_LINK$data collection policy$END_OF_LINK$ for more details.",
+    "description": "This string provides a data collection disclaimer to opting into the data limits features.",
+    "placeholders": {
+      "END_OF_LINK": {
+        "content": "{closeLink}"
+      },
+      "START_OF_LINK": {
+        "content": "{openLink}"
+      }
+    }
+  },
   "data_limits_usage": {
     "message": "$USED$ of $TOTAL$ used",
     "description": "This string appears in a tooltip when the data limits feature is enabled. It lets the user know how much data an access key has used, relative to the limit.",

src/server_manager/web_app/app.spec.ts

@@ -247,7 +247,7 @@ function createTestApp(
   return new App(
       polymerAppRoot, VERSION, fakeDigitalOceanSessionFactory,
       fakeDigitalOceanServerRepositoryFactory, manualServerRepo, displayServerRepository,
-      digitalOceanTokenManager, new FakeSurveys());
+      digitalOceanTokenManager);
 }
 
 enum AppRootScreen {

src/server_manager/web_app/app.ts

@@ -20,7 +20,6 @@ import * as digitalocean_api from '../cloud/digitalocean_api';
 import * as errors from '../infrastructure/errors';
 import {sleep} from '../infrastructure/sleep';
 import * as server from '../model/server';
-import {Surveys} from '../model/survey';
 
 import {TokenManager} from './digitalocean_oauth';
 import * as digitalocean_server from './digitalocean_server';
@@ -37,8 +36,6 @@ const UNUSED_DIGITALOCEAN_REFERRAL_CODE = '5ddb4219b716';
 const CHANGE_KEYS_PORT_VERSION = '1.0.0';
 const DATA_LIMITS_VERSION = '1.1.0';
 const CHANGE_HOSTNAME_VERSION = '1.2.0';
-// Date by which the data limits feature experiment will be permanently added or removed.
-export const DATA_LIMITS_AVAILABILITY_DATE = new Date('2020-06-02');
 const MAX_ACCESS_KEY_DATA_LIMIT_BYTES = 50 * (10 ** 9);  // 50GB
 
 function dataLimitToDisplayDataAmount(limit: server.DataLimit): DisplayDataAmount|null {
@@ -88,6 +85,13 @@ async function computeDefaultAccessKeyDataLimit(
   }
 }
 
+// Returns whether the user has seen a notification for the updated feature metrics data collection
+// policy.
+function hasSeenFeatureMetricsNotification(): boolean {
+  return !!window.localStorage.getItem('dataLimitsHelpBubble-dismissed') &&
+      !!window.localStorage.getItem('dataLimits-feature-collection-notification');
+}
+
 async function showHelpBubblesOnce(serverView: ServerView) {
   if (!window.localStorage.getItem('addAccessKeyHelpBubble-dismissed')) {
     await serverView.showAddAccessKeyHelpBubble();
@@ -131,7 +135,7 @@ export class App {
       private createDigitalOceanServerRepository: DigitalOceanServerRepositoryFactory,
       private manualServerRepository: server.ManualServerRepository,
       private displayServerRepository: DisplayServerRepository,
-      private digitalOceanTokenManager: TokenManager, private surveys: Surveys) {
+      private digitalOceanTokenManager: TokenManager) {
     appRoot.setAttribute('outline-version', this.version);
 
     appRoot.addEventListener('ConnectToDigitalOcean', (event: CustomEvent) => {
@@ -838,10 +842,10 @@ export class App {
     view.serverPortForNewAccessKeys = selectedServer.getPortForNewAccessKeys();
     view.serverCreationDate = localizeDate(selectedServer.getCreatedDate(), this.appRoot.language);
     view.serverVersion = selectedServer.getVersion();
-    view.dataLimitsAvailabilityDate =
-        localizeDate(DATA_LIMITS_AVAILABILITY_DATE, this.appRoot.language);
     view.accessKeyDataLimit = dataLimitToDisplayDataAmount(selectedServer.getAccessKeyDataLimit());
     view.isAccessKeyDataLimitEnabled = !!view.accessKeyDataLimit;
+    view.showFeatureMetricsDisclaimer = selectedServer.getMetricsEnabled() &&
+        !selectedServer.getAccessKeyDataLimit() && !hasSeenFeatureMetricsNotification();
 
     const version = this.selectedServer.getVersion();
     if (version) {
@@ -1029,7 +1033,9 @@ export class App {
       this.appRoot.showNotification(this.appRoot.localize('saved'));
       serverView.accessKeyDataLimit = dataLimitToDisplayDataAmount(limit);
       this.refreshTransferStats(this.selectedServer, serverView);
-      this.surveys.presentDataLimitsEnabledSurvey();
+      // Don't display the feature collection disclaimer anymore.
+      serverView.showFeatureMetricsDisclaimer = false;
+      window.localStorage.setItem('dataLimits-feature-collection-notification', 'true');
     } catch (error) {
       console.error(`Failed to set access key data limit: ${error}`);
       this.appRoot.showError(this.appRoot.localize('error-set-data-limit'));
@@ -1045,7 +1051,6 @@ export class App {
       await this.selectedServer.removeAccessKeyDataLimit();
       this.appRoot.showNotification(this.appRoot.localize('saved'));
       this.refreshTransferStats(this.selectedServer, serverView);
-      this.surveys.presentDataLimitsDisabledSurvey();
     } catch (error) {
       console.error(`Failed to remove access key data limit: ${error}`);
       this.appRoot.showError(this.appRoot.localize('error-remove-data-limit'));

src/server_manager/web_app/gallery_app/main.ts

@@ -12,15 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import IntlMessageFormat from 'intl-messageformat';
-
 import '../ui_components/outline-about-dialog';
 import '../ui_components/outline-do-oauth-step';
 import '../ui_components/outline-feedback-dialog';
 import '../ui_components/outline-share-dialog';
 import '../ui_components/outline-sort-span';
 import '../ui_components/outline-survey-dialog';
 
+import IntlMessageFormat from 'intl-messageformat';
 import {css, customElement, html, LitElement, property} from 'lit-element';
 
 async function makeLocalize(language: string) {
@@ -97,7 +96,8 @@ export class TestApp extends LitElement {
       <div class="widget">
         <h2>outline-about-dialog</h2>
         <button @tap=${() => this.select('outline-about-dialog').open()}>Open Dialog</button>
-        <outline-about-dialog .localize=${this.localize} dir=${this.dir} outline-version="1.2.3"></outline-about-dialog>
+        <outline-about-dialog .localize=${this.localize} dir=${
+        this.dir} outline-version="1.2.3"></outline-about-dialog>
       </div>
       
       <div class="widget">
@@ -107,30 +107,34 @@ export class TestApp extends LitElement {
 
       <div class="widget">
         <h2>outline-feedback-dialog</h2>
-        <button @tap=${() => this.select('outline-feedback-dialog').open('Pre-populated message', false)
-        }>Open Dialog</button>
-        <outline-feedback-dialog .localize=${this.localize} dir=${this.dir}></outline-feedback-dialog>
+        <button @tap=${
+        () => this.select('outline-feedback-dialog')
+                  .open('Pre-populated message', false)}>Open Dialog</button>
+        <outline-feedback-dialog .localize=${this.localize} dir=${
+        this.dir}></outline-feedback-dialog>
       </div>
 
       <div class="widget">
         <h2>outline-share-dialog</h2>
-        <button @tap=${() => this.select('outline-share-dialog').open('<ACCESS_KEY>', '<INVITE_URL>')
-        }>Open Dialog</button>
+        <button @tap=${
+        () => this.select('outline-share-dialog')
+                  .open('<ACCESS_KEY>', '<INVITE_URL>')}>Open Dialog</button>
         <outline-share-dialog .localize=${this.localize} dir=${this.dir}></outline-share-dialog>
       </div>
       
       <div class="widget">
         <h2>outline-sort-icon</h2>
         <outline-sort-span dir=${this.dir} direction=1 @tap=${() => {
-          const el = this.select('outline-sort-span');
-          el.direction *= -1;
-        }}>Column Header</outline-sort-span>
+      const el = this.select('outline-sort-span');
+      el.direction *= -1;
+    }}>Column Header</outline-sort-span>
       </div>
 
       <div class="widget">
         <h2>outline-survey-dialog</h2>
-        <button @tap=${() => this.select('outline-survey-dialog').open('Survey title', 'https://getoutline.org')
-        }>Open Dialog</button>
+        <button @tap=${
+        () => this.select('outline-survey-dialog')
+                  .open('Survey title', 'https://getoutline.org')}>Open Dialog</button>
         <outline-survey-dialog .localize=${this.localize} dir=${this.dir}></outline-survey-dialog>
       </div>
     `;

src/server_manager/web_app/main.ts

@@ -18,15 +18,18 @@ import * as digitalocean_api from '../cloud/digitalocean_api';
 import * as i18n from '../infrastructure/i18n';
 import {getSentryApiUrl} from '../infrastructure/sentry';
 
-import {App, DATA_LIMITS_AVAILABILITY_DATE} from './app';
+import {App} from './app';
 import {DigitalOceanTokenManager} from './digitalocean_oauth';
 import * as digitalocean_server from './digitalocean_server';
 import {DisplayServerRepository} from './display_server';
 import {ManualServerRepository} from './manual_server';
-import {DEFAULT_PROMPT_IMPRESSION_DELAY_MS, OutlineSurveys} from './survey';
 import {AppRoot} from './ui_components/app-root.js';
 
-type LanguageDef = {id: string, name: string, dir: string};
+type LanguageDef = {
+  id: string,
+  name: string,
+  dir: string
+};
 const SUPPORTED_LANGUAGES: {[key: string]: LanguageDef} = {
   'am': {id: 'am', name: 'አማርኛ', dir: 'ltr'},
   'ar': {id: 'ar', name: 'العربية', dir: 'rtl'},
@@ -120,10 +123,7 @@ document.addEventListener('WebComponentsReady', () => {
   new App(
       appRoot, version, digitalocean_api.createDigitalOceanSession,
       digitalOceanServerRepositoryFactory, new ManualServerRepository('manualServers'),
-      new DisplayServerRepository(), new DigitalOceanTokenManager(),
-      new OutlineSurveys(
-          appRoot.$.surveyDialog, localStorage, DEFAULT_PROMPT_IMPRESSION_DELAY_MS,
-          DATA_LIMITS_AVAILABILITY_DATE))
+      new DisplayServerRepository(), new DigitalOceanTokenManager())
       .start();
 });
 

src/server_manager/web_app/shadowbox_server.ts

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import * as semver from 'semver';
+
 import * as errors from '../infrastructure/errors';
 import * as server from '../model/server';
 
@@ -63,30 +65,36 @@ export class ShadowboxServer implements server.Server {
     return this.apiRequest<void>('access-keys/' + accessKeyId, {method: 'DELETE'});
   }
 
-  setAccessKeyDataLimit(limit: server.DataLimit): Promise<void> {
+  async setAccessKeyDataLimit(limit: server.DataLimit): Promise<void> {
     console.info(`Setting access key data limit: ${JSON.stringify(limit)}`);
     const requestOptions = {
       method: 'PUT',
       headers: new Headers({'Content-Type': 'application/json'}),
       body: JSON.stringify({limit})
     };
-    return this.apiRequest<void>('experimental/access-key-data-limit', requestOptions).then(() => {
-      this.serverConfig.accessKeyDataLimit = limit;
-    });
+    await this.apiRequest<void>(this.getAccessKeyDataLimitPath(), requestOptions);
+    this.serverConfig.accessKeyDataLimit = limit;
   }
 
-  removeAccessKeyDataLimit(): Promise<void> {
+  async removeAccessKeyDataLimit(): Promise<void> {
     console.info(`Removing access key data limit`);
-    return this.apiRequest<void>('experimental/access-key-data-limit', {method: 'DELETE'})
-        .then(() => {
-          delete this.serverConfig.accessKeyDataLimit;
-        });
+    await this.apiRequest<void>(this.getAccessKeyDataLimitPath(), {method: 'DELETE'});
+    delete this.serverConfig.accessKeyDataLimit;
   }
 
   getAccessKeyDataLimit(): server.DataLimit|undefined {
     return this.serverConfig.accessKeyDataLimit;
   }
 
+  private getAccessKeyDataLimitPath(): string {
+    const version = this.getVersion();
+    if (semver.gte(version, '1.4.0')) {
+      // Data limits became a permanent feature in shadowbox v1.4.0.
+      return 'server/access-key-data-limit';
+    }
+    return 'experimental/access-key-data-limit';
+  }
+
   getDataUsage(): Promise<server.DataUsageByAccessKey> {
     return this.apiRequest<server.DataUsageByAccessKey>('metrics/transfer');
   }