-
Notifications
You must be signed in to change notification settings - Fork 55
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(TDOPS-4789/facetedSearch): callback support for BadgeMenu #5022
Changes from 3 commits
6e9ff1d
034e6c6
86de403
ab217a4
5fe4f63
2519ec7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@talend/react-faceted-search': minor | ||
--- | ||
|
||
feat(TDOPS-4789/facetedSearch): callback support for BadgeMenu |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,9 @@ | ||
import { render } from '@testing-library/react'; | ||
import { BadgeFacetedProvider } from '../../context/badgeFaceted.context'; | ||
import { render, screen, waitFor } from '@testing-library/react'; | ||
import userEvent from '@testing-library/user-event'; | ||
|
||
import { BadgeMenu } from './BadgeMenu.component'; | ||
import getDefaultT from '../../../translate'; | ||
import { BadgeFacetedProvider } from '../../context/badgeFaceted.context'; | ||
import { BadgeMenu } from './BadgeMenu.component'; | ||
|
||
const t = getDefaultT(); | ||
|
||
|
@@ -15,6 +16,7 @@ const badgeFacetedContextValue = { | |
onDeleteBadge: jest.fn(), | ||
onHideOperator: jest.fn(), | ||
onSubmitBadge: jest.fn(), | ||
dispatch: jest.fn(), | ||
}; | ||
|
||
const BadgeWithContext = props => ( | ||
|
@@ -53,4 +55,57 @@ describe('BadgeMenu', () => { | |
// Then | ||
expect(document.querySelectorAll('span')[2]).toHaveTextContent('All'); | ||
}); | ||
it('should mount a badge with object data from callback', async () => { | ||
// Given | ||
const callbacks = { | ||
id: { | ||
getOptions: () => new Promise(resolve => resolve([{ id: '1234', label: 'production' }])), | ||
}, | ||
}; | ||
|
||
const props = { | ||
id: 'myId', | ||
label: 'myLabel', | ||
initialOperatorOpened: false, | ||
initialValueOpened: true, | ||
operators: ['in'], | ||
callbacks, | ||
values: [], | ||
t: getDefaultT(), | ||
attribute: 'id', | ||
}; | ||
|
||
// When | ||
render( | ||
<BadgeFacetedProvider value={badgeFacetedContextValue}> | ||
<BadgeMenu {...props} /> | ||
</BadgeFacetedProvider>, | ||
); | ||
|
||
// Then there is a checkbox with data taken from callback | ||
await waitFor(() => { | ||
expect(screen.getByRole('menuitem')).toBeVisible(); | ||
}); | ||
screen.logTestingPlaygroundURL(); | ||
// Then selecting an item should dispatch proper payload | ||
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. debugging line can be removed 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. removed |
||
await userEvent.click(screen.getByRole('menuitem', { name: 'production' })); | ||
await userEvent.click( | ||
screen.getByRole('button', { | ||
name: /apply/i, | ||
}), | ||
); | ||
expect(badgeFacetedContextValue.dispatch).toHaveBeenCalledWith({ | ||
payload: { | ||
badgeId: 'myId', | ||
metadata: { isInCreation: false }, | ||
properties: { | ||
initialOperatorOpened: false, | ||
initialValueOpened: false, | ||
operator: 'in', | ||
value: { checked: false, id: '1234', label: 'production' }, | ||
}, | ||
}, | ||
type: 'UPDATE_BADGE', | ||
}); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,21 @@ | ||
/* eslint-disable jsx-a11y/no-autofocus */ | ||
import { useMemo, useState } from 'react'; | ||
|
||
import get from 'lodash/get'; | ||
import isEmpty from 'lodash/isEmpty'; | ||
import PropTypes from 'prop-types'; | ||
|
||
import { DropdownButton } from '@talend/design-system'; | ||
import { Action } from '@talend/react-components/lib/Actions'; | ||
import FilterBar from '@talend/react-components/lib/FilterBar'; | ||
import Rich from '@talend/react-components/lib/Rich'; | ||
import { getTheme } from '@talend/react-components/lib/theme'; | ||
import CircularProgress from '@talend/react-components/src/CircularProgress'; | ||
|
||
import cssModule from './BadgeMenu.module.scss'; | ||
import { getDataAttributesFrom } from '../../../helpers/usage.helpers'; | ||
|
||
import cssModule from './BadgeMenu.module.scss'; | ||
|
||
const theme = getTheme(cssModule); | ||
|
||
const createRowItemEntity = value => option => { | ||
|
@@ -84,21 +88,25 @@ const BadgeMenuForm = ({ | |
onSubmit={onSubmit} | ||
> | ||
<Rich.Layout.Body id={badgeMenuFormId} className={theme('fs-badge-menu-form-body')}> | ||
{visibleItems.map(rowItem => { | ||
return ( | ||
<DropdownButton | ||
key={rowItem.id} | ||
onClick={event => { | ||
onChange(event, rowItem); | ||
}} | ||
checked={rowItem.checked} | ||
data-testid={`badge-menu-form-item-${rowItem.id}`} | ||
data-test={`badge-menu-form-item-${rowItem.id}`} | ||
> | ||
<span>{rowItem.label}</span> | ||
</DropdownButton> | ||
); | ||
})} | ||
{!rest.isLoading ? ( | ||
visibleItems.map(rowItem => { | ||
return ( | ||
<DropdownButton | ||
key={rowItem.id} | ||
onClick={event => { | ||
onChange(event, rowItem); | ||
}} | ||
checked={rowItem.checked} | ||
data-testid={`badge-menu-form-item-${rowItem.id}`} | ||
data-test={`badge-menu-form-item-${rowItem.id}`} | ||
> | ||
<span>{rowItem.label}</span> | ||
</DropdownButton> | ||
); | ||
}) | ||
) : ( | ||
<CircularProgress /> | ||
)} | ||
</Rich.Layout.Body> | ||
<Rich.Layout.Footer id={id} className={theme('fs-badge-menu-form-footer')}> | ||
<div> | ||
|
@@ -119,6 +127,8 @@ const BadgeMenuForm = ({ | |
type="submit" | ||
label={t('APPLY', { defaultValue: 'Apply' })} | ||
bsStyle="info" | ||
disabled={rest.isLoading} | ||
inProgress={rest.isLoading} | ||
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. IMO no need set 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. removed |
||
{...getDataAttributesFrom(rest)} | ||
/> | ||
</Rich.Layout.Footer> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -39,6 +39,7 @@ const badgeFacetedPropTypes = PropTypes.shape({ | |
isInCreation: PropTypes.bool, | ||
entitiesPerBadge: PropTypes.string, | ||
operators: PropTypes.arrayOf(PropTypes.string), | ||
isLoading: PropTypes.bool, | ||
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. Do we need to add isLoading to metadata? 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. removed |
||
}), | ||
}); | ||
|
||
|
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.
maybe better to set isLoading false by default? then no need for this line: https://github.com/Talend/ui/pull/5022/files#diff-9cd7307a01bfb12fcee969fa3d4f76874a44bf7dc27b1c37d95e3157942ee263R51
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.
fixed