upgrade remaining <PopoverMenu>s to instui5 <Menu>

closes: CORE-1526

If I leave this pulling in PopoverMenu from ui-core, if I try to upgrade
@instructure/ui-core to 5.x in package.json I get spec failures for
this stuff

So I am upgrading this so that I can clear the way to upgrading ui-core
to 5.x (and get rid of instui 4)

Test plan:
* go to these pages, these menus should work as they did before

Change-Id: I9de7b054155142628c03e6fce9bcb5bf768228dc
Reviewed-on: https://gerrit.instructure.com/153598
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/course_settings/components/CourseImageSelector.js

@@ -21,8 +21,7 @@ import IconMoreLine from '@instructure/ui-icons/lib/Line/IconMore'
 import IconEditLine from '@instructure/ui-icons/lib/Line/IconEdit'
 import IconTrashLine from '@instructure/ui-icons/lib/Line/IconTrash'
 import Button from '@instructure/ui-buttons/lib/components/Button'
-import PopoverMenu from '@instructure/ui-core/lib/components/PopoverMenu'
-import {MenuItem} from '@instructure/ui-core/lib/components/Menu'
+import Menu, {MenuItem} from '@instructure/ui-menu/lib/components/Menu'
 import Spinner from '@instructure/ui-elements/lib/components/Spinner'
 import Modal from '../../shared/components/InstuiModal'
 import I18n from 'i18n!course_images'
@@ -54,7 +53,7 @@ export default class CourseImageSelector extends React.Component {
               <Spinner title="Loading" size="small" />
             </div>
           ) : this.state.imageUrl ? (
-            <PopoverMenu
+            <Menu
               trigger={
                 <div className="CourseImageSelector__Button">
                   <Button size="small" variant="circle-primary">
@@ -67,7 +66,7 @@ export default class CourseImageSelector extends React.Component {
                 <IconEditLine /> {I18n.t('Choose image')}</MenuItem>
               <MenuItem onClick={this.removeImage}>
                 <IconTrashLine /> {I18n.t('Remove image')}</MenuItem>
-            </PopoverMenu>
+            </Menu>
           ) : (
             <Button onClick={this.changeImage}>{I18n.t('Choose Image')}</Button>
           )}

app/jsx/course_settings/components/__tests__/CourseImageSelector.test.js

@@ -48,7 +48,7 @@ describe('CourseImageSelector', () => {
     const wrapper = shallow(<CourseImageSelector store={store} />)
 
     wrapper.setState({gettingImage: false})
-    expect(wrapper.find('PopoverMenu').exists()).toBeTruthy()
+    expect(wrapper.find('Menu').exists()).toBeTruthy()
   })
 
 })

app/jsx/custom_help_link_settings/CustomHelpLinkMenu.js

@@ -19,9 +19,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import I18n from 'i18n!custom_help_link'
-import PopoverMenu from '@instructure/ui-core/lib/components/PopoverMenu'
-import MenuItem from '@instructure/ui-core/lib/components/Menu/MenuItem'
-import MenuItemGroup from '@instructure/ui-core/lib/components/Menu/MenuItemGroup'
+import Menu, {MenuItem, MenuItemGroup} from '@instructure/ui-menu/lib/components/Menu'
 import Button from '@instructure/ui-buttons/lib/components/Button'
 import AccessibleContent from '@instructure/ui-a11y/lib/components/AccessibleContent'
 import IconPlusLine from '@instructure/ui-icons/lib/Line/IconPlus'
@@ -67,7 +65,7 @@ export default class CustomHelpLinkMenu extends React.Component {
   render() {
     return (
       <div className="HelpMenuOptions__Container">
-        <PopoverMenu
+        <Menu
           trigger={
             <Button
               ref={c => {
@@ -94,7 +92,7 @@ export default class CustomHelpLinkMenu extends React.Component {
               </MenuItem>
             ))}
           </MenuItemGroup>
-        </PopoverMenu>
+        </Menu>
       </div>
     )
   }

app/jsx/dashboard_card/DashboardCardMovementMenu.js

@@ -19,7 +19,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import I18n from 'i18n!dashcards'
-import Menu, { MenuItem } from '@instructure/ui-core/lib/components/Menu'
+import Menu, { MenuItem } from '@instructure/ui-menu/lib/components/Menu'
 import Text from '@instructure/ui-elements/lib/components/Text'
 import IconMoveUpTopSolid from '@instructure/ui-icons/lib/Solid/IconMoveUpTop'
 import IconMoveUpSolid from '@instructure/ui-icons/lib/Solid/IconMoveUp'

app/jsx/discussions/components/DiscussionRow.js

@@ -53,7 +53,7 @@ import IconUpdownLine from '@instructure/ui-icons/lib/Line/IconUpdown'
 import Pill from '@instructure/ui-elements/lib/components/Pill'
 import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
 import Text from '@instructure/ui-elements/lib/components/Text'
-import { MenuItem } from '@instructure/ui-core/lib/components/Menu'
+import { MenuItem } from '@instructure/ui-menu/lib/components/Menu'
 
 import DiscussionModel from 'compiled/models/DiscussionTopic'
 import LockIconView from 'compiled/views/LockIconView'

app/jsx/rubrics/RubricAddCriterionPopover.js

@@ -18,8 +18,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import PopoverMenu from '@instructure/ui-core/lib/components/PopoverMenu'
-import { MenuItem, MenuItemSeparator, MenuItemGroup } from '@instructure/ui-core/lib/components/Menu'
+import Menu, { MenuItem, MenuItemSeparator, MenuItemGroup } from '@instructure/ui-menu/lib/components/Menu'
 import Text from '@instructure/ui-elements/lib/components/Text'
 import I18n from 'i18n!edit_rubric'
 import $ from 'jquery'
@@ -40,7 +39,7 @@ class RubricAddCriterionPopover extends React.Component {
 
     return (
       <span>
-        <PopoverMenu
+        <Menu
           placement="bottom"
           trigger={
             <a className="icon-plus" href="#" >{I18n.t("Criterion")}</a>
@@ -58,7 +57,7 @@ class RubricAddCriterionPopover extends React.Component {
                       </MenuItem>
             )}
           </MenuItemGroup>
-        </PopoverMenu>
+        </Menu>
         <a href="#" id="add_learning_outcome_link" className="icon-search find_outcome_link outcome">{I18n.t("Find Outcome")}</a>
         <a href="#" id="add_criterion_link" className="hidden icon-plus add_criterion_link">{I18n.t("New Criterion")}</a>
       </span>

app/jsx/shared/components/AnnouncementRow.js

@@ -25,7 +25,7 @@ import 'jquery.instructure_date_and_time'
 import View from '@instructure/ui-layout/lib/components/View'
 import Text from '@instructure/ui-elements/lib/components/Text'
 import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
-import {MenuItem} from '@instructure/ui-core/lib/components/Menu'
+import {MenuItem} from '@instructure/ui-menu/lib/components/Menu'
 import IconTimer from '@instructure/ui-icons/lib/Line/IconTimer'
 import IconReply from '@instructure/ui-icons/lib/Line/IconReply'
 import IconLock from '@instructure/ui-icons/lib/Line/IconLock'

app/jsx/shared/components/CourseItemRow.js

@@ -32,7 +32,7 @@ import Badge from '@instructure/ui-elements/lib/components/Badge'
 import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
 import Text from '@instructure/ui-elements/lib/components/Text'
 import Button from '@instructure/ui-buttons/lib/components/Button'
-import PopoverMenu from '@instructure/ui-core/lib/components/PopoverMenu'
+import Menu from '@instructure/ui-menu/lib/components/Menu'
 import IconMore from '@instructure/ui-icons/lib/Line/IconMore'
 
 import IconDragHandleLine from '@instructure/ui-icons/lib/Line/IconDragHandle'
@@ -249,10 +249,10 @@ export default class CourseItemRow extends Component {
             }
             {this.props.actionsContent}
             <span ref={this.initializeMasterCourseIcon} className="ic-item-row__master-course-lock" />
-            {this.props.showManageMenu &&
-              (<span className="ic-item-row__manage-menu">
-                <PopoverMenu
-                  ref={(c) => { this._manageMenu = c }}
+            {this.props.showManageMenu && (
+              <span className="ic-item-row__manage-menu">
+                <Menu
+                  ref={c => this._manageMenu = c}
                   onSelect={this.props.onManageMenuSelect}
                   onToggle={this.toggleManageMenuShown}
                   trigger={
@@ -260,8 +260,12 @@ export default class CourseItemRow extends Component {
                       <IconMore />
                       <ScreenReaderContent>{I18n.t('Manage options for %{name}', { name: this.props.title })}</ScreenReaderContent>
                     </Button>
-                  }>{this.state.manageMenuShown ? this.props.manageMenuOptions() : null}</PopoverMenu>
-              </span>)}
+                  }
+                >
+                  {this.state.manageMenuShown ? this.props.manageMenuOptions() : null}
+                </Menu>
+              </span>
+            )}
           </div>
           <div className="ic-item-row__meta-content">
             {this.props.metaContent}

app/jsx/shared/components/DiscussionManageMenu.js

@@ -21,7 +21,7 @@ import { func, string } from 'prop-types'
 
 import Button from '@instructure/ui-buttons/lib/components/Button'
 import IconMore from '@instructure/ui-icons/lib/Line/IconMore'
-import PopoverMenu from '@instructure/ui-core/lib/components/PopoverMenu'
+import Menu from '@instructure/ui-menu/lib/components/Menu'
 import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
 
 export default class DiscussionManageMenu extends Component {
@@ -53,7 +53,7 @@ export default class DiscussionManageMenu extends Component {
   render () {
     return (
       <span className="discussions-index-manage-menu">
-        <PopoverMenu
+        <Menu
           ref={this.props.menuRefFn}
           onSelect={this.props.onSelect}
           onToggle={this.toggleManageMenuOpen}
@@ -64,7 +64,7 @@ export default class DiscussionManageMenu extends Component {
             </Button>
           }>
           {this.state.manageMenuOpen ? this.props.menuOptions() : null}
-        </PopoverMenu>
+        </Menu>
       </span>
     )
   }