From 3b31e3b02d805ac42c3f22c2aa7bba862cefef13 Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Thu, 11 Apr 2019 22:06:01 +0000 Subject: [PATCH] feat: added markdown to closed messages (#2255) --- scripts/start.ts | 5 +++++ .../framework/lib/storage/PymStorage.ts | 2 +- .../framework/lib/storage/prefixStorage.ts | 11 +++++----- .../components/PostCommentFormClosed.tsx | 7 +++++-- .../PostCommentFormClosedSitewide.css | 3 +++ .../PostCommentFormClosedSitewide.tsx | 5 +++-- .../containers/PostCommentFormContainer.tsx | 10 ++++------ .../PostCommentFormContainer.spec.tsx.snap | 10 ++++------ .../renderMessageBox.spec.tsx.snap | 20 +++++++++++++++++-- .../closedOrDisabledCommentStream.spec.tsx | 10 ++++++---- 10 files changed, 55 insertions(+), 28 deletions(-) diff --git a/scripts/start.ts b/scripts/start.ts index 78b1f5fa2..23e5e1298 100644 --- a/scripts/start.ts +++ b/scripts/start.ts @@ -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) => { diff --git a/src/core/client/framework/lib/storage/PymStorage.ts b/src/core/client/framework/lib/storage/PymStorage.ts index 6a93d5035..2c6a8713c 100644 --- a/src/core/client/framework/lib/storage/PymStorage.ts +++ b/src/core/client/framework/lib/storage/PymStorage.ts @@ -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; diff --git a/src/core/client/framework/lib/storage/prefixStorage.ts b/src/core/client/framework/lib/storage/prefixStorage.ts index 9e360ecec..537c0a960 100644 --- a/src/core/client/framework/lib/storage/prefixStorage.ts +++ b/src/core/client/framework/lib/storage/prefixStorage.ts @@ -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; } diff --git a/src/core/client/stream/tabs/comments/components/PostCommentFormClosed.tsx b/src/core/client/stream/tabs/comments/components/PostCommentFormClosed.tsx index 8ba9edb59..9dcd7e78b 100644 --- a/src/core/client/stream/tabs/comments/components/PostCommentFormClosed.tsx +++ b/src/core/client/stream/tabs/comments/components/PostCommentFormClosed.tsx @@ -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["story"]; - children?: React.ReactNode; } const PostCommentFormClosed: StatelessComponent = props => (
{props.showMessageBox && ( )} - {props.children} + + {props.message} +
); diff --git a/src/core/client/stream/tabs/comments/components/PostCommentFormClosedSitewide.css b/src/core/client/stream/tabs/comments/components/PostCommentFormClosedSitewide.css index ccf863f53..61c8835d8 100644 --- a/src/core/client/stream/tabs/comments/components/PostCommentFormClosedSitewide.css +++ b/src/core/client/stream/tabs/comments/components/PostCommentFormClosedSitewide.css @@ -1,5 +1,8 @@ .root { background-color: var(--palette-grey-dark); border-color: var(--palette-grey-dark); +} + +.message { color: var(--palette-text-light); } diff --git a/src/core/client/stream/tabs/comments/components/PostCommentFormClosedSitewide.tsx b/src/core/client/stream/tabs/comments/components/PostCommentFormClosedSitewide.tsx index db6215522..57cc8c80d 100644 --- a/src/core/client/stream/tabs/comments/components/PostCommentFormClosedSitewide.tsx +++ b/src/core/client/stream/tabs/comments/components/PostCommentFormClosedSitewide.tsx @@ -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["story"]; - children?: React.ReactNode; } const PostCommentFormClosedSitewide: StatelessComponent = props => ( - {props.children} + {props.message} {props.showMessageBox && } diff --git a/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx b/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx index 3accef551..e8e810d93 100644 --- a/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx +++ b/src/core/client/stream/tabs/comments/containers/PostCommentFormContainer.tsx @@ -155,20 +155,18 @@ export class PostCommentFormContainer extends Component { return ( - {this.props.settings.disableCommenting.message} - + /> ); } if (this.props.story.isClosed) { return ( - {this.props.settings.closeCommenting.message} - + /> ); } } diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap index 469983673..538ad2d07 100644 --- a/src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap +++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/PostCommentFormContainer.spec.tsx.snap @@ -26,6 +26,7 @@ exports[`renders correctly 1`] = ` exports[`renders when commenting has been disabled (collapsing) 1`] = ` - commenting disabled - +/> `; 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`] = ` - story closed - +/> `; exports[`renders when story has been closed (non-collapsing) 1`] = ` diff --git a/src/core/client/stream/test/comments/__snapshots__/renderMessageBox.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderMessageBox.spec.tsx.snap index dd6060d5a..ec8cf35eb 100644 --- a/src/core/client/stream/test/comments/__snapshots__/renderMessageBox.spec.tsx.snap +++ b/src/core/client/stream/test/comments/__snapshots__/renderMessageBox.spec.tsx.snap @@ -45,7 +45,15 @@ exports[`renders message box when commenting disabled 1`] = `
- Commenting disabled +
Commenting disabled

+", + } + } + />
- Story is closed +
Story is closed

+", + } + } + />
{ }, }); 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 }) ); });