Implement local reply list for last threading level

src/core/client/stream/tabs/comments/components/Indent.css

@@ -30,6 +30,12 @@
   border-left: 3px solid var(--palette-grey-lighter);
 }
 
+.level6 {
+  padding-left: var(--spacing-unit);
+  margin-left: calc(5 * var(--spacing-unit));
+  border-left: 3px solid var(--palette-grey-lightest);
+}
+
 .noBorder {
   border: 0;
 }

src/core/client/stream/tabs/comments/components/Indent.tsx

@@ -20,6 +20,7 @@ const Indent: StatelessComponent<IndentProps> = props => {
           [styles.level3]: props.level === 3,
           [styles.level4]: props.level === 4,
           [styles.level5]: props.level === 5,
+          [styles.level6]: props.level === 6,
           [styles.noBorder]: props.noBorder,
         })}
       >

src/core/client/stream/tabs/comments/components/ReplyList.tsx

@@ -22,6 +22,8 @@ export interface ReplyListProps {
   disableShowAll?: boolean;
   indentLevel?: number;
   ReplyListComponent?: React.ComponentType<any>;
+  localReply?: boolean;
+  disableReplies?: boolean;
 }
 
 function getReplyListElement(
@@ -48,6 +50,8 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
             comment={comment}
             asset={props.asset}
             indentLevel={props.indentLevel}
+            localReply={props.localReply}
+            disableReplies={props.disableReplies}
           />
           {getReplyListElement(props, comment)}
         </HorizontalGutter>

src/core/client/stream/tabs/comments/containers/CommentContainer.tsx

@@ -26,6 +26,8 @@ interface InnerProps {
   asset: AssetData;
   indentLevel?: number;
   showAuthPopup: ShowAuthPopupMutation;
+  localReply?: boolean;
+  disableReplies?: boolean;
 }
 
 interface State {
@@ -107,7 +109,13 @@ export class CommentContainer extends Component<InnerProps, State> {
   }
 
   public render() {
-    const { comment, asset, indentLevel } = this.props;
+    const {
+      comment,
+      asset,
+      indentLevel,
+      localReply,
+      disableReplies,
+    } = this.props;
     const { showReplyDialog, showEditDialog, editable } = this.state;
     if (showEditDialog) {
       return (
@@ -144,11 +152,13 @@ export class CommentContainer extends Component<InnerProps, State> {
           }
           footer={
             <>
-              <ReplyButton
-                id={`comments-commentContainer-replyButton-${comment.id}`}
-                onClick={this.openReplyDialog}
-                active={showReplyDialog}
-              />
+              {!disableReplies && (
+                <ReplyButton
+                  id={`comments-commentContainer-replyButton-${comment.id}`}
+                  onClick={this.openReplyDialog}
+                  active={showReplyDialog}
+                />
+              )}
               <PermalinkButtonContainer commentID={comment.id} />
             </>
           }
@@ -158,6 +168,7 @@ export class CommentContainer extends Component<InnerProps, State> {
             comment={comment}
             asset={asset}
             onClose={this.closeReplyDialog}
+            localReply={localReply}
           />
         )}
       </>

src/core/client/stream/tabs/comments/containers/LocalReplyListContainer.tsx

@@ -25,9 +25,10 @@ export class LocalReplyListContainer extends Component<InnerProps> {
       <ReplyList
         me={this.props.me}
         comment={this.props.comment}
-        comments={this.props.comment.localReplies.edges.map(e => e.node)}
+        comments={this.props.comment.localReplies}
         asset={this.props.asset}
         indentLevel={this.props.indentLevel}
+        disableReplies
       />
     );
   }
@@ -48,12 +49,8 @@ const enhanced = withFragmentContainer<InnerProps>({
     fragment LocalReplyListContainer_comment on Comment {
       id
       localReplies {
-        edges {
-          node {
-            id
-            ...CommentContainer_comment
-          }
-        }
+        id
+        ...CommentContainer_comment
       }
     }
   `,

src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.spec.tsx

@@ -92,7 +92,7 @@ it("save values", async () => {
 
 it("creates a comment", async () => {
   const assetID = "asset-id";
-  const input = { body: "Hello World!" };
+  const input = { body: "Hello World!", local: false };
   const createCommentStub = sinon.stub();
   const form = { reset: noop };
   const onCloseStub = sinon.stub();

src/core/client/stream/tabs/comments/containers/ReplyCommentFormContainer.tsx

@@ -25,6 +25,7 @@ interface InnerProps {
   asset: AssetData;
   onClose?: () => void;
   autofocus: boolean;
+  localReply?: boolean;
 }
 
 interface State {
@@ -76,6 +77,7 @@ export class ReplyCommentFormContainer extends Component<InnerProps, State> {
       await this.props.createComment({
         assetID: this.props.asset.id,
         parentID: this.props.comment.id,
+        local: this.props.localReply,
         ...input,
       });
 

src/core/client/stream/tabs/comments/containers/ReplyListContainer.spec.tsx

@@ -29,6 +29,7 @@ it("renders correctly", () => {
     me: null,
     indentLevel: 1,
     ReplyListComponent: () => null,
+    localReply: false,
   };
   const wrapper = shallow(<ReplyListContainerN {...props} />);
   expect(wrapper).toMatchSnapshot();
@@ -50,6 +51,7 @@ it("renders correctly when replies are null", () => {
     me: null,
     indentLevel: 1,
     ReplyListComponent: undefined,
+    localReply: false,
   };
   const wrapper = shallow(<ReplyListContainerN {...props} />);
   expect(wrapper).toMatchSnapshot();
@@ -75,6 +77,7 @@ describe("when has more replies", () => {
     me: null,
     indentLevel: 1,
     ReplyListComponent: undefined,
+    localReply: false,
   };
 
   let wrapper: ShallowWrapper;

src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx

@@ -22,6 +22,7 @@ export interface InnerProps {
   relay: RelayPaginationProp;
   indentLevel: number;
   ReplyListComponent: React.ComponentType<any> | undefined;
+  localReply: boolean | undefined;
 }
 
 // TODO: (cvle) This should be autogenerated.
@@ -54,6 +55,7 @@ export class ReplyListContainer extends React.Component<InnerProps> {
         disableShowAll={this.state.disableShowAll}
         indentLevel={this.props.indentLevel}
         ReplyListComponent={this.props.ReplyListComponent}
+        localReply={this.props.localReply}
       />
     );
   }
@@ -85,9 +87,10 @@ function createReplyListContainer(
     comment: GraphQLTaggedNode;
   },
   query: GraphQLTaggedNode,
-  ReplyListComponent?: React.ComponentType<any>
+  ReplyListComponent?: React.ComponentType<any>,
+  localReply?: boolean
 ) {
-  return withProps({ indentLevel, ReplyListComponent })(
+  return withProps({ indentLevel, ReplyListComponent, localReply })(
     withPaginationContainer<
       InnerProps,
       ReplyListContainer1PaginationQueryVariables,
@@ -170,7 +173,8 @@ const ReplyListContainer5 = createReplyListContainer(
   `,
   (props: PropTypesOf<typeof LocalReplyListContainer>) => (
     <LocalReplyListContainer {...props} indentLevel={6} />
-  )
+  ),
+  true
 );
 
 const ReplyListContainer4 = createReplyListContainer(

src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap

@@ -39,6 +39,7 @@ exports[`renders correctly 1`] = `
   }
   disableShowAll={false}
   indentLevel={1}
+  localReply={false}
   me={null}
   onShowAll={[Function]}
 />
@@ -85,6 +86,7 @@ exports[`when has more replies renders hasMore 1`] = `
   disableShowAll={false}
   hasMore={true}
   indentLevel={1}
+  localReply={false}
   me={null}
   onShowAll={[Function]}
 />
@@ -129,6 +131,7 @@ exports[`when has more replies when showing all disables show all button 1`] = `
   disableShowAll={true}
   hasMore={true}
   indentLevel={1}
+  localReply={false}
   me={null}
   onShowAll={[Function]}
 />
@@ -173,6 +176,7 @@ exports[`when has more replies when showing all enable show all button after loa
   disableShowAll={false}
   hasMore={true}
   indentLevel={1}
+  localReply={false}
   me={null}
   onShowAll={[Function]}
 />