From a914fbceacb7c7ce8424b2d71867dc8b6807a2e8 Mon Sep 17 00:00:00 2001
From: mirefly <mirefly@gmail.com>
Date: Sat, 12 Jan 2019 16:34:47 -0700
Subject: [PATCH 1/3] Refactor ReportAbuseButton to use DismissibleTextForm

---
 src/amo/components/ReportAbuseButton/index.js |  76 +----
 .../components/ReportAbuseButton/styles.scss  |  29 --
 src/core/reducers/abuse.js                    |  64 ----
 .../amo/components/TestReportAbuseButton.js   | 309 +++++-------------
 tests/unit/core/reducers/test_abuse.js        |  32 --
 5 files changed, 90 insertions(+), 420 deletions(-)

diff --git a/src/amo/components/ReportAbuseButton/index.js b/src/amo/components/ReportAbuseButton/index.js
index 9844f0852b2..6b99ce84d52 100644
--- a/src/amo/components/ReportAbuseButton/index.js
+++ b/src/amo/components/ReportAbuseButton/index.js
@@ -3,7 +3,6 @@ import makeClassName from 'classnames';
 import { oneLine } from 'common-tags';
 import * as React from 'react';
 import { connect } from 'react-redux';
-import Textarea from 'react-textarea-autosize';
 import { compose } from 'redux';
 
 import { withErrorHandler } from 'core/errorHandler';
@@ -11,14 +10,14 @@ import type { ErrorHandlerType } from 'core/errorHandler';
 import translate from 'core/i18n/translate';
 import log from 'core/logger';
 import {
-  disableAbuseButtonUI,
-  enableAbuseButtonUI,
   hideAddonAbuseReportUI,
   sendAddonAbuseReport,
   showAddonAbuseReportUI,
 } from 'core/reducers/abuse';
-import { sanitizeHTML } from 'core/utils';
+import { normalizeFileNameId, sanitizeHTML } from 'core/utils';
 import Button from 'ui/components/Button';
+import DismissibleTextForm from 'ui/components/DismissibleTextForm';
+import type { OnSubmitParams } from 'ui/components/DismissibleTextForm';
 import type { AppState } from 'amo/store';
 import type { AddonAbuseState } from 'core/reducers/abuse';
 import type { DispatchFunc } from 'core/types/redux';
@@ -41,11 +40,7 @@ type InternalProps = {|
 |};
 
 export class ReportAbuseButtonBase extends React.Component<InternalProps> {
-  textarea: React.ElementRef<typeof Textarea>;
-
-  dismissReportUI = (event: SyntheticEvent<any>) => {
-    event.preventDefault();
-
+  dismissReportUI = () => {
     const { addon, dispatch, loading } = this.props;
 
     if (loading) {
@@ -58,12 +53,10 @@ export class ReportAbuseButtonBase extends React.Component<InternalProps> {
     dispatch(hideAddonAbuseReportUI({ addon }));
   };
 
-  sendReport = (event: SyntheticEvent<any>) => {
-    event.preventDefault();
-
+  sendReport = ({ text }: OnSubmitParams) => {
     // The button isn't clickable if there is no content, but just in case:
     // we verify there's a message to send.
-    if (!this.textarea.value.length) {
+    if (!text.trim().length) {
       log.debug(oneLine`User managed to click submit button while textarea
         was empty. Ignoring this onClick/sendReport event.`);
       return;
@@ -75,7 +68,7 @@ export class ReportAbuseButtonBase extends React.Component<InternalProps> {
       sendAddonAbuseReport({
         addonSlug: addon.slug,
         errorHandlerId: errorHandler.id,
-        message: this.textarea.value,
+        message: text,
       }),
     );
   };
@@ -86,20 +79,6 @@ export class ReportAbuseButtonBase extends React.Component<InternalProps> {
     const { addon, dispatch } = this.props;
 
     dispatch(showAddonAbuseReportUI({ addon }));
-    this.textarea.focus();
-  };
-
-  textareaChange = () => {
-    const { abuseReport, addon, dispatch } = this.props;
-
-    // Don't dispatch the UI update if the button is already visible.
-    // We also test for `value.trim()` so the user can't submit an
-    // empty report full of spaces.
-    if (this.textarea.value.trim().length && !abuseReport.buttonEnabled) {
-      dispatch(enableAbuseButtonUI({ addon }));
-    } else if (!this.textarea.value.trim().length) {
-      dispatch(disableAbuseButtonUI({ addon }));
-    }
   };
 
   render() {
@@ -133,8 +112,6 @@ export class ReportAbuseButtonBase extends React.Component<InternalProps> {
       );
     }
 
-    const sendButtonIsDisabled = loading || !abuseReport.buttonEnabled;
-
     const prefaceText = i18n.sprintf(
       i18n.gettext(
         `If you think this add-on violates
@@ -190,40 +167,19 @@ export class ReportAbuseButtonBase extends React.Component<InternalProps> {
 
           {errorHandler.renderErrorIfPresent()}
 
-          <Textarea
-            className="ReportAbuseButton-textarea"
-            disabled={loading}
-            inputRef={(ref) => {
-              this.textarea = ref;
-            }}
-            onChange={this.textareaChange}
+          <DismissibleTextForm
+            id={normalizeFileNameId(__filename)}
+            isSubmitting={loading}
+            onSubmit={this.sendReport}
+            submitButtonText={i18n.gettext('Send abuse report')}
+            submitButtonInProgressText={i18n.gettext('Sending abuse report')}
+            onDismiss={this.dismissReportUI}
+            dismissButtonText={i18n.gettext('Dismiss')}
             placeholder={i18n.gettext(
               'Explain how this add-on is violating our policies.',
             )}
+            microButtons
           />
-
-          <div className="ReportAbuseButton-buttons">
-            <a
-              className={makeClassName('ReportAbuseButton-dismiss-report', {
-                'ReportAbuseButton-dismiss-report--disabled': loading,
-              })}
-              href="#cancel"
-              onClick={this.dismissReportUI}
-            >
-              {i18n.gettext('Dismiss')}
-            </a>
-            <Button
-              buttonType="alert"
-              className="ReportAbuseButton-send-report"
-              disabled={sendButtonIsDisabled}
-              onClick={this.sendReport}
-              micro
-            >
-              {loading
-                ? i18n.gettext('Sending abuse report')
-                : i18n.gettext('Send abuse report')}
-            </Button>
-          </div>
         </div>
       </div>
     );
diff --git a/src/amo/components/ReportAbuseButton/styles.scss b/src/amo/components/ReportAbuseButton/styles.scss
index 64f3f072fa3..c3a37fa3674 100644
--- a/src/amo/components/ReportAbuseButton/styles.scss
+++ b/src/amo/components/ReportAbuseButton/styles.scss
@@ -32,32 +32,3 @@
 .ReportAbuseButton-show-more {
   width: 100%;
 }
-
-.ReportAbuseButton-textarea {
-  font-size: $font-size-m-smaller;
-  line-height: 1.4;
-  margin: 5px auto;
-  // This is the height of two lines of text. Often the placeholder text
-  // will span two lines–because this element will grow/shrink based on
-  // the contents of the text inside it, we set a minimum height so it
-  // won't shrink when the two-line placeholder is replaced with a single
-  // character when the user starts typing.
-  min-height: 51px;
-  padding: 5px;
-  resize: none;
-  width: 100%;
-}
-
-.ReportAbuseButton-buttons {
-  display: flex;
-  justify-content: space-between;
-}
-
-.ReportAbuseButton-dismiss-report {
-  align-self: center;
-}
-
-.ReportAbuseButton-dismiss-report--disabled:link {
-  color: $neutral-base-color;
-  cursor: not-allowed;
-}
diff --git a/src/core/reducers/abuse.js b/src/core/reducers/abuse.js
index 0463af29c82..8fbc58f101b 100644
--- a/src/core/reducers/abuse.js
+++ b/src/core/reducers/abuse.js
@@ -4,10 +4,6 @@ import invariant from 'invariant';
 import type { AddonType } from 'core/types/addons';
 import type { AbuseReporter } from 'core/api/abuse';
 
-export const DISABLE_ADDON_ABUSE_BUTTON_UI: 'DISABLE_ADDON_ABUSE_BUTTON_UI' =
-  'DISABLE_ADDON_ABUSE_BUTTON_UI';
-export const ENABLE_ADDON_ABUSE_BUTTON_UI: 'ENABLE_ADDON_ABUSE_BUTTON_UI' =
-  'ENABLE_ADDON_ABUSE_BUTTON_UI';
 export const HIDE_ADDON_ABUSE_REPORT_UI: 'HIDE_ADDON_ABUSE_REPORT_UI' =
   'HIDE_ADDON_ABUSE_REPORT_UI';
 export const LOAD_ADDON_ABUSE_REPORT: 'LOAD_ADDON_ABUSE_REPORT' =
@@ -36,42 +32,6 @@ export const initialState: AbuseState = {
   loading: false,
 };
 
-type DisableAbuseButtonUIParams = {| addon: AddonType |};
-
-type DisableAbuseButtonUIAction = {|
-  type: typeof DISABLE_ADDON_ABUSE_BUTTON_UI,
-  payload: DisableAbuseButtonUIParams,
-|};
-
-export function disableAbuseButtonUI({
-  addon,
-}: DisableAbuseButtonUIParams): DisableAbuseButtonUIAction {
-  invariant(addon, 'addon is required');
-
-  return {
-    type: DISABLE_ADDON_ABUSE_BUTTON_UI,
-    payload: { addon },
-  };
-}
-
-type EnableAbuseButtonUIParams = {| addon: AddonType |};
-
-type EnableAbuseButtonUIAction = {|
-  type: typeof ENABLE_ADDON_ABUSE_BUTTON_UI,
-  payload: EnableAbuseButtonUIParams,
-|};
-
-export function enableAbuseButtonUI({
-  addon,
-}: EnableAbuseButtonUIParams): EnableAbuseButtonUIAction {
-  invariant(addon, 'addon is required');
-
-  return {
-    type: ENABLE_ADDON_ABUSE_BUTTON_UI,
-    payload: { addon },
-  };
-}
-
 type HideAddonAbuseReportUIParams = {| addon: AddonType |};
 
 type HideAddonAbuseReportUIAction = {|
@@ -165,8 +125,6 @@ export function showAddonAbuseReportUI({
 }
 
 type Action =
-  | DisableAbuseButtonUIAction
-  | EnableAbuseButtonUIAction
   | HideAddonAbuseReportUIAction
   | LoadAddonAbuseReportAction
   | SendAddonAbuseReportAction
@@ -177,28 +135,6 @@ export default function abuseReducer(
   action: Action,
 ) {
   switch (action.type) {
-    case DISABLE_ADDON_ABUSE_BUTTON_UI: {
-      const { addon } = action.payload;
-
-      return {
-        ...state,
-        bySlug: {
-          ...state.bySlug,
-          [addon.slug]: { ...state.bySlug[addon.slug], buttonEnabled: false },
-        },
-      };
-    }
-    case ENABLE_ADDON_ABUSE_BUTTON_UI: {
-      const { addon } = action.payload;
-
-      return {
-        ...state,
-        bySlug: {
-          ...state.bySlug,
-          [addon.slug]: { ...state.bySlug[addon.slug], buttonEnabled: true },
-        },
-      };
-    }
     case HIDE_ADDON_ABUSE_REPORT_UI: {
       const { addon } = action.payload;
 
diff --git a/tests/unit/amo/components/TestReportAbuseButton.js b/tests/unit/amo/components/TestReportAbuseButton.js
index 924eced4f61..80ee313860f 100644
--- a/tests/unit/amo/components/TestReportAbuseButton.js
+++ b/tests/unit/amo/components/TestReportAbuseButton.js
@@ -7,12 +7,13 @@ import ReportAbuseButton, {
 import { setError } from 'core/actions/errors';
 import I18nProvider from 'core/i18n/Provider';
 import {
-  disableAbuseButtonUI,
-  enableAbuseButtonUI,
   loadAddonAbuseReport,
   sendAddonAbuseReport,
+  showAddonAbuseReportUI,
+  hideAddonAbuseReportUI,
 } from 'core/reducers/abuse';
 import ErrorList from 'ui/components/ErrorList';
+import DismissibleTextForm from 'ui/components/DismissibleTextForm';
 import {
   createFakeAddonAbuseReport,
   createFakeEvent,
@@ -52,26 +53,29 @@ describe(__filename, () => {
     expect(root.find('.ReportAbuseButton')).toHaveLength(0);
   });
 
-  it('renders a button to report an add-on', () => {
+  it('render textarea and buttons when add-on exists', () => {
     const root = renderShallow();
 
     expect(root.find('.ReportAbuseButton')).toHaveLength(1);
     expect(root.find('.ReportAbuseButton-show-more').prop('children')).toEqual(
       'Report this add-on for abuse',
     );
-    expect(
-      root.find('.ReportAbuseButton-send-report').prop('children'),
-    ).toEqual('Send abuse report');
-  });
-
-  it('renders a textarea with placeholder for the add-on message', () => {
-    const root = renderShallow();
-
-    expect(root.find('.ReportAbuseButton-textarea')).toHaveLength(1);
-    expect(root.find('.ReportAbuseButton-textarea')).toHaveProp(
+    expect(root.find(DismissibleTextForm)).toHaveProp(
+      'submitButtonText',
+      'Send abuse report',
+    );
+    expect(root.find(DismissibleTextForm)).toHaveProp(
+      'dismissButtonText',
+      'Dismiss',
+    );
+    expect(root.find(DismissibleTextForm)).toHaveProp(
       'placeholder',
       'Explain how this add-on is violating our policies.',
     );
+    expect(root.find(DismissibleTextForm)).toHaveProp(
+      'submitButtonInProgressText',
+      'Sending abuse report',
+    );
   });
 
   it('shows the preview content when first rendered', () => {
@@ -81,101 +85,54 @@ describe(__filename, () => {
   });
 
   it('shows more content when the "report" button is clicked', () => {
+    const addon = { ...fakeAddon, slug: 'my-addon-show-UI' };
     const fakeEvent = createFakeEvent();
+    const { store } = dispatchClientMetadata();
+    const dispatchSpy = sinon.spy(store, 'dispatch');
     // We need to use mount here because we're interacting with refs. (In
     // this case, the textarea.)
-    const root = renderMount();
+    const root = renderMount({ addon, store });
 
     root
       .find('button.ReportAbuseButton-show-more')
       .simulate('click', fakeEvent);
 
     sinon.assert.called(fakeEvent.preventDefault);
+    sinon.assert.calledWith(dispatchSpy, showAddonAbuseReportUI({ addon }));
     expect(root.find('.ReportAbuseButton--is-expanded')).toHaveLength(1);
   });
 
-  it('dismisses more content when the "dismiss" button is clicked', () => {
-    const fakeEvent = createFakeEvent();
-    // We need to use mount here because we're interacting with refs. (In
-    // this case, the textarea.)
-    const root = renderMount();
-
-    root
-      .find('button.ReportAbuseButton-show-more')
-      .simulate('click', fakeEvent);
-
-    root.find('.ReportAbuseButton-dismiss-report').simulate('click', fakeEvent);
-
-    sinon.assert.called(fakeEvent.preventDefault);
-    expect(root.find('.ReportAbuseButton--is-expanded')).toHaveLength(0);
-  });
+  it('dispatches hideAddonAbuseReportUI when "onDismiss" is called', () => {
+    const addon = { ...fakeAddon, slug: 'my-addon-hide-UI' };
+    const { store } = dispatchClientMetadata();
+    const dispatchSpy = sinon.spy(store, 'dispatch');
+    const root = renderShallow({ addon, store });
 
-  it('disables the submit button if there is no abuse report', () => {
-    const root = renderShallow();
+    root.find(DismissibleTextForm).prop('onDismiss')();
 
-    expect(root.find('.ReportAbuseButton-send-report').first()).toHaveProp(
-      'disabled',
-    );
+    sinon.assert.calledWith(dispatchSpy, hideAddonAbuseReportUI({ addon }));
   });
 
-  it('disables the submit button if text in the textarea is removed', () => {
-    const root = renderMount();
-
-    // This simulates entering text into the textarea.
-    const textarea = root.find('.ReportAbuseButton-textarea > textarea');
-    textarea.instance().value = 'add-on ate my homework!';
-    textarea.simulate('change');
-
-    expect(
-      root
-        .find('.ReportAbuseButton-send-report')
-        .first()
-        .prop('disabled'),
-    ).toEqual(false);
-
-    textarea.instance().value = '';
-    textarea.simulate('change');
+  it('dispatches sendAddonAbuseReport when "onSubmit" is called', () => {
+    const addon = { ...fakeAddon, slug: 'my-addon-send-report' };
+    const { store } = dispatchClientMetadata();
+    const dispatchSpy = sinon.spy(store, 'dispatch');
+    const message = 'This is abuse report';
+    const root = renderShallow({ addon, store });
 
-    expect(
-      root
-        .find('.ReportAbuseButton-send-report')
-        .first()
-        .prop('disabled'),
-    ).toEqual(true);
-  });
+    root.find(DismissibleTextForm).prop('onSubmit')({
+      event: createFakeEvent(),
+      text: message,
+    });
 
-  it('disables the buttons while sending the abuse report', () => {
-    const addon = { ...fakeAddon, slug: 'bank-machine-skimmer' };
-    const fakeEvent = createFakeEvent();
-    const { store } = dispatchClientMetadata();
-    store.dispatch(
+    sinon.assert.calledWith(
+      dispatchSpy,
       sendAddonAbuseReport({
         addonSlug: addon.slug,
-        errorHandlerId: 'my-error',
-        message: 'All my money is gone',
+        errorHandlerId: root.instance().props.errorHandler.id,
+        message,
       }),
     );
-    const root = renderMount({ addon, store });
-
-    // Expand the view so we can test that it wasn't contracted when
-    // clicking on the disabled "dismiss" link.
-    root
-      .find('button.ReportAbuseButton-show-more')
-      .simulate('click', fakeEvent);
-    expect(root.find('.ReportAbuseButton--is-expanded')).toHaveLength(1);
-
-    const dismissButton = root.find('.ReportAbuseButton-dismiss-report');
-    const sendButton = root.find('button.ReportAbuseButton-send-report');
-
-    expect(dismissButton).toHaveClassName(
-      'ReportAbuseButton-dismiss-report--disabled',
-    );
-    expect(sendButton.prop('disabled')).toEqual(true);
-    expect(sendButton.prop('children')).toEqual('Sending abuse report');
-
-    dismissButton.simulate('click', fakeEvent);
-    sinon.assert.called(fakeEvent.preventDefault);
-    expect(root.find('.ReportAbuseButton--is-expanded')).toHaveLength(1);
   });
 
   it('shows a success message and hides the button if report was sent', () => {
@@ -185,6 +142,7 @@ describe(__filename, () => {
       addon,
       message: 'Seriously, where is my money?!',
     });
+
     store.dispatch(loadAddonAbuseReport(abuseResponse));
     const root = renderShallow({ addon, store });
 
@@ -193,170 +151,29 @@ describe(__filename, () => {
     expect(root.find('button.ReportAbuseButton-send-report')).toHaveLength(0);
   });
 
-  it('dispatches when the send button is clicked if textarea has text', () => {
-    const addon = { ...fakeAddon, slug: 'which-browser' };
-    const fakeEvent = createFakeEvent();
-    const { store } = dispatchClientMetadata();
-    const dispatchSpy = sinon.spy(store, 'dispatch');
-    const root = renderMount({ addon, store });
-
-    // This simulates entering text into the textarea.
-    const textarea = root.find('.ReportAbuseButton-textarea > textarea');
-    textarea.instance().value = 'Opera did it first!';
-    textarea.simulate('change');
-
-    root
-      .find('button.ReportAbuseButton-send-report')
-      .simulate('click', fakeEvent);
-    sinon.assert.calledWith(
-      dispatchSpy,
-      sendAddonAbuseReport({
-        addonSlug: addon.slug,
-        errorHandlerId: 'create-stub-error-handler-id',
-        message: 'Opera did it first!',
-      }),
-    );
-    sinon.assert.called(fakeEvent.preventDefault);
-  });
-
-  it('enables the submit button if there is text in the textarea', () => {
-    const addon = { ...fakeAddon, slug: 'which-browser' };
-    const { store } = dispatchClientMetadata();
-    const dispatchSpy = sinon.spy(store, 'dispatch');
-    const root = renderMount({ addon, store });
-
-    // Make sure it's disabled by default.
-    expect(
-      root.find('button.ReportAbuseButton-send-report').prop('disabled'),
-    ).toEqual(true);
-
-    // This simulates entering text into the textarea.
-    const textarea = root.find('.ReportAbuseButton-textarea > textarea');
-    textarea.instance().value = 'Opera did it first!';
-    textarea.simulate('change');
-
-    sinon.assert.calledWith(dispatchSpy, enableAbuseButtonUI({ addon }));
-    expect(
-      root.find('button.ReportAbuseButton-send-report').prop('disabled'),
-    ).toEqual(false);
-  });
-
-  it('does not dispatch enableAbuseButtonUI if button already enabled', () => {
-    const addon = { ...fakeAddon, slug: 'which-browser' };
-    const { store } = dispatchClientMetadata();
-    const dispatchSpy = sinon.spy(store, 'dispatch');
-    const root = renderMount({ addon, store });
-
-    // This simulates entering text into the textarea.
-    const textarea = root.find('.ReportAbuseButton-textarea > textarea');
-    textarea.instance().value = 'Opera did it first!';
-    textarea.simulate('change');
-
-    sinon.assert.calledWith(dispatchSpy, enableAbuseButtonUI({ addon }));
-
-    // Ensure `enableAbuseButtonUI()` isn't called again.
-    dispatchSpy.resetHistory();
-
-    // This simulates entering text into the textarea.
-    textarea.instance().value = 'Opera did it first! Adding some text!';
-    textarea.simulate('change');
-
-    sinon.assert.neverCalledWith(dispatchSpy, enableAbuseButtonUI({ addon }));
-  });
-
-  it('does not dispatch enableAbuseButtonUI if textarea is whitespace', () => {
-    const addon = { ...fakeAddon, slug: 'which-browser' };
-    const { store } = dispatchClientMetadata();
-    const dispatchSpy = sinon.spy(store, 'dispatch');
-    const root = renderMount({ addon, store });
-
-    // This simulates entering text into the textarea.
-    const textarea = root.find('.ReportAbuseButton-textarea > textarea');
-    textarea.instance().value = '      ';
-    textarea.simulate('change');
-
-    sinon.assert.neverCalledWith(dispatchSpy, enableAbuseButtonUI({ addon }));
-    expect(
-      root.find('button.ReportAbuseButton-send-report').prop('disabled'),
-    ).toEqual(true);
-  });
-
-  it('disables the submit button if there is no text in the textarea', () => {
-    const addon = { ...fakeAddon, slug: 'which-browser' };
-    const { store } = dispatchClientMetadata();
-    const dispatchSpy = sinon.spy(store, 'dispatch');
-    const root = renderMount({ addon, store });
-
-    // This simulates entering text into the textarea.
-    const textarea = root.find('.ReportAbuseButton-textarea > textarea');
-    textarea.instance().value = 'Opera did it first!';
-    textarea.simulate('change');
-
-    textarea.instance().value = '';
-    textarea.simulate('change');
-
-    sinon.assert.calledWith(dispatchSpy, disableAbuseButtonUI({ addon }));
-    expect(
-      root.find('button.ReportAbuseButton-send-report').prop('disabled'),
-    ).toEqual(true);
-  });
-
-  it('disables the submit button if there is empty text in the textarea', () => {
-    const addon = { ...fakeAddon, slug: 'which-browser' };
-    const { store } = dispatchClientMetadata();
-    const dispatchSpy = sinon.spy(store, 'dispatch');
-    const root = renderMount({ addon, store });
-
-    // This simulates entering text into the textarea.
-    const textarea = root.find('.ReportAbuseButton-textarea > textarea');
-    textarea.instance().value = 'Opera did it first!';
-    textarea.simulate('change');
-
-    textarea.instance().value = '        ';
-    textarea.simulate('change');
-
-    sinon.assert.calledWith(dispatchSpy, disableAbuseButtonUI({ addon }));
-    expect(
-      root.find('button.ReportAbuseButton-send-report').prop('disabled'),
-    ).toEqual(true);
-  });
-
   // This is a bit of a belt-and-braces approach, as the button that
   // activates this function is disabled when the textarea is empty.
   it('does not allow dispatch if there is no content in the textarea', () => {
-    const addon = { ...fakeAddon, slug: 'this-should-not-happen' };
     const fakeEvent = createFakeEvent();
+    const addon = { ...fakeAddon, slug: 'this-should-not-happen' };
     const { store } = dispatchClientMetadata();
     const dispatchSpy = sinon.spy(store, 'dispatch');
+    const message = '';
+    const root = renderShallow({ addon, store });
 
-    // We enable the button with an empty textarea; this never happens
-    // normally but we can force it here for testing.
-    store.dispatch(enableAbuseButtonUI({ addon }));
     dispatchSpy.resetHistory();
-    fakeEvent.preventDefault.resetHistory();
-
-    const root = renderMount({ addon, store });
-
-    // Make sure the button isn't disabled.
-    expect(
-      root
-        .find('.ReportAbuseButton-send-report')
-        .first()
-        .prop('disabled'),
-    ).toEqual(false);
-    root
-      .find('button.ReportAbuseButton-send-report')
-      .simulate('click', fakeEvent);
+    root.find(DismissibleTextForm).prop('onSubmit')({
+      event: fakeEvent,
+      text: message,
+    });
 
     sinon.assert.notCalled(dispatchSpy);
-    // Make sure preventDefault was called; we then know the sendReport()
-    // method was called.
-    sinon.assert.called(fakeEvent.preventDefault);
   });
 
   it('renders an error if one exists', () => {
     const errorHandler = createStubErrorHandler();
     const { store } = dispatchClientMetadata();
+
     store.dispatch(
       setError({
         error: new Error('something bad'),
@@ -367,4 +184,26 @@ describe(__filename, () => {
 
     expect(root.find(ErrorList)).toHaveLength(1);
   });
+
+  it('does not dismiss when is submitting', () => {
+    const addon = { ...fakeAddon, slug: 'my-addon-not-dimiss' };
+    const { store } = dispatchClientMetadata();
+    const errorHandler = createStubErrorHandler();
+    const dispatchSpy = sinon.spy(store, 'dispatch');
+    const message = 'This is abuse report';
+
+    store.dispatch(
+      sendAddonAbuseReport({
+        addonSlug: addon.slug,
+        errorHandlerId: errorHandler.id,
+        message,
+      }),
+    );
+    const root = renderShallow({ addon, store });
+
+    expect(root.find(DismissibleTextForm).prop('isSubmitting')).toEqual(true);
+    dispatchSpy.resetHistory();
+    root.find(DismissibleTextForm).prop('onDismiss')();
+    sinon.assert.notCalled(dispatchSpy);
+  });
 });
diff --git a/tests/unit/core/reducers/test_abuse.js b/tests/unit/core/reducers/test_abuse.js
index b64b40d8425..0a68c63d97e 100644
--- a/tests/unit/core/reducers/test_abuse.js
+++ b/tests/unit/core/reducers/test_abuse.js
@@ -55,38 +55,6 @@ describe(__filename, () => {
       });
     });
 
-    describe('disableAbuseButtonUI', () => {
-      it('sets the buttonEnabled state to false', () => {
-        const state = abuseReducer(
-          initialState,
-          disableAbuseButtonUI({ addon: fakeAddon }),
-        );
-
-        expect(state).toEqual({
-          bySlug: {
-            [fakeAddon.slug]: { buttonEnabled: false },
-          },
-          loading: false,
-        });
-      });
-    });
-
-    describe('enableAbuseButtonUI', () => {
-      it('sets the buttonEnabled state to true', () => {
-        const state = abuseReducer(
-          initialState,
-          enableAbuseButtonUI({ addon: fakeAddon }),
-        );
-
-        expect(state).toEqual({
-          bySlug: {
-            [fakeAddon.slug]: { buttonEnabled: true },
-          },
-          loading: false,
-        });
-      });
-    });
-
     describe('hideAddonAbuseReportUI', () => {
       it('sets the uiVisible state to false', () => {
         const state = abuseReducer(

From 33bd3e8e41ece3d3c6fecbd553e7efeecdaa322b Mon Sep 17 00:00:00 2001
From: mirefly <mirefly@gmail.com>
Date: Sat, 12 Jan 2019 20:23:20 -0700
Subject: [PATCH 2/3] remove AbuseButtonUI in test_abuse

---
 tests/unit/core/reducers/test_abuse.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/tests/unit/core/reducers/test_abuse.js b/tests/unit/core/reducers/test_abuse.js
index 0a68c63d97e..fb6a2de4a80 100644
--- a/tests/unit/core/reducers/test_abuse.js
+++ b/tests/unit/core/reducers/test_abuse.js
@@ -1,7 +1,5 @@
 import abuseReducer, {
   SEND_ADDON_ABUSE_REPORT,
-  disableAbuseButtonUI,
-  enableAbuseButtonUI,
   hideAddonAbuseReportUI,
   initialState,
   loadAddonAbuseReport,

From c7eded39ceeae12768af0b1e4db027864f19d477 Mon Sep 17 00:00:00 2001
From: mirefly <mirefly@gmail.com>
Date: Tue, 15 Jan 2019 16:06:10 -0700
Subject: [PATCH 3/3] address comments

---
 src/amo/components/ReportAbuseButton/index.js |  1 -
 .../amo/components/TestReportAbuseButton.js   | 40 ++++++++++---------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/amo/components/ReportAbuseButton/index.js b/src/amo/components/ReportAbuseButton/index.js
index 6b99ce84d52..fc9818dab5c 100644
--- a/src/amo/components/ReportAbuseButton/index.js
+++ b/src/amo/components/ReportAbuseButton/index.js
@@ -178,7 +178,6 @@ export class ReportAbuseButtonBase extends React.Component<InternalProps> {
             placeholder={i18n.gettext(
               'Explain how this add-on is violating our policies.',
             )}
-            microButtons
           />
         </div>
       </div>
diff --git a/tests/unit/amo/components/TestReportAbuseButton.js b/tests/unit/amo/components/TestReportAbuseButton.js
index 80ee313860f..ed66fc84a2c 100644
--- a/tests/unit/amo/components/TestReportAbuseButton.js
+++ b/tests/unit/amo/components/TestReportAbuseButton.js
@@ -1,17 +1,16 @@
-import { mount } from 'enzyme';
 import * as React from 'react';
 
 import ReportAbuseButton, {
   ReportAbuseButtonBase,
 } from 'amo/components/ReportAbuseButton';
 import { setError } from 'core/actions/errors';
-import I18nProvider from 'core/i18n/Provider';
 import {
   loadAddonAbuseReport,
   sendAddonAbuseReport,
   showAddonAbuseReportUI,
   hideAddonAbuseReportUI,
 } from 'core/reducers/abuse';
+import Button from 'ui/components/Button';
 import ErrorList from 'ui/components/ErrorList';
 import DismissibleTextForm from 'ui/components/DismissibleTextForm';
 import {
@@ -32,14 +31,6 @@ describe(__filename, () => {
     store: dispatchClientMetadata().store,
   };
 
-  function renderMount({ ...props } = {}) {
-    return mount(
-      <I18nProvider i18n={props.i18n || defaultRenderProps.i18n}>
-        <ReportAbuseButton {...defaultRenderProps} {...props} />
-      </I18nProvider>,
-    );
-  }
-
   function renderShallow({ ...props } = {}) {
     return shallowUntilTarget(
       <ReportAbuseButton {...defaultRenderProps} {...props} />,
@@ -53,7 +44,7 @@ describe(__filename, () => {
     expect(root.find('.ReportAbuseButton')).toHaveLength(0);
   });
 
-  it('render textarea and buttons when add-on exists', () => {
+  it('renders a DismissibleTextForm to report an add-on', () => {
     const root = renderShallow();
 
     expect(root.find('.ReportAbuseButton')).toHaveLength(1);
@@ -89,16 +80,14 @@ describe(__filename, () => {
     const fakeEvent = createFakeEvent();
     const { store } = dispatchClientMetadata();
     const dispatchSpy = sinon.spy(store, 'dispatch');
-    // We need to use mount here because we're interacting with refs. (In
-    // this case, the textarea.)
-    const root = renderMount({ addon, store });
+    let root = renderShallow({ addon, store });
 
-    root
-      .find('button.ReportAbuseButton-show-more')
-      .simulate('click', fakeEvent);
+    root.find(Button).simulate('click', fakeEvent);
 
     sinon.assert.called(fakeEvent.preventDefault);
     sinon.assert.calledWith(dispatchSpy, showAddonAbuseReportUI({ addon }));
+
+    root = renderShallow({ addon, store });
     expect(root.find('.ReportAbuseButton--is-expanded')).toHaveLength(1);
   });
 
@@ -161,7 +150,22 @@ describe(__filename, () => {
     const message = '';
     const root = renderShallow({ addon, store });
 
-    dispatchSpy.resetHistory();
+    root.find(DismissibleTextForm).prop('onSubmit')({
+      event: fakeEvent,
+      text: message,
+    });
+
+    sinon.assert.notCalled(dispatchSpy);
+  });
+
+  it('does not allow dispatch if textarea is whitespace', () => {
+    const fakeEvent = createFakeEvent();
+    const addon = { ...fakeAddon, slug: 'this-should-not-happen' };
+    const { store } = dispatchClientMetadata();
+    const dispatchSpy = sinon.spy(store, 'dispatch');
+    const message = '      ';
+    const root = renderShallow({ addon, store });
+
     root.find(DismissibleTextForm).prop('onSubmit')({
       event: fakeEvent,
       text: message,