{this.renderIncompatibleAddons()}
- {completedDate &&
-
- This experiment is ending on {completedDate} .{title} but we will no longer be providing updates or support.
-
-
}
+ {this.renderEolBlock()}
{hasAddon &&
{!!introduction &&
@@ -438,16 +437,26 @@ export class ExperimentDetail extends React.Component {
// which has been sending telemetry pings via installs from dev
// TODO: figure out a non-hack way to toggle user counts when we have
// telemetry data coming in from prod
- renderInstallationCount(installation_count, title) {
- if (installation_count <= 100) {
+ renderInstallationCount() {
+ const { experiment, isAfterCompletedDate } = this.props;
+ const { completed, title, installation_count } = experiment;
+
+ if (isAfterCompletedDate(experiment)) {
+ const completedDate = formatDate(completed);
+ return (
+ Experiment End Date: {completedDate}
+ );
+ }
+ if (!installation_count || installation_count <= 100) {
return (
Just launched!
);
}
+ const installCount = installation_count.toLocaleString();
return (
- There are {installation_count}
- people trying {title} right now!
+ There are {installCount}
+ people trying {title} right now!
);
}
@@ -463,6 +472,59 @@ export class ExperimentDetail extends React.Component {
return null;
}
+ renderExperimentControls() {
+ const { enabled, isEnabling, isDisabling, progressButtonWidth } = this.state;
+ const { experiment, installed, isAfterCompletedDate, hasAddon } = this.props;
+ const { title, min_release, survey_url } = experiment;
+ const validVersion = this.isValidVersion(min_release);
+ const surveyURL = buildSurveyURL('givefeedback', title, installed, survey_url);
+
+ if (!hasAddon || !validVersion) {
+ return null;
+ }
+ if (isAfterCompletedDate(experiment)) {
+ if (enabled) {
+ return (
+
+ { e.preventDefault(); this.setState({ showEolDialog: true }); }} style={{ width: progressButtonWidth }} id="uninstall-button" className={classnames(['button', 'secondary', 'warning'], { 'state-change': isDisabling })}>Disabling... Disable {title}
+
+ );
+ }
+ return null;
+ }
+ if (enabled) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ }
+
+ renderEolBlock() {
+ const { experiment, isAfterCompletedDate } = this.props;
+ if (!experiment.completed || isAfterCompletedDate(experiment)) { return null; }
+
+ const title = experiment.title;
+ const completedDate = formatDate(experiment.completed);
+
+ return (
+
+
+ This experiment is ending on {completedDate} .After then you will still be able to use {title} but we will no longer be providing updates or support.
+
+
@@ -78,5 +78,5 @@ HomePageNoAddon.propTypes = {
hasAddon: React.PropTypes.bool,
isFirefox: React.PropTypes.bool,
experiments: React.PropTypes.array,
- isExperimentCompleted: React.PropTypes.func
+ isAfterCompletedDate: React.PropTypes.func
};
diff --git a/frontend/src/app/containers/HomePageWithAddon.js b/frontend/src/app/containers/HomePageWithAddon.js
index ef15807fa7..8e8886e801 100644
--- a/frontend/src/app/containers/HomePageWithAddon.js
+++ b/frontend/src/app/containers/HomePageWithAddon.js
@@ -18,7 +18,7 @@ export default class HomePageWithAddon extends React.Component {
}
render() {
- const { experiments, getCookie, removeCookie, getWindowLocation, isExperimentCompleted } = this.props;
+ const { experiments, getCookie, removeCookie, getWindowLocation, isAfterCompletedDate } = this.props;
if (experiments.length === 0) { return
@@ -79,5 +79,5 @@ HomePageWithAddon.propTypes = {
uninstallAddon: React.PropTypes.func,
sendToGA: React.PropTypes.func,
openWindow: React.PropTypes.func,
- isExperimentCompleted: React.PropTypes.func
+ isAfterCompletedDate: React.PropTypes.func
};
diff --git a/frontend/src/app/reducers/addon.js b/frontend/src/app/reducers/addon.js
index 838eb03530..6027be8d52 100644
--- a/frontend/src/app/reducers/addon.js
+++ b/frontend/src/app/reducers/addon.js
@@ -36,7 +36,7 @@ export const getInstalled = (state) => state.installed;
export const isExperimentEnabled = (state, experiment) =>
!!(experiment && experiment.addon_id in state.installed);
-export const isExperimentCompleted = (experiment) =>
+export const isAfterCompletedDate = (experiment) =>
((new Date(experiment.completed)).getTime() < Date.now());
export const isInstalledLoaded = (state) => state.installedLoaded;
diff --git a/frontend/src/styles/modules/_experiment-details.scss b/frontend/src/styles/modules/_experiment-details.scss
index fdd7d3958c..b4adc5f4c4 100644
--- a/frontend/src/styles/modules/_experiment-details.scss
+++ b/frontend/src/styles/modules/_experiment-details.scss
@@ -246,6 +246,29 @@
padding: 10px;
}
+.completed-block {
+ background: $error-red-background;
+ border: 1px solid $error-red-border;
+ border-radius: 3px;
+ margin-bottom: $grid-unit;
+ padding: $grid-unit;
+
+ h3,
+ p {
+ font-size: $font-unit * (7 / 6);
+ margin: 0;
+ }
+
+ h3 {
+ font-weight: bold;
+ }
+
+ p {
+ line-height: $line-unit;
+ padding-top: 10px;
+ }
+}
+
.details-sections {
section {
diff --git a/frontend/test/app/components/ExperimentEolDialog-test.js b/frontend/test/app/components/ExperimentEolDialog-test.js
new file mode 100644
index 0000000000..db3ea2b39a
--- /dev/null
+++ b/frontend/test/app/components/ExperimentEolDialog-test.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import { shallow, mount } from 'enzyme';
+
+import ExperimentEolDialog from '../../../src/app/components/ExperimentEolDialog';
+
+describe('app/components/ExperimentEolDialog', () => {
+ let props, mockClickEvent, subject;
+ beforeEach(function() {
+ props = {
+ onSubmit: sinon.spy(),
+ onCancel: sinon.spy()
+ };
+ mockClickEvent = {
+ preventDefault: sinon.spy()
+ };
+ subject = shallow(This experiment is ending on {$completedDate} .disabling these add-ons before activating this experiment: