Skip to content

Commit 4f7d3ae

Browse files
leangseu-edxleangseu-edx
authored
leangseu edx/header footer dependency (openedx#127)
* chore: update dependency * fix: update dependency to match deploy package for header and footer * chore: update linting * chore: update datatable filter for paragon upgrade
1 parent d4f1383 commit 4f7d3ae

23 files changed

+7085
-7167
lines changed

‎.eslintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const config = createConfig('eslint', {
66
'import/no-named-as-default-member': 'off',
77
'import/no-self-import': 'off',
88
'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
9+
'react-hooks/rules-of-hooks': 'off',
910
},
1011
});
1112

‎package-lock.json

+6,639-6,829
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@
2727
},
2828
"dependencies": {
2929
"@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
30-
"@edx/frontend-component-footer": "10.1.6",
31-
"@edx/frontend-component-header": "^2.4.6",
32-
"@edx/frontend-platform": "^1.15.6",
33-
"@edx/paragon": "16.14.4",
30+
"@edx/frontend-component-footer": "^11.1.1",
31+
"@edx/frontend-component-header": "^3.1.1",
32+
"@edx/frontend-platform": "^2.4.0",
33+
"@edx/paragon": "^19.9.0",
3434
"@fortawesome/fontawesome-svg-core": "^1.2.36",
3535
"@fortawesome/free-brands-svg-icons": "^5.15.4",
3636
"@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -74,7 +74,7 @@
7474
"whatwg-fetch": "^3.6.2"
7575
},
7676
"devDependencies": {
77-
"@edx/frontend-build": "^9.1.4",
77+
"@edx/frontend-build": "^11.0.2",
7878
"@testing-library/jest-dom": "^5.14.1",
7979
"@testing-library/react": "^12.1.0",
8080
"axios-mock-adapter": "^1.20.0",
@@ -86,10 +86,10 @@
8686
"identity-obj-proxy": "^3.0.0",
8787
"jest": "27.0.6",
8888
"jest-expect-message": "^1.0.2",
89-
"react-dev-utils": "^11.0.4",
89+
"react-dev-utils": "^12.0.1",
9090
"react-test-renderer": "^16.14.0",
9191
"reactifex": "1.1.1",
9292
"redux-mock-store": "^1.5.4",
93-
"semantic-release": "^17.4.5"
93+
"semantic-release": "^19.0.3"
9494
}
9595
}

‎src/__snapshots__/index.test.jsx.snap

+8
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,15 @@ exports[`app registry subscribe: APP_INIT_ERROR. snapshot: displays an ErrorPag
88

99
exports[`app registry subscribe: APP_READY. links App to root element 1`] = `
1010
<IntlProvider
11+
defaultFormats={Object {}}
12+
defaultLocale="en"
13+
fallbackOnEmptyString={true}
14+
formats={Object {}}
1115
locale="en"
16+
messages={Object {}}
17+
onError={[Function]}
18+
onWarn={[Function]}
19+
textComponent={Symbol(react.fragment)}
1220
>
1321
<AppProvider
1422
store={

‎src/components/FilePreview/BaseRenderers/textHooks.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@ export const rendererHooks = ({ url, onError, onSuccess }) => {
2727
url,
2828
onError,
2929
onSuccess,
30-
}), [url]);
30+
}), [onError, onSuccess, setContent, url]);
3131
return { content };
3232
};

‎src/components/FilePreview/BaseRenderers/textHooks.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ describe('Text file preview hooks', () => {
4949
test('useEffect, predicated on url changes', () => {
5050
loadHook();
5151
expect(useEffect).toHaveBeenCalled();
52-
expect(prereqs).toEqual([props.url]);
52+
expect(prereqs[3]).toEqual(props.url);
5353
});
5454
describe('onSuccess', () => {
5555
it('calls get', async () => {

‎src/components/FilePreview/FileInfo.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const FileInfo = ({ onClick, children }) => (
2020
placement="right-end"
2121
flip
2222
overlay={(
23-
<Popover className="overlay-help-popover">
23+
<Popover id="file-popover" className="overlay-help-popover">
2424
<Popover.Content>{children}</Popover.Content>
2525
</Popover>
2626
)}

‎src/components/FilePreview/__snapshots__/FileInfo.test.jsx.snap

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ exports[`File Preview Card component snapshot 1`] = `
66
overlay={
77
<Popover
88
className="overlay-help-popover"
9+
id="file-popover"
910
>
1011
<Popover.Content>
1112
<h1>

‎src/components/InfoPopover/__snapshots__/index.test.jsx.snap

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ exports[`Info Popover Component snapshot 1`] = `
66
overlay={
77
<Popover
88
className="overlay-help-popover"
9+
id="popover"
910
>
1011
<Popover.Content>
1112
<div>

‎src/components/InfoPopover/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const InfoPopover = ({ onClick, children, intl }) => (
2323
placement="right-end"
2424
flip
2525
overlay={(
26-
<Popover className="overlay-help-popover">
26+
<Popover id="popover" className="overlay-help-popover">
2727
<Popover.Content>{children}</Popover.Content>
2828
</Popover>
2929
)}

‎src/containers/ListView/FilterStatusComponent.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const filterHooks = () => {
99
if (!setAllFilters || !state.filters) {
1010
return {};
1111
}
12-
const clearFilters = React.useCallback(() => setAllFilters([]), []);
12+
const clearFilters = React.useCallback(() => setAllFilters([]), [setAllFilters]);
1313
const headerMap = headers.reduce(
1414
(obj, cur) => ({ ...obj, [cur.id]: cur.Header }),
1515
{},

‎src/containers/ListView/FilterStatusComponent.test.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ describe('FilterStatusComponent hooks', () => {
3434
it('uses React.useCallback to clear filters, only once', () => {
3535
mockTableContext(context);
3636
const { cb, prereqs } = module.filterHooks().clearFilters.useCallback;
37-
expect(prereqs).toEqual([]);
37+
expect(prereqs).toEqual([context.setAllFilters]);
3838
expect(context.setAllFilters).not.toHaveBeenCalled();
3939
cb();
4040
expect(context.setAllFilters).toHaveBeenCalledWith([]);

‎src/containers/ListView/ListView.scss

+7
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,10 @@ span.pgn__icon.breadcrumb-arrow {
1919
}
2020
}
2121

22+
.submissions-table {
23+
.pgn__data-table-filters-breakout-filter {
24+
.pgn__form-group {
25+
margin-bottom: 0;
26+
}
27+
}
28+
}

‎src/containers/ListView/SelectedBulkAction.jsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Button } from '@edx/paragon';
4+
5+
import { FormattedMessage } from '@edx/frontend-platform/i18n';
6+
7+
import messages from './messages';
8+
9+
export const SelectedBulkAction = ({ selectedFlatRows, handleClick }) => (
10+
<Button
11+
onClick={handleClick(selectedFlatRows)}
12+
variant="primary"
13+
className="view-selected-responses-btn"
14+
>
15+
<FormattedMessage {...messages.viewSelectedResponses} values={{ value: selectedFlatRows.length }} />
16+
</Button>
17+
);
18+
19+
SelectedBulkAction.defaultProps = {
20+
selectedFlatRows: [],
21+
};
22+
SelectedBulkAction.propTypes = {
23+
selectedFlatRows: PropTypes.arrayOf(PropTypes.object),
24+
25+
handleClick: PropTypes.func.isRequired,
26+
};
27+
export default SelectedBulkAction;

‎src/containers/ListView/SelectedBulkAction.test.jsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
4+
import { SelectedBulkAction } from './SelectedBulkAction';
5+
6+
describe('SelectedBulkAction component', () => {
7+
const props = {
8+
selectedFlatRows: [{ id: 1 }, { id: 2 }],
9+
handleClick: jest.fn(),
10+
};
11+
test('snapshots', () => {
12+
const el = shallow(<SelectedBulkAction {...props} handleClick={() => jest.fn()} />);
13+
expect(el).toMatchSnapshot();
14+
});
15+
16+
test('handleClick', () => {
17+
shallow(<SelectedBulkAction {...props} />);
18+
expect(props.handleClick).toHaveBeenCalledWith(props.selectedFlatRows);
19+
});
20+
});

‎src/containers/ListView/SubmissionsTable.jsx

+54-74
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,15 @@ import { selectors, thunkActions } from 'data/redux';
1717

1818
import StatusBadge from 'components/StatusBadge';
1919
import FilterStatusComponent from './FilterStatusComponent';
20+
import TableAction from './TableAction';
21+
import SelectedBulkAction from './SelectedBulkAction';
2022

2123
import messages from './messages';
2224

2325
/**
2426
* <SubmissionsTable />
2527
*/
2628
export class SubmissionsTable extends React.Component {
27-
constructor(props) {
28-
super(props);
29-
this.handleViewAllResponsesClick = this.handleViewAllResponsesClick.bind(this);
30-
this.selectedBulkAction = this.selectedBulkAction.bind(this);
31-
}
32-
3329
get gradeStatusOptions() {
3430
return Object.keys(gradingStatuses).map(statusKey => ({
3531
name: this.translate(lmsMessages[gradingStatuses[statusKey]]),
@@ -66,82 +62,66 @@ export class SubmissionsTable extends React.Component {
6662

6763
translate = (...args) => this.props.intl.formatMessage(...args);
6864

69-
handleViewAllResponsesClick(data) {
65+
handleViewAllResponsesClick = (data) => () => {
7066
const getsubmissionUUID = (row) => row.original.submissionUUID;
71-
const rows = data.selectedRows.length ? data.selectedRows : data.tableInstance.rows;
72-
this.props.loadSelectionForReview(rows.map(getsubmissionUUID));
73-
}
74-
75-
selectedBulkAction(selectedFlatRows) {
76-
return {
77-
buttonText: this.translate(
78-
messages.viewSelectedResponses,
79-
{ value: selectedFlatRows.length },
80-
),
81-
className: 'view-selected-responses-btn',
82-
handleClick: this.handleViewAllResponsesClick,
83-
variant: 'primary',
84-
};
67+
this.props.loadSelectionForReview(data.map(getsubmissionUUID));
8568
}
8669

8770
render() {
8871
if (!this.props.listData.length) {
8972
return null;
9073
}
9174
return (
92-
<DataTable
93-
isFilterable
94-
FilterStatusComponent={FilterStatusComponent}
95-
numBreakoutFilters={2}
96-
defaultColumnValues={{ Filter: TextFilter }}
97-
isSelectable
98-
isSortable
99-
isPaginated
100-
itemCount={this.props.listData.length}
101-
initialState={{ pageSize: 10, pageIndex: 0 }}
102-
data={this.props.listData}
103-
tableActions={[
104-
{
105-
buttonText: this.translate(messages.viewAllResponses),
106-
handleClick: this.handleViewAllResponsesClick,
107-
className: 'view-all-responses-btn',
108-
variant: 'primary',
109-
},
110-
]}
111-
bulkActions={[
112-
this.selectedBulkAction,
113-
]}
114-
columns={[
115-
{
116-
Header: this.userLabel,
117-
accessor: this.userAccessor,
118-
},
119-
{
120-
Header: this.dateSubmittedLabel,
121-
accessor: submissionFields.dateSubmitted,
122-
Cell: this.formatDate,
123-
disableFilters: true,
124-
},
125-
{
126-
Header: this.translate(messages.grade),
127-
accessor: submissionFields.score,
128-
Cell: this.formatGrade,
129-
disableFilters: true,
130-
},
131-
{
132-
Header: this.translate(messages.gradingStatus),
133-
accessor: submissionFields.gradingStatus,
134-
Cell: this.formatStatus,
135-
Filter: MultiSelectDropdownFilter,
136-
filter: 'includesValue',
137-
filterChoices: this.gradeStatusOptions,
138-
},
139-
]}
140-
>
141-
<DataTable.TableControlBar />
142-
<DataTable.Table />
143-
<DataTable.TableFooter />
144-
</DataTable>
75+
<div className="submissions-table">
76+
<DataTable
77+
isFilterable
78+
FilterStatusComponent={FilterStatusComponent}
79+
numBreakoutFilters={2}
80+
defaultColumnValues={{ Filter: TextFilter }}
81+
isSelectable
82+
isSortable
83+
isPaginated
84+
itemCount={this.props.listData.length}
85+
initialState={{ pageSize: 10, pageIndex: 0 }}
86+
data={this.props.listData}
87+
tableActions={[
88+
<TableAction handleClick={this.handleViewAllResponsesClick} />,
89+
]}
90+
bulkActions={[
91+
<SelectedBulkAction handleClick={this.handleViewAllResponsesClick} />,
92+
]}
93+
columns={[
94+
{
95+
Header: this.userLabel,
96+
accessor: this.userAccessor,
97+
},
98+
{
99+
Header: this.dateSubmittedLabel,
100+
accessor: submissionFields.dateSubmitted,
101+
Cell: this.formatDate,
102+
disableFilters: true,
103+
},
104+
{
105+
Header: this.translate(messages.grade),
106+
accessor: submissionFields.score,
107+
Cell: this.formatGrade,
108+
disableFilters: true,
109+
},
110+
{
111+
Header: this.translate(messages.gradingStatus),
112+
accessor: submissionFields.gradingStatus,
113+
Cell: this.formatStatus,
114+
Filter: MultiSelectDropdownFilter,
115+
filter: 'includesValue',
116+
filterChoices: this.gradeStatusOptions,
117+
},
118+
]}
119+
>
120+
<DataTable.TableControlBar />
121+
<DataTable.Table />
122+
<DataTable.TableFooter />
123+
</DataTable>
124+
</div>
145125
);
146126
}
147127
}

0 commit comments

Comments
 (0)