add ability to launch wc modal from status bar

closes MAT-686
flag=none

test plan:
-find an RCE
-add some content
-click the word count in status bar
>observe the word count modal launches

Change-Id: I0df49dbb38cf3b7fe6b1fa1409317466935fa42f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/305422
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Ed Schiebel <eschiebel@instructure.com>
Product-Review: David Lyons <lyons@instructure.com>

packages/canvas-rce/src/rce/RCEWrapper.js

@@ -54,11 +54,12 @@ import {
   VIDEO_SIZE_DEFAULT,
   AUDIO_PLAYER_SIZE,
 } from './plugins/instructure_record/VideoOptionsTray/TrayController'
+import {countShouldIgnore} from './plugins/instructure_wordcount/utils/countContent'
+import launchWordcountModal from './plugins/instructure_wordcount/clickCallback'
 
 import styles from '../skins/skin-delta.css'
 import skinCSSBinding from 'tinymce/skins/ui/oxide/skin.min.css'
 import contentCSSBinding from 'tinymce/skins/ui/oxide/content.css'
-import {countShouldIgnore} from './plugins/instructure_wordcount/utils/countContent'
 
 const RestoreAutoSaveModal = React.lazy(() => import('./RestoreAutoSaveModal'))
 const RceHtmlEditor = React.lazy(() => import('./RceHtmlEditor'))
@@ -1872,6 +1873,7 @@ class RCEWrapper extends React.Component {
           onFullscreen={this.handleClickFullscreen}
           a11yBadgeColor={this.theme.canvasBadgeBackgroundColor}
           a11yErrorsCount={this.state.a11yErrorsCount}
+          onWordcountModalOpen={() => launchWordcountModal(this.mceInstance(), document)}
         />
         {this.props.trayProps && this.props.trayProps.containingContext && (
           <CanvasContentTray

packages/canvas-rce/src/rce/StatusBar.js

@@ -21,7 +21,7 @@ import ReactDOM from 'react-dom'
 import {arrayOf, bool, func, number, oneOf, string} from 'prop-types'
 import {StyleSheet, css} from 'aphrodite'
 import keycode from 'keycode'
-import {Button, IconButton} from '@instructure/ui-buttons'
+import {Button, IconButton, CondensedButton} from '@instructure/ui-buttons'
 import {Flex} from '@instructure/ui-flex'
 import {View} from '@instructure/ui-view'
 import {Badge} from '@instructure/ui-badge'
@@ -57,6 +57,7 @@ StatusBar.propTypes = {
   readOnly: bool,
   a11yBadgeColor: string,
   a11yErrorsCount: number,
+  onWordcountModalOpen: func.isRequired,
 }
 
 StatusBar.defaultProps = {
@@ -278,7 +279,14 @@ export default function StatusBar(props) {
     )
     return (
       <View display="inline-block" padding="0 small" data-testid="status-bar-word-count">
-        <Text>{wordCount}</Text>
+        <CondensedButton
+          data-btn-id="rce-wordcount-btn"
+          color="primary"
+          onClick={props.onWordcountModalOpen}
+          tabIndex={tabIndexForBtn('rce-wordcount-btn')}
+        >
+          {wordCount}
+        </CondensedButton>
       </View>
     )
   }

packages/canvas-rce/src/rce/__tests__/StatusBar.test.js

@@ -32,6 +32,7 @@ function defaultProps(props = {}) {
     onResize: () => {},
     onKBShortcutModalOpen: () => {},
     onA11yChecker: () => {},
+    onWordcountModalOpen: () => {},
     ...props,
   }
 }
@@ -57,12 +58,20 @@ describe('RCE StatusBar', () => {
     expect(onkbcallback).toHaveBeenCalled()
   })
 
+  it('calls callback when clicking wordcount button', () => {
+    const onWordcountCallback = jest.fn()
+    const {getByTestId} = renderStatusBar({onWordcountModalOpen: onWordcountCallback})
+    const wordCountButton = getByTestId('status-bar-word-count').firstChild
+    wordCountButton.click()
+    expect(onWordcountCallback).toHaveBeenCalled()
+  })
+
   describe('in WYSIWYG mode', () => {
     it('cycles focus with right arrow keys', () => {
       const {container, getByTestId} = renderStatusBar()
       const statusbar = getByTestId('RCEStatusBar')
       const buttons = container.querySelectorAll('button, *[tabindex]')
-      expect(buttons.length).toEqual(5)
+      expect(buttons.length).toEqual(6)
 
       buttons[0].focus()
       expect(document.activeElement).toBe(buttons[0])
@@ -78,7 +87,7 @@ describe('RCE StatusBar', () => {
       const {container, getByTestId} = renderStatusBar()
       const statusbar = getByTestId('RCEStatusBar')
       const buttons = container.querySelectorAll('button, *[tabindex]')
-      expect(buttons.length).toEqual(5)
+      expect(buttons.length).toEqual(6)
 
       buttons[buttons.length - 1].focus()
       expect(document.activeElement).toBe(buttons[buttons.length - 1])
@@ -238,7 +247,7 @@ describe('RCE StatusBar', () => {
       const {container, getByTestId} = renderStatusBar({readOnly: true})
       const statusbar = getByTestId('RCEStatusBar')
       const buttons = container.querySelectorAll('button, *[tabindex]')
-      expect(buttons.length).toEqual(2)
+      expect(buttons.length).toEqual(3)
 
       buttons[0].focus()
       expect(document.activeElement).toBe(buttons[0])
@@ -254,7 +263,7 @@ describe('RCE StatusBar', () => {
       const {container, getByTestId} = renderStatusBar({readOnly: true})
       const statusbar = getByTestId('RCEStatusBar')
       const buttons = container.querySelectorAll('button, *[tabindex]')
-      expect(buttons.length).toEqual(2)
+      expect(buttons.length).toEqual(3)
 
       buttons[buttons.length - 1].focus()
       expect(document.activeElement).toBe(buttons[buttons.length - 1])