-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create dashboard organization home page
- Loading branch information
Showing
12 changed files
with
217 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
lms/static/scripts/frontend_apps/components/dashboard/OrganizationActivity.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardHeader, | ||
| Link, | ||
| } from '@hypothesis/frontend-shared'; | ||
| import { Link as RouterLink } from 'wouter-preact'; | ||
|
|
||
| import type { Courses } from '../../api-types'; | ||
| import { useConfig } from '../../config'; | ||
| import { useAPIFetch } from '../../utils/api'; | ||
| import { replaceURLParams } from '../../utils/url'; | ||
| import OrderableActivityTable from './OrderableActivityTable'; | ||
|
|
||
| export type OrganizationActivityProps = { | ||
| organizationPublicId: string; | ||
| }; | ||
|
|
||
| /** | ||
| * List of courses that belong to a specific organization | ||
| */ | ||
| export default function OrganizationActivity({ | ||
| organizationPublicId, | ||
| }: OrganizationActivityProps) { | ||
| const { dashboard } = useConfig(['dashboard']); | ||
| const { routes } = dashboard; | ||
| const courses = useAPIFetch<Courses>( | ||
| replaceURLParams(routes.organization_courses, { | ||
| organization_public_id: organizationPublicId, | ||
| }), | ||
| ); | ||
|
|
||
| return ( | ||
| <Card> | ||
| <CardHeader title="Home" fullWidth /> | ||
| <CardContent> | ||
| <OrderableActivityTable | ||
| loading={courses.isLoading} | ||
| title="Courses" | ||
| emptyMessage={ | ||
| courses.error ? 'Could not load courses' : 'No courses found' | ||
| } | ||
| rows={courses.data ?? []} | ||
| columnNames={{ title: 'Title' }} | ||
| defaultOrderField="title" | ||
| renderItem={stats => ( | ||
| <RouterLink href={`/courses/${stats.id}`} asChild> | ||
| <Link>{stats.title}</Link> | ||
| </RouterLink> | ||
| )} | ||
| /> | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 102 additions & 0 deletions
102
lms/static/scripts/frontend_apps/components/dashboard/test/OrganizationActivity-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { | ||
| checkAccessibility, | ||
| mockImportedComponents, | ||
| } from '@hypothesis/frontend-testing'; | ||
| import { mount } from 'enzyme'; | ||
| import sinon from 'sinon'; | ||
|
|
||
| import { Config } from '../../../config'; | ||
| import OrganizationActivity, { $imports } from '../OrganizationActivity'; | ||
|
|
||
| describe('OrganizationActivity', () => { | ||
| const courses = [ | ||
| { | ||
| id: 1, | ||
| title: 'Course A', | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: 'Course B', | ||
| }, | ||
| ]; | ||
|
|
||
| let fakeUseAPIFetch; | ||
| let fakeConfig; | ||
|
|
||
| beforeEach(() => { | ||
| fakeUseAPIFetch = sinon.stub().resolves(courses); | ||
| fakeConfig = { | ||
| dashboard: { | ||
| routes: { | ||
| organization_courses: | ||
| '/api/dashboard/organizations/:organization_public_id', | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| $imports.$mock(mockImportedComponents()); | ||
| $imports.$mock({ | ||
| '../../utils/api': { | ||
| useAPIFetch: fakeUseAPIFetch, | ||
| }, | ||
| }); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| $imports.$restore(); | ||
| }); | ||
|
|
||
| function createComponent() { | ||
| return mount( | ||
| <Config.Provider value={fakeConfig}> | ||
| <OrganizationActivity organizationPublicId="abc" /> | ||
| </Config.Provider>, | ||
| ); | ||
| } | ||
|
|
||
| it('sets loading state in table while data is loading', () => { | ||
| fakeUseAPIFetch.returns({ isLoading: true }); | ||
|
|
||
| const wrapper = createComponent(); | ||
| const tableElement = wrapper.find('OrderableActivityTable'); | ||
|
|
||
| assert.isTrue(tableElement.prop('loading')); | ||
| }); | ||
|
|
||
| it('shows error if loading data fails', () => { | ||
| fakeUseAPIFetch.returns({ error: new Error('Something failed') }); | ||
|
|
||
| const wrapper = createComponent(); | ||
| const tableElement = wrapper.find('OrderableActivityTable'); | ||
|
|
||
| assert.equal(tableElement.prop('emptyMessage'), 'Could not load courses'); | ||
| }); | ||
|
|
||
| it('shows empty courses message', () => { | ||
| const wrapper = createComponent(); | ||
| const tableElement = wrapper.find('OrderableActivityTable'); | ||
|
|
||
| assert.equal(tableElement.prop('emptyMessage'), 'No courses found'); | ||
| }); | ||
|
|
||
| courses.forEach(course => { | ||
| it('renders course links', () => { | ||
| const wrapper = createComponent(); | ||
| const item = wrapper | ||
| .find('OrderableActivityTable') | ||
| .props() | ||
| .renderItem(course); | ||
| const itemWrapper = mount(item); | ||
|
|
||
| assert.equal(itemWrapper.text(), course.title); | ||
| assert.equal(itemWrapper.prop('href'), `/courses/${course.id}`); | ||
| }); | ||
| }); | ||
|
|
||
| it( | ||
| 'should pass a11y checks', | ||
| checkAccessibility({ | ||
| content: () => createComponent(), | ||
| }), | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters