-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: populates datatable with subsidies #343
Changes from 22 commits
e3e7cea
a8f145c
4666299
fa5ff42
6a94221
0ab500e
5f58c03
3e0f0b8
5eaebfb
e27f9c7
744ef78
5db02c0
bdb56fd
e5ed3da
862cd42
bf212f8
35e0136
e57189d
0eb755e
4e119bc
9d2973f
38b040b
db1fb40
4558167
8d81730
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -29,10 +29,10 @@ | |
"url": "https://github.com/openedx/frontend-app-support-tools/issues" | ||
}, | ||
"dependencies": { | ||
"@edx/brand": "npm:@edx/brand-edx.org@^1.4.2", | ||
"@edx/brand": "npm:@edx/brand-[email protected]", | ||
"@edx/frontend-enterprise-utils": "^3.0.0", | ||
"@edx/frontend-platform": "^4.2.0", | ||
"@edx/paragon": "^20.26.0", | ||
"@edx/paragon": "20.45.0", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
"@fortawesome/fontawesome-svg-core": "1.2.32", | ||
"@fortawesome/free-brands-svg-icons": "5.15.1", | ||
"@fortawesome/free-regular-svg-icons": "5.15.1", | ||
|
@@ -42,7 +42,6 @@ | |
"classnames": "2.2.6", | ||
"lodash.debounce": "4.0.8", | ||
"moment": "2.29.1", | ||
"newrelic": "5.13.1", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [inform] Context: Having ❯ npm i
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '>=6.0.0 <13.0.0', npm: '>=3.0.0' },
npm WARN EBADENGINE current: { node: 'v18.16.0', npm: '9.5.1' }
npm WARN EBADENGINE }
npm WARN deprecated [email protected]: This version of the New Relic Node Agent has reached the end of life. |
||
"prop-types": "15.7.2", | ||
"react": "16.14.0", | ||
"react-dom": "16.14.0", | ||
|
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,114 @@ | ||
import { | ||
brobro10000 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
DataTable, | ||
TextFilter, | ||
} from '@edx/paragon'; | ||
import React, { | ||
useCallback, useMemo, useState, | ||
} from 'react'; | ||
import { useContextSelector } from 'use-context-selector'; | ||
import debounce from 'lodash.debounce'; | ||
import { logError } from '@edx/frontend-platform/logging'; | ||
import { DashboardContext } from '../DashboardContext'; | ||
import { MAX_PAGE_SIZE } from '../data/constants'; | ||
import { useDashboardContext } from '../data/hooks'; | ||
import DashboardTableActions from './DashboardTableActions'; | ||
import DashboardTableBadges from './DashboardTableBadges'; | ||
import { filterDatatableData, sortDatatableData, transformDatatableDate } from '../data/utils'; | ||
|
||
const DashboardDatatable = () => { | ||
const { enterpriseSubsidies } = useContextSelector(DashboardContext, v => v[0]); | ||
const { hydrateEnterpriseSubsidies } = useDashboardContext(); | ||
const [isLoading, setIsLoading] = useState(true); | ||
|
||
// Implementation due to filterText value displaying accessor value customerName as opposed to Customer Name | ||
const filterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />; | ||
|
||
const fetchData = useCallback(async (datatableProps) => { | ||
setIsLoading(true); | ||
try { | ||
await hydrateEnterpriseSubsidies({ | ||
pageIndex: datatableProps.pageIndex + 1, | ||
sortBy: sortDatatableData(datatableProps), | ||
filterBy: filterDatatableData(datatableProps), | ||
}); | ||
} catch (e) { | ||
logError(e); | ||
} finally { | ||
setIsLoading(false); | ||
} | ||
}, [hydrateEnterpriseSubsidies]); | ||
|
||
const debouncedFetchData = useMemo(() => debounce( | ||
fetchData, | ||
300, | ||
{ | ||
leading: false, | ||
}, | ||
), [fetchData]); | ||
|
||
return ( | ||
<section className="mt-5"> | ||
<DataTable | ||
isLoading={isLoading} | ||
isPaginated | ||
manualPagination | ||
isSortable | ||
manualSortBy | ||
isFilterable | ||
manualFilters | ||
defaultColumnValues={{ Filter: TextFilter }} | ||
pageCount={enterpriseSubsidies.pageCount || 0} | ||
initialState={{ | ||
pageSize: MAX_PAGE_SIZE, | ||
pageIndex: 0, | ||
}} | ||
itemCount={enterpriseSubsidies?.count || 0} | ||
data={enterpriseSubsidies.results} | ||
fetchData={debouncedFetchData} | ||
FilterStatusComponent={filterStatus} | ||
columns={[ | ||
{ | ||
Header: 'Plan ID', | ||
accessor: 'uuid', | ||
}, | ||
{ | ||
Header: 'Plan name', | ||
accessor: 'title', | ||
}, | ||
{ | ||
Header: 'Plan Status', | ||
accessor: 'isActive', | ||
disableFilters: true, | ||
Cell: DashboardTableBadges, | ||
}, | ||
{ | ||
Header: 'Customer name', | ||
accessor: 'enterpriseCustomerName', | ||
disableSortBy: true, | ||
}, | ||
{ | ||
Header: 'Start date', | ||
accessor: 'activeDatetime', | ||
disableFilters: true, | ||
Cell: ({ row }) => transformDatatableDate(row.values.activeDatetime), | ||
}, | ||
{ | ||
Header: 'End date', | ||
accessor: 'expirationDatetime', | ||
disableFilters: true, | ||
Cell: ({ row }) => transformDatatableDate(row.values.expirationDatetime), | ||
}, | ||
{ | ||
Header: '', | ||
accessor: 'actions', | ||
disableFilters: true, | ||
disableSortBy: true, | ||
Cell: DashboardTableActions, | ||
}, | ||
]} | ||
/> | ||
</section> | ||
); | ||
}; | ||
|
||
export default DashboardDatatable; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import { | ||
IconButton, | ||
Icon, | ||
Hyperlink, | ||
} from '@edx/paragon'; | ||
import { getConfig } from '@edx/frontend-platform'; | ||
import { useHistory } from 'react-router'; | ||
import { | ||
EditOutline, | ||
DjangoShort, | ||
} from '@edx/paragon/icons'; | ||
import PropTypes from 'prop-types'; | ||
import ROUTES from '../../../data/constants/routes'; | ||
|
||
const DashboardTableActions = ({ row }) => { | ||
const rowUuid = row.values.uuid; | ||
const { DJANGO_ADMIN_SUBSIDY_BASE_URL } = getConfig(); | ||
const history = useHistory(); | ||
const { HOME } = ROUTES.CONFIGURATION.SUB_DIRECTORY.PROVISIONING; | ||
return [ | ||
getConfig().FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION && ( | ||
brobro10000 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<IconButton | ||
key="edit-icon" | ||
size="sm" | ||
src={EditOutline} | ||
iconAs={Icon} | ||
onClick={() => history.push(`${HOME}/${rowUuid}/edit`)} | ||
alt="Edit Subsidy Icon Button" | ||
data-testid={`Edit-${rowUuid}`} | ||
/> | ||
), | ||
<Hyperlink | ||
key="django-icon" | ||
destination={`${DJANGO_ADMIN_SUBSIDY_BASE_URL}/admin/subsidy/subsidy/?uuid=${rowUuid}`} | ||
target="_blank" | ||
showLaunchIcon={false} | ||
data-testid="django-admin-link" | ||
> | ||
<IconButton | ||
size="sm" | ||
src={DjangoShort} | ||
iconAs={Icon} | ||
alt="Django Admin Icon Button" | ||
data-testid={`Django-Admin-Page-${rowUuid}`} | ||
/> | ||
</Hyperlink>, | ||
]; | ||
}; | ||
|
||
DashboardTableActions.propTypes = { | ||
row: PropTypes.shape({ | ||
values: PropTypes.shape({ | ||
uuid: PropTypes.string, | ||
}), | ||
}).isRequired, | ||
}; | ||
|
||
export default DashboardTableActions; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { | ||
Badge, | ||
} from '@edx/paragon'; | ||
import PropTypes from 'prop-types'; | ||
|
||
const DashboardTableBadges = ({ row }) => { | ||
const { isActive } = row.values; | ||
return ( | ||
<Badge | ||
variant={isActive ? 'success' : 'danger'} | ||
> | ||
{isActive ? 'Active' : 'Inactive'} | ||
</Badge> | ||
); | ||
}; | ||
|
||
DashboardTableBadges.propTypes = { | ||
row: PropTypes.shape({ | ||
values: PropTypes.shape({ | ||
isActive: PropTypes.bool, | ||
}), | ||
}).isRequired, | ||
}; | ||
|
||
export default DashboardTableBadges; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import DashboardDatatable from './DashboardDatatable'; | ||
|
||
export default DashboardDatatable; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated to handle
"~@edx/brand/paragon/overrides"
import for datatable stylesThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[inform] Additional context: because this is an open-source repo in the
openedx
Github organization, thebrand-openedx
theme should be the default theme installed. Should a consumer want to use thebrand-edx.org
theme for an MFE, that should be configured outside of committed code. For 2U/edX, the@edx/brand
package may be overridden at build+deploy time via configuration (example).