Fix lint and test

src/core/client/stream/components/Comment/Comment.spec.tsx

@@ -7,7 +7,6 @@ import Comment from "./Comment";
 
 it("renders username and body", () => {
   const props: PropTypesOf<typeof Comment> = {
-    id: "comment-id",
     author: {
       username: "Marvin",
     },

src/core/client/stream/components/Comment/Comment.tsx

@@ -34,7 +34,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
             )}
           <Timestamp>{props.createdAt}</Timestamp>
         </TopBarLeft>
-        <div>{props.topBarRight}</div>
+        {props.topBarRight && <div>{props.topBarRight}</div>}
       </Flex>
       <HTMLContent>{props.body || ""}</HTMLContent>
       <Flex className={styles.footer} direction="row" itemGutter="half">

src/core/client/stream/components/Comment/IndentedComment.spec.tsx

@@ -8,7 +8,6 @@ import IndentedComment from "./IndentedComment";
 it("renders correctly", () => {
   const props: PropTypesOf<typeof IndentedComment> = {
     indentLevel: 1,
-    id: "comment-id",
     author: {
       username: "Marvin",
     },

src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap

@@ -5,16 +5,20 @@ exports[`renders username and body 1`] = `
   className="Comment-root"
   role="article"
 >
-  <TopBar
+  <withPropsOnChange(Flex)
     className="Comment-topBar"
+    direction="row"
+    justifyContent="space-between"
   >
-    <Username>
-      Marvin
-    </Username>
-    <Timestamp>
-      1995-12-17T03:24:00.000Z
-    </Timestamp>
-  </TopBar>
+    <TopBarLeft>
+      <Username>
+        Marvin
+      </Username>
+      <Timestamp>
+        1995-12-17T03:24:00.000Z
+      </Timestamp>
+    </TopBarLeft>
+  </withPropsOnChange(Flex)>
   <HTMLContent>
     Woof
   </HTMLContent>