diff --git a/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap index c3c5fe4ed..47693769e 100644 --- a/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap @@ -216,7 +216,7 @@ exports[`navigates to sign up form 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -239,7 +239,7 @@ exports[`navigates to sign up form 1`] = ` Password

Must be at least ⁨8⁩ characters

diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap index 6293da7d8..2450ce71f 100644 --- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap @@ -56,7 +56,7 @@ exports[`accepts correct password 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -92,7 +92,7 @@ exports[`accepts correct password 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -237,7 +237,7 @@ exports[`accepts correct password confirmation 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -273,7 +273,7 @@ exports[`accepts correct password confirmation 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -418,7 +418,7 @@ exports[`accepts valid email 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -454,7 +454,7 @@ exports[`accepts valid email 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -612,7 +612,7 @@ exports[`accepts valid username 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -635,7 +635,7 @@ exports[`accepts valid username 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -793,7 +793,7 @@ exports[`checks for invalid characters in username 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -829,7 +829,7 @@ exports[`checks for invalid characters in username 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -987,7 +987,7 @@ exports[`checks for invalid email 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -1023,7 +1023,7 @@ exports[`checks for invalid email 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -1181,7 +1181,7 @@ exports[`checks for too long username 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -1217,7 +1217,7 @@ exports[`checks for too long username 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -1375,7 +1375,7 @@ exports[`checks for too short password 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -1411,7 +1411,7 @@ exports[`checks for too short password 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -1569,7 +1569,7 @@ exports[`checks for too short username 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -1605,7 +1605,7 @@ exports[`checks for too short username 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -1763,7 +1763,7 @@ exports[`checks for wrong password confirmation 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -1799,7 +1799,7 @@ exports[`checks for wrong password confirmation 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -1944,7 +1944,7 @@ exports[`renders sign up form 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -1967,7 +1967,7 @@ exports[`renders sign up form 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -2099,7 +2099,7 @@ exports[`shows error when submitting empty form 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -2135,7 +2135,7 @@ exports[`shows error when submitting empty form 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -2280,7 +2280,7 @@ exports[`shows server error 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -2303,7 +2303,7 @@ exports[`shows server error 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -2427,7 +2427,7 @@ exports[`shows server error 2`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -2450,7 +2450,7 @@ exports[`shows server error 2`] = ` Password

Must be at least ⁨8⁩ characters

@@ -2569,7 +2569,7 @@ exports[`submits form successfully 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -2592,7 +2592,7 @@ exports[`submits form successfully 1`] = ` Password

Must be at least ⁨8⁩ characters

@@ -2711,7 +2711,7 @@ exports[`submits form successfully 2`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

@@ -2734,7 +2734,7 @@ exports[`submits form successfully 2`] = ` Password

Must be at least ⁨8⁩ characters

diff --git a/src/core/client/stream/components/Comment/Comment.spec.tsx b/src/core/client/stream/components/Comment/Comment.spec.tsx index f8d14f6eb..d9c0a9acf 100644 --- a/src/core/client/stream/components/Comment/Comment.spec.tsx +++ b/src/core/client/stream/components/Comment/Comment.spec.tsx @@ -14,6 +14,7 @@ it("renders username and body", () => { createdAt: "1995-12-17T03:24:00.000Z", topBarRight: "topBarRight", footer: "footer", + showEditedMarker: true, }; const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx index 68fa6dab4..dcf77308e 100644 --- a/src/core/client/stream/components/Comment/Comment.tsx +++ b/src/core/client/stream/components/Comment/Comment.tsx @@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react"; import { Flex } from "talk-ui/components"; import * as styles from "./Comment.css"; +import EditedMarker from "./EditedMarker"; import HTMLContent from "./HTMLContent"; import Timestamp from "./Timestamp"; import TopBarLeft from "./TopBarLeft"; @@ -17,6 +18,7 @@ export interface CommentProps { createdAt: string; topBarRight?: React.ReactNode; footer?: React.ReactNode; + showEditedMarker?: boolean; } const Comment: StatelessComponent = props => { @@ -32,7 +34,10 @@ const Comment: StatelessComponent = props => { props.author.username && ( {props.author.username} )} - {props.createdAt} + + {props.createdAt} + {props.showEditedMarker && } + {props.topBarRight &&
{props.topBarRight}
} diff --git a/src/core/client/stream/components/Comment/EditedMarker.css b/src/core/client/stream/components/Comment/EditedMarker.css new file mode 100644 index 000000000..147c8656f --- /dev/null +++ b/src/core/client/stream/components/Comment/EditedMarker.css @@ -0,0 +1,3 @@ +.root { + composes: detail from "talk-ui/shared/typography.css"; +} diff --git a/src/core/client/stream/components/Comment/EditedMarker.spec.tsx b/src/core/client/stream/components/Comment/EditedMarker.spec.tsx new file mode 100644 index 000000000..4017b77d1 --- /dev/null +++ b/src/core/client/stream/components/Comment/EditedMarker.spec.tsx @@ -0,0 +1,9 @@ +import { shallow } from "enzyme"; +import React from "react"; + +import EditedMarker from "./EditedMarker"; + +it("renders correctly", () => { + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/core/client/stream/components/Comment/EditedMarker.tsx b/src/core/client/stream/components/Comment/EditedMarker.tsx new file mode 100644 index 000000000..a07d0f7f2 --- /dev/null +++ b/src/core/client/stream/components/Comment/EditedMarker.tsx @@ -0,0 +1,16 @@ +import { Localized } from "fluent-react/compat"; +import React, { StatelessComponent } from "react"; + +import styles from "./EditedMarker.css"; + +const EditedMarker: StatelessComponent = () => ( +
+ ( + + Edited + + ) +
+); + +export default EditedMarker; diff --git a/src/core/client/stream/components/Comment/HTMLContent.tsx b/src/core/client/stream/components/Comment/HTMLContent.tsx index b9d61c945..62bd62b78 100644 --- a/src/core/client/stream/components/Comment/HTMLContent.tsx +++ b/src/core/client/stream/components/Comment/HTMLContent.tsx @@ -1,22 +1,17 @@ -import React from "react"; - import dompurify from "dompurify"; +import React, { StatelessComponent } from "react"; + import styles from "./HTMLContent.css"; -interface ContentProps { +interface HTMLContentProps { children: string; } -class HTMLContent extends React.Component { - public render() { - const { children } = this.props; - return ( -
- ); - } -} +const HTMLContent: StatelessComponent = ({ children }) => ( +
+); export default HTMLContent; diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap index 7d13e23ea..64419b0fa 100644 --- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap +++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap @@ -14,9 +14,16 @@ exports[`renders username and body 1`] = ` Marvin - - 1995-12-17T03:24:00.000Z - + + + 1995-12-17T03:24:00.000Z + + +
topBarRight diff --git a/src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap new file mode 100644 index 000000000..8b957f989 --- /dev/null +++ b/src/core/client/stream/components/Comment/__snapshots__/EditedMarker.spec.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
+ ( + + + Edited + + + ) +
+`; diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx index 2f1c036eb..b1ca618c4 100644 --- a/src/core/client/stream/components/PoweredBy.tsx +++ b/src/core/client/stream/components/PoweredBy.tsx @@ -14,11 +14,7 @@ const PoweredBy: StatelessComponent = props => { id="comments-poweredBy" logo={} > - + {"Powered by The Coral Project"} diff --git a/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap index 14ae7599d..fdee2029d 100644 --- a/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap +++ b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap @@ -16,7 +16,7 @@ exports[`renders correctly 1`] = ` Powered by <logo>The Coral Project</logo> diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx index 7ca1da6e6..304ce4e9c 100644 --- a/src/core/client/stream/containers/CommentContainer.spec.tsx +++ b/src/core/client/stream/containers/CommentContainer.spec.tsx @@ -24,6 +24,7 @@ it("renders username and body", () => { body: "Woof", createdAt: "1995-12-17T03:24:00.000Z", editing: { + edited: false, editableUntil: "1995-12-17T03:24:30.000Z", }, pending: false, @@ -50,6 +51,7 @@ it("renders body only", () => { body: "Woof", createdAt: "1995-12-17T03:24:00.000Z", editing: { + edited: false, editableUntil: "1995-12-17T03:24:30.000Z", }, pending: false, diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx index 13797018c..fe6747d2b 100644 --- a/src/core/client/stream/containers/CommentContainer.tsx +++ b/src/core/client/stream/containers/CommentContainer.tsx @@ -113,6 +113,7 @@ export class CommentContainer extends Component { body={comment.body} createdAt={comment.createdAt} blur={comment.pending || false} + showEditedMarker={comment.editing.edited} topBarRight={ (editable && ( @@ -173,6 +174,7 @@ const enhanced = withShowAuthPopupMutation( body createdAt editing { + edited editableUntil } pending diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap index c58185c5b..835692858 100644 --- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap +++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap @@ -24,6 +24,7 @@ exports[`renders body only 1`] = ` } indentLevel={1} + showEditedMarker={false} /> `; @@ -52,6 +53,7 @@ exports[`renders username and body 1`] = ` } indentLevel={1} + showEditedMarker={false} /> `; diff --git a/src/core/client/stream/mutations/EditCommentMutation.ts b/src/core/client/stream/mutations/EditCommentMutation.ts index a3d456ed2..3eee01303 100644 --- a/src/core/client/stream/mutations/EditCommentMutation.ts +++ b/src/core/client/stream/mutations/EditCommentMutation.ts @@ -19,6 +19,9 @@ const mutation = graphql` editComment(input: $input) { comment { body + editing { + edited + } } clientMutationId } @@ -40,6 +43,9 @@ function commit(environment: Environment, input: EditCommentInput) { editComment: { id: input.commentID, body: input.body, + editing: { + edited: true, + }, clientMutationId: (clientMutationId++).toString(), }, } as any, // TODO: (cvle) generated types should contain one for the optimistic response. diff --git a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap index 32b7681fa..ed29c75d0 100644 --- a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap @@ -151,7 +151,7 @@ exports[`cancel edit: edit canceled 1`] = ` className="PostCommentForm-poweredBy" > Powered by Markus - + +
Powered by Lukas - + +
Powered by Lukas - + +
Powered by Markus - + +
Powered by Markus - + +
+ ( + + Edited + + ) +
+
Powered by Markus - + +
Powered by Lukas - + +
Markus - + +
Lukas - + +
Isabelle - + +
Markus - + +
Lukas - + +
Markus - + +
Markus - + +
Markus - + +
Powered by Markus - + +
Lukas - + +
Powered by Markus - + +
Markus - + +
Lukas - + +
Powered by Markus - + +
Lukas - + +
Powered by Markus - + +
Lukas - + +
Powered by Markus - + +
Markus - + +
Powered by Markus - + +
Markus - + +
Lukas - + +
Powered by Markus - + +
Lukas - + +
Markus - + +
Markus - + +
Markus - + +
Lukas - + +
Markus - + +
Lukas - + +
Markus - + +
Lukas - + +
Markus - + +
Lukas - + +
Isabelle - + +
{ body: "Hello world! (from server)", createdAt: "2018-07-06T18:24:00.000Z", editing: { + edited: false, editableUntil: "2018-07-06T18:24:30.000Z", }, }, diff --git a/src/core/client/stream/test/postReply.spec.tsx b/src/core/client/stream/test/postReply.spec.tsx index 27a91b267..e8d43bdc5 100644 --- a/src/core/client/stream/test/postReply.spec.tsx +++ b/src/core/client/stream/test/postReply.spec.tsx @@ -46,6 +46,7 @@ beforeEach(() => { pageInfo: { endCursor: null, hasNextPage: false }, }, editing: { + edited: false, editableUntil: "2018-07-06T18:24:30.000Z", }, }, diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap index 874adc015..011020568 100644 --- a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap +++ b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap @@ -18,7 +18,7 @@ exports[`works with multiple form components 1`] = ` Username

A unique identifier displayed on your comments. You may use “_” and “.”

diff --git a/src/core/client/ui/components/InputDescription/InputDescription.tsx b/src/core/client/ui/components/InputDescription/InputDescription.tsx index d36d5fe7a..ae84ed141 100644 --- a/src/core/client/ui/components/InputDescription/InputDescription.tsx +++ b/src/core/client/ui/components/InputDescription/InputDescription.tsx @@ -11,7 +11,7 @@ const InputDescription: StatelessComponent = props => { const { className, children, ...rest } = props; return ( Form Components should go here

diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css index a2bd115fe..be3e0954e 100644 --- a/src/core/client/ui/components/Typography/Typography.css +++ b/src/core/client/ui/components/Typography/Typography.css @@ -40,8 +40,8 @@ composes: inputLabel from "talk-ui/shared/typography.css"; } -.inputDescription { - composes: inputDescription from "talk-ui/shared/typography.css"; +.detail { + composes: detail from "talk-ui/shared/typography.css"; } .timestamp { diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx index 2c4a20d94..b8f6d2396 100644 --- a/src/core/client/ui/components/Typography/Typography.tsx +++ b/src/core/client/ui/components/Typography/Typography.tsx @@ -15,7 +15,7 @@ type Variant = | "bodyCopy" | "bodyCopyBold" | "inputLabel" - | "inputDescription" + | "detail" | "timestamp"; // Based on Typography Component of Material UI. @@ -146,7 +146,7 @@ Typography.defaultProps = { bodyCopyBold: "p", timestamp: "span", inputLabel: "label", - inputDescription: "p", + detail: "p", }, noWrap: false, paragraph: false, diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css index cb785f8fc..3012a3617 100644 --- a/src/core/client/ui/shared/typography.css +++ b/src/core/client/ui/shared/typography.css @@ -155,7 +155,7 @@ color: var(--palette-text-primary); } -.inputDescription { +.detail { font-size: calc(14rem / var(--rem-base)); font-weight: var(--font-weight-regular); font-family: var(--font-family-sans-serif); diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl index 683ea792e..d939806a7 100644 --- a/src/locales/en-US/stream.ftl +++ b/src/locales/en-US/stream.ftl @@ -65,3 +65,4 @@ comments-editCommentForm-rte = .placeholder = { comments-editCommentForm-rteLabel } comments-editCommentForm-editRemainingTime = Edit: remaining comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one? +comments-editedMarker-edited = Edited