fix instUI deprecation in gb StatusesModal

closes: CORE-1944

test plan:
As a teacher, open the Status Modal in New Gradebook.
You shouldn’t see:
Warning: [Modal] `closeButtonLabel` was deprecated in 5.0.0.

the header of the modal should look the same as it did before
the “X” button should have “Close” screenreader text
Clicking it should close the modal

Change-Id: Ibc91e83e532f565c48fae5e30973fcfeb03e9f98
Reviewed-on: https://gerrit.instructure.com/166021
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>

app/jsx/gradezilla/default_gradebook/components/StatusesModal.js

@@ -22,7 +22,7 @@ import { func, shape, string } from 'prop-types';
 import update from 'immutability-helper';
 import I18n from 'i18n!gradebook';
 import Button from '@instructure/ui-buttons/lib/components/Button';
-import Modal, { ModalBody, ModalFooter, ModalHeader } from '@instructure/ui-overlays/lib/components/Modal';
+import Modal, { ModalBody, ModalFooter } from '../../../shared/components/InstuiModal';
 import Heading from '@instructure/ui-elements/lib/components/Heading';
 import Text from '@instructure/ui-elements/lib/components/Text';
 import { statuses } from '../../../gradezilla/default_gradebook/constants/statuses';
@@ -96,7 +96,6 @@ class StatusesModal extends React.Component {
 
 
   bindDoneButton = (button) => { this.doneButton = button; };
-  bindCloseButton = (button) => { this.closeButton = button; };
   bindContentRef = (content) => { this.modalContentRef = content; };
 
   open = () => {
@@ -128,7 +127,6 @@ class StatusesModal extends React.Component {
       state: { isOpen },
       props: { onClose },
       close,
-      bindCloseButton,
       bindDoneButton,
       bindContentRef
     } = this;
@@ -137,17 +135,11 @@ class StatusesModal extends React.Component {
       <Modal
         open={isOpen}
         label={I18n.t('Statuses')}
-        closeButtonLabel={I18n.t('Close')}
-        closeButtonRef={bindCloseButton}
         onDismiss={close}
         onExited={onClose}
         contentRef={bindContentRef}
         shouldCloseOnDocumentClick={false}
       >
-        <ModalHeader>
-          <Heading level="h3">{I18n.t('Statuses')}</Heading>
-        </ModalHeader>
-
         <ModalBody>
           <ul className="Gradebook__StatusModalList">
             <Text>

spec/javascripts/jsx/gradezilla/GradebookSpec.js

@@ -3545,7 +3545,8 @@ test('StatusesModal is mounted on renderStatusesModal', function () {
   const statusModal = this.gradebook.renderStatusesModal();
   statusModal.open();
   clock.tick(500); // wait for Modal to transition open
-  const header = document.querySelector('h3');
+
+  const header = document.querySelector('[aria-label="Statuses"][role="dialog"] h2');
   equal(header.innerText, 'Statuses');
 
   const statusesModalMountPoint = document.querySelector("[data-component='StatusesModal']");

spec/javascripts/jsx/gradezilla/default_gradebook/components/StatusesModalSpec.js

@@ -35,9 +35,6 @@ function defaultProps (props = {}) {
 
 QUnit.module('StatusesModal', function (suiteHooks) {
   suiteHooks.beforeEach(function () {
-    const applicationElement = document.createElement('div');
-    applicationElement.id = 'application';
-    document.getElementById('fixtures').appendChild(applicationElement);
     clock = sinon.useFakeTimers();
   });
 
@@ -46,65 +43,66 @@ QUnit.module('StatusesModal', function (suiteHooks) {
     clock.restore();
   });
 
+  let wrapper, modal, instance
+
   QUnit.module('StatusesModal', {
     setup () {
-      this.wrapper = shallow(
-        <StatusesModal {...defaultProps()} />
-      );
+      wrapper = shallow(<StatusesModal {...defaultProps()} />)
+      instance = wrapper.instance()
+      modal = wrapper.dive()
     },
 
     teardown () {
-      this.wrapper.unmount();
+      wrapper.unmount();
       document.getElementById('fixtures').innerHTML = '';
     }
   });
 
   test('modal is initially closed', function () {
-    strictEqual(this.wrapper.find('Modal').prop('open'), false);
+    strictEqual(modal.prop('open'), false);
   });
 
   test('modal has a label of "Statuses"', function () {
-    equal(this.wrapper.find('Modal').prop('label'), 'Statuses');
+    equal(modal.prop('label'), 'Statuses');
   });
 
   test('modal has a close button label of "Close"', function () {
-    equal(this.wrapper.find('Modal').prop('closeButtonLabel'), 'Close');
+    equal(modal.find('CloseButton').prop('children'), 'Close');
   });
 
   test('modal has an onDismiss function', function () {
-    equal(typeof this.wrapper.find('Modal').prop('onDismiss'), 'function');
+    equal(typeof modal.prop('onDismiss'), 'function');
   });
 
   test('modal has an onExited function', function () {
-    equal(typeof this.wrapper.find('Modal').prop('onExited'), 'function');
+    equal(typeof modal.prop('onExited'), 'function');
   });
 
   test('modal has a "Statuses" header', function () {
-    equal(this.wrapper.find('Heading').children().text(), 'Statuses');
+    equal(modal.find('Heading').prop('children'), 'Statuses');
   });
 
   test('modal has a "Done" button', function () {
-    equal(this.wrapper.find('Button').children().text(), 'Done');
+    equal(modal.find('Button').children().text(), 'Done');
   });
 
   test('modal opens', function () {
-    this.wrapper.instance().open();
-    strictEqual(this.wrapper.find('Modal').prop('open'), true);
+    instance.open();
+    strictEqual(wrapper.dive().find('Modal').prop('open'), true);
   });
 
   test('modal closes', function () {
-    const statusModal = this.wrapper.instance();
-    statusModal.open();
+    instance.open();
     clock.tick(50); // wait for Modal to transition open
-    statusModal.close();
+    instance.close();
     clock.tick(50); // wait for Modal to transition closed
-    strictEqual(this.wrapper.find('Modal').prop('open'), false);
+    strictEqual(wrapper.dive().find('Modal').prop('open'), false);
   });
 
   test('on close prop is passed to Modal onExit', function () {
     const onClose = sinon.stub();
     const wrapper = shallow(<StatusesModal {...defaultProps({ onClose })} />);
-    equal(wrapper.find('Modal').prop('onExited'), onClose);
+    equal(wrapper.dive().find('Modal').prop('onExited'), onClose);
   });
 
   QUnit.module('StatusesModal#isPopoverShown', {
@@ -204,7 +202,7 @@ QUnit.module('StatusesModal', function (suiteHooks) {
     const { wrapper, instance } = this;
     instance.open();
     wrapper.find('Button').simulate('click');
-    strictEqual(wrapper.find('Modal').prop('open'), false);
+    strictEqual(wrapper.dive().find('Modal').prop('open'), false);
   });
 
   test('renders five StatusColorListItems', function () {