Skip to content

Commit

Permalink
Fix mozilla#1714 Switch localization from l20n to fluent-react for be…
Browse files Browse the repository at this point in the history 
…tter react integration.

Squashed commit of the following:

commit ef5340c
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jul 12 16:03:42 2017 -0400

    Add fluent-react to flow-typed

commit 7c78998
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jul 12 14:42:59 2017 -0400

    Use fluent-langneg

commit 5ae67cf
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jul 12 14:41:40 2017 -0400

    Fix lint

commit 68cd0bf
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jul 12 11:59:31 2017 -0400

    Implement LocalizedHtml component and use it to parse the strings on the ExperimentPage that contain html

commit 04469f4
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jul 12 10:41:31 2017 -0400

    Use fluent-react/compat so we don't include the un-babelified version in vendor.js

commit 22fa6be
Merge: f6f9989 e4a0efa
Author: Donovan Preston <dpreston@mozilla.com>
Date:   Fri Jun 30 13:31:47 2017 -0400

    Merge pull request #4 from stasm/fluent-react-tests

    WIP Fix test failures caused by fluent-react

commit e4a0efa
Author: Staś Małolepszy <stas@mozilla.com>
Date:   Thu Jun 29 19:52:37 2017 +0200

    WIP Fix test failures caused by fluent-react

    fluent-react 0.4.1 relaxes the restriction about Localized components being
    only valid inside of LocalizationProvider.  The tests now pass but React
    reports the following warning:

        Warning: Failed context type: The l10n context field must be an instance
        of ReactLocalization.
            in Localized (created by NewsletterForm)
            in label (created by NewsletterForm)
            in form (created by NewsletterForm)
            in NewsletterForm (created by Unknown)
            in Unknown

    The warning could be silenced by temporarily muting console.warn, or by
    implementing a wrapper around Enzyme's mount which provides a fake
    ReactLocalization in the context.

    Here's what the wrapper could look like:

        https://github.com/stasm/fluent.js/blob/fluent-enzyme/fluent-enzyme/src/index.js#L35-L49

    I also factored the findLocalizedById function out of tests and into the
    util.js module.

    There are 7 skipped tests. I wasn't sure what their result HTML should be.

commit f6f9989
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Thu Jun 29 18:23:33 2017 -0400

    Remove embedded html from the rest of app.ftl strings

commit 9bcf925
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Thu Jun 29 17:29:53 2017 -0400

    Remove some of the html embedded in strings.

commit ca044ff
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 17:39:57 2017 -0400

    Remove weird double nested span.

commit 796af3b
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 15:49:19 2017 -0400

    Use &hellip;

commit 2e38e0d
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 15:48:29 2017 -0400

    Remove empty className

commit 6fa3622
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 15:40:42 2017 -0400

    Rename

commit 96a5531
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 11:47:29 2017 -0400

    Annotate the correct return type

commit 7640080
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 11:45:27 2017 -0400

    Quote apostrophe

commit e141182
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 11:39:25 2017 -0400

    Fix the type of titleL10nArgs

commit 6d98fad
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 11:38:58 2017 -0400

    Remove copy-pasted junk

commit 40354f7
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 11:30:07 2017 -0400

    Don't try to JSON.parse undefined

commit f6f648f
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 10:23:27 2017 -0400

    Remove trailing whitespace

commit 6f88564
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 10:22:21 2017 -0400

    Move the key attributes to the right element.

commit 8bd2383
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 10:19:10 2017 -0400

    Fix typos.

commit 36947d0
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 10:18:28 2017 -0400

    Convert Warning to fluent-react

commit c62f623
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 10:07:55 2017 -0400

    Convert UpdateList to fluent-react.

commit 9b9eed3
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 10:05:23 2017 -0400

    Convert Settings to fluent-react.

commit b321c1f
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:56:08 2017 -0400

    Convert RetireConfirmationDialog to fluent-react.

commit 6b74e10
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:53:45 2017 -0400

    Convert PastExperiments to fluent-react.

commit 57553c5
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:47:58 2017 -0400

    Convert NewsletterForm to fluent-react.

commit 7d313f5
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:43:21 2017 -0400

    Convert NewsletterFooter to fluent-react.

commit 30e2fb9
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:40:53 2017 -0400

    Convert MainInstallButton to fluent-react

commit 9871e90
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:25:59 2017 -0400

    Convert Header to fluent-react

commit 8521f28
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:25:06 2017 -0400

    Convert Footer to fluent-react

commit ecbff0d
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:15:50 2017 -0400

    Convert ExperimentTourDialog to fluent-react

commit 3863066
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:11:55 2017 -0400

    Convert ExperimentRowCard to fluent-react.

commit eb2931b
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:04:46 2017 -0400

    Convert ExperimentPreFeedbackDialog to fluent-react.

commit f3ccd94
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 09:02:19 2017 -0400

    Convert ExperimentEolDialog to fluent-react

commit 9fc0451
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 08:59:48 2017 -0400

    Convert ExperimentDisableDialog to fluent-react

commit e7ed44e
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 08:57:42 2017 -0400

    Convert EmailDialog to fluent-react.

commit b19989d
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 08:46:29 2017 -0400

    Convert SharePage to fluent-react.

commit aeb5e33
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 08:43:52 2017 -0400

    Convert RetirePage to fluent-react.

commit 55f8975
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 08:40:42 2017 -0400

    Convert RestartPage to fluent-react.

commit 6af6a16
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 08:38:35 2017 -0400

    Convert OnboardingPage to fluent-react.

commit cbd9b26
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 08:37:28 2017 -0400

    Convert NotFoundPage to fluent-react

commit 97cb105
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 08:35:09 2017 -0400

    Convert HomePageWithAddon to fluent-react

commit 0627c32
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 28 08:27:32 2017 -0400

    Convert HomePageNoAddon to fluent-react

commit ff13e4e
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Tue Jun 27 11:44:30 2017 -0400

    Convert ExperimentPage to fluent-react

commit 425aea6
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Tue Jun 27 10:49:04 2017 -0400

    Switch ErrorPage to fluent-react

commit a6f7420
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Tue Jun 27 10:39:11 2017 -0400

    Switch View over to fluent-react

commit 9491234
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Tue Jun 27 10:38:59 2017 -0400

    Remove console.log

commit ecc5573
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Mon Jun 26 21:05:05 2017 -0400

    Step 1 get it working

commit 4aeafe5
Merge: aabd228 a4b561d
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Wed Jun 21 09:59:10 2017 -0400

    Merge remote-tracking branch 'mozilla/master'

commit aabd228
Merge: a697c28 9c85f55
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Tue Jun 20 11:37:05 2017 -0400

    Merge branch 'master' of https://github.com/mozilla/testpilot

commit a697c28
Merge: 32018a9 89a6d96
Author: Donovan Preston <donovanpreston@gmail.com>
Date:   Thu Jun 8 12:30:16 2017 -0400

    Merge remote-tracking branch 'mozilla/master'
  • Loading branch information
@fzzzy
fzzzy committed Jul 13, 2017
1 parent 388d22d commit 8734f05
Show file tree
Hide file tree
Showing 56 changed files with 1,021 additions and 476 deletions.
4 changes: 4 additions & 0 deletions flow-typed/fluent-react/compat.js
View file
@@ -0,0 +1,4 @@

declare module 'fluent-react/compat' {
declare function Localized(): Object;
}
3 changes: 3 additions & 0 deletions frontend/.flowconfig
View file
Expand Up @@ -6,6 +6,9 @@
../node_modules/react/*.
../node_modules/html-react-parser/*.
../node_modules/moment/*.
../node_modules/fluent-react/*.

[libs]
../flow-typed


13 changes: 13 additions & 0 deletions frontend/src/app/actions/localizations.js
View file
@@ -0,0 +1,13 @@
// @flow

import type {
Localizations,
SetLocalizationsAction
} from '../reducers/localizations.js';

export function setLocalizations(localizations: Localizations): SetLocalizationsAction {
return {
type: 'SET_LOCALIZATIONS',
payload: localizations
};
}
39 changes: 28 additions & 11 deletions frontend/src/app/components/EmailDialog.js
View file
@@ -1,6 +1,7 @@
// @flow

import { Localized } from 'fluent-react/compat';
import React from 'react';

import NewsletterForm from './NewsletterForm';
import { subscribeToBasket } from '../lib/utils';

Expand Down Expand Up @@ -49,11 +50,15 @@ export default class EmailDialog extends React.Component {
return (
<div id="first-page" className="modal feedback-modal modal-bounce-in">
<header className="modal-header-wrapper">
<h3 className="modal-header" data-l10n-id="emailOptInDialogTitle">Welcome to Test Pilot!</h3>
<Localized id="emailOptInDialogTitle">
<h3 className="modal-header">Welcome to Test Pilot!</h3>
</Localized>
<div className="modal-cancel" onClick={e => this.skip(e)}/>
</header>
<div className="modal-content centered">
<p data-l10n-id="emailOptInMessage" className="">Find out about new experiments and see test results for experiments you&apos;ve tried.</p>
<Localized id="emailOptInMessage">
<p>Find out about new experiments and see test results for experiments you&apos;ve tried.</p>
</Localized>
<NewsletterForm {...{ email, privacy }}
isModal={true}
setEmail={newEmail => this.setState({ email: newEmail })}
Expand All @@ -68,15 +73,21 @@ export default class EmailDialog extends React.Component {
return (
<div id="second-page" className="modal">
<header className="modal-header-wrapper">
<h3 className="modal-header" data-l10n-id="newsletterFooterSuccessHeader">Thanks!</h3>
<Localized id="newsletterFooterSuccessHeader">
<h3 className="modal-header">Thanks!</h3>
</Localized>
<div className="modal-cancel" onClick={e => this.continue(e)} />
</header>
<div className="modal-content centered">
<div className="envelope" />
<p data-l10n-id="newsletterFooterSuccessBody" />
<Localized id="newsletterFooterSuccessBody">
<p>Thank you!</p>
</Localized>
</div>
<div className="modal-actions">
<button id="email-success-continue" onClick={e => this.continue(e)} className="button default large" data-l10n-id="emailOptInConfirmationClose">On to the experiments...</button>
<Localized id="emailOptInConfirmationClose">
<button id="email-success-continue" onClick={e => this.continue(e)} className="button default large">On to the experiments&hellip;</button>
</Localized>
</div>
</div>
);
Expand All @@ -86,17 +97,23 @@ export default class EmailDialog extends React.Component {
return (
<div id="second-page" className="modal">
<header className="modal-header-wrapper">
<h3 className="modal-header" data-l10n-id="emailOptInDialogErrorTitle">Oh no!</h3>
<Localized id="emailOptInDialogErrorTitle">
<h3 className="modal-header">Oh no!</h3>
</Localized>
<div className="modal-cancel" onClick={e => this.continue(e)} />
</header>
<div className="modal-content centered">
<div className="envelope" />
<p className="error" data-l10n-id="newsletterFooterError">
There was an error submitting your email address. Try again?
</p>
<Localized id="newsletterFooterError">
<p className="error">
There was an error submitting your email address. Try again?
</p>
</Localized>
</div>
<div className="modal-actions">
<button id="email-success-continue" onClick={e => this.reset(e)} className="button default large" data-l10n-id="newsletterFormSubmitButton">Sign Up Now</button>
<Localized id="newsletterFormSubmitButton">
<button id="email-success-continue" onClick={e => this.reset(e)} className="button default large">Sign Up Now</button>
</Localized>
</div>
</div>
);
Expand Down
32 changes: 18 additions & 14 deletions frontend/src/app/components/ExperimentDisableDialog.js
View file
@@ -1,5 +1,5 @@
// @flow

import { Localized } from 'fluent-react/compat';
import React from 'react';

import Copter from './Copter';
Expand Down Expand Up @@ -27,25 +27,29 @@ export default class ExperimentDisableDialog extends React.Component {
<div className="modal-container">
<div id="disabled-feedback-modal" className="modal feedback-modal modal-bounce-in">
<header className="modal-header-wrapper">
<h3 className="modal-header"
data-l10n-id="feedbackUninstallTitle"
data-l10n-args={JSON.stringify({ title: experiment.title })} />
<Localized id="feedbackUninstallTitle" $title={ experiment.title }>
<h3 className="modal-header" />
</Localized>
<div className="modal-cancel" onClick={e => this.cancel(e)} />
</header>
<div className="modal-content">
<Copter small={true}/>
<p className="centered" data-l10n-id="feedbackUninstallCopy">
Your participation in Firefox Test Pilot means a lot!
Please check out our other experiments, and stay tuned for more to come!
</p>
<Localized id="feedbackUninstallCopy">
<p className="centered">
Your participation in Firefox Test Pilot means a lot!
Please check out our other experiments, and stay tuned for more to come!
</p>
</Localized>
</div>
<div className="modal-actions">
<a data-l10n-id="feedbackSubmitButton"
onClick={e => this.submit(e)} href={surveyURL}
target="_blank" rel="noopener noreferrer"
className="submit button default large quit">
Take a quick survey
</a>
<Localized id="feedbackSubmitButton">
<a
onClick={e => this.submit(e)} href={surveyURL}
target="_blank" rel="noopener noreferrer"
className="submit button default large quit">
Take a quick survey
</a>
</Localized>
</div>
</div>
</div>
Expand Down
13 changes: 10 additions & 3 deletions frontend/src/app/components/ExperimentEolDialog.js
View file
@@ -1,5 +1,6 @@
// @flow

import { Localized } from 'fluent-react/compat';
import React from 'react';

type ExperimentEolDialogProps = {
Expand All @@ -17,15 +18,21 @@ export default class ExperimentEolDialog extends React.Component {
<div className="modal-container">
<div id="retire-dialog-modal" className="modal feedback-modal modal-bounce-in">
<header className="modal-header-wrapper warning-modal">
<h3 className="title modal-header" data-l10n-id="disableHeader">Disable Experiment?</h3>
<Localized id="disableHeader">
<h3 className="title modal-header">Disable Experiment?</h3>
</Localized>
<div className="modal-cancel" onClick={e => this.cancel(e)}/>
</header>
<form>
<div className="modal-content">
<p data-l10n-id="eolDisableMessage" data-l10n-args={JSON.stringify({ title })} className="centered"></p>
<Localized id="eolDisableMessage" $title={title}>
<p className="centered"></p>
</Localized>
</div>
<div className="modal-actions">
<button onClick={e => this.proceed(e)} data-l10n-id="disableExperiment" data-l10n-args={JSON.stringify({ title })} className="submit button warning large"></button>
<Localized id="disableExperiment" $title={title}>
<button onClick={e => this.proceed(e)} className="submit button warning large"></button>
</Localized>
</div>
</form>
</div>
Expand Down
22 changes: 10 additions & 12 deletions frontend/src/app/components/ExperimentPreFeedbackDialog.js
View file
@@ -1,8 +1,9 @@
// @flow

import React from 'react';
import classnames from 'classnames';
import { Localized } from 'fluent-react/compat';
import parser from 'html-react-parser';
import React from 'react';

type ExperimentPreFeedbackDialogProps = {
experiment: Object,
Expand All @@ -17,18 +18,14 @@ export default class ExperimentPreFeedbackDialog extends React.Component {
render() {
const { experiment, surveyURL } = this.props;

const l10nArgs = JSON.stringify({
title: experiment.title
});

return (
<div className="modal-container">
<div className={classnames('modal', 'tour-modal')}>
<header className="modal-header-wrapper">
<h3 className="modal-header"
data-l10n-id="experimentPreFeedbackTitle"
data-l10n-args={l10nArgs}></h3>
<div className="modal-cancel" onClick={e => this.cancel(e)}/>
<Localized id="experimentPreFeedbackTitle" $title={experiment.title}>
<h3 className="modal-header"></h3>
</Localized>
<div className="modal-cancel" onClick={e => this.cancel(e)}/>
</header>
<div className="tour-content">
<div className="tour-image">
Expand All @@ -39,9 +36,10 @@ export default class ExperimentPreFeedbackDialog extends React.Component {
{parser(experiment.pre_feedback_copy)}
</div>
<div className="tour-text">
<a data-l10n-id="experimentPreFeedbackLinkCopy"
data-l10n-args={l10nArgs} onClick={e => this.feedback(e)}
href={surveyURL}></a>
<Localized id="experimentPreFeedbackLinkCopy" $title={experiment.title}>
<a onClick={e => this.feedback(e)}
href={surveyURL}></a>
</Localized>
</div>
</div>
</div>
Expand Down
50 changes: 36 additions & 14 deletions frontend/src/app/components/ExperimentRowCard.js
View file
@@ -1,7 +1,8 @@
// @flow

import React from 'react';
import classnames from 'classnames';
import { Localized } from 'fluent-react/compat';
import React from 'react';

import { buildSurveyURL, experimentL10nId } from '../lib/utils';

Expand Down Expand Up @@ -49,9 +50,15 @@ export default class ExperimentRowCard extends React.Component {
})}
>
<div className="experiment-actions">
{enabled && <div data-l10n-id="experimentListEnabledTab" className="tab enabled-tab"></div>}
{this.justLaunched() && <div data-l10n-id="experimentListJustLaunchedTab" className="tab just-launched-tab"></div>}
{this.justUpdated() && <div data-l10n-id="experimentListJustUpdatedTab" className="tab just-updated-tab"></div>}
{enabled && <Localized id="experimentListEnabledTab">
<div className="tab enabled-tab"></div>
</Localized>}
{this.justLaunched() && <Localized id="experimentListJustLaunchedTab">
<div className="tab just-launched-tab"></div>
</Localized>}
{this.justUpdated() && <Localized id="experimentListJustUpdatedTab">
<div className="tab just-updated-tab"></div>
</Localized>}
</div>
<div className={`experiment-icon-wrapper-${experiment.slug} experiment-icon-wrapper`}>
<div className={`experiment-icon-${experiment.slug} experiment-icon`}></div>
Expand All @@ -60,12 +67,16 @@ export default class ExperimentRowCard extends React.Component {
<header>
<div>
<h3>{title}</h3>
{subtitle && <h4 data-l10n-id={this.l10nId('subtitle')} className="subtitle">{subtitle}</h4>}
{subtitle && <Localized id={this.l10nId('subtitle')}>
<h4 className="subtitle">{subtitle}</h4>
</Localized>}
<h4>{this.statusMsg()}</h4>
</div>
{this.renderFeedbackButton()}
</header>
<p data-l10n-id={this.l10nId('description')}>{description}</p>
<Localized id={this.l10nId('description')}>
<p>{description}</p>
</Localized>
{ this.renderInstallationCount(installation_count, isCompleted) }
{ this.renderManageButton(enabled, hasAddon, isCompleted) }
</div>
Expand All @@ -79,10 +90,11 @@ export default class ExperimentRowCard extends React.Component {
// telemetry data coming in from prod
renderInstallationCount(installation_count: number, isCompleted: Boolean) {
if (installation_count <= 100 || isCompleted) return '';
const installation_count_node = <span>{installation_count}</span>;
return (
<span className="participant-count"
data-l10n-id="participantCount"
data-l10n-args={JSON.stringify({ installation_count })}>{installation_count}</span>
<Localized id="participantCount2" $installation_count={installation_count_node}>
<span className="participant-count">{installation_count_node} participants</span>
</Localized>
);
}

Expand Down Expand Up @@ -115,15 +127,21 @@ export default class ExperimentRowCard extends React.Component {
renderManageButton(enabled: Boolean, hasAddon: Boolean, isCompleted: Boolean) {
if (enabled && hasAddon) {
return (
<div className="button card-control secondary" data-l10n-id="experimentCardManage">Manage</div>
<Localized id="experimentCardManage">
<div className="button card-control secondary">Manage</div>
</Localized>
);
} else if (isCompleted) {
return (
<div className="button card-control secondary" data-l10n-id="experimentCardLearnMore">Learn More</div>
<Localized id="experimentCardLearnMore">
<div className="button card-control secondary">Learn More</div>
</Localized>
);
}
return (
<div className="button card-control default" data-l10n-id="experimentCardGetStarted">Get Started</div>
<Localized id="experimentCardGetStarted">
<div className="button card-control default">Get Started</div>
</Localized>
);
}

Expand Down Expand Up @@ -171,9 +189,13 @@ export default class ExperimentRowCard extends React.Component {
if (delta < 0) {
return '';
} else if (delta < ONE_DAY) {
return <span className="eol-message" data-l10n-id="experimentListEndingTomorrow">Ending Tomorrow</span>;
return <Localized id="experimentListEndingTomorrow">
<span className="eol-message">Ending Tomorrow</span>
</Localized>;
} else if (delta < ONE_WEEK) {
return <span className="eol-message" data-l10n-id="experimentListEndingSoon">Ending Soon</span>;
return <Localized id="experimentListEndingSoon">
<span className="eol-message">Ending Soon</span>
</Localized>;
}
}
return '';
Expand Down
26 changes: 13 additions & 13 deletions frontend/src/app/components/ExperimentTourDialog.js
View file
@@ -1,7 +1,8 @@
// @flow

import React from 'react';
import classnames from 'classnames';
import { Localized } from 'fluent-react/compat';
import React from 'react';

import { experimentL10nId } from '../lib/utils';

Expand Down Expand Up @@ -40,14 +41,10 @@ export default class ExperimentTourDialog extends React.Component {
const atStart = (currentStep === 0);
const atEnd = (currentStep === tourSteps.length - 1);

const l10nArgs = JSON.stringify({
title: experiment.title
});

const headerTitle = enabled ? (<h3 className="modal-header"
data-l10n-id="tourOnboardingTitle"
data-l10n-args={l10nArgs}></h3>) :
(<h3 className="modal-header">{experiment.title}</h3>);
const headerTitle = enabled ? (
<Localized id="tourOnboardingTitle" $title={experiment.title}>
<h3 className="modal-header"></h3>
</Localized>) : (<h3 className="modal-header">{experiment.title}</h3>);

return (
<div className="modal-container">
Expand All @@ -68,7 +65,9 @@ export default class ExperimentTourDialog extends React.Component {
</div>
{step.copy &&
<div className="tour-text">
<p data-l10n-id={this.l10nId(['tour_steps', idx, 'copy'])}>{step.copy}</p>
<Localized id={this.l10nId(['tour_steps', idx, 'copy'])}>
<p>{step.copy}</p>
</Localized>
</div>}
</div>
))}
Expand All @@ -77,9 +76,10 @@ export default class ExperimentTourDialog extends React.Component {
className={classnames('tour-back', { hidden: atStart })}><div/></div>
<div onClick={() => this.tourNext()}
className={classnames('tour-next', { 'no-display': atEnd })}><div/></div>
<div onClick={e => this.complete(e)}
className={classnames('tour-done', { 'no-display': !atEnd })}
data-l10n-id="tourDoneButton">Done</div>
<Localized id="tourDoneButton">
<div onClick={e => this.complete(e)}
className={classnames('tour-done', { 'no-display': !atEnd })}>Done</div>
</Localized>
</div>
</div>
</div>
Expand Down

0 comments on commit 8734f05

Please sign in to comment.