mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 16:55:40 +00:00
Bug 1591307: Localize CompatibilityApp component. r=jdescottes,flod
Differential Revision: https://phabricator.services.mozilla.com/D79804
This commit is contained in:
parent
1e1c4fc175
commit
1c09f71859
@ -12,6 +12,8 @@ const {
|
|||||||
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||||
|
|
||||||
|
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
|
||||||
|
|
||||||
const Types = require("devtools/client/inspector/compatibility/types");
|
const Types = require("devtools/client/inspector/compatibility/types");
|
||||||
|
|
||||||
const Accordion = createFactory(
|
const Accordion = createFactory(
|
||||||
@ -30,6 +32,8 @@ const Settings = createFactory(
|
|||||||
class CompatibilityApp extends PureComponent {
|
class CompatibilityApp extends PureComponent {
|
||||||
static get propTypes() {
|
static get propTypes() {
|
||||||
return {
|
return {
|
||||||
|
// getString prop is injected by the withLocalization wrapper
|
||||||
|
getString: PropTypes.func.isRequired,
|
||||||
isSettingsVisibile: PropTypes.bool.isRequired,
|
isSettingsVisibile: PropTypes.bool.isRequired,
|
||||||
isTopLevelTargetProcessing: PropTypes.bool.isRequired,
|
isTopLevelTargetProcessing: PropTypes.bool.isRequired,
|
||||||
selectedNodeIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue))
|
selectedNodeIssues: PropTypes.arrayOf(PropTypes.shape(Types.issue))
|
||||||
@ -44,6 +48,7 @@ class CompatibilityApp extends PureComponent {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
|
getString,
|
||||||
isSettingsVisibile,
|
isSettingsVisibile,
|
||||||
isTopLevelTargetProcessing,
|
isTopLevelTargetProcessing,
|
||||||
selectedNodeIssues,
|
selectedNodeIssues,
|
||||||
@ -88,13 +93,13 @@ class CompatibilityApp extends PureComponent {
|
|||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
id: "compatibility-app--selected-element-pane",
|
id: "compatibility-app--selected-element-pane",
|
||||||
header: "Selected Element",
|
header: getString("compatibility-selected-element-header"),
|
||||||
component: selectedNodeIssuePane,
|
component: selectedNodeIssuePane,
|
||||||
opened: true,
|
opened: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "compatibility-app--all-elements-pane",
|
id: "compatibility-app--all-elements-pane",
|
||||||
header: "All Issues",
|
header: getString("compatibility-all-elements-header"),
|
||||||
component: [topLevelTargetIssuePane, throbber],
|
component: [topLevelTargetIssuePane, throbber],
|
||||||
opened: true,
|
opened: true,
|
||||||
},
|
},
|
||||||
@ -117,4 +122,6 @@ const mapStateToProps = state => {
|
|||||||
topLevelTargetIssues: state.compatibility.topLevelTargetIssues,
|
topLevelTargetIssues: state.compatibility.topLevelTargetIssues,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
module.exports = connect(mapStateToProps)(CompatibilityApp);
|
module.exports = FluentReact.withLocalization(
|
||||||
|
connect(mapStateToProps)(CompatibilityApp)
|
||||||
|
);
|
||||||
|
@ -15,7 +15,7 @@ exports[`CompatibilityApp component renders with settings 1`] = `
|
|||||||
"component": <IssuePane
|
"component": <IssuePane
|
||||||
issues={Array []}
|
issues={Array []}
|
||||||
/>,
|
/>,
|
||||||
"header": "Selected Element",
|
"header": "compatibility-selected-element-header",
|
||||||
"id": "compatibility-app--selected-element-pane",
|
"id": "compatibility-app--selected-element-pane",
|
||||||
"opened": true,
|
"opened": true,
|
||||||
},
|
},
|
||||||
@ -26,7 +26,7 @@ exports[`CompatibilityApp component renders with settings 1`] = `
|
|||||||
/>,
|
/>,
|
||||||
null,
|
null,
|
||||||
],
|
],
|
||||||
"header": "All Issues",
|
"header": "compatibility-all-elements-header",
|
||||||
"id": "compatibility-app--all-elements-pane",
|
"id": "compatibility-app--all-elements-pane",
|
||||||
"opened": true,
|
"opened": true,
|
||||||
},
|
},
|
||||||
@ -56,7 +56,7 @@ exports[`CompatibilityApp component renders zero issues 1`] = `
|
|||||||
"component": <IssuePane
|
"component": <IssuePane
|
||||||
issues={Array []}
|
issues={Array []}
|
||||||
/>,
|
/>,
|
||||||
"header": "Selected Element",
|
"header": "compatibility-selected-element-header",
|
||||||
"id": "compatibility-app--selected-element-pane",
|
"id": "compatibility-app--selected-element-pane",
|
||||||
"opened": true,
|
"opened": true,
|
||||||
},
|
},
|
||||||
@ -67,7 +67,7 @@ exports[`CompatibilityApp component renders zero issues 1`] = `
|
|||||||
/>,
|
/>,
|
||||||
null,
|
null,
|
||||||
],
|
],
|
||||||
"header": "All Issues",
|
"header": "compatibility-all-elements-header",
|
||||||
"id": "compatibility-app--all-elements-pane",
|
"id": "compatibility-app--all-elements-pane",
|
||||||
"opened": true,
|
"opened": true,
|
||||||
},
|
},
|
||||||
|
@ -25,8 +25,11 @@ describe("CompatibilityApp component", () => {
|
|||||||
topLevelTargetIssues: [],
|
topLevelTargetIssues: [],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const wrapper = shallow(CompatibilityApp({ store })).dive();
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
const withLocalizationWrapper = shallow(CompatibilityApp({ store }));
|
||||||
|
const connectWrapper = withLocalizationWrapper.dive();
|
||||||
|
const targetComponent = connectWrapper.dive();
|
||||||
|
expect(targetComponent).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders with settings", () => {
|
it("renders with settings", () => {
|
||||||
@ -38,7 +41,10 @@ describe("CompatibilityApp component", () => {
|
|||||||
topLevelTargetIssues: [],
|
topLevelTargetIssues: [],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const wrapper = shallow(CompatibilityApp({ store })).dive();
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
const withLocalizationWrapper = shallow(CompatibilityApp({ store }));
|
||||||
|
const connectWrapper = withLocalizationWrapper.dive();
|
||||||
|
const targetComponent = connectWrapper.dive();
|
||||||
|
expect(targetComponent).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -1,3 +1,8 @@
|
|||||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
|
||||||
|
## Messages used as headers in the main pane
|
||||||
|
|
||||||
|
compatibility-selected-element-header = Selected Element
|
||||||
|
compatibility-all-elements-header = All Issues
|
||||||
|
Loading…
Reference in New Issue
Block a user