Remove new thread form cancel button

The new comment form had a cancel button to collapse it back to the
thread list. Drop it entirely; users close the thread list popover to
undo expanding the form. Removes the onCancel prop from NewThreadForm
and its wiring in ThreadList, the popover and the editor new thread
view.

Author: tf

entry_types/scrolled/package/spec/editor/views/NewThreadView-spec.js

@@ -15,7 +15,6 @@ describe('NewThreadView', () => {
   useFakeTranslations({
     'pageflow_scrolled.review.add_comment_placeholder': 'Add a comment...',
     'pageflow_scrolled.review.send': 'Send',
-    'pageflow_scrolled.review.cancel': 'Cancel',
     'pageflow_scrolled.editor.new_thread_view.tabs.newComment': 'New topic',
     'pageflow_scrolled.editor.new_thread_view.back': 'Comments'
   });

entry_types/scrolled/package/spec/frontend/commenting/features/addCommentMode-spec.js

@@ -1,18 +1,13 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import userEvent from '@testing-library/user-event';
-import {useFakeTranslations} from 'pageflow/testHelpers';
 
 import {api} from 'frontend/api';
 import {renderEntry, useCommentingPageObjects} from 'support/pageObjects/commenting';
 
 describe('add comment mode', () => {
   useCommentingPageObjects();
 
-  useFakeTranslations({
-    'pageflow_scrolled.review.cancel': 'Cancel'
-  });
-
   it('renders add comment button', () => {
     const entry = renderEntry({
       seed: {
@@ -86,24 +81,6 @@ describe('add comment mode', () => {
     expect(entry.getNewThreadInput()).toBeInTheDocument();
   });
 
-  it('closes popover when cancelling new thread form on element without threads', async () => {
-    const user = userEvent.setup();
-    const entry = renderEntry({
-      seed: {
-        contentElements: [{
-          typeName: 'withTestId',
-          configuration: {testId: 5}
-        }]
-      }
-    });
-
-    await user.click(entry.getAddCommentButton());
-    await user.click(entry.getContentElementByTestId(5).getSelectToCommentButton());
-    await user.click(entry.getByRole('button', {name: 'Cancel'}));
-
-    expect(entry.queryAllCommentBadges()).toHaveLength(0);
-  });
-
   it('exits add comment mode when overlay is clicked', async () => {
     const user = userEvent.setup();
     const entry = renderEntry({

entry_types/scrolled/package/spec/review/ThreadList-spec.js

@@ -12,7 +12,6 @@ describe('ThreadList', () => {
     'pageflow_scrolled.review.reply_count.other': '%{count} replies',
     'pageflow_scrolled.review.add_comment_placeholder': 'Add a comment...',
     'pageflow_scrolled.review.new_topic': 'New topic',
-    'pageflow_scrolled.review.cancel': 'Cancel',
     'pageflow_scrolled.review.reply_placeholder': 'Reply...',
     'pageflow_scrolled.review.send': 'Send',
     'pageflow_scrolled.review.enter_for_new_line': 'Enter for new line',
@@ -694,10 +693,10 @@ describe('ThreadList', () => {
     expect(getByPlaceholderText('Add a comment...')).toBeInTheDocument();
   });
 
-  it('hides form when cancel is clicked', async () => {
+  it('does not show a cancel button after expanding the new thread form', async () => {
     const user = userEvent.setup();
 
-    const {getByRole, queryByPlaceholderText} = renderWithReviewState(
+    const {getByRole, queryByRole, getByPlaceholderText} = renderWithReviewState(
       <ThreadList subjectType="ContentElement" subjectId={10} />,
       {
         commentThreads: [
@@ -709,10 +708,9 @@ describe('ThreadList', () => {
     );
 
     await user.click(getByRole('button', {name: 'New topic'}));
-    await user.click(getByRole('button', {name: 'Cancel'}));
 
-    expect(queryByPlaceholderText('Add a comment...')).not.toBeInTheDocument();
-    expect(getByRole('button', {name: 'New topic'})).toBeInTheDocument();
+    expect(getByPlaceholderText('Add a comment...')).toBeInTheDocument();
+    expect(queryByRole('button', {name: 'Cancel'})).not.toBeInTheDocument();
   });
 
   it('posts create comment message when replying to thread', async () => {

entry_types/scrolled/package/src/editor/views/NewThreadView.js

@@ -54,8 +54,7 @@ const NewThreadFormView = ReviewView.extend({
       <NewThreadForm subjectType={subjectType}
                      subjectId={subjectId}
                      subjectRange={subjectRange}
-                     onSubmit={leave}
-                     onCancel={leave} />
+                     onSubmit={leave} />
     );
   }
 });

entry_types/scrolled/package/src/frontend/commenting/Popover.js

@@ -85,8 +85,7 @@ export function Popover({
                         subjectId={subjectId}
                         subjectRange={subjectRange}
                         showNewForm={showNewForm}
-                        hideNewTopicButton={hideNewTopicButton}
-                        onDismiss={clearSelection} />
+                        hideNewTopicButton={hideNewTopicButton} />
           </div>
         </FloatingPortal>}
     </span>

entry_types/scrolled/package/src/review/NewThreadForm.js

@@ -8,7 +8,7 @@ import {isSubmitShortcut} from './submitShortcut';
 import SendIcon from './images/send.svg';
 import styles from './NewThreadForm.module.css';
 
-export function NewThreadForm({subjectType, subjectId, subjectRange, onSubmit, onCancel}) {
+export function NewThreadForm({subjectType, subjectId, subjectRange, onSubmit}) {
   const {t} = useI18n({locale: 'ui'});
   const [body, setBody] = useState('');
   const hasText = body.trim().length > 0;
@@ -60,12 +60,6 @@ export function NewThreadForm({subjectType, subjectId, subjectRange, onSubmit, o
           <span className={styles.hint}>
             {t('pageflow_scrolled.review.enter_for_new_line')}
           </span>}
-        {onCancel &&
-          <button className={styles.cancelButton}
-                  type="button"
-                  onClick={onCancel}>
-            {t('pageflow_scrolled.review.cancel')}
-          </button>}
         <button className={styles.submitButton}
                 type="submit">
           <SendIcon /> {t('pageflow_scrolled.review.send')}

entry_types/scrolled/package/src/review/NewThreadForm.module.css

@@ -42,16 +42,6 @@
   font-size: space(3);
 }
 
-.cancelButton {
-  font: inherit;
-  font-weight: 500;
-  color: var(--ui-on-surface-color-light);
-  background: none;
-  border: none;
-  padding: space(1.5) space(3);
-  cursor: pointer;
-}
-
 .submitButton {
   display: flex;
   align-items: center;

entry_types/scrolled/package/src/review/ThreadList.js

@@ -11,7 +11,7 @@ import ChevronIcon from './images/chevron.svg';
 import NewTopicIcon from './images/newTopic.svg';
 import styles from './ThreadList.module.css';
 
-export function ThreadList({subjectType, subjectId, subjectRange, filter, compareRanges, highlightedThreadId, onThreadClick, restrictInteractionsToHighlighted, showNewForm: showNewFormProp, hideNewTopicButton, reversed, onDismiss}) {
+export function ThreadList({subjectType, subjectId, subjectRange, filter, compareRanges, highlightedThreadId, onThreadClick, restrictInteractionsToHighlighted, showNewForm: showNewFormProp, hideNewTopicButton, reversed}) {
   const {t} = useI18n({locale: 'ui'});
   const allActiveThreads = useCommentThreads({subjectType, subjectId, subjectRange}, {resolved: false});
   const allResolvedThreads = useCommentThreads({subjectType, subjectId, subjectRange}, {resolved: true});
@@ -57,11 +57,7 @@ export function ThreadList({subjectType, subjectId, subjectRange, filter, compar
         <NewThreadForm subjectType={subjectType}
                        subjectId={subjectId}
                        subjectRange={subjectRange}
-                       onSubmit={() => setFormToggled(false)}
-                       onCancel={() => {
-                         setFormToggled(false);
-                         if (activeThreads.length === 0 && onDismiss) onDismiss();
-                       }} />}
+                       onSubmit={() => setFormToggled(false)} />}
 
       {noThreads && !showNewForm &&
         <p className={styles.blankSlate}>