feat: added markdown to closed messages (#2255)

This commit is contained in:
Wyatt Johnson
2019-04-12 00:06:01 +02:00
committed by Kiwi
parent 08e8e61e88
commit 3b31e3b02d
10 changed files with 55 additions and 28 deletions
+5
View File
@@ -61,6 +61,11 @@ const serverConfig = createDevServerConfig({
serverPort: config.get("port"),
publicPath: webpackConfig[0].output!.publicPath!,
});
// Disable the host check on the dev server as this is used exclusively for
// development and not in production.
serverConfig.disableHostCheck = true;
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(PORT, HOST, (err: Error) => {
@@ -1,5 +1,5 @@
import { Child, Parent } from "pym.js";
import uuid from "uuid/v4";
import uuid from "uuid/v1";
import { PromisifiedStorage } from "./PromisifiedStorage";
type Pym = Child | Parent;
@@ -14,7 +14,8 @@ class PrefixedStorage implements Storage {
get length() {
let count = 0;
for (let i = 0; i < this.storage.length; i++) {
if (this.storage.key(i)!.startsWith(this.prefix)) {
const key = this.storage.key(i);
if (key && key.startsWith(this.prefix)) {
count++;
}
}
@@ -24,8 +25,8 @@ class PrefixedStorage implements Storage {
public clear() {
const toBeDeleted = [];
for (let i = 0; i < this.storage.length; i++) {
const key = this.storage.key(i)!;
if (key.startsWith(this.prefix)) {
const key = this.storage.key(i);
if (key && key.startsWith(this.prefix)) {
toBeDeleted.push(key);
}
}
@@ -35,8 +36,8 @@ class PrefixedStorage implements Storage {
public key(n: number) {
let count = 0;
for (let i = 0; i < this.storage.length; i++) {
const key = this.storage.key(i)!;
if (key.startsWith(this.prefix)) {
const key = this.storage.key(i);
if (key && key.startsWith(this.prefix)) {
if (count === n) {
return key;
}
@@ -1,5 +1,6 @@
import React, { StatelessComponent } from "react";
import { Markdown } from "talk-framework/components";
import { PropTypesOf } from "talk-framework/types";
import { CallOut } from "talk-ui/components";
@@ -8,16 +9,18 @@ import MessageBoxContainer from "../containers/MessageBoxContainer";
import styles from "./PostCommentFormClosed.css";
interface Props {
message: string;
showMessageBox?: boolean;
story: PropTypesOf<typeof MessageBoxContainer>["story"];
children?: React.ReactNode;
}
const PostCommentFormClosed: StatelessComponent<Props> = props => (
<div>
{props.showMessageBox && (
<MessageBoxContainer story={props.story} className={styles.messageBox} />
)}
<CallOut fullWidth>{props.children}</CallOut>
<CallOut fullWidth>
<Markdown>{props.message}</Markdown>
</CallOut>
</div>
);
@@ -1,5 +1,8 @@
.root {
background-color: var(--palette-grey-dark);
border-color: var(--palette-grey-dark);
}
.message {
color: var(--palette-text-light);
}
@@ -1,5 +1,6 @@
import React, { StatelessComponent } from "react";
import { Markdown } from "talk-framework/components";
import { PropTypesOf } from "talk-framework/types";
import { CallOut, HorizontalGutter } from "talk-ui/components";
@@ -8,14 +9,14 @@ import MessageBoxContainer from "../containers/MessageBoxContainer";
import styles from "./PostCommentFormClosedSitewide.css";
interface Props {
message: string;
showMessageBox?: boolean;
story: PropTypesOf<typeof MessageBoxContainer>["story"];
children?: React.ReactNode;
}
const PostCommentFormClosedSitewide: StatelessComponent<Props> = props => (
<HorizontalGutter size="double">
<CallOut fullWidth className={styles.root}>
{props.children}
<Markdown className={styles.message}>{props.message}</Markdown>
</CallOut>
{props.showMessageBox && <MessageBoxContainer story={props.story} />}
</HorizontalGutter>
@@ -155,20 +155,18 @@ export class PostCommentFormContainer extends Component<Props, State> {
return (
<PostCommentFormClosedSitewide
story={this.props.story}
message={this.props.settings.disableCommenting.message}
showMessageBox={this.props.story.settings.messageBox.enabled}
>
{this.props.settings.disableCommenting.message}
</PostCommentFormClosedSitewide>
/>
);
}
if (this.props.story.isClosed) {
return (
<PostCommentFormClosed
story={this.props.story}
message={this.props.settings.closeCommenting.message}
showMessageBox={this.props.story.settings.messageBox.enabled}
>
{this.props.settings.closeCommenting.message}
</PostCommentFormClosed>
/>
);
}
}
@@ -26,6 +26,7 @@ exports[`renders correctly 1`] = `
exports[`renders when commenting has been disabled (collapsing) 1`] = `
<PostCommentFormClosedSitewide
message="commenting disabled"
showMessageBox={false}
story={
Object {
@@ -38,9 +39,7 @@ exports[`renders when commenting has been disabled (collapsing) 1`] = `
},
}
}
>
commenting disabled
</PostCommentFormClosedSitewide>
/>
`;
exports[`renders when commenting has been disabled (non-collapsing) 1`] = `
@@ -69,6 +68,7 @@ exports[`renders when commenting has been disabled (non-collapsing) 1`] = `
exports[`renders when story has been closed (collapsing) 1`] = `
<PostCommentFormClosed
message="story closed"
showMessageBox={false}
story={
Object {
@@ -81,9 +81,7 @@ exports[`renders when story has been closed (collapsing) 1`] = `
},
}
}
>
story closed
</PostCommentFormClosed>
/>
`;
exports[`renders when story has been closed (non-collapsing) 1`] = `
@@ -45,7 +45,15 @@ exports[`renders message box when commenting disabled 1`] = `
<div
className="CallOut-root CallOut-colorRegular CallOut-fullWidth PostCommentFormClosedSitewide-root"
>
Commenting disabled
<div
className="Markdown-root PostCommentFormClosedSitewide-message"
dangerouslySetInnerHTML={
Object {
"__html": "<p>Commenting disabled</p>
",
}
}
/>
</div>
<div
className="MessageBox-root"
@@ -497,7 +505,15 @@ exports[`renders message box when story isClosed 1`] = `
<div
className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
>
Story is closed
<div
className="Markdown-root"
dangerouslySetInnerHTML={
Object {
"__html": "<p>Story is closed</p>
",
}
}
/>
</div>
</div>
<div
@@ -52,7 +52,7 @@ it("renders disabled comment stream", async () => {
},
});
await waitForElement(() =>
within(testRenderer.root).getByText("commenting disabled")
within(testRenderer.root).getByText("commenting disabled", { exact: false })
);
});
@@ -66,7 +66,7 @@ it("renders closed comment stream", async () => {
},
});
await waitForElement(() =>
within(testRenderer.root).getByText("Story is closed")
within(testRenderer.root).getByText("Story is closed", { exact: false })
);
});
@@ -85,7 +85,9 @@ it("auto close comment stream when story closed at has been reached", async () =
})),
},
});
expect(within(testRenderer.root).queryByText("Story is closed")).toBeNull();
expect(
within(testRenderer.root).queryByText("Story is closed", { exact: false })
).toBeNull();
await waitForElement(() =>
within(testRenderer.root).getByTestID("comments-stream-log")
@@ -94,6 +96,6 @@ it("auto close comment stream when story closed at has been reached", async () =
jest.advanceTimersByTime(closeIn);
await waitForElement(() =>
within(testRenderer.root).getByText("Story is closed")
within(testRenderer.root).getByText("Story is closed", { exact: false })
);
});