Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-03-05 16:22:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1612075 - Toggle collapse for message JSON on General and WNPanel tabs r=pdahiya

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D61624

--HG--
extra : moz-landing-system : lando
This commit is contained in:
emcminn 2020-03-20 22:32:16 +00:00
parent 7f4b927d9e
commit 05fad08214
7 changed files with 317 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
browser/components/newtab/content-src/asrouter/components/Button/_Button.scss
View File

@ -43,6 +43,17 @@
box-shadow: 0 0 0 1px $blue-50 inset, 0 0 0 1px $blue-50, 0 0 0 4px $blue-50-30;
}
}
&.slim {
background-color: $grey-90-10;
margin-inline-start: 0;
font-size: 12px;
padding: 6px 12px;
&:hover {
background-color: $grey-90-20;
}
}
}
[lwt-newtab-brighttext] {

114
browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.jsx
View File

@ -56,6 +56,28 @@ export class ToggleStoryButton extends React.PureComponent {
}
}
export class ToggleMessageJSON extends React.PureComponent {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.toggleJSON(this.props.msgId);
}
render() {
let iconName = this.props.isCollapsed
? "icon icon-arrowhead-forward-small"
: "icon icon-arrowhead-down-small";
return (
<button className="clearButton" onClick={this.handleClick}>
<span className={iconName} />
</button>
);
}
}
export class TogglePrefCheckbox extends React.PureComponent {
constructor(props) {
super(props);
@ -480,9 +502,12 @@ export class ASRouterAdminInner extends React.PureComponent {
this.handleUpdateWNMessages = this.handleUpdateWNMessages.bind(this);
this.handleForceWNP = this.handleForceWNP.bind(this);
this.pushWNMessage = this.pushWNMessage.bind(this);
this.toggleJSON = this.toggleJSON.bind(this);
this.toggleAllMessages = this.toggleAllMessages.bind(this);
this.state = {
messageFilter: "all",
WNMessages: [],
collapsedMessages: [],
evaluationStatus: {},
trailhead: {},
stringTargetingParameters: null,
@ -746,6 +771,22 @@ export class ASRouterAdminInner extends React.PureComponent {
}
}
toggleJSON(msgId) {
if (this.state.collapsedMessages.includes(msgId)) {
let index = this.state.collapsedMessages.indexOf(msgId);
this.setState(prevState => ({
collapsedMessages: [
...prevState.collapsedMessages.slice(0, index),
...prevState.collapsedMessages.slice(index + 1),
],
}));
} else {
this.setState(prevState => ({
collapsedMessages: prevState.collapsedMessages.concat(msgId),
}));
}
}
renderMessageItem(msg) {
const isBlockedByGroup = this.state.groups
.filter(group => msg.groups.includes(group.id))
@ -763,6 +804,7 @@ export class ASRouterAdminInner extends React.PureComponent {
const impressions = this.state.messageImpressions[msg.id]
? this.state.messageImpressions[msg.id].length
: 0;
const isCollapsed = this.state.collapsedMessages.includes(msg.id);
let itemClassName = "message-item";
if (isBlocked) {
@ -777,6 +819,13 @@ export class ASRouterAdminInner extends React.PureComponent {
</span>
</td>
<td>
<ToggleMessageJSON
msgId={`${msg.id}`}
toggleJSON={this.toggleJSON}
isCollapsed={isCollapsed}
/>
</td>
<td className="button-column">
<button
className={`button ${isBlocked ? "" : " primary"}`}
onClick={
@ -802,7 +851,9 @@ export class ASRouterAdminInner extends React.PureComponent {
</tr>
)}
<tr>
<pre>{JSON.stringify(msg, null, 2)}</pre>
<pre className={isCollapsed ? "collapsed" : "expanded"}>
{JSON.stringify(msg, null, 2)}
</pre>
</tr>
</td>
</tr>
@ -835,6 +886,8 @@ export class ASRouterAdminInner extends React.PureComponent {
? this.state.messageImpressions[msg.id].length
: 0;
const isCollapsed = this.state.collapsedMessages.includes(msg.id);
let itemClassName = "message-item";
if (isBlocked) {
itemClassName += " blocked";
@ -848,6 +901,13 @@ export class ASRouterAdminInner extends React.PureComponent {
<br />({impressions} impressions)
</span>
</td>
<td>
<ToggleMessageJSON
msgId={`${msg.id}`}
toggleJSON={this.toggleJSON}
isCollapsed={isCollapsed}
/>
</td>
<td>
<input
type="checkbox"
@ -857,13 +917,29 @@ export class ASRouterAdminInner extends React.PureComponent {
onClick={e => this.pushWNMessage(e, msg.id)}
/>
</td>
<td className="message-summary">
<pre>{JSON.stringify(msg, null, 2)}</pre>
<td className={`message-summary`}>
<pre className={isCollapsed ? "collapsed" : "expanded"}>
{JSON.stringify(msg, null, 2)}
</pre>
</td>
</tr>
);
}
toggleAllMessages(messagesToShow) {
if (this.state.collapsedMessages.length) {
this.setState({
collapsedMessages: [],
});
} else {
Array.prototype.forEach.call(messagesToShow, msg => {
this.setState(prevState => ({
collapsedMessages: prevState.collapsedMessages.concat(msg.id),
}));
});
}
}
renderMessages() {
if (!this.state.messages) {
return null;
@ -874,10 +950,22 @@ export class ASRouterAdminInner extends React.PureComponent {
: this.state.messages.filter(
message => message.provider === this.state.messageFilter
);
return (
<table>
<tbody>{messagesToShow.map(msg => this.renderMessageItem(msg))}</tbody>
</table>
<div>
<button
className="ASRouterButton slim button"
// eslint-disable-next-line react/jsx-no-bind
onClick={e => this.toggleAllMessages(messagesToShow)}
>
Collapse/Expand All
</button>
<table>
<tbody>
{messagesToShow.map(msg => this.renderMessageItem(msg))}
</tbody>
</table>
</div>
);
}
@ -1414,6 +1502,13 @@ export class ASRouterAdminInner extends React.PureComponent {
}
renderWNPTests() {
if (!this.state.messages) {
return null;
}
let messagesToShow = this.state.messages.filter(
message => message.provider === "whats-new-panel"
);
return (
<div>
<p className="helpLink">
@ -1439,6 +1534,13 @@ export class ASRouterAdminInner extends React.PureComponent {
Render Selected Messages
</button>
<h2>Messages</h2>
<button
className="ASRouterButton slim button"
// eslint-disable-next-line react/jsx-no-bind
onClick={e => this.toggleAllMessages(messagesToShow)}
>
Collapse/Expand All
</button>
{this.renderWNMessages()}
</div>
</div>

33
browser/components/newtab/content-src/components/ASRouterAdmin/ASRouterAdmin.scss
View File

@ -85,10 +85,10 @@
&.minimal-table {
border-collapse: collapse;
border: 1px solid $border-color;
td {
padding: 8px;
border: 1px solid $border-color;
}
td:first-child {
@ -134,16 +134,22 @@
td {
vertical-align: top;
border-bottom: 1px solid $border-color;
padding: 8px;
border-bottom: 1px solid $border-color;
&.min {
width: 1%;
white-space: nowrap;
}
&.message-summary {
width: 60%;
}
&.button-column {
width: 15%;
}
&:first-child {
border-left: 1px solid $border-color;
}
@ -206,4 +212,23 @@
.modalOverlayInner {
height: 80%;
}
.clearButton {
border: 0;
padding: 4px;
border-radius: 4px;
display: flex;
&:hover {
background: var(--newtab-element-hover-color);
}
}
.collapsed {
display: none;
}
.icon {
cursor: pointer;
}
}

32
browser/components/newtab/css/activity-stream-linux.css
View File

@ -1725,10 +1725,10 @@ main {
border-collapse: collapse;
width: 100%; }
.asrouter-admin table.minimal-table {
border-collapse: collapse; }
border-collapse: collapse;
border: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin table.minimal-table td {
padding: 8px;
border: 1px solid var(--newtab-border-secondary-color); }
padding: 8px; }
.asrouter-admin table.minimal-table td:first-child {
width: 1%;
white-space: nowrap; }
@ -1751,11 +1751,15 @@ main {
border-top: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin .message-item td {
vertical-align: top;
border-bottom: 1px solid var(--newtab-border-secondary-color);
padding: 8px; }
padding: 8px;
border-bottom: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin .message-item td.min {
width: 1%;
white-space: nowrap; }
.asrouter-admin .message-item td.message-summary {
width: 60%; }
.asrouter-admin .message-item td.button-column {
width: 15%; }
.asrouter-admin .message-item td:first-child {
border-left: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin .message-item td:last-child {
@ -1791,6 +1795,17 @@ main {
margin-bottom: 20px; }
.asrouter-admin .modalOverlayInner {
height: 80%; }
.asrouter-admin .clearButton {
border: 0;
padding: 4px;
border-radius: 4px;
display: flex; }
.asrouter-admin .clearButton:hover {
background: var(--newtab-element-hover-color); }
.asrouter-admin .collapsed {
display: none; }
.asrouter-admin .icon {
cursor: pointer; }
.pocket-logged-in-cta {
font-size: 13px;
@ -3240,6 +3255,13 @@ main {
background-color: rgba(12, 12, 13, 0.3); }
.ASRouterButton.secondary:focus {
box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); }
.ASRouterButton.slim {
background-color: rgba(12, 12, 13, 0.1);
margin-inline-start: 0;
font-size: 12px;
padding: 6px 12px; }
.ASRouterButton.slim:hover {
background-color: rgba(12, 12, 13, 0.2); }
[lwt-newtab-brighttext] .secondary {
background-color: rgba(249, 249, 250, 0.1); }

32
browser/components/newtab/css/activity-stream-mac.css
View File

@ -1728,10 +1728,10 @@ main {
border-collapse: collapse;
width: 100%; }
.asrouter-admin table.minimal-table {
border-collapse: collapse; }
border-collapse: collapse;
border: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin table.minimal-table td {
padding: 8px;
border: 1px solid var(--newtab-border-secondary-color); }
padding: 8px; }
.asrouter-admin table.minimal-table td:first-child {
width: 1%;
white-space: nowrap; }
@ -1754,11 +1754,15 @@ main {
border-top: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin .message-item td {
vertical-align: top;
border-bottom: 1px solid var(--newtab-border-secondary-color);
padding: 8px; }
padding: 8px;
border-bottom: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin .message-item td.min {
width: 1%;
white-space: nowrap; }
.asrouter-admin .message-item td.message-summary {
width: 60%; }
.asrouter-admin .message-item td.button-column {
width: 15%; }
.asrouter-admin .message-item td:first-child {
border-left: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin .message-item td:last-child {
@ -1794,6 +1798,17 @@ main {
margin-bottom: 20px; }
.asrouter-admin .modalOverlayInner {
height: 80%; }
.asrouter-admin .clearButton {
border: 0;
padding: 4px;
border-radius: 4px;
display: flex; }
.asrouter-admin .clearButton:hover {
background: var(--newtab-element-hover-color); }
.asrouter-admin .collapsed {
display: none; }
.asrouter-admin .icon {
cursor: pointer; }
.pocket-logged-in-cta {
font-size: 13px;
@ -3243,6 +3258,13 @@ main {
background-color: rgba(12, 12, 13, 0.3); }
.ASRouterButton.secondary:focus {
box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); }
.ASRouterButton.slim {
background-color: rgba(12, 12, 13, 0.1);
margin-inline-start: 0;
font-size: 12px;
padding: 6px 12px; }
.ASRouterButton.slim:hover {
background-color: rgba(12, 12, 13, 0.2); }
[lwt-newtab-brighttext] .secondary {
background-color: rgba(249, 249, 250, 0.1); }

32
browser/components/newtab/css/activity-stream-windows.css
View File

@ -1725,10 +1725,10 @@ main {
border-collapse: collapse;
width: 100%; }
.asrouter-admin table.minimal-table {
border-collapse: collapse; }
border-collapse: collapse;
border: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin table.minimal-table td {
padding: 8px;
border: 1px solid var(--newtab-border-secondary-color); }
padding: 8px; }
.asrouter-admin table.minimal-table td:first-child {
width: 1%;
white-space: nowrap; }
@ -1751,11 +1751,15 @@ main {
border-top: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin .message-item td {
vertical-align: top;
border-bottom: 1px solid var(--newtab-border-secondary-color);
padding: 8px; }
padding: 8px;
border-bottom: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin .message-item td.min {
width: 1%;
white-space: nowrap; }
.asrouter-admin .message-item td.message-summary {
width: 60%; }
.asrouter-admin .message-item td.button-column {
width: 15%; }
.asrouter-admin .message-item td:first-child {
border-left: 1px solid var(--newtab-border-secondary-color); }
.asrouter-admin .message-item td:last-child {
@ -1791,6 +1795,17 @@ main {
margin-bottom: 20px; }
.asrouter-admin .modalOverlayInner {
height: 80%; }
.asrouter-admin .clearButton {
border: 0;
padding: 4px;
border-radius: 4px;
display: flex; }
.asrouter-admin .clearButton:hover {
background: var(--newtab-element-hover-color); }
.asrouter-admin .collapsed {
display: none; }
.asrouter-admin .icon {
cursor: pointer; }
.pocket-logged-in-cta {
font-size: 13px;
@ -3240,6 +3255,13 @@ main {
background-color: rgba(12, 12, 13, 0.3); }
.ASRouterButton.secondary:focus {
box-shadow: 0 0 0 1px #0A84FF inset, 0 0 0 1px #0A84FF, 0 0 0 4px rgba(10, 132, 255, 0.3); }
.ASRouterButton.slim {
background-color: rgba(12, 12, 13, 0.1);
margin-inline-start: 0;
font-size: 12px;
padding: 6px 12px; }
.ASRouterButton.slim:hover {
background-color: rgba(12, 12, 13, 0.2); }
[lwt-newtab-brighttext] .secondary {
background-color: rgba(249, 249, 250, 0.1); }

95
browser/components/newtab/data/content/activity-stream.bundle.js
View File

@ -750,6 +750,7 @@ const Base = Object(react_redux__WEBPACK_IMPORTED_MODULE_4__["connect"])(state =
"use strict";
__webpack_require__.r(__webpack_exports__);
/* WEBPACK VAR INJECTION */(function(global) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ToggleStoryButton", function() { return ToggleStoryButton; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ToggleMessageJSON", function() { return ToggleMessageJSON; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TogglePrefCheckbox", function() { return TogglePrefCheckbox; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Personalization", function() { return Personalization; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DiscoveryStreamAdmin", function() { return DiscoveryStreamAdmin; });
@ -823,6 +824,27 @@ class ToggleStoryButton extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pur
}, "collapse/open");
}
}
class ToggleMessageJSON extends react__WEBPACK_IMPORTED_MODULE_4___default.a.PureComponent {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.toggleJSON(this.props.msgId);
}
render() {
let iconName = this.props.isCollapsed ? "icon icon-arrowhead-forward-small" : "icon icon-arrowhead-down-small";
return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
className: "clearButton",
onClick: this.handleClick
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
className: iconName
}));
}
}
class TogglePrefCheckbox extends react__WEBPACK_IMPORTED_MODULE_4___default.a.PureComponent {
constructor(props) {
@ -1125,9 +1147,12 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
this.handleUpdateWNMessages = this.handleUpdateWNMessages.bind(this);
this.handleForceWNP = this.handleForceWNP.bind(this);
this.pushWNMessage = this.pushWNMessage.bind(this);
this.toggleJSON = this.toggleJSON.bind(this);
this.toggleAllMessages = this.toggleAllMessages.bind(this);
this.state = {
messageFilter: "all",
WNMessages: [],
collapsedMessages: [],
evaluationStatus: {},
trailhead: {},
stringTargetingParameters: null,
@ -1435,6 +1460,19 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
}
}
toggleJSON(msgId) {
if (this.state.collapsedMessages.includes(msgId)) {
let index = this.state.collapsedMessages.indexOf(msgId);
this.setState(prevState => ({
collapsedMessages: [...prevState.collapsedMessages.slice(0, index), ...prevState.collapsedMessages.slice(index + 1)]
}));
} else {
this.setState(prevState => ({
collapsedMessages: prevState.collapsedMessages.concat(msgId)
}));
}
}
renderMessageItem(msg) {
const isBlockedByGroup = this.state.groups.filter(group => msg.groups.includes(group.id)).some(group => !group.enabled);
const msgProvider = this.state.providers.find(provider => provider.id === msg.provider);
@ -1442,6 +1480,7 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
const isMessageBlocked = this.state.messageBlockList.includes(msg.id) || this.state.messageBlockList.includes(msg.campaign);
const isBlocked = isMessageBlocked || isBlockedByGroup || isProviderExcluded;
const impressions = this.state.messageImpressions[msg.id] ? this.state.messageImpressions[msg.id].length : 0;
const isCollapsed = this.state.collapsedMessages.includes(msg.id);
let itemClassName = "message-item";
if (isBlocked) {
@ -1453,7 +1492,13 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
key: `${msg.id}-${msg.provider}`
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", {
className: "message-id"
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", null, msg.id, " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null))), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", null, msg.id, " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null))), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(ToggleMessageJSON, {
msgId: `${msg.id}`,
toggleJSON: this.toggleJSON,
isCollapsed: isCollapsed
})), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", {
className: "button-column"
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
className: `button ${isBlocked ? "" : " primary"}`,
onClick: isBlocked ? this.handleUnblock(msg) : this.handleBlock(msg)
}, isBlocked ? "Unblock" : "Block"), isBlocked ? null : react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
@ -1461,7 +1506,9 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
onClick: this.handleOverride(msg.id)
}, "Show"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), "(", impressions, " impressions)"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", {
className: "message-summary"
}, isBlocked && react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tr", null, "Block reason:", isBlockedByGroup && " Blocked by group", isProviderExcluded && " Excluded by provider", isMessageBlocked && " Message blocked"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tr", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("pre", null, JSON.stringify(msg, null, 2)))));
}, isBlocked && react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tr", null, "Block reason:", isBlockedByGroup && " Blocked by group", isProviderExcluded && " Excluded by provider", isMessageBlocked && " Message blocked"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tr", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("pre", {
className: isCollapsed ? "collapsed" : "expanded"
}, JSON.stringify(msg, null, 2)))));
}
pushWNMessage(event, msg) {
@ -1485,6 +1532,7 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
renderWNMessageItem(msg) {
const isBlocked = this.state.messageBlockList.includes(msg.id) || this.state.messageBlockList.includes(msg.campaign);
const impressions = this.state.messageImpressions[msg.id] ? this.state.messageImpressions[msg.id].length : 0;
const isCollapsed = this.state.collapsedMessages.includes(msg.id);
let itemClassName = "message-item";
if (isBlocked) {
@ -1496,15 +1544,35 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
key: `${msg.id}-${msg.provider}`
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", {
className: "message-id"
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", null, msg.id, " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), "(", impressions, " impressions)")), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", {
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", null, msg.id, " ", react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("br", null), "(", impressions, " impressions)")), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(ToggleMessageJSON, {
msgId: `${msg.id}`,
toggleJSON: this.toggleJSON,
isCollapsed: isCollapsed
})), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("input", {
type: "checkbox",
id: `${msg.id} checkbox`,
name: `${msg.id} checkbox` // eslint-disable-next-line react/jsx-no-bind
,
onClick: e => this.pushWNMessage(e, msg.id)
})), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("td", {
className: "message-summary"
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("pre", null, JSON.stringify(msg, null, 2))));
className: `message-summary`
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("pre", {
className: isCollapsed ? "collapsed" : "expanded"
}, JSON.stringify(msg, null, 2))));
}
toggleAllMessages(messagesToShow) {
if (this.state.collapsedMessages.length) {
this.setState({
collapsedMessages: []
});
} else {
Array.prototype.forEach.call(messagesToShow, msg => {
this.setState(prevState => ({
collapsedMessages: prevState.collapsedMessages.concat(msg.id)
}));
});
}
}
renderMessages() {
@ -1513,7 +1581,11 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
}
const messagesToShow = this.state.messageFilter === "all" ? this.state.messages : this.state.messages.filter(message => message.provider === this.state.messageFilter);
return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("table", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tbody", null, messagesToShow.map(msg => this.renderMessageItem(msg))));
return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
className: "ASRouterButton slim button" // eslint-disable-next-line react/jsx-no-bind
,
onClick: e => this.toggleAllMessages(messagesToShow)
}, "Collapse/Expand All"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("table", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("tbody", null, messagesToShow.map(msg => this.renderMessageItem(msg)))));
}
renderWNMessages() {
@ -1820,6 +1892,11 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
}
renderWNPTests() {
if (!this.state.messages) {
return null;
}
let messagesToShow = this.state.messages.filter(message => message.provider === "whats-new-panel");
return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("p", {
className: "helpLink"
}, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("span", {
@ -1830,7 +1907,11 @@ class ASRouterAdminInner extends react__WEBPACK_IMPORTED_MODULE_4___default.a.Pu
}, "Open What's New Panel"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
className: "ASRouterButton secondary button",
onClick: this.handleUpdateWNMessages
}, "Render Selected Messages"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("h2", null, "Messages"), this.renderWNMessages()));
}, "Render Selected Messages"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("h2", null, "Messages"), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("button", {
className: "ASRouterButton slim button" // eslint-disable-next-line react/jsx-no-bind
,
onClick: e => this.toggleAllMessages(messagesToShow)
}, "Collapse/Expand All"), this.renderWNMessages()));
}
getSection() {