Add in course and account tabs to new permissions page.

This will show the ugly table with the account and course roles
based on which tab is selected.

Closes COMMS-895.

Test Plan:
* Enable new permissions page.
* Go to accounts/:account_id/permissions.
* You should see "Account Roles" and "Course Roles" tabs
* Clicking on each tab should show you a different table.

Change-Id: I7119e9d1b44ddad860595d20a34ace5650d682bf
Reviewed-on: https://gerrit.instructure.com/150348
Tested-by: Jenkins
Reviewed-by: Aaron Kc Hsu <ahsu@instructure.com>
QA-Review: Landon Gilbert-Bland <lbland@instructure.com>
Product-Review: Venk Natarajan <vnatarajan@instructure.com>

app/jsx/permissions/components/PermissionsIndex.js

@@ -22,9 +22,7 @@ import {number, arrayOf} from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
-import Spinner from '@instructure/ui-core/lib/components/Spinner'
-import Heading from '@instructure/ui-core/lib/components/Heading'
-import Text from '@instructure/ui-core/lib/components/Text'
+import TabList, {TabPanel} from '@instructure/ui-core/lib/components/TabList'
 
 import select from '../../shared/select'
 import actions from '../actions'
@@ -41,18 +39,23 @@ export default class PermissionsIndex extends Component {
     courseRoles: arrayOf(propTypes.role).isRequired
   }
 
-  static defaultProps = {
-    permissions: []
-  }
-
   render() {
     return (
       <div className="permissions-v2__wrapper">
-        <Heading>{I18n.t('Account Permissions Table')}</Heading>
-        <PermissionsTable
-          roles={this.props.accountRoles}
-          permissions={this.props.accountPermissions}
-        />
+        <TabList>
+          <TabPanel title={I18n.t('Course Roles')}>
+            <PermissionsTable
+              roles={this.props.courseRoles}
+              permissions={this.props.coursePermissions}
+            />
+          </TabPanel>
+          <TabPanel title={I18n.t('Account Roles')}>
+            <PermissionsTable
+              roles={this.props.accountRoles}
+              permissions={this.props.accountPermissions}
+            />
+          </TabPanel>
+        </TabList>
       </div>
     )
   }

app/jsx/permissions/components/__tests__/PermissionsIndex.test.js

@@ -17,14 +17,14 @@
  */
 
 import React from 'react'
-import {mount, shallow} from 'enzyme'
+import {mount} from 'enzyme'
 
 import PermissionsIndex from 'jsx/permissions/components/PermissionsIndex'
 
 const defaultProps = () => ({
   contextId: 1,
-  accountPermissions: [],
-  coursePermissions: [],
+  accountPermissions: [{permission_name: 'account_permission', label: 'account permission'}],
+  coursePermissions: [{permission_name: 'course_permission', label: 'course permission'}],
   accountRoles: [],
   courseRoles: []
 })
@@ -32,5 +32,36 @@ const defaultProps = () => ({
 test('renders the component', () => {
   const tree = mount(<PermissionsIndex {...defaultProps()} />)
   const node = tree.find('PermissionsIndex')
-  expect(node.exists())
+  expect(node.exists()).toBe(true)
 })
+
+test('renders course and accounts tab', () => {
+  const tree = mount(<PermissionsIndex {...defaultProps()} />)
+  const node = tree.find('TabPanel')
+  expect(node).toHaveLength(2)
+  const firstTab = node.nodes[0]
+  const secondTab = node.nodes[1]
+  expect(firstTab.props.title.includes('Course Roles')).toBe(true)
+  expect(secondTab.props.title.includes('Account Roles')).toBe(true)
+})
+
+test('Renders course permissions table by default', () => {
+  const tree = mount(<PermissionsIndex {...defaultProps()} />)
+  tree.render()
+  expect(
+    tree
+      .find('tr')
+      .at(1)
+      .text()
+      .includes('course permission')
+  ).toBe(true)
+  expect(
+    tree
+      .find('tr')
+      .at(1)
+      .text()
+      .includes('account permission')
+  ).toBe(false)
+})
+
+// TODO(COMMS-1122): Get specs up that test switching tabs works